第2章新增元素_从0到1：HTML5+CSS3修炼之道-QQ阅读男生历史网

上QQ阅读APP看书，第一时间看更新

第2章新增元素

2.1 结构元素

在HTML5之前，对于页面中较大块的结构（如导航、内容区、侧边栏、底部等），一般都是使用div元素来实现。但是我们都知道，div是一个无语义的元素，如果整个页面都使用div来实现，那么可读性和可维护性是非常差的。

在HTML5中，新增了一组结构元素，以帮助完善页面的语义化，提高可读性、可维护性以及SEO（即搜索引擎优化）。语义化可不是简单的一个术语，可以说是HTML中最重要的概念。

对于语义化这个概念，我们在《从0到1：CSS进阶之旅》中已经做过非常详细的介绍了。由于内容很多，具体请参考该书，此处不再赘述。

HTML5新增的主要结构元素有6个：header、nav、article、aside、section、footer。

HTML5的结构元素有着比较严格的使用规范，在这一节中会详尽介绍每一个结构元素的使用场合，建议大家字斟句酌地阅读，把每一个结构元素都理解透。

还有一点要特别说明，大多数有关HTML5的书对结构元素的介绍都是笼统过一遍就算了，以致很多初学者以为这些结构元素随便看看、随便用用就算了。实际上，语义化可以说是前端面试必考的内容之一，小伙伴们一定要非常重视。

2.1.1 header元素

在HTML5中，header元素一般用于3个地方：页面头部、文章头部（article元素）和区块头部（section元素）。

当用于页面头部时，header元素一般用于包含网站名称、页面LOGO、顶部导航、介绍信息等，如图2-1所示。

图2-1 header元素用于页面头部

当用于文章头部时（即article元素头部），header元素一般用于包含“文章标题”和“meta信息”两部分。所谓的meta信息，一般指的是作者、点赞数、评论数等，如图2-2所示。

图2-2 header元素用于文章头部（article）

当用于区块头部时（即section元素头部），header元素一般只包含区块的标题内容，如图2-3所示。

图2-3 header元素用于区块头部（section）

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <header></header>
  <nav></nav>
  <article>
   <header></header>
   ……
   <footer></footer>
  </article>
  <aside></aside>
  <section>
   <header></header>
    ……
  </section>
  <footer></footer>
</body>
</html>

上面代码的HTML结构如图2-4所示。

图2-4 HTML结构图

分析

这个图是结构元素最经典的一个使用图，从上面我们可以清晰看出header元素一般用于3个地方：页面头部、文章头部（article元素）和区块头部（section元素）。

这个结构图非常重要，对于后面介绍的其他结构元素，我们也应该多联系一下此图，这样学习思路会更加清晰。

2.1.2 nav元素

在HTML5中，nav元素一般用于3个地方：顶部导航、侧栏导航和分页导航。

当用于顶部导航时，nav元素可以放到header元素内部，也可以放到header元素外部。具体放在里面还是外面，取决于实际开发需求。

一般情况下，主导航主要是使用无序列表来实现。在HTML5之前，都是使用一个div来包含着无序列表，而现在我们可以使用nav元素来代替div元素，以使结构更具有语义。

以前的导航结构如下：

<div id="nav">
  <ul>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
  </ul>
</div>

现在的导航结构如下：

<nav id="nav">
  <ul>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
  </ul>
</nav>

此外别忘了，nav元素并不只是可以用于顶部导航，还可以用于侧栏导航以及分页导航，如图2-5、图2-6和图2-7所示。

图2-5 顶部导航

图2-6 侧栏导航

图2-7 分页导航

2.1.3 article元素

在HTML5中，article元素一般只会用于一个地方：文章内容部分。我们可以把article看成一个独立的部分，它内部可以包含标题以及其他部分。也就是说，article元素内部可以包含header元素、section元素和footer元素等。

注意，在严格意义上，每一个article元素内部都应该有一个header元素。

举例

<article>
  <header>
    <h1>HTML5是什么？</h1>
    <p>作者、点赞、评论、浏览……</p>
  </header>
  <div id="content">文章内容……</div>
  <footer>
    <nav>上一篇、下一篇导航</nav>
  </footer>
</article>

2.1.4 aside元素

在HTML5中，aside元素一般用于表示跟周围区块相关的内容，如图2-4所示。

想要正确地使用aside元素，主要取决于它的使用位置，我们大体可以分为以下两种情况。

▶ 如果aside元素放在article元素或section元素之中，则aside内容必须与article内容或section内容紧密相关。

▶ 如果aside元素放在article元素或section元素之外，则aside内容应该是与整个页面相关的，比如相关文章、相关链接、相关广告等。

如果小伙伴们不知道在实际开发中怎么使用，可以到绿叶学习网（本书配套网站）查看各个页面的源代码，相信你会学到很多知识。事实上，这一章中涉及的大部分例子，都是根据绿叶学习网的页面结构来讲解的。

2.1.5 section元素

在HTML5中，section元素一般用于某一个需要标题内容的区块。如果页面某个区块不需要标题，直接使用div元素就可以了。如果需要标题，则建议使用section元素。

HTML5标准建议，section元素内部必须带有标题，也就是说，section元素内部必须带有一个header元素。

在HTML5中，article、aside这两个元素可以看成是“特殊”的section元素，因为它们比section元素更具有语义化。在实际开发中，对于页面某一个区块，优先考虑语义化更好的article元素和aside元素，如果这两个都不符合，再考虑使用section元素。

举例

<section>
  <header>工具手册</header>
  <ul>
    <li>HTML5参考手册</li>
    <li>CSS3参考手册</li>
    <li>JavaScript参考手册</li>
  </ul>
</section>

2.1.6 footer元素

在HTML5中，footer元素一般用于两个地方：一个是“页面底部”，另一个是“文章底部”。

当用于文章底部时，也就是放在article元素内部时，footer元素一般包含“上一篇/下一篇导航”“文章分类”“发布信息”等。

举例

<article>
  <header>
    <h1>HTML5是什么？</h1>
    <p>作者、点赞、评论、浏览……</p>
  </header>
  <div id="content">文章内容……</div>
  <footer>
    <nav>上一篇、下一篇导航</nav>
  </footer>
</article>

至此，我们已经把6个主要结构元素学完了，可能有些小伙伴都快被搞蒙了。一下子记不住没关系，等我们到了实际开发需要的时候再回来翻一下，然后用上几遍就记住了。

2.2 表单元素

在HTML4.01中，表单的类型以及使用方法都非常有限。HTML5在HTML4.01的基础上，对表单进行了以下两个方向的扩展。

▶ 新增input元素类型。

▶ 新增其他表单元素。

这两个方向的扩展，使得代码量大大减少，可以极大地提高开发效率。

2.2.1 新增input元素类型

在HTML5中，大量地增加了input元素的种类。换句话说就是，input元素的type属性新增了大量属性值，如表2-1、表2-2所示。

表2-1 新增的type属性值（验证型）

表2-2 新增的type属性值（取值型）

除了表2-2列出的，type属性还有一个取值：datetime。不过，Chrome、Firefox、IE等浏览器的最新版本中已经不再支持了，小伙伴们如果在其他地方看到的话，直接忽略即可。

1．验证型

当type属性取值为“email”时，表示这是输入电子邮件的文本框（语义化）。

语法

<input type="email" />

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <form method="post">
    <p><label>电子邮件：<input type="email" /></label></p>
  <input type="submit" value="提交" />
  </form>
</body>
</html>

浏览器预览效果如图2-8所示。

图2-8 email类型

分析

当我们输入非电子邮件格式的字符，然后点击【提交】按钮时，会发现无法提交并且弹出提示内容，效果如图2-9所示。

图2-9 提交时效果

这里有一点要说明，即必须是submit按钮才会弹出提示内容，使用其他按钮（如button按钮）则不会。这是因为email类型的文本框采用了浏览器内置的验证机制，而浏览器内置的验证机制必须使用submit按钮才会触发。

tel

当type属性取值为“tel”时，表示这是输入电话号码的文本框（语义化）。

语法

<input type="tel" />

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <form method="post">
    <p><label>电话号码：<input type="tel" /></label></p>
    <input type="submit" value="提交" />
  </form>
</body>
</html>

浏览器预览效果如图2-10所示。

图2-10 tel类型

分析

当我们输入非电话号码格式的字符，然后点击【提交】按钮时，却发现居然可以提交！这是怎么回事呢？其实tel类型文本框并不具备完备的验证功能，如果想要达到验证效果，则需要结合3.2节介绍的pattern属性来实现。

url

当type属性取值为“url”时，表示这是输入URL的文本框（语义化）。

语法

<input type="url" />

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <form method="post">
    <p><label>你的网址：<input type="url" /></label></p>
    <input type="submit" value="提交" />
  </form>
</body>
</html>

浏览器预览效果如图2-11所示。

图2-11 url类型

分析

当我们输入非URL格式的字符，然后点击【提交】按钮时，会发现无法提交并且弹出提示内容，效果如图2-12所示。

图2-12 提交时效果

所谓的URL格式字符，指的是以“http://”或者“https://”开头的网络地址。有些小伙伴会发现，像https://www、tps://www.lvyestudy.com这种字符串也能提交！原因也是一样的：url类型文本框也不具备完备的验证功能，如果想要达到验证效果，需要结合pattern属性来实现。

2．取值型

range

当type属性取值为“range”时，我们可以通过拖动滑动条获取某一个范围内的数字。

语法

<input type="range" min="最小值" max="最大值" step="间隔数"/>

说明

min属性用于设置最小值，max属性用于设置最大值，step属性用于设置间隔数。这3个属性的取值可以是整数，也可以是小数。

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script>
    window.onload = function(){
      var input = document.getElementsByTagName("input")[0];
      var output = document.getElementsByTagName("output")[0];
      //获取range的初始值
      output.value = input.value;
      //拖动滑动条，改变output值
      input.onchange = function(){
        output.value = input.value;
      };
    }
  </script>
</head>
<body>
  <form method="post">
    <input type="range" min="-10" max="10" step="5" value="-10"/>
    <output></output>
  </form>
</body>
</html>

浏览器预览效果如图2-13所示。

图2-13 range类型

分析

<input type="range" min="-10" max="10" step="5" value="-10"/>

上面这句代码表示：滑动条最小值为-10，最大值为10，每次拖动只能改变5（增加5或减少5）。value="-10"用于设置滑动条的初始值，有一个很有趣的现象是：设置不同的value值，滑块也会出现在对应数值的位置。在这个例子中，若设置value="5"，此时浏览器预览效果如图2-14所示。

图2-14 设置value="5"

在实际开发中，range类型元素都是需要结合JavaScript来操作的，上面这个例子就是最简单也是最经典的。此外，output元素用于定义表单元素的输出结果，我们在这一节的后面会详细介绍。

number

当type属性取值为“number”时，我们可以通过使用微调按钮来获取某一个范围的数字。

语法

<input type="number" min="最小值" max="最大值" step="间隔数"/>

说明

min属性用于设置最小值，max属性用于设置最大值，step属性用于设置间隔数。它们的属性取值可以是整数，也可以是小数。

number类型跟range类型功能非常相似，都是获取某一个范围内的数字。不过两者的外观不一样，其中number类型使用的是“微调按钮”，而range类型使用的是“滑块”。

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script>
    window.onload = function(){
      var input = document.getElementsByTagName("input")[0];
      var output = document.getElementsByTagName("output")[0];
      //获取number的初始值
      output.value = input.value;
      //点击微调按钮，改变output值
      input.onchange = function(){
        output.value = input.value;
      };
    }
  </script>
</head>
<body>
  <form method="post">
    <input type="number" min="-10" max="10" step="5" value="-10"/>
    <output></output>
  </form>
</body>
</html>

浏览器预览效果如图2-15所示。

图2-15 number类型

分析

在这个例子中，我们可以直接在文本框中输入数字，也可以通过右边的微调按钮来改变数字。

color

当type属性取值为“color”时，我们可以直接使用浏览器自带的取色工具来获取颜色值。

语法

<input type="color" value=""/>

说明

value属性用于设置颜色初始值，格式必须是十六进制颜色值如#F1F1F1，不能是关键字（如black）和rgba颜色（如rgba(255, 255, 255, 0.5)）。

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script>
    window.onload = function(){
      var input = document.getElementsByTagName("input")[0];
      var output = document.getElementsByTagName("output")[0];
      //页面一载入，获取color的初始值
      output.value = input.value;
      //选择颜色，改变output值
      input.onchange = function(){
        output.value = input.value;
      };
    }
  </script>
</head>
<body>
  <form method="post">
    <input type="color" value="#000000"/>
    <output></output>
  </form>
</body>
</html>

浏览器预览效果如图2-16所示。

图2-16 color类型

分析

当我们点击color类型元素时，浏览器会弹出自带的取色工具，以方便直接选取颜色值，如图2-17所示。

图2-17 浏览器自带的取色工具

color类型元素不仅可以选择颜色，还可以将常用的颜色值添加到自定义颜色栏中，以便再次使用，非常方便。

date

当type属性取值为“date”时，我们可以直接使用浏览器自带的日历工具来获取日期（年、月、日）。

语法

<input type="date" value=""/>

说明

value属性用于设置日期初始值，格式必须如“2018-05-20”。

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <form method="post">
    <input type="date" value="2018-05-20"/>
  </form>
</body>
</html>

浏览器预览效果如图2-18所示。

图2-18 date类型

分析

当我们点击date类型元素时，浏览器会弹出自带的日历工具，以方便直接选取日期，如图2-19所示。

图2-19 浏览器自带的日历工具

此外，value属性用于设置日期初始值，格式必须如“2018-05-20”，像“2018--5-20”这种是无效的。

time

当type属性取值为“time”时，我们可以直接使用浏览器自带的工具来获取时间（时、分）。

语法

<input type="time" value=""/>

说明

value属性用于设置时间初始值，格式必须如“08:04”。

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <form method="post">
    <input type="time" value="08:04"/>
  </form>
</body>
</html>

浏览器预览效果如图2-20所示。

图2-20 time类型

分析

当我们点击time类型元素时，文本框右边会出现微调按钮，以方便调整时间，如图2-21所示。

图2-21 微调按钮

此外，value属性用于设置时间初始值，格式必须如“08:04”，像“8:4”这种是无效的。

month

当type属性取值为“month”时，我们可以使用浏览器自带的工具来获取“月数”。

语法

<input type="month" value=""/>

说明

value属性用于设置初始值，格式必须如“2018-08”。

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <form method="post">
    <input type="month" value="2018-08"/>
  </form>
</body>
</html>

浏览器预览效果如图2-22所示。

图2-22 month类型

分析

当我们点击month类型元素时，浏览器会弹出选择框，以方便选择哪个月份，如图2-23所示。

图2-23 月份选择框

week

当type属性取值为“week”时，我们可以使用浏览器自带的工具来获取“周数”。

语法

<input type="week" value=""/>

说明

value属性用于设置初始值，格式必须如“2018-W04”。其中，“W”是“week”的缩写。

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <form method="post">
    <input type="week" value="2018-W04"/>
  </form>
</body>
</html>

浏览器预览效果如图2-24所示。

图2-24 week类型

分析

当我们点击week类型元素时，浏览器会弹出选择框，以方便选择第几周，如图2-25所示。

图2-25 星期选择框

2.2.2 新增其他表单元素

前面介绍的都是input元素新增的类型，实际上HTML5还新增了3个表单元素：output、datalist、keygen。

1．output元素

在HTML5中，我们可以使用output元素来定义表单元素的输出结果或计算结果。

语法

<output></output>

说明

output元素是一个行内元素，只不过它比span元素更具有语义化。

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script>
    window.onload = function(){
      var input = document.getElementsByTagName("input")[0];
      var output = document.getElementsByTagName("output")[0];
      //获取range的初始值
      output.value = input.value;
      //拖动滑动条，改变output值
      input.onchange = function(){
        output.value = input.value;
      };
    }
  </script>
</head>
<body>
  <form method="post">
    <input type="range" min="-10" max="10" step="5" value="-10"/>
    <output></output>
  </form>
</body>
</html>

浏览器预览效果如图2-26所示。

图2-26 output元素

分析

output元素一般放在form元素内部，并且配合其他表单元素（如文本框等）来使用。我们在此之前接触output元素很多了，因此这里不再赘述。

2．datalist元素

在HTML5中，我们可以使用datalist元素来为文本框提供一个可选的列表。

语法

<input type="text" list="" />
<datalist id="">
  <option label="" value=""></option>
  <option label="" value=""></option>
  <option label="" value=""></option>
</datalist>

说明

如果想要把datalist绑定到某个文本框，需要设置该文本框的list属性值等于datalist的id值。

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <form method="post">
     输入网址：<input type="text" list="urlList"/>
    <datalist id="urlList">
      <option label="绿叶学习网" value="http://www.lvyestudy.com"></option>
      <option label="人民邮电出版社有限公司" value="http://www.ptpress.com.cn"></option>
      <option label="异步社区" value="http://www.epubit.com"></option>
    </datalist>
  </form>
</body>
</html>

浏览器预览效果如图2-27所示。

图2-27 datalist元素

3．keygen元素

在HTML5中，我们可以使用keygen元素来生成页面的密钥。如果表单内部有keygen元素，则提交表单时，keygen元素将生成一对密钥：一个保存在客户端，称为“私密钥（Private Key）”；另一个发送到服务器，称为“公密钥（Public Key）”。

语法

<keygen />

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <form method="post">
    <keygen />
    <input type="submit" value="提交"/>
  </form>
</body>
</html>

浏览器预览效果如图2-28所示。

图2-28 keygen元素

分析

keygen元素主要是作为客户端安全保护的一种方法，不过它在各大浏览器中的兼容性很差，小伙伴们了解一下即可，不需要深入。

2.3 其他新增元素

除了前面几节介绍的结构元素和表单元素之外，HTML5还增加了大量语义化元素，其中最重要的有以下6个。

▶ address

▶ time

▶ progress

▶ meter

▶ figure和figcaption

▶ fieldset和legend

注意，hgroup元素已经被HTML5标准剔除了，如果你在其他书中看到，直接忽略即可。

2.3.1 address元素

在HTML5中，我们可以使用更具有语义化的address元素来为“整个页面”或者“某一个article元素”添加地址信息（电子邮件或真实地址）。

当address元素应用于整个页面时，它一般放于整个页面的底部（footer元素内部），表示该网站所有者的地址信息。

一个页面可以有多个article元素，比如有些页面就有好几篇文章。当address元素应用于article元素时，它一般放在article元素内部的footer元素内，表示该篇文章所有者的地址信息。当然，address元素也可以放于section元素内。

举例：应用于整个页面

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <header></header>
  <nav></nav>
  <article></article>
  <aside></aside>
  <footer>
    <address>
      如果你发现网站有bug，可以通过<a href="mailto:lvyestudy@foxmail.com"> 电子邮件 </a>联系我们。<br/>
      当然你也可以通过下面地址访问我们：<br/>
      广州市黄埔大道601号暨南大学.
    </address>
  </footer>
</body>
</html>

浏览器预览效果如图2-29所示。

图2-29 address应用于整个页面

举例：应用于article元素

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <header></header>
  <nav></nav>
  <article>
    <header>作者：helicopter</header>
    <p>这是第1篇文章的内容……</p>
    <footer>
      <address>
        你可以通过<a href="mailto:lvyestudy@foxmail.com"> mailto:lvyestudy@fox-mail.com </a>联系作者：helicopter。
      </address>
    </footer>
  </article>
  <article>
    <header>作者：mozilla</header>
    <p>这是第2篇文章的内容……</p>
    <footer>
      <address>
        你可以通过<a href="mailto:webmaster@somedomain.com">mailto:webmaster@somedomain.com</a>联系作者：mozilla。
      </address>
     </footer>
  </article>
  <aside></aside>
  <footer>
  </footer>
</body>
</html>

浏览器预览效果如图2-30所示。

图2-30 address应用于article元素

2.3.2 time元素

在HTML5中，我们可以使用更具有语义化的time元素来显示页面中的日期时间信息。

语法

<time datetime="时间"></time>

说明

datetime属性取值是一个时间，可以省略不写。datetime属性中的时间是提供给搜索引擎看的，而time标签内的时间是提供给用户看的，两者内容可以一样也可以不一样。time元素与datetime属性的关系，有点类似于img元素与alt属性的关系。

举例

方式1
<time>2017-11-11</time>
方式2
<time datetime="2017-11-11">2017-11-11</time>
方式3
<time datetime="2017-11-11 08:00">2017年11月11日早上8点</time>
方式4
<time datetime="2017-11-11 08:00-12:00">2017年11月11日8点~12点</time>

在实际开发中，大多数情况下我们是不用datetime属性的。用一句话总结就是：对于time元素的使用，我们不必过于拘泥，想要显示一段有意义的日期时间，用<time></time>括起来就可以了。

2.3.3 progress元素

在HTML5中，我们可以使用progress元素以进度条的形式来显示某一个任务的完成度，如上传文件、下载文件等。

语法

<progress max="最大值" value="当前值"></progress>

说明

max属性表示最大值，value属性表示当前值。对于progress元素来说，它只有max属性，而没有min属性。为什么呢？原因很简单：任何进度条的最小值都是0，因此progress元素默认最小值也是0。

此外，max和value必须是0或正数，并且max值必须大于等于value值。小伙伴们想象一下进度条的特点就很容易理解了。

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <progress max="10" value="8"></progress><br/>
  <progress max="100" value="80"></progress>
</body>
</html>

浏览器预览效果如图2-31所示。

图2-31 progress元素

分析

“进度=value/max”，因此虽然两个progress元素的max和value不一致，但是进度是相同的，都是80%。

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script>
    window.onload = function(){
      var oProgress = document.getElementsByTagName("progress")[0];
      var oSpan = document.getElementsByTagName("span")[0];
      var oBtn = document.getElementsByTagName("input")[0];
      oBtn.onclick = function(){
        var i = 0;
        setInterval(function(){
          if(i<100){
            i++;
            oProgress.value = i;
            oSpan.innerText = i;
          }
        },100)
      }
    }
  </script>
</head>
<body>
  <p>
    <progress max="100" value="0"></progress>
    <span>0</span>%
  </p>
  <input type="button" value="显示进度"/>
</body>
</html>

浏览器预览效果如图2-32所示。

图2-32 默认时效果

分析

在这个例子中，我们使用定时器setInterval()来实现进度条的不断增加。当我们点击【显示进度】按钮后，进度条会不断增加，效果如图2-33所示。

图2-33 点击按钮后效果

在实际开发中，progress元素一般结合上传文件或下载文件操作来显示进度，或者展示一个loading图标，以便增强用户体验。对于这些高级效果，我们学到后面就知道怎么去实现了。

2.3.4 meter元素

在HTML5中，我们可以使用进度条的形式来显示数据所占的比例。

语法

<meter min="最小值" max="最大值" value="当前值"></meter>

说明

meter元素跟progress元素非常相似，都是以进度条形式来显示数据比例。不过，两者在语义上有很大的区别：

▶ meter元素一般用于显示静态数据比例。所谓的静态数据，指的是很少改变的数据，例如男生人数占全班人数的比例。

▶ progress元素一般用于显示动态数据比例。所谓“动态数据”，指的是会不断改变的数据，例如下载文件的进度。

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <meter min="0" max="10" value="8"></meter><br/>
  <meter min="0" max="100" value="80"></meter>
</body>
</html>

浏览器预览效果如图2-34所示。

图2-34 meter元素

2.3.5 figure和figcaption元素

图2-35所示“图片+图注”效果，在实际开发中经常可以见到。对于初学者来说，我们很可能使用如下代码来实现：

<div>
  <img src="" alt=""/>
  <span>HTML入门教程</span>
</div>

图2-35 “图片+图注”效果

但是这种实现方式语义并不好。在HTML5中，引入了figure和figcaption这两个元素来增强图片的语义化。

语法

<figure>
  <img src="" alt=""/>
  <figcaption></figcaption>
</figure>

说明

figure元素用于包含图片和图注，figcaption元素用于表示图注文字。在实际开发中，对于“图片+图注”效果，我们都建议使用figure和figcaption这两个元素来实现，从而使得页面的语义更加良好。

2.3.6 fieldset和legend元素

在HTML5中，我们还可以使用fieldset元素来给表单元素进行分组。其中，legend元素用于定义某一组表单的标题。

语法

<fieldset>
  <legend>表单组标题</legend>
  ……
</fieldset>

说明

使用fieldset和legend有两个作用：增强表单的语义；定义fieldset元素的disabled属性来禁用整个组中的表单元素。

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <form action="index.php" method="post">
     <fieldset>
      <legend>登录绿叶学习网</legend>
      <p>
        <label for="name">账号：</label>
        <input type="text" id="name" name="name" />
      </p>
      <p>
        <label for="pwd">密码：</label>
        <input type="password" id="pwd" name="pwd" />
      </p>
      <input type="checkbox" id="remember-me" name="remember-me" />
      <label for="remember-me">记住我</label>
      <input type="submit" value="登录" />
     </fieldset>
  </form>
</body>
</html>

浏览器预览效果如图2-36所示。

图2-36 加入fieldset和legend的表单

分析

我们可以看到，使用fieldset和legend这两个标签之后，表单形成了非常美观的“书签”效果。

2.4 改良后的元素

除了新增元素，HTML5还对已有的某些元素进行了改良，其中改良的元素有以下4种。

▶ a

▶ ol

▶ small

▶ script

2.4.1 a元素

HTML5为a元素新增了3个属性，如表2-3所示。

表2-3 a元素新增属性

media和type这两个属性用得很少，我们只需要掌握download这一个属性即可。

语法

<a href="文件地址" download="新文件名"></a>

说明

download属性用于为文件取一个新的文件名。如果download属性值省略，则表示使用旧的文件名。

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <a href="img/princess.png" download="beauty.png">下载图片</a>
</body>
</html>

浏览器预览效果如图2-37所示。

图2-37 download属性

分析

当我们点击超链接后，浏览器就会下载该图片，并且图片名字换成新的文件名beauty.png。如果我们改为下面这句代码，也就是省略download属性值，则图片会使用旧的文件名princess.png。

<a href="img/princess.png" download>下载图片</a>

2.4.2 ol元素

HTML5为ol元素新增了一个reversed属性，用于设置列表顺序为降序显示。

语法

<ol reversed>
  <li></li>
  <li></li>
  <li></li>
</ol>

说明

在实际开发中，reversed属性用得很少，简单了解一下即可。

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
  <ol reversed>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ol>
</body>
</html>

浏览器预览效果如图2-38所示。

图2-38 reversed属性

2.4.3 small元素

语法

<small>你的内容</small>

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
</head>
<body>
    <small>Copyright ©2015-2017 绿叶学习网(www.lvyestudy.com), All Rights Reserved</small>
</body>
</html>

浏览器预览效果如图2-40所示。

图2-40 small元素

分析

对于图2-40所示效果，我们使用div、span等元素也可以实现，不过small元素更具语义化。

2.4.4 script元素

HTML5为script元素新增了两个属性：defer和async。这两个属性的作用都是加快页面的加载速度，两者区别如下。

▶ defer属性用于异步加载外部JavaScript文件，当异步加载完成后，该外部JavaScript文件不会立即执行，而是等到整个HTML文档加载完成才会执行。

▶ async属性用于异步加载外部JavaScript文件，当异步加载完成后，该外部JavaScript文件会立即执行，即使整个HTML文档还没有加载完成。

defer和async都是异步加载的，两者区别在于，异步加载外部JavaScript文件完成后何时执行。从上面也可以看出，defer属性相对于async属性来说，更符合大多数开发场景对脚本加载执行的要求。

举例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script src="js/async.js" async></script>
</head>
<body>
  <script>
    console.log("内部脚本");
  </script>
</body>
</html>

其中，async.js文件代码如下：

console.log("外部脚本");

浏览器预览效果如图2-41所示。

图2-41 async属性

分析

在正常情况下，输出顺序应该是：“外部脚本→内部脚本”。但是由于async属性用于异步加载外部JavaScript文件，当异步加载完成后，该外部JavaScript文件会立即执行，即使整个HTML文档还没有加载完成，因此输出顺序为：“内部脚本→外部脚本”。

2.5 本章练习

单选题

1．在HTML5中，我们可以使用（）元素来包含文章头部的标题、meta信息等。

A．head

B．header

C．h1

D．title

2．下面有关HTML5结构元素的说法中，不正确的是（）。

A．section元素内部必须要有一个header元素

B．aside元素一般用于表示跟周围区块相关的内容

C．nav元素可以用于表示顶部导航、侧栏导航和分页导航

D．对于一个区块，优先考虑section，然后再考虑article和aside

3．下面有关section元素的说法中，正确的是（）。

A．对于没有标题的内容区块，应该使用section元素

B．推荐使用section元素来代替article、aside、nav等元素

C．通常将section元素用作定义样式的页面容器

D．如果想要表示一个带有标题的区块，可以使用section元素

4．如果想要以滑动条的方式来获取某一个范围内的数字，我们可以使用（）。

A．<input type="number" />

B．<input type="range" />

C．<input type="num" />

D．<input type="slider" />

5．如果想要获取具体的时间，比如“07:20”，我们可以使用（）。

A．<input type="time" />

B．<input type="datetime" />

C．<input type="week" />

D．<input type="month" />

A．div

B．span

C．address

D．small

问答题

1．简述script元素中defer和async这两个属性的不同。（前端面试题）

2．怎样使低版本的IE浏览器支持HTML5新元素？（前端面试题）