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

2.2 HTML5文档

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

2.2.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>HTML5的目标是为了能够创建更简单的Web程序，书写出更简洁的HTML代码。
    <br/>例如，为了使Web应用程序的开发变得更容易，提供了很多API；为了使HTML变得更简洁，开发出了新
 的属性、新的元素等。总体来说，为下一代Web平台提供了许许多多新的功能。

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

图2.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>标记，但浏览器解析时，会自动进行添加。但是，考虑到代码的可维护性，代码应该尽量增加这些基本结构标签。

2.2.2 比较HTML4与HTML5文档结构

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

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

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

图2.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明确地告诉浏览器此处是页头，aside元素用于构建页面辅助栏目，article元素用于构建页面正文内容，footer元素定义页脚注释内容。这样极大地提高了开发者的便利性和浏览器的解析效率。

上一章目录下一章