2.1HTML5基本结构

    HTML5 实际上不算是一种编程语言，而是一种标记语言。HTML5 文件是 由一系列成对出现的元素标签嵌套组合而成 ，这些标签 以元素名 > 的形式 出现，用于标记文本内容的含义。浏览器通过元素标签解析文本内容并将结果显示在网页上，而元素标签本身并不会被浏览器显示出来。

HTML5文档的基本结构如下：

  
    
  
  
    主体内容
  

HTML5元素的内容一般以 起始标签 元素名 > 开始，以 结束标签 元素名 > 终止。例如首部标签 中的 标签用于标记网页标题，该标签之间的内容将显示在浏览器窗口的标题栏中。主体标签 中的内容显示到网页上。

HTML 标签 

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

• HTML 标签是由 尖括号 包围的关键词，比如
• HTML 标签通常是 成对出现 的，比如 和
• 标签对中的第一个标签是 开始标签 ，第二个标签是 结束标签
• 开始和结束标签也被称为 开放标签 和闭合标签

HTML 文档 = 网页

• HTML 文档 描述网页
• HTML 文档 包含 HTML 标签 和纯文本
• HTML 文档也被称为 网页

     Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容。

 在 HTML5 中，该声明被大幅度化简：

     在浏览器打开的网页页面任意位置右键点击，选择“查看网页源代码”，在页面顶端第一句就是 DOCTYPE 声明。

    HTML5引入了新的特性和元素，同时也取消了对部分过期元素的支持，因此如果在 HTML5 的DOCTYPE声明下使用了 HTML 的过期元素，网页可能无法正常显示预期的效果。

“>2.1.3 首部标签

    HTML5文档的首部 以标签开始，以 标签结束 。 标签中的内容不会显示在网页的页面中。标签中可包含 和等标签，用于声明页面标题、字符集和关键词等。

网页标题标签

    HTML5文档 使用 和标签标记网页标题 ， 该标题会显示在浏览器窗口的标题栏中 ，若省略 标签则网页标题会显示为 “ 无标题文档 ”。建议在网页代码中保留该标签，因为 标签还能用于当网页被添加到收藏夹时显示标题，以及作为页面标题显示在搜索引擎结果中。

基础地址标签

    标签用于为页面上所有的链接设置默认 URL 地址或目标 target。 当HTML5文档中使用了相对路径时，浏览器会用 标签指定的 URL 进行补全。例如：

     此时在第一个图像标签 img> 中src属性填写的是一个相对路径，由于 标签的作用，该路径会被浏览器自动补全为：img src=” http://localhost/images/sunflower.jpg” />。如果没有使用 标签来指定 URL 地址，则浏览器会用当前 HTML5 文档的 URL 对图片地址进行补全。

    标签也可以为该网页上所有超链接统一设置打开方式。例如： 

 

百度
网易

 在 标签中的属性 target=”_blank” 指的是该网页文档中所有未指定打开方式的超链接将在新窗口打开。

元数据标签

    标签用于提供当前 HTML 文档的元数据，这些数据不会直接显示在网页上，但是对于机器是可读的，适用于搜索引擎索引。通常 标签可用于定义网页的字符集、关键词、描述、作者等信息。

 (1) 字符集声明

    Charset是 Character Set 的简写，含义为字符集设置。浏览器统一默认的字符集是 ISO-8859-1 西文字符集，如果使用了其他字符集，浏览器需知道使用何种字符集才能正确地显示 HTML 页面。HTML5文档使用 标签进行字符集声明。万维网初期使用的是 ACSII 字符集，该字符集支持数字 0-9、英文字母大写A-Z 和小写 a-z，以及部分特殊字符。由于很多国家使用的字符不被ACSII 支持，因此浏览器统一默认的字符集是 ISO-8859-1 西文字符集。

以 UTF-8 字符集为例，HTML4.01的字符集声明如下：

在 HTML5 中，同样的内容声明方式会更为简洁，写法如下：

(2) 关键词声明

使用 标签定义网页关键词（keywords）的用法如下：

  (3) 页面描述声明

使用 标签定义页面描述（description）的用法如下：

搜索引擎会根据 标签中的 name 和content属性来索引网页。

样式 标签

 样式标签

例如：

这是一个段落。

 这段代码可以将 HTML5 文档中所有未指定字体颜色的段落显示为红色。

 链接标签

标签用于连接外部资源和当前 HTML5 文档，它只出现在首部标签 和中，通常用于连接外部样式表。例如：

 这表示将 CSS 样式文件 my.css 指定的样式效果应用于当前网页中。

如果 需要同时引用多个外部样式表文件 ，则 需要为每一个 CSS 样式文件单独使用一次 标签。例如：

 这里对于 CSS 样式文件的引用使用了相对路径，也可以根据实际需要填写 URL 地址。

脚本标签

标签为可选，取决于当前页面是否需要使用脚本内容，比如 JavaScript。该标签可以直接引用外部脚本文件，也可以直接将脚本命令写在 和标签中。例如：

和引用外部 CSS 文件类似，如果需要同时引用多个 JavaScript 文件，则需要为每一个 JavaScript 文件单独使用一次 标签。例如： 

2.1.5 HTML5文档注释

    为增加 HTML5 文档的可读性，可为其添加注释部分。注释是文档中的说明文字，不会被浏览器执行 。HTML5 使用 标签 为文档进行注释，注释标签以“”结束，中间的“…”替换为注释文字内容即可。标签支持单行和多行注释。

2.1.6 HTML5文档规范

1. 文件类型

    一般来说，纯 HTML5 开发推荐使用.html 格式 。和HTML4.01 一样，HTML5支持的常用文件后缀名为 .html。在早期的DOS 操作系统中，文件扩展名限制为最多 3 个字符，无法识别 4 位文件名，因此 .htm 被用于兼容此类操作系统。目前这两种扩展名方式均被各类浏览器广泛支持，互换后缀名不会引起打开错误，但是 通过URL 地址访问时需要正确的扩展名。

2. 元素标签格式

元素标签 一般情况下是成对出现的 ， 首尾标签的元素名称保持一致 ，并且 尾标签中需要加上斜杠符号 。 早期的 HTML 规范中，标签的大小写是不敏感的，因此老版本的网页中可能会存在如下写法：

  
    
  
  
    ……
  

 万维网联盟（W3C）明确规定了 在新版本 HTML5 中必须使用小写格式，包括元素标签本身和其中可能出现的属性 均需要遵守此规范。

    在 HTML5 中，也 存在部分标签是独立使用 ， 没有首尾标签成对出现 。例如，换行标签br> 和水平线标签 hr> 等。由于此类标签单个就已经可以表达足够明确的含义，并且不包含其他文本内容需要放置在其首尾标签之间，因此结束标签没有存在的必要性。

    目前这种无结束标签的元素标签有不同的写法存在，例如水平线标签可以写成 hr> 或hr />。HTML4.01以前版本可以直接写成 hr>，但在XML 规范中，所有的标签都必须有结束标签，因此必须加上斜杠符号表示完结。虽然目前这两种写法均能被浏览器正确显示，但是从长远来看，加上结束标志即斜杠符号的写法更为标准。

3. 字符实体的使用

    在 HTML5 文档中存在一些特殊字符无法直接使用。例如小于符号（）和大于符号（>）是无法直接输出的，因为它们会被误认为是元素标签的组成部分；而连续空格也无法正确显示，会被浏览器缩减为单个空格。存在此类情况的一系列特殊字符在 HTML5 中称为字符实体（Character Entities）。

    字符实体可借助 其对应的字符名称或数字代码 进行输出，其格式如下：

& 实体名称;
实体数字;

实体名称和实体数字的写法都是以 & 符号开头，以 ; 符号结尾，其中实体数字前面还加有 # 符号以示区分。例如大于符号（>）可以使用 > 或>表示。

常用的字符实体及其对应的表示方式如表 所示：

    实体名称的出现是为了方便记忆，但是 部分实体名称不能完全被所有浏览器支持 。 例如单引号的实体名称 ‘ 在IE浏览器中不被支持，在这种情况下可以使用实体数字代替。

4. 图像文件的使用

网页文件常见的图像格式有：

JPEG格式

JPEG格式指的是联合图像专家组（Joint Photographic Experts Group，JPEG）格式，是第一个国际图像压缩标准。该格式的图像文件后缀名是 .jpg 或.JPG两种形式。

JPEG格式图像文件有以下特点：

• 支持高级压缩
• 弹性压缩比
• 广泛支持互联网标准

 GIF格式

GIF格式指的是图像交换格式（Graphics Interchange Format，GIF），该格式的图像文件后缀名是 .gif 或.GIF两种形式。

GIF格式图像文件有以下特点：

• 无损性
• 256种颜色
• 隔行扫描
• 动画效果

PNG格式

PNG格式指的是图像交换格式（Portable Network Graphic Format，PNG），该格式的图像文件后缀名是 .png 或.PNG两种形式。

PNG格式图像文件有以下特点：

• 文件体积小
• 支持透明显示
• 色彩索引模式

2.1.7 HTML4.01转换为HTML5

基于 HTML4.01 开发的网页可以分成三个步骤转换为 HTML5 网页。

示例代码如下：

  
    
    
    
    
  
  
    再见，HTML4.01！你好，HTML5！

 步骤一：化简 DOCTYPE 声明方式。

步骤二：化简 charset 字符集描述方式。

步骤三（可选，取决于需要转换的文件是否包含该内容）：若存在外部 css 文件或 js 文件的引用，可以直接省略其中的 type 描述。

修改后的代码如下：

  
    
    
    
    
  
  
    再见，HTML4.01！你好，HTML5！