HTML5+CSS3+jQuery Mobile APP与移动网站设计从入门到精通
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

3.1 认识HTML5文档结构

为了帮助读者更好地理解与认识HTML5文档，也为了让读者能够顺利读懂HTML5网页代码的准确意思，下面给出一个详细的、符合标准的HTML5文档结构代码，并在代码中进行了注释。

<!doctype html>
<!--声明文档结构类型-->
<html>
<!--声明文档区域-->
<head>
<!--文档的头部区域-->
<meta charset="utf-8">
<!--文档的头部区域中元数据区的字符集定义，utf-8表示国际通用的字符集编码格式-->
<title>网页标题</title>
<!--文档的头部区域的标题-->
</head>
<body>
<!--文档的主体内容区域-->
<header>HTML5文档的头部区域</header>
<nav>HTML5文档的导航区域</nav>
<section>HTML5文档的主要内容区域
   <aside>HTML5文档的主要内容区域的侧边导航或菜单区</aside>
   <article>HTML5文档的主要内容区域的内容区
      <section>以下是一个section和article的嵌套
         <aside></aside>
         <article>
            <header>嵌套内容的标题</header>
HTML5+CSS3+jQuery移动网站开发从入门到精通HTML5文档的嵌套区域，可以对某个article区域进行头部和脚部的定义。这样做，可以有非常清晰和严谨的文档目录结构关系。
            <footer>嵌套内容的页脚</footer>
         </article>
      </section>
   </article>
</section>
<footer>HTML5文档的页脚区域</footer>
</body>
</html>

当然，并不是每个HTML5文档都需要包含以上代码中的所有部分，一个最简单的HTML5文档需要的内容如下。

<!DOCTYPE html>

该代码声明了HTML文档的类型，除了字母的大小写可以任意变化外，其他的内容都不能变动。

HTML5文档扩展名为.html或.htm。现在主流浏览器都能够正确解析HTML5文档，如Chrome、Firefox、IE9+和Safari等。下面是一个最基础的HTML5文档代码。

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

HTML5文档以<!doctype html>开头，这是一个文档类型声明，必须位于HTML5文档的第一行，该行代码用来告诉浏览器或其他分析程序它们所查看的文档类型。

<html>标签是HTML5文档的根标签，紧跟在<!doctype html>之后，<html>标签支持HTML5全局属性和manifest属性，manifest属性主要在创建HTML5离线应用时使用。

<head>标签是所有头部元素的容器，位于<head>与</head>标签之间的元素可以包含元信息、JavaScript脚本和CSS样式表等。<head>标签支持HTML5全局属性。

<meta>标签位于文档的头部，不包含任何内容。标签的属性定义了与文档相关联的名称/值对，该标签提供页面的元信息，如针对搜索引擎的描述和关键词。

<meta charset="utf-8">定义了HTML5文档的字符编码是utf-8。这里charset是<meta>标签的属性，而utf-8是该属性的值。HTML5中的很多标签都有属性，从而扩展了标签的功能。

<title>标签位于<head>与</head>标签之间，定义了HTML文档的标题。该标签定义了浏览器工具栏中的标题，设置页面被添加到收藏夹时的标题和显示在搜索引擎结果中的页面标题。该标签非常重要，在编写HTML5文档的时候一定要添加该标签。<title>标签支持HTML5全局属性。

<body>标签定义文档的主体和所有内容，如文本、超链接、图像、列表和多媒体等都包含在该标签中。

上一章目录下一章