2.8 HTML 5其他新增的标签
HTML 5新增了不少标签，下面介绍几种有代表性的标签。
2.8.1 <progress>标签
HTML 5中的<progress>标签是一个非常实用的标签，它表示一段进度条，可以用在需要显示进度的程序中，例如在需要等待或者加载的场景中使用。该标签有以下两个属性可以进行设置：
· max：该属性描述了<progress>标签所表示的任务一共需要完成多少工作。
· value：该属性用来指定进度条已完成的工作量。
如果没有value属性，那么进度条的进度为“不确定”，也就是说进度条不会显示任何进度，我们无法估计当前的工作会在何时完成（比如在下载一个未知大小的文件时或者请求数据时），此时<progress>元素会呈现出一个动态的效果。
下面使用代码来演示<progress>标签的用法，如示例代码2-8-1所示。
示例代码2-8-1 <progress>标签
在浏览器中运行后，效果如图2-5所示。
图2-5 <progress>标签
从图2-5中可以观察到上面的<progress>标签中深色部分表示已完成的量，而下面的<progress>标签的深色部分其实是一个不断左右移动的滑块，用来表示处于等待中的进度条。读者可以在浏览器中运行这个演示代码，就会看到运行时的效果。
在Chrome浏览器中，如果想修改<progress>标签的样式，例如大小和颜色，那么可以使用如下代码：
需要注意的是，在上面的代码中采用了指定浏览器的前缀，所以只对Chrome浏览器有效，对于IE或者Firefox浏览器则是无效的。
2.8.2 <picture>标签
继HTML 5新增了许多新的标签之后，在子版本HTML 5.1中（截至2023年，HTML 5共有3个子版本，分别为HTML 5.1、HTML 5.2和HTML 5.3，其中HTML 5.3是最新的版本）又引入了几个“更时尚”的标签，其中就包括<picture>标签。在传统的PC端网页中，显示一张图片大多数会采用<img>标签，但是随着移动互联网的发展，网页越来越多地运行在屏幕大小多变、分辨率不同的移动端设备中，<picture>标签提供了一种新的图片显示方案，可以为当前移动设备选择更加适合的图片。
<picture>标签主要用法是在其内部创建若干个可以设置特性的<source>元素，每个<source>元素可以设置不同的srcset属性，代表不同的图片地址，同时可以设置不同的media属性，代表符合的特定条件。<picture>标签使用方法如示例代码2-8-2所示。
示例代码2-8-2 <picture>标签
<source>元素的属性及其含义如下：
· srcset：该属性类似<img>标签的src属性，用来设置图片的地址。
· media：该属性也叫作媒体查询，它的结果是一个布尔类型，用来判断是否满足查询条件，当条件成立时便会使用srcset设置的图片来显示。更多关于媒体查询的用法会在“第8章 移动Web屏幕适配”中进行讲解。
· type：该属性为<source>元素的srcset属性设置的图片资源指定一个MIME类型。如果当前设备不支持指定的类型，那么就不会使用该srcset设置的图片。
上面代码的具体含义：当屏幕宽度大于300px且小于400px时，会选用medium.jpg这张图片来显示；当屏幕宽度小于300px时，会选用small.jpg这张图片来显示；其余情况下则选用large.jpg这张图片来显示。在每一个<picture>标签中，都需要有一个<img>标签表示默认图片，当其他的<source>条件都不满足时，就会使用默认图片来显示。
针对不同移动设备加载不同的图片不仅能节约带宽，而且显示效果更好，即便图片差别不大，也可以在细节上提升用户体验。
2.8.3 <dialog>标签
<dialog>标签是在子版本HTML 5.2中引入的标签。<dialog>标签的作用是提供一个弹出的对话框元素，该元素的位置默认为在屏幕上左右居中，同时包括一个黑色的边框。该元素还具有open属性，用来表示显示对话框，但是在大多数情况下需要通过JavaScript来控制。
<dialog>标签的使用如示例代码2-8-3所示。
示例代码2-8-3 <dialog>标签
在浏览器中运行后，效果如图2-6所示。
图2-6 <dialog>标签的使用效果
在上面的代码中，open属性意味着该对话框是可见的。假如没有这个属性，那么这个对话框就会隐藏起来，直到我们使用JavaScript来显示它。
<dialog>标签对应的DOM元素有以下方法可供JavaScript来调用：
· show()和showModal()：这两个方法相同之处都是打开对话框，都会给<dialog>标签添加一个open属性。唯一区别就是show()方法会按照它在DOM中的位置弹出对话框，没有遮罩，而showModal()方法会出现遮罩，并且自动进行按键监控（即按了Esc键，弹出的对话框就会关闭）。在大多数情况下，应使用更智能的showModal()方法。
· close()：关闭对话框，即删除open属性，并且可以携带一个参数作为额外数据，传入的值可以通过DOM对象dialog.returnValue来获取。
<dialog>标签同时提供了两个事件：
· close事件：当关闭弹出的对话框时触发。
· cancel事件：当按下Esc键关闭对话框时触发。
使用JavaScript来操作弹出对话框的隐藏和显示，如示例代码2-8-4所示。
示例代码2-8-4 使用JavaScript操作<dialog>标签
标签在实际使用时都会对自定义的样式采用任意CSS样式来重置它的默认样式，但是对于含有遮罩层的弹出对话框，可以采用伪元素的方式去定义遮罩框的样式，代码如下：
