一、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属性值 | 描述 |
---|---|---|
电子邮箱 | 包含 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/>