第02部分-XHTML设计基础.ppt

1、,第2部分XHTML基础,主体纲要,一、XHTML设计要求二、XHTML常用标签,一、XHTML设计要求,XHTML是基于HTML的，它是更严密、代码更整洁的HTML版本，注意以下区别，就很容易向XHTML迈进：（一）选择正确的DTD（DocumentTypeDefinition）DOCTYPE是documenttype（文档类型）的简写，用来说明文件用的XHTML或HTML版本。在XHTML中必须声明文档类型，以便于浏览器知道正浏览的文件类型并检查文档，声明必须放在文档的html标签前XHTML1.0提供了三种DTD声明可供选择：过渡的(Transitional):要求非常宽松的DTD，它允

2、许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下：,严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如。完整代码如下：框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下：,注：理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML1.0Transitional)是目前理想选择。DocType声明不是XHMTL文档的一部分，也不是文档的一个元素，没必要加上结束标签！（二）设定一个名字空间（NameSpace）允许通过一个在线

3、地址指向来识别名字空间，名字空间就是给文档做一个标记，告诉别人，这个文档是属于谁的。只不过这个谁用了一个网址来代替。,的校验器不会由于这个属性没有出现而报告错误，这是一个固定的值，即使文档里没有包含，它也会自动加上。（三）定义语言编码为了被浏览器正确解释和通过标识校验，所有的XHTML文档都必须声明它使用的编码语言。（四）标签被正确嵌套（五）所有标签一定要小写,（六）所有标签一定要关闭（七）标签的属性一定要小写，值必须加双引号（八）img标签必须加上alt属性,二、XHMTL常用的标签,（一）层标签div标签，称为定义标记，它不具有实际的意义，其作用就是设定内容的摆放位置，实际就是

4、一个“容器”，用来放置其他元素。（二）图片标签src属性是图像的URL，alt属性是鼠标指示图片时显示的方案或当用户看不到图片时显示的文字时，显示的文本,（三）链接标签1.链接到其他网站的网页请点击注：这里的http不能省略href属性代表链接URL，和标签中的内容表示链接的文字2.链接到自己网站的网页请点击链接到当前目录下的2.htm文件3.链接目录的问题（相对路径）请点击test文件夹下的2.htm请点击父目录下的2.htm,4.在新窗口中打开链接请点击注：XHTML1.1不再支持target=“_blank”5.链接Email地址a6.网页内部链接内部建立一个空链接，仅有id属性，无hr

5、ef属性例如有个位置索引要链接到这个位置返回索引,7.图片链接标签和标签的结合使用,（四）列表标签1.无序列表HTML代码：效果,2.有序列表,3.释义列表,（五）段落标签（六）范围标签应用在行内，用以定义一小块需要特别标示的内容，它只能通过设置CSS样式才能发挥作用。,（七）表单标签表单标签（）是XHTML的重要组成部分，主要用于采集和提交用户输入的信息。表单本身是没有什么用的。这需要编一个程序来处理表单中的数据。标签主要有三个重要的属性1.action属性：用户填入表单的信息总是需要程序来进行处理，这个属性指明表单数据要发送到的页面或程序，如果这个属性是空的或未写，那么当前的文档URL将被

6、使用。2.method属性：有两个值:,get:它是默认值，使用这种方法表单中提交的数据将会附加在url之后，以?分开与url分开。字母数字字符原样发送,空格转换为”+”，其它符号转换为%XX,其中XX为该符号以16进制表示的ASCII（或ISOLatin-1）值。例如：,3.enctype属性有两个值：application/x-www-form-urlencoded窗体数据被编码为名称/值对。这是标准的编码格式，缺省值；multipart/form-dataform表单中需要上传文件时需修改成这个值,（八）表单中input标签类它们都是自关闭标签，若该标签需要提交数据，为了能正确区别各自提

7、交的数据，请使用name属性文本框其中type属性为text，提定其为标准文本框，value属性用来指定文本框里的默认文本。密码输入框和文本框基本类似，只是会以星号代替用户输入；,3.点击后提交表单数据的按钮单独使用没有任何意义，必须和标签结合使用4.重置按钮5.普通按钮6.图片按钮注：它也可以用来提交表单数据,7.复选框刘成李阳复选框后面的文字选项采用直接输入，不需要属性而每个选项所代表的值用value属性控制另外它还可以有个checked属性，可以控制复选框是否被选中刘成,8.单选框刘成李阳与复选框使用类似，但这里要注意的一个问题是如果有多个单选框，但如果只能选中其中一个，则这几个单选框的

8、name属性值必须完全相同，否则,9.选择文件框10.隐藏域虽然元素不会显示在文档里，所以用户也无法操作该元素。该元素通常用来传输一些客户端到服务器的状态信息。虽然此元素不会显示出来，但是用户可以通过查看HTML的源代码看到该元素属性的值，所以请注意，不要用该元素传递敏感信息，比如密码。,（九）下拉框标签标签，它的每个选项使用标签进行嵌套，显示的文字在和之间，每个选项对应的值在的value属性中设定，若想其中某个选项被选中，请设定该项的selected属性为”selected”,搜索宝贝搜索店铺搜索掌柜搜索资讯搜索网页,（十）meta标签它是一个常用的标签，放在标签中，主要用法如下：1.指明语

9、言编码形式：2.网站描述3.为搜索引擎提供的关键字列表,4.告诉搜索引擎机器人（Robot）哪些页面需要索引，哪些页面不需要索引all：文件将被检索，且页面上的链接可以被查询；none：文件将不被检索，且页面上的链接不可以被查询，它和noindex,nofollow起相同作用index：文件将被检索；（让robot/spider登录）follow：页面上的链接可以被查询；noindex：文件将不被检索，但页面上的链接可以被查询；(不让robot/spider登录)nofollow：文件将不被检索，页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找),搜索引擎蜘蛛及Ro

10、bot资料：,（十一）label标签对form表单中的文本给定一个label标签，并使用for属性使其与表单组件关联起来，效果为单击文本标签，光标显示在相对应的表单组件内了。例如：点击下Firstname会自动进入第一个输入框,Firstname:Password:,（十二）fieldset标签,显示一个和Windows中常用的GroupBox类似的界面，可以对一些信息进行分组显示，例如注册中的必填信息和选填信息。,justatest,（十三）textarea标签,它有几个重要的属性：rows:显示的行数，超过则使用滚动条；cols:显示的列宽readonly:内容只读的disable:无法获

11、得焦点,文字以灰色显示,textarea有几个重要的属性,（十四）表格(table）标签（HTML中非常重要的标签)1.简单的表格形式,tr：表格的数据行；td：表格的数据列；,2.为表格设计样式：,tableborder-collapse:collapse;tabletd,tablethborder:solid1pxblack;,tableborder-collapse:separate;tabletd,tablethborder:solid1pxblack;,3.table标签中的标签如果按1中的设计，使用屏幕阅读器的人可以听到如下顺序的词：公司，雇员，成立于，ACMEInc，1000，1

12、947，XYZCorp，2000，1973如果更改设计,一个屏幕阅读器一般会这么读：公司:ACMEInc，雇员:1000，成立于:1947,以此类推比之前好多了。,4.table标签中的标签和标签summary标签主要是用来对表格进行描述，使得那些用“听”的浏览者了解表格的内容。caption标签为标签加个表格标题,5.表格中的跨行与跨列,使用colspan属性和rowspan属性，如左图“公司”这个标题跨了两行(rowspan=“2”），“雇员”这个标题跨了两列，“成立于”这个标题跨了两行,6.table标签中的thead、tbody、tfootthead、tbody和tfoot使开发人员能

13、够按逻辑将一个表格进行划分,使用thead、tbody、tfoot的优势样式化表头、表尾和表身比较方便，而且独立，不必要给每个标签加样式或class。当打印比较长的表格的时候，一些浏览器（比如基于Mozilla的）会在每一页的开头重复表头和表尾的内容，这样阅读打印版本的表格就比较方便。区分开表头和表尾也可以使一些浏览器浏览表格的时候，只滚动表身。,7.表格布局的应用（1）表格宽度，使用CSS属性：width：值控制，例如width:400px;或width:40%宽度为容器总宽度的40%（2）表格内部元素对齐vertical-align属性控制内容垂直方向对齐方式；text-align属性控制内容水平方向对齐方式；（3）传统的table布局用table来做页面，就好像在excel里面填数据，是结构