下载掌阅APP，畅读海量书库
立即打开
扫码看微课
HTML页面设计讲解
在编写网页具体内容之前，首先要使用标签对整个页面进行规划，如声明文档类型、文档根部、文档头部、文档主体、文档标题等，如图2.4所示。
图2.4 页面组成部分
文档类型即网页所使用的HTML版本，需要使用<!DOCTYPE>标签声明。该标签必须位于文档的第一行，以告知浏览器以特定的HTML版本对代码进行解读。
不同类型的文档，其<!DOCTYPE>标签声明的具体方式不同，主要分为以下几种。
（1）在HTML 5中，声明文档类型的语法形式如下。
<!DOCTYPE html>
（2）在HTML 4.0中，声明文档类型需要引用DTD。DTD会规定标记语言的规则，其语法形式如下。
<!DOCTYPE HTML PUBLIC ＂-//W3C//DTD HTML 4.01 Transitional//EN＂ ＂http://www.w3.org/TR/html4/loose.dtd＂>
（3）在XHTML中，声明文档类型也需要引用DTD，其语法形式如下。
<!DOCTYPE html PUBLIC ＂-//W3C//DTD XHTML 1.1//EN＂ ＂http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd＂>
XHTML与HTML 4.01标准没有太多的不同，简单地说，XHTML是更加严谨准确的HTML，它对语法的要求更加严谨。
文档根部使用<html>与</html>标签告知浏览器该文档为HTML文档，并说明文档的起始位置和结束位置。<html>与</html>标签之间包含文档根部以及主体部分。
在文档根部的<html>开始标签中需要引入xmlns属性，该属性的语法形式如下。
<html xmlns=＂http://www.w3.org/1999/xhtml＂>
其中，xmlns属性在XHTML类型文档中必须引入，在HTML类型文档中可以省略。
文档头部使用<head>与</head>标签定义。文档头部位于文档根部开始之后、文档主体之前。在文档头部的范围内可以编写所有头部元素，如引用的脚本、样式、元信息等。
文档头部可以使用的标签包括<base>、<link>、<meta>、<script>、<style>和<title>。其中，文档标题<title>标签是文档头部的必要元素。
文档信息提供了有关页面的元信息，包括对搜索引擎和更新频率的描述。该信息由<meta>标签实现。<meta>标签必须位于文档头部中。<meta>标签可用的属性如表2.1所示。
表2.1 <meta>标签的属性
在<meta>标签中，content属性是必须存在的。如果使用了其他3个属性，那么可以使用content属性对其值进行指定。其语法形式如下。
<meta http-equiv=＂值＂ content=＂值＂; name=＂值＂ content=＂值＂ />
例如，Dreamweaver默认代码如下。
<meta http-equiv=＂Content-Type＂ content=＂text/html; charset=utf-8＂ />
首先，代码“http-equiv=＂Content-Type＂ content=＂text/html”指定了 http-equiv 属性的值Content-Type，也就是指定文档类型；其次，使用 content 属性指定文档类型的值为 text/html，表示告诉浏览器要接受的是一个 HTML 文档；最后，代码“charset=utf-8”表示外部脚本的编码格式，具体使用会在后面讲解。
文档标题使用<title>标签定义，位于网页的头部，其语法形式如下。
<title>文档名称</ title >
浏览器会以特殊的方式来使用标题，并把它放置在浏览器窗口的标题栏或状态栏上。
例如，定义一个文档的标题为“我的网页”，如图2.5所示。
图2.5 定义文档标题
文档主体使用<body>标签定义，位于网页头部的下方。<body>元素包含文档的所有内容，如网页要展示的文本、图片、音乐、视频等，其语法形式如下。
<body>内容</ body >
例如，在文档主体中显示一行文字，如图2.6所示。
图2.6 文档主体