1.4　案例实战

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

1.4.1　编写第一个HTML5文档

视频讲解

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

   <!DOCTYPE html>
   <meta charset="UTF-8">
   <title>HTML5基本语法</title>
   <h1>HTML5的目标</h1>
   <p>HTML 5的目标是为了能够创建更简单的Web程序，书写出更简洁的HTML代码。
   <br/>例如，为了使Web应用程序的开发变得更容易，提供了很多API；为了使HTML变得更简洁，开发出
了新的属性、新的元素等。总体来说，为下一代Web平台提供了许许多多新的功能。

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

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

示例效果

图1.5　编写HTML5文档

第一行代码如下：

    <!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.6所示。

示例效果

图1.6　简单的网页布局

使用HTML4构建文档基本结构如下：

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

尽管上述代码不存在任何语法错误，也可以在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元素定义页脚注释内容。这样极大地提高了开发者便利性和浏览器的解析效率。

上一章目录下一章