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

1.5　案例实战

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

1.5.1　编写第一个HTML5文档

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

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

图1.3　编写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.5.2　比较HTML4与HTML5文档结构

下面通过示例具体说明HTML5是如何使用全新的元素编写网页的。

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

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

图1.4　简单的网页布局

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

上一章目录下一章