Web前端开发全程实战：HTML5+CSS3+JavaScript+jQuery+Bootstrap
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.3　HTML5基本结构

1.3.1　新建HTML5文档

完整的HTML5文档结构一般包括两部分：头部消息（<head>）和主体信息（<body>）。

在<head>和</head>标签之间的内容表示网页文档的头部消息。在头部代码中，有一部分是浏览者可见的，如<title>和</title>之间的文本，也称为网页标题，会显示在浏览器标签页中。但是大部分内容是不可见的，专门为浏览器解析网页服务的，如网页字符编码、各种元信息等。

在<body>和</body>标签之间的内容表示网页文档的主体信息。它又包括以下3个部分。

　文本内容：在页面上让访问者了解页面信息的纯文字，如关于、产品、资讯的内容，以及其他任何内容。

　外部引用：用来加载图像、音视频文件，以及CSS样式表文件、JavaScript脚本文件等。还可以指向其他的HTML页面或资源。

　标签：对文本内容进行分类标记，确保浏览器能够正确显示。

【示例1】使用记事本或者其他类型的文本编辑器新建文本文件，保存为index.html。注意，扩展名为.html，而不是.txt。

输入下面的代码，由于网页还没有包含任何信息，在浏览器中显示为空，如图1.2所示。

图1.2　空白页面

网页内容都由文本构成，因此网页可以保存为纯文本格式，可以在任何平台上使用任何编辑器来查看源代码，这个特性也确保了用户能够很容易地创建HTML页面。

　提示：如果使用专业网页编辑器，如Dreamweaver等，新建网页文件时，会自动构建基本的网页结构。

本书使用HTML泛指HTML语言本身。如果需要强调某个版本的特殊性，则使用它们各自的名称。例如，HTML5引入了一些新的元素，并重新定义或删除了HTML4和XHTML1.0中的某些元素。

【示例2】在示例1基础上，为页面添加内容。代码如下。

在浏览器中预览，则显示效果如图1.3所示。

示例2演示了6种最常用的标签：a、article、em、h1、img和p。每个标签都表示不同的语义，例如，h1定义标题，a定义链接，img定义图像。

　注意：在代码中行与行之间通过回车符分开，不过它不会影响页面的呈现效果。对HTML进行代码缩进显示，与在浏览器中的显示效果没有任何关系，但是pre元素是一个例外。习惯上，我们会对嵌套结构的代码进行缩进排版，这样会更容易看出元素之间的层级关系。

1.3.2　编写简洁的HTML5文档

本节示例将遵循HTML5语法规范编写一个文档。本例文档省略了<html>、<head>、<body>等标签，使用HTML5的DOCTYPE声明文档类型，简化<meta>的charset属性设置，省略<p>标签的结束标记、使用<元素/>的方式来结束<meta>和<br>标签等。

这段代码在IE浏览器中的运行结果如图1.4所示。

图1.3　添加主体内容

图1.4　编写HTML5文档

以上通过短短几行代码就完成了一个页面的设计，充分说明HTML5语法的简洁性。同时，HTML5不是一种XML语言，其语法也很随意，下面从两个方面进行逐句分析。

第1行代码如下。

     <!DOCTYPE HTML>

不需要包括版本号，仅告诉浏览器需要一个doctype来触发标准模式，可谓简明扼要。

接下来说明文档的字符编码，否则将出现浏览器不能正确解析。

     <meta charset="utf-8">

HTML5不区分大小写，不需要标记结束符，不介意属性值是否加引号，即下列代码是等效的。

     <meta charset="utf-8">
     <META charset="utf-8" />
     <META charset=utf-8>

在主体中，可以省略主体标记，直接编写需要显示的内容。虽然在编写代码时省略了<html>、<head>和<body>标记，但在浏览器进行解析时，将会自动进行添加。但是，考虑到代码的可维护性，在编写代码时，应该尽量增加这些基本结构标签。

1.3.3　比较HTML4与HTML5文档结构

下面通过示例具体说明HTML5是如何使用全新的结构化标签编织网页的。

【示例1】将页面分成上、中、下3个部分。上面显示网站标题栏；中间分两部分，左侧为侧边栏，右侧显示网页正文内容；下面为页脚栏，显示版权信息，如图1.5所示。使用HTML4构建文档基本结构如下。

     <div id="header">[标题栏]</div>
     <div id="aside">[侧边栏]</div>
     <div id="article">[正文内容]</div>
     <div id="footer">[页脚栏]</div>

图1.5　简单的网页布局

尽管上述代码不存在任何语法错误，也可以在HTML5中很好地解析，但该页面结构对于浏览器来说是不具有区分度的。对于不同的用户来说，ID命名可能因人而异，这对浏览器来说，就无法辨别每个div元素在页面中的作用，因此也必然会影响其对页面的语义解析。

【示例2】使用HTML5新增元素重新构建页面，明确定义每部分在页面中的作用。

     <header>[标题栏]</header>
     <aside>[侧边栏]</aside>
     <article>[正文内容]</article>
     <footer>[页脚栏]</footer>

虽然两段代码不一样，但比较上述两段代码，使用HTML5新增元素创建的页面代码更简洁、明晰。可以很容易地看出，使用<div id="header">、<div id="aside">、<div id="article">和<div id="footer">这些标记元素没有任何语义，浏览器也不能根据标记的ID名称来推断它的作用，因为ID名称是随意变化的。

而HTML5新增元素header，明确地告诉浏览器此处是页头，aside元素用于构建页面辅助栏目，article元素用于构建页面正文内容，footer元素定义页脚注释内容。这样极大地提高了开发者便利性和浏览器的解析效率。

上一章目录下一章