WEB前端技术第3讲 DOCTYPE、头部及主体标记.pptVIP

第3讲 !DOCTYPE、头部及主体标记 3.1 !DOCTYPE… 标记 3.2 XHTML DOCTYPE类型简介 3.3 头部标记概述 3.4 标题标记title 3.5 元信息标记meta 3.6 主体标记body 3.1 !DOCTYPE… 标记 作用：DOCTYPE是document type的简写。主要用来说明你用的XHTML或者HTML是什么版本以及声明用于浏览器进行页面解析用的DTD(文档类型定义)文件。例如： !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN /TR/html4/loose.dtd 它放在html文件的最上面，即在html标记的上面 3.2 XHTML1.0 DOCTYPE类型简介 XHTML1.0提供了三种DOCTYPE可选择 : 过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。完整代码如下： !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd 严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性。完整代码如下： !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 问题： 在网上搜索资料时我们使用的“关键字”来自于哪里？得到的说明文字又来自于哪里？ 如何实现自动刷新页面？ 如何实现自动跳转页面？ 如何设定页面的编码字符？ 3.3 头部标记概述 头部标记，主要用于描述当前页面的有关信息，如标题、关键字等，所有头部标记都包含在head /head标记对中。 一般情况下，位于头部的内容都不会在网页上直接显示。 表3-1 常用头部标记 标 记 描 述 title 设置显示在浏览器标题栏中的内容 meta 定义文档的字符集、关键字等 style 设置CSS层叠样式表的内容 link 设置对外部CSS文件的链接 script 设置页面脚本或链接外部脚本文件 3.4 标题标记title 基本语法 title……/title 语法解释 标记之间的内容就是页面的标题 HTML文件标题示例代码 html head titleHTML文件标题示例/title /head body /body /html 3.5 元信息标记meta meta主要用于设置字符集、网页关键字及描述信息、页面的刷新及跳转等内容 可以在一个页面中使用任意数量的meta 表3-2 meta标记常用属性 属 性 描 述 http-equiv 以键/值对的形式设置一个HTTP标题信息，其中键指定设置项目，由http- equiv属性设置，项目值由content属性设置 name 以键/值对的形式设置页面描述信息，其中键指定设置项目，由name属性设置，项目值由content属性设置 content 设置http-equiv或name属性所设置项目对应的值 meta标记的属性语法格式 meta name=“设置项目” content=“设置项目具体值“ meta http-equiv=“设置项目” content=“设置项目具体值“ 设定关键字 基本语法 meta name=“keywords” content=“value” 语法解释 keywords为“关键字”定义，content中定义“关键字”的内容。 例如： meta name=keywords content=Dreamweaver，Fireworks，Flash，网页制作三剑客 / 设定描述 基本语法 meta name=“discription” content=“value” 语法解释 discription为“描述”定义，content中定义“描述”的内容。 例如： meta name=discription content=这是一个详尽介绍网页制作三剑客的网站/ 设定字符集 基