【前端系列教程之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属性值 | 描述 |
|---|---|---|
| 电子邮箱 | 包含 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/>【前端系列教程之HTML5】06_HTML5新标签相关推荐
- 【前端系列教程之HTML5】02_HTML文档结构
一.HTML文件(文档)定义 试想:我们上网访问到底做了什么? 上一节提到URL问题,组成部分由HTTP,服务器地址,端口号,资源路径;这些东西组成了我们上网访问所谓的网址,其中有服务器地址和路径,从 ...
- 【前端系列教程之HTML5】01_HTML概述
一.Web前端开发工具 1.1.常用前端开发工具介绍 软件开发工具是用于辅助软件生命周期过程的基于计算机的工具.通常可以设计并实现工具来支持特定的软件工程方法,减少手工方式管理的负担. 作为一个前端开 ...
- 【前端系列教程之CSS3】04_CSS定位和浮动详解
一.CSS 定位(重点) 1.1 CSS 定位属性 position 属性指定了元素的定位类型. position 属性的五个值: static 静态定位,无特殊定位,对象遵循正常文档流.top,ri ...
- 【前端系列教程之JavaScript】01_JavaScript概述和引入方式
JavaScript概述 JavaScript可以做什么 页面的各种动画效果 页面的点击/移入响应 对客户端数据进行验证 各种页面小游戏 用途总结 嵌入动态文本于HTML页面. 对浏览器事件做出响应( ...
- 【前端系列教程之CSS3】01_CSS概述、引入规则和三大机制
前言 最准确的网页设计思路是把网页分成三个层次,即:结构层.表示层.行为层. HTML:结构层,Hyper Text Markup Language,超文本标记语言 CSS:表现层,Cascading ...
- 【前端系列教程之JavaScript】08_BOM编程
一.BOM概述 1.1.Web API API的概念 API(Application Programming Interface,应用程序接口)是一些预先定义的函数,或指软件系统不同组成部分衔接的约定 ...
- 【前端系列教程之CSS3】06_CSS3边框、渐变、文本效果等
一.CSS3边框(重要) 用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop. 1.1 CSS3边框圆角 在 CSS2 中添加圆角棘手.我们不得不在 ...
- 【前端系列教程之jQuery】06_jQuery CSS样式操作
一.CSS样式操作 CSS css(name|pro|[,val|fn]) 访问匹配元素的样式属性. jQuery 1.8中,当你使用CSS属性在css()或animate()中,我们将根据浏览器自动 ...
- 【前端系列教程之JavaScript】16_JavaScript函数进阶
函数进阶 函数回顾 函数的定义方式 函数声明 function foo () {} 函数表达式 var foo = function () {} 函数声明与函数表达式的区别 函数声明必须有名字 函数声 ...
最新文章
- linux uefo引导 win_基于UEFI和GPT模式下U盘安装windows8.1和Linux双启动教程
- VS2017更新后 在WIN7上找不到 stdio.h等的问题
- Struts2 拦截器： 拦截器与过滤器区别
- oracle 文件写 n r,[oracle]log_archive_dest_n与DB_RECOVERY_FILE_DEST
- P2024 [NOI2001]食物链[扩展域并查集]
- [转] css3变形属性transform
- 【FFMPEG系列】之ffmpeg怎么利用gdb调试以及gdb调试快捷键
- 不同类型变量与零值比较
- SQL数据库每日自动备份
- 比较算盘和计算机的优点,UPD4526BC 二进制与十进制相比较的优点
- android无线投屏到电视盒子,【沙发管家】教你如何把电脑视频投屏到智能电视/电视盒子上！...
- 计算机桌面标题栏怎么锁定,(excel图表标题设置)在excel表格中，如何锁定标题栏不被修改？...
- 万能通用！权限系统就该这么设计
- linux-命令简写——归原
- 电脑重装系统按哪个键进入u盘启动项
- 小学生学计算机图片大全集,小学生电脑绘画作品欣赏
- 萌妹子Python入门指北（二）
- 利用名词到代词的蒸馏以理解动词，面向任务的实例分割注意力模型
- 朴素安静的宅寂风格装修
- 物联网数据 时序数据库_有关防止物联网数据泄露的方法的最终清单
热门文章
- 中文自然语言处理--基于 textCNN 的电影推荐系统
- 蓝桥杯 — 超声波测距模块的使用
- openCV专栏(四)：阀值处理+噪音滤波
- 【VScode报错】＞ ools-1.1.3\debugAdapters\bin\WindowsDebugLa‘--stdout=Microsoft-MIEngine-Out-aguzdga1-npu
- 【汽车雷达通往自动驾驶的关键技术】
- 两个单链表相交的一系列问题－Java
- 多个经纬度地点数据，如何同时在地图上标注出来（路径显示）
- android 分享wifi app下载安装,WiFi共享精灵移动版下载
- mobl中的下载的wineclipse版本缺少googlemap.mobl文件库
- 2017年软考好玩的七律诗一首