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

主体纲要 第一部分 XHTML设计要求 第二部分 XHTML常用标签 第三部分 使用CSS 第四部分 分析页面布局和CSS的利器 第一部分 XHTML设计要求 XHTML是基于HTML的，它是更严密、代码更整洁的 HTML版本，注意以下区别，就很容易向XHTML迈进： 一、选择正确的DTD（Document Type Definition） DOCTYPE是document type（文档类型）的简写，用来 说明文件用的XHTML或HTML版本。在XHTML中必须声 明文档类型，以便于浏览器知道正浏览的文件类型并检查 文档，声明必须放在文档的html标签前 XHTML 1.0 提供了三种DTD声明可供选择： 过渡的(Transitional):要求非常宽松的DTD，它允许你继 续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代 码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd 严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如br。完整代码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN /TR/xhtml1/DTD/xhtml1- strict.dtd 框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Frameset//EN /TR/xhtml1/DTD/xhtml1-frameset.dtd 注：理想情况当然是严格的DTD，但对于我们大多数刚 接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择。 DocType声明不是XHMTL文档的一部分，也不是文档 的一个元素，没必要加上结束标签！ 二、设定一个名字空间（NameSpace） 允许通过一个在线地址指向来识别名字空间，名字空间 就是给文档做一个标记，告诉别人，这个文档是属于谁的。 只不过这个谁用了一个网址来代替。 html xmlns=/1999/xhtml 的校验器不会由于这个属性没有出现而报告错误， 这是一个固定的值，即使文档里没有包含，它也会自动加 上。 三、定义语言编码 为了被浏览器正确解释和通过标识校验，所有的XHTML 文档都必须声明它使用的编码语言。 meta http-equiv=Content-Type content=text/html; charset=gb2312 / 四、标签被正确嵌套 五、所有标签一定要小写 六、所有标签一定要关闭 七、标签的属性一定要小写，值必须加双引号 八、img标签必须加上alt属性 第二部分 XHMTL常用的标签 一、层标签 div标签，称为定义标记，它不具有实际的意义， 其作用就是设定内容的摆放位置，实际就是一个“容器”， 用来放置其他元素。 二、图片标签 img src=image/logo.gif alt=请上淘宝网/ src属性是图像的URL，alt属性是鼠标指示图片时显示的 方案或当用户看不到图片时显示的文字时，显示的文本 三、链接标签 1. 链接到其他网站的网页 a href = “ “ 请点击/a 注：这里的http不能省略 href属性代表链接URL，a和/a标签中的内容表示 链接的文字 2. 链接到自己网站的网页 a href=“2.htm”请点击/a 链接到当前目录下的2.htm文件 3. 链接目录的问题（相对路径） a href=“test/2.htm”请点击/a test文件夹下的2.htm a href=“../2.htm”请点击/a 父目录下的2.htm 4. 在新窗口中打开链接 a href=“../2.htm” target=“_blank”请点击/a 注：XHTML 1.1不再支持target=“_blank” 5. 链接Email地址 a href=“mailto:a@163.com”a@163.com/a 6. 网页内部链接 内部建立一个