HTML5+CSS3从入门到精通（微课精编版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.4　案例实战

目前主流浏览器对HTML5提供了很好的支持，下面结合示例介绍如何正确创建HTML5文档。

1.4.1　编写第一个HTML5文档

视频讲解

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

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

示例效果

图1.1　编写HTML5文档

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

第一行代码如下：

    <!DOCTYPE HTML>

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

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

    <meta charset="utf-8">

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

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

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

1.4.2　比较HTML4与HTML5文档结构

视频讲解

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

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

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

图1.2　简单的网页布局

示例效果

尽管上述代码不存在任何语法错误，也可以在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，明确地告诉浏览器此处是页头，aide元素用于构建页面辅助栏目，article元素用于构建页面正文内容，footer元素定义页脚注释内容。这样极大地提高了开发者的便利性和浏览器的解析效率。

1.4.3　设计一个较详细的HTML5文档模板

视频讲解

【示例1】下面是一个简单的HTML5文档模板代码。

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <title>Hello HTML5</title>
    </head>
    <body>
    </body>
    </html>

HTML5文档以<!DOCTYPE html>开头，这是一个文档类型声明，并且必须位于HTML5文档的第一行，它告诉浏览器当前文档的类型。

<html>标签是HTML5文档的根标签，位于<!DOCTYPE html>标签的下面。<html>标签支持HTML5全局属性和manifest属性。manifest属性用于创建HTML5离线应用。

<head>标签是网页头部容器。位于<head>内部的元素可以包含脚本、样式表、元信息等。<head>标签也支持HTML5全局属性。

<meta>标签位于文档头部区域，不包含任何内容。使用<meta>的属性可以定义文档元信息，属性值以名／值对的形式设置。例如，<meta charset="utf-8" />定义了文档的字符编码，这里charset是<meta>标签的属性，"utf-8"是该属性的值。HTML5中大部分标签都定义有属性，以扩展标签的功能。

<title>标签位于<head>标签内，定义网页文档的标题，显示在浏览器标题栏，或当网页被添加到收藏夹时作为默认标题使用，也方便搜索引擎抓取。因此，当写HTML5文档时一定要设置该标签。

<body>标签定义网页正文，文档的所有内容，如文本、超链接、图像、表格、列表等都包含在该标签中，并显示在页面中。

【示例2】为了帮助读者更好地对HTML5文档有一个全局认识，也为了让读者初步了解复杂的HTML5文档代码，下面给出一个详细的、符合标准的HTML5文档模板，并进行详细注释。当然，在编写HTML5文档时，这些代码不是必需的，使用时可以根据需要酌情增删。

具体代码展示请查看示例源代码，或者扫码学习。

线上阅读

上一章目录下一章