【前端系列教程之HTML5】06_HTML5新标签

一、HTML5新布局标签

        许多现有网站都包含以下HTML代码： <div id="nav">, <div class="header">, 或者 <div id="footer">, 来指明导航链接, 头部, 以及尾部.

        首先你要搞清楚一个概念，HTML并不是用来写页面样式的，而是用来表示一个网页的基本架构的，样式用CSS来实现。

        HTML5除了提出很炫的新效果以外还加强了语义化结构

        HTML5新增的还有article、nav、header、footer.....等等等，其实现效果都是和div一样没有效果，但是合理使用却能让页面结构更加清晰有逻辑。

        如果了解H5之前的HTML，会发现之前页面布局完全就是使用的div+css,但是div是不能滥用的,只能用来做整体的布局，细节部分还是要用其他标签，一方面程序可读性和维护性加强，另一方面，可以用下级选择器来写样式，减少了class和id的命名，可以精简网页的结构；而且语义化结构 有条理才能让搜索引擎更加友好。

        HTML5 提供了新的语义元素来明确一个Web页面的不同部分:

1.1 HTML5 header 元素

        <header>元素描述了文档的头部区域

        <header>元素主要用于定义内容的介绍展示区域.

        在页面中你可以使用多个<header> 元素(文档头、独立内容头).

        原来写一个页面。比如有头部和底部。我们都是定义一个div,只不过头部有一个class=header; 尾部的div是class=footer;

        现在html5出现以后，主张语义化标签。现在我们写样式的时候。选择器直接就写header就可以了。不需要这么写 div.header这样的好处是使得文档结构层次清晰。利于代码编写和开发;还有搜索引擎优化等等的好处。

1.2 HTML5 nav 元素

        <nav> 标签定义导航链接的部分。

        <nav> 元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在 <nav> 元素中!

<nav>
   <ul>
    <li><a href="#public">Public demonstrations</a></li>
    <li><a href="#destroy">Demolitions</a></li>
    ...more...
   </ul>
</nav>

1.3 HTML5 article 元素

        <article> 标签定义独立的内容。

        article元素代表文档、页面或应用程序中独立的、完整的、可以独自被外部引用的内容。它可以是一篇博客或报刊中的文章、一篇论坛帖子、一段用户评论或独立的插件，或其他任何独立的内容。除了内容部分，一个article元素通常有它自己的标题（一般放在一个header元素里面），有时还有自己的脚注。

        注：article元素是可以嵌套使用的，内层的内容在原则上需要与外层的内容相关联。例如，一篇博客文章中，针对该文章的评论就可以使用嵌套article元素的方式；用来呈现评论的article元素被包含在表示整体内容的article元素里面。

1.4 HTML5 section 元素

        <section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

        根据W3C HTML5文档: section 包含了一组内容及其标题。

        从字面理解就是区块、部分的意思，相对于article元素更加广泛，每个区块都可以使用，比如页面里的导航菜单、文章正文、文章的评论等。

        1、section元素用于对网站或应用程序中页面上的内容进行分块，section元素的作用是对页面上的内容进行分块，或者说对文章进行分段，；

        2、一个section元素通常由内容及其标题组成。通常不推荐为那些没有标题的内容使用section元素，

        3、section元素并非一个普通的容器元素；当一个内容需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素；

        4、如果article、nav、aside元素都符合某条件，那么就不要用section元素定义；

        5、section元素中的内容可以单独存储到数据库中或输出到word文档中。

1.5 HTML5 aside 元素

        <aside> 标签定义页面主区域内容之外的内容（比如侧边栏）。

        aside 标签的内容应与主区域的内容相关.

1.6 HTML5 footer 元素

        <footer> 元素描述了文档的底部区域.

        <footer> 元素应该包含它的包含元素

        一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等

        文档中你可以使用多个 <footer>元素.

1.7 HTML5 figure 和 figcaption 元素

        <figure>标签规定独立的流内容（图像、图表、照片、代码等等）。

        <figure> 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

        <figcaption> 标签定义 <figure> 元素的标题.

        <figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

<figure>
	<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
	<figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption>
</figure>

二、HTML5新表单元素

2.1 HTML5 新的 Input 类型

        HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。

控件名称	type属性值	描述
电子邮箱	email	包含 e-mail 地址的输入域(有校验)，
拾色器	color	color 类型用在input字段主要用于选取颜色 选择你喜欢的颜色: <input type="color" name="favcolor">
日期字段	date datetime datetime-local month week time	定义日期字段：包含年月日 定义日期字段：（UTC 时间）(仅opera支持) 定义日期字段：包含年月日时分（无时区） 定义日期：年月 定义年中的周数 定义时间
数值框	number	输入类型用于包含数字值的输入字段，可以设置可接受数字的限制。 使用min属性和max属性设置最小和最大值 step设置数字间隔 如果step="3" ,那么数值间隔是3
数值滑块空间	range	用于应该包含一定范围内数字值的输入域。。 range 类型显示为滑动条。 使用min属性和max属性设置最小和最大值,step设置数字间隔
搜索框	search	用于搜索字段，比如站内搜索或谷歌搜索等。
电话号码框	tel	定义输入电话号码字段,但是不会进行校验
url地址	url	包含 URL 地址的输入字段。会在提交表单时对 url 字段的值自动进行验证。

        注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。

2.2 HTML5 新的表单控件

        <datalist> 元素规定输入域的选项列表。

        <datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：

        使用 <input> 元素的list属性与 <datalist> 元素绑定.input里面定义属性list和datalist绑定,datalist需要有一个id来命名,必须是id属性命名

<input type = “text” name=”data” list=”dlist”>
<datalist id=”dlist”>
    <option value="CAD" >CAD</option>
    <option value="HTML5">HTML5</option>
    <option value="JAVASCRIPT" >JAVASCRIPT</option>
    <option value=".NET">.NET</option>
    <option value="JAVA">JAVA</option>
</datalist>

HTML5 keygen 元素 (不推荐)

        <keygen> 元素的作用是提供一种验证用户的可靠方法。

        <keygen>标签规定用于表单的密钥对生成器字段。

        当提交表单时，会生成两个键，一个是私钥，一个公钥。

        私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

正常来说验证用户一般在后端来实现；而且keygen有一定不足之处:

• 证书(Certificates)在不同的系统里不是容易方便的

• 没有在一个标准的位置存储私钥

• 在html页面看到<keygen>标签生成的内容总是让人困惑和难以理解

• 不支持算法(RSA, DSA, ECC等)

• 签名只能基于MD5，而不能使用其他的加密算法

HTML5 output 元素

        <output> 元素用于不同类型的输出，比如计算或脚本输出：

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
	0<input type="range" id="a" value="50">100+<input type="number" id="b" value="50">
	=<output name="x" for="a b"></output>
</form>

<p><strong>注意:</strong>  Internet Explorer 不支持 output 标签。</p>

2.3 HTML5 新的表单属性

1、form / input autocomplete 属性:

        autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

        当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

        提示: autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。

        注意: autocomplete 适用于 <form> 标签，以及以下类型的<input> 标签：text, search, url, tel, email, password, datepickers, range 以及 color。

        HTML form 中开启 autocomplete (一个 input 字段关闭 autocomplete ):

<form action="" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

2、form novalidate 属性:

        novalidate 属性是一个 boolean(布尔) 属性.

        novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

3、input placeholder 属性:

        placeholder 属性提供一种提示（hint），描述输入域所期待的值。

        简短的提示在用户输入值前会显示在输入域上。

        注意: placeholder 属性适用于以下类型的 <input> 标签：text, search, url, tel, email 以及 password。

4、input required 属性:

        required 属性规定必须在提交之前填写输入域（不能为空）。

        注意:required 属性适用于以下类型的 <input> 标签：text, search, url, tel, email, password, date pickers, number, checkbox, radio 以及 file。

5、input step 属性:

        step 属性为输入域规定合法的数字间隔。

        如果 step="3"，则合法的数是 -3,0,3,6 等

        提示： step 属性可以与 max 和 min 属性创建一个区域值.

6、input autofocus 属性:

        autofocus 属性是一个 boolean 属性.

        autofocus 属性规定在页面加载时，域自动地获得焦点。

        让 "First name" input 输入域在页面载入时自动聚焦：

First name:<input type="text" name="fname" autofocus>

7、input form 属性:

        form 属性规定输入域所属的一个或多个表单。

        提示:如需引用一个以上的表单，请使用空格分隔的列表。

<form action="" id="form1">
	First name: <input type="text" name="fname"><br>
	<input type="submit" value="提交">
</form>

Last name: <input type="text" name="lname" form="form1">

8、input formaction 属性:

        formaction 属性用于描述表单提交的URL地址.

        formaction 属性会覆盖<form> 元素中的action属性.

        注意: formaction 属性用于 type="submit" 和 type="image".

        以下HTMLform表单包含了两个不同地址的提交按钮：

以下HTMLform表单包含了两个不同地址的提交按钮：
<form action="demo-form.php">
	First name: <input type="text" name="fname"><br>
	Last name: <input type="text" name="lname"><br>
	<input type="submit" value="提交"><br>
	<input type="submit" formaction="demo-admin.php" value="提交">
</form>

9、input formenctype 属性:

        formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method="post" 表单)

        formenctype 属性覆盖 form 元素的 enctype 属性。

        注意: 该属性与 type="submit" 和 type="image" 配合使用。

        第一个提交按钮已默认编码发送表单数据，第二个提交按钮以 "multipart/form-data" 编码格式发送表单数据:

<form action="demo-post_enctype.php" method="post">
	First name: <input type="text" name="fname"><br>
	<input type="submit" value="提交">
	<input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交">
</form>

10、input formmethod 属性:

        formmethod 属性定义了表单提交的方式。

        formmethod 属性覆盖了 <form> 元素的 method 属性。

        注意: 该属性可以与 type="submit" 和 type="image" 配合使用。

11、input formnovalidate 属性

        novalidate 属性是一个 boolean 属性.

        novalidate属性描述了 <input> 元素在表单提交时无需被验证。

        formnovalidate 属性会覆盖 <form> 元素的novalidate属性.

        注意: formnovalidate 属性与type="submit一起使用重新定义表单提交方式实例:

<form action="demo-form.php" method="get">
	First name: <input type="text" name="fname"><br>
	Last name: <input type="text" name="lname"><br>
	<input type="submit" value="提交">
	<input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交">
</form>

12、input height 和 width 属性:

        height 和 width 属性规定用于 image 类型的 <input> 标签的图像高度和宽度。

        注意: height 和 width 属性只适用于 image 类型的<input> 标签。

        提示:图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度，图像所需的空间 在加载页时会被保留。如果没有这些属性， 浏览器不知道图像的大小，并不能预留 适当的空间。图片在加载过程中会使页面布局效果改变 （尽管图片已加载）。

        定义了一个图像提交按钮, 使用了 height 和 width 属性:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

13、input list 属性:

        list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

14、input multiple 属性:

        multiple 属性是一个 boolean 属性.

        multiple 属性规定<input> 元素中可选择多个值。

        注意: multiple 属性适用于以下类型的 <input> 标签： file

15、input pattern 属性:

        pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。

        注意:pattern 属性适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password.

        提示： 是用来全局 title 属性描述了模式.

        提示： 在我们的 JavaScript 教程中学习到有关正则表达式的内容

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

三、HTML5多媒体标签

3.1 HTML5 Video(视频)

        很多站点都会使用到视频. HTML5 提供了展示视频的标准。

        直到现在，仍然不存在一项旨在网页上显示视频的标准。

        今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。

        HTML5 规定了一种通过 video 元素来包含视频的标准方法。

浏览器支持

        Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video> 元素.

        注意: Internet Explorer 8 或者更早的IE版本不支持 <video> 元素。

HTML5 (视频)- 如何工作

        如需在 HTML5 中显示视频，您所有需要的是：

<video width="320" height="240" controls> 
    <source src="movie.mp4" type="video/mp4"> 
    <source src="movie.ogg" type="video/ogg"> 
    您的浏览器不支持Video标签。
</video>

        <video> 元素提供了 播放、暂停和音量控件来控制视频。

        同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。

        <video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

        <video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：

视频格式与浏览器的支持

        当前， <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg:

浏览器	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES (从 Opera 25 起)	YES	YES

• MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件

• WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

• Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

视频格式

格式	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

什么是 MIME TYPE？

        首先，我们要了解浏览器是如何处理内容的。在浏览器中显示的内容有 HTML、有 XML、有 GIF、还有 Flash ……那么，浏览器是如何区分它们，决定什么内容用什么形式来显示呢？答案是 MIME Type，也就是该资源的媒体类型。

        媒体类型通常是通过 HTTP 协议，由 Web 服务器告知浏览器的，更准确地说，是通过 Content-Type 来表示的，例如:Content-Type: text/HTML

        表示内容是 text/HTML 类型，也就是超文本文件。为什么是“text/HTML”而不是“HTML/text”或者别的什么？MIME Type 不是个人指定的，是经过 ietf 组织协商，以 RFC 的形式作为建议的标准发布在网上的，大多数的 Web 服务器和用户代理都会支持这个规范 (顺便说一句，Email 附件的类型也是通过 MIME Type 指定的)。

        通常只有一些在互联网上获得广泛应用的格式才会获得一个 MIME Type，如果是某个客户端自己定义的格式，一般只能以 application/x- 开头。

        XHTML 正是一个获得广泛应用的格式，因此，在 RFC 3236 中，说明了 XHTML 格式文件的 MIME Type 应该是 application/xHTML+XML。

        当然，处理本地的文件，在没有人告诉浏览器某个文件的 MIME Type 的情况下，浏览器也会做一些默认的处理，这可能和你在操作系统中给文件配置的 MIME Type 有关。比如在 Windows 下，打开注册表的“HKEY_LOCAL_MACHINESOFTWAREClassesMIMEDatabaseContent Type”主键，你可以看到所有 MIME Type 的配置信息。

video标签相关属性

属性	值	描述
Muted	Muted	定义的视频的初始状态.目前仅支持muted.
autoplay	autoplay	如果指定，视频会在准备好(如已取得可播放视频)后自动播放.
controls	controls	添加播放控制及音量控制功能栏.
height	Pixels	指定播放器的高度，以pixel为单位.
loop	loop	如果指定，视频将重复播放.
poster	url	指定视频的预览图.
preload	preload	如果指定，视频会在加页面加载过程中被加载。当Autoplay被指定时，会被忽略。auto - 当页面加载后载入整个音频meta - 当页面加载后只载入元数据none - 当页面加载后不载入音频
src	url	目标视频的URL.
width	Pixels	指定播放器的宽度，以pixel为单位.

使用 DOM 进行控制<video>

        HTML5 <video> 和 <audio> 元素同样拥有方法、属性和事件。

        <video>和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制.

        其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。

实例 :为视频创建简单的播放/暂停以及调整尺寸控件：

         上面的例子调用了两个方法：play() 和 pause()。它同时使用了两个属性：paused 和 width。

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>视频控制</title> 
</head>
<body> 

<div style="text-align:center"> 
  <button onclick="playPause()">播放/暂停</button> 
  <button onclick="makeBig()">放大</button>
  <button onclick="makeSmall()">缩小</button>
  <button onclick="makeNormal()">普通</button>
  <br> 
  <video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video 标签。
  </video>
</div> 

<script> 
var myVideo=document.getElementById("video1"); 

function playPause()
{ 
	if (myVideo.paused) 
	  myVideo.play(); 
	else 
	  myVideo.pause(); 
} 

	function makeBig()
{ 
	myVideo.width=560; 
} 

	function makeSmall()
{ 
	myVideo.width=320; 
} 

	function makeNormal()
{ 
	myVideo.width=420; 
} 
</script> 

</body> 
</html>

3.2 HTML5 Audio(音频)

        直到现在，仍然不存在一项旨在网页上播放音频的标准。

        今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。

        HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。

浏览器支持

        Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素.

        注意: Internet Explorer 8 及更早IE版本不支持 <audio> 元素.

HTML5 Audio - 如何工作

        如需在 HTML5 中播放音频，你需要使用以下代码：

<audio controls> 
    <source src="horse.ogg" type="audio/ogg"> 
    <source src="horse.mp3" type="audio/mpeg"> 
    您的浏览器不支持 audio 元素。 
</audio>

        control 属性供添加播放、暂停和音量控件。

        在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。

        <audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件

音频格式及浏览器支持

浏览器	MP3	Wav	Ogg
Internet Explorer 9+	YES	NO	NO
Chrome 6+	YES	YES	YES
Firefox 3.6+	YES	YES	YES
Safari 5+	YES	YES	NO
Opera 10+	YES	YES	YES

音频格式的MIME类型

Format	MIME-type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

Audio标签属性

属性	属性值	描述
autoplay	autoplay	如果指定, 音频会在准备好后立即播放.
controls	controls	显示播放控制工具栏..
loop	loop	如果指定，则循环播放.
preload	preload	如果指定，音频会在加页面加载过程中被加载。 当Autoplay被指定时，会被忽略。
src	url	目标音频的URL.

3.3 source标签

        video和audio元素的子元素，可指定多个文件来源，用来解决浏览器的兼容问题

        如果使用了source元素，则不可以在video和audio中设置src属性

        <source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。

        <source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

四、其他常用HTML5新标签

4.1 HTML5文本格式化标签

        <time> 标签定义日期或时间，或者两者;

        <mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 < mark > 标签。

        <ruby> 在文字上方注音，不常用，主流浏览器基本都支持,需要使用rt标签定义注音

        例如:

<ruby>饕餮<rt>tao tie</rt></ruby>

4.2 HTML5度量条

        定义已知范围或分数值内的标量测量,计数仪表,也被称为 gauge（尺度）。例子：磁盘用量、查询结果的相关性，等等。

        注释：<meter> 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 <progress> 标签。

属性名	属性作用
value	规定计量条当前默认显示值
max	规定范围的最大值,默认值为1
min	规定范围的最小值,默认值为0
low	规定被视作低的标准
high	规定被视作高标准
form	规定所属的一个或多个表单
optimum	定义度量条的最佳标准值，最佳必须在低和高之间

当前内存剩余:<br><br>
<meter max="" min="" value="0.2"></meter><br><br>
<meter max="100" min="0" value="45"></meter><br><br>
低:<meter max="100" min="0" value="10" low="30" high="80"></meter><br><br>
中:<meter max="100" min="0" value="50" low="30" high="80"></meter><br><br>
高:<meter max="100" min="0" value="90" low="30" high="80"></meter><br><br>
最佳:<meter max="100" min="0" value="60" low="30" high="80" optimum="60"></meter><br><br>

4.3 HTML5进度条

        <progress> 标签定义运行中的任务进度（进程）。

        请将 <progress> 标签与 JavaScript 一起使用来显示任务的进度。

        progress元素的属性

                max属性:规定当前进度的最大值

                value属性:规定进度条当前默认显示值

                form属性:规定进度条所属的一个或多个表单

        注: max和value属性的值必须是一个类型数值,可以是小数或整数

<progress></progress><br><br>
<progress value="30" max="100"></progress><br><br>
<progress value="0.6" max="1"></progress><br><br>
<!--设置百分比无效-->
<progress value="40%" max="100%"></progress><br><br>

4.4 HTML5详情标签

        details" 元素用于描述有关文档或文档片段的详细信息。

        "summary" 元素应该是 "details" 元素的第一个子元素。可以为details定义标题.标题是可见的,用户点击标题时,会显示details中的内容。

        details元素的属性:

                open属性:规定在html页面中details是可见的

        注: 目前还不是所有浏览器都支持,但是之后肯定会都支持的

<details>
    <h3>该商品的月销售量:6000</h3>
    <ul>
        <li>8000以上:爆品<meter max="100" min="0" value="82" high="80" low="30"><meter></li>
        <li>3000-8000:一般<meter max="100" min="0" value="50" high="80" low="30"><meter></li>
        <li>3000以下:滞销商品<meter max="100" min="0" value="20" high="80" low="30"><meter></li>
    </ul>
</details>

<details>
    <summary>月销售量统计</summary>
    <h3>该商品的月销售量:6000</h3>
    <ul>
        <li>8000以上:爆品<meter max="100" min="0" value="82" high="80" low="30"><meter></li>
        <li>3000-8000:一般<meter max="100" min="0" value="50" high="80" low="30"><meter></li>
        <li>3000以下:滞销商品<meter max="100" min="0" value="20" high="80" low="30"><meter></li>
</ul>
</details><br/><br/>