目录
- 新增标签
- canvas标签
- 新多媒体元素
- 新表单元素
- 新的表单属性
- form新属性：
- input新属性
- autofocus 属性
- form 属性
- 表单重写属性
- height 和 width 属性
- list 属性
- min、max 和 step 属性
- multiple 属性
- pattern 属性
- placeholder 属性
- required 属性
- step 属性
- 新的语义元素
- 移除的标签
- 新增的input输入类型
新增标签
canvas标签
canvas元素本身并没有绘制能力,它只是一个图形容器，必须通过脚本(通常是 JavaScript)来绘制图形(比如图表和其他图像),canvas元素中的任何文本将会被显示在不支持canvas的浏览器中。
例子：通过 元素来显示一个红色的矩形：
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>新多媒体元素
1、<audio> 标签
定义声音，比如音乐或其他音频流。
提示：当在 <audio> 和 </audio> 之间放置文本内容，这些文本信息将会被显示在那些不支持 <audio> 标签的浏览器中。
语法：
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>属性：
2、<video> 标签
定义视频（video 或者 movie）
语法：
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 video 标签。
</video>属性：
3、<source>标签
定义多媒体资源<video>和 <audio>
允许您规定两个视频/音频文件共浏览器根据它对媒体类型或者编解码器的支持进行选择。
语法：
<video width="320" height="240" controls="controls">
<source src="forrest_gump.mp4" type="video/mp4" />
<source src="forrest_gump.ogg" type="video/ogg" />
<track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
<track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
</video>属性：
4、<embed>标签
定义嵌入的内容，比如图片、视频、HTML页面。
现在已经不建议使用 标签了，可以使用 <img>、<iframe>、<video>、<audio> 等标签代替。
5、<track>标签
为诸如 <video>和<audio> 元素之类的媒介规定外部文本轨道。
属性
新表单元素
1、<datalist>标签
定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>运行结果：
2、<keygen>标签
规定用于表单的密钥对生成器字段，当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）.
该标签已在新的Web标准中被废弃
<form action="demo_keygen.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>属性：
3、<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>运行结果：
新的表单属性
form新属性：
- autocomplete 属性
规定 form 或 input 域应该拥有自动完成功能。
autocomplete 适用于<form>标签，以及以下类型的<input>标签：text, search, url, telephone, email, password, datepickers, range 以及 color
<form action="demo_form.asp" method="get" 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>当用户在设置了该属性的表单元素中，填写并提交了信息后，刷新或者重新打开页面后，之前填写的信息就可自动显示出来
运行结果：
- novalidate 属性
-是一个 boolean(布尔) 属性.，规定在提交表单时不应该验证 form 或 input 域。
<form action="demo-form.php" novalidate>
E-mail: <input type="email" name="user_email">
<input type="submit">
</form>input新属性
autofocus 属性
是一个 boolean 属性,当页面加载完毕时，域自动地获得焦点。
form 属性
输入域所属的一个或多个表单。如需引用一个以上的表单，必须使用空格分隔的列表。
<form action="demo-form.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
</form>
//Last name表单仍然属于form表单
Last name: <input type="text" name="lname" form="form1">表单重写属性
- formaction 属性（重写action属性）
用于描述表单提交的URL地址，使用此属性可以将表单数据提交到对应的URL地址中
注意: formaction 属性会覆盖<form>元素中的action属性，且只能用于 type=“submit” 和 type=“image”.
<input type="submit" formaction="demo-admin.php"- formenctype 属性（重写enctype属性）
设置表单提交到服务器所使用什么数据编码 (只对method=“post” 的form表单有用)
注意: 该属性会覆盖<form>元素中的enctype属性，且只能用于 type=“submit” 和 type=“image”.
//以默认编码格式提交表单数据
<input type="submit" value="提交">
//以Multipart/form-data编码格式提交表单数据
<input type="submit" formenctype="multipart/form-data">- formmethod 属性（重写method 属性）
- 定义了表单提交的方式，覆盖了 元素的 method 属性。
<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>- formnovalidate 属性（重写novalidate属性.）
<form action="demo-form.php">
E-mail: <input type="email" name="userid"><br>
<input type="submit" value="提交"><br>
<input type="submit" formnovalidate="formnovalidate" value="不验证提交">
</form>- formtarget 属性（重写target属性）
指定一个名称或一个关键字来指明表单提交数据接收后的展示。
height 和 width 属性
height 和 width 属性规定用于 image 类型的 标签的图像高度和宽度。
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">list 属性
规定输入域的 datalist。datalist 是输入域的自定义列表。
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
min、max 和 step 属性
用于为包含数字或日期的 input 类型规定限定（约束）。
注意: min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range
multiple 属性
- 是一个 boolean 属性，规定
<input>元素中可选择多个值。
注意: multiple 属性适用于以下类型的<input>标签：email 和 file
pattern 属性
描述了一个正则表达式用于验证 <input> 元素的值。
注意:pattern 属性适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password.
下面的例子显示了一个只能包含三个字母的文本域（不含数字及特殊字符）：
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">placeholder 属性
提供一种提示（hint），描述输入域所期待的值
简短的提示在用户输入值前会显示在输入域上。
required 属性
是一个 boolean 属性.规定必须在提交之前填写输入域（不能为空）。
step 属性
为输入域规定合法的数字间隔。
如果 step=“3”，则合法的数是 -3,0,3,6 等
提示： step 属性可以与 max 和 min 属性创建一个区域值.
新的语义元素
- 什么是语义元素?
语义元素：语义= 意义
语义元素 = 有意义的元素
一个语义元素能够清楚的描述其意义给浏览器和开发者。
无语义 元素实例:<div> 和 <span>无需考虑内容.
语义元素实例:<form>, <table>, and <img>清楚的定义了它的内容. -
<article>元素
定义页面独立的内容区域。其内容容本身必须是有意义的且必须是独立于文档的其余部分。
<article>
<h1>Internet Explorer 9</h1>
<p> Windows Internet Explorer 9(缩写为 IE9 )在2011年3月14日21:00 发布。</p>
</article>-
<aside>元素
定义页面的侧边栏内容。
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside><section>元素
定义定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。<figure>规定独立的流内容（图像、图表、照片、代码等等），其内容应该与主内容相关，但如果被删除，也不应对文档流产生影响。<figcaption>定义<figure>元素的标题，应该被置于 “figure” 元素的第一个或最后一个子元素的位置。<footer>定义 section 或 document 的页脚<header>定义了文档的头部区域<nav>定义导航链接的部分。<bdi>允许您设置一段文本，使其脱离其父元素的文本方向设置。<command>定义命令按钮，比如单选按钮、复选框或按钮
目前，主流浏览器都不支持<command>标签。只有 IE 9 支持<command>标签，其他之前版本或者之后版本的 IE 浏览器不支持<command>标签。<details>用于描述文档或文档某个部分的细节<dialog>定义对话框，比如提示框<summary>标签包含 details 元素的标题<mark>定义带有记号的文本。<meter>定义度量衡。仅用于已知最大和最小值的度量。
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>运行结果：
-
<progress>定义任何类型的任务的进度。 -
<ruby>定义 ruby 注释（中文注音或字符） -
<rt>定义字符（中文注音或字符）的解释或发音。 18、 -
<rp>在 ruby 注释中使用，定义不支持 ruby 元素的浏
览器所显示的内容。 -
<time>定义日期或时间。 -
<wbr>规定在文本中的何处适合添加换行符。
我们可以开始使用这些语义元素吗?
以上的元素都是块元素(除了<figcaption>).
为了让这些块及元素在所有版本的浏览器中生效，你需要在样式表文件中设置一下属性 (以下样式代码可以让旧版本浏览器支持本章介绍的块级元素)
header, section, footer, aside, nav, article, figure
{
display: block;
}移除的标签
-
<acronym>标签定义首字母缩略词。
HTML5 不支持<acronym>标签。可使用<abbr>标签代替它。<abbr>用来表示一个缩写词或者首字母缩略词，如"WWW"或者"NATO"。通过对缩写词语进行标记，您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。
在某些浏览器中，当您把鼠标移至带有 标签的 title 属性可被用来展示缩写词/首字母缩略词的完整版本。
The<abbr title="World Health Organization">WHO</abbr> was founded in 1948.运行结果如下：
-
<applet>标签定义嵌入的 applet
HTML5 不支持<applet>标签。请使用<object>标签代替它。
定义一个嵌入的对象。使用此元素可以向您的 XHTML 页面添加多媒体(例如在网页中嵌入 Java 小程序, PDF 阅读器, Flash 播放器) 。此元素允许您规定插入 HTML 文档中的对象的数据和参数，以及可用来显示和操作数据的代码。
在 HTML5 中，objects 可以在form表单中提交，不再出现在<head>元素区域内。
实例：用于包含HTML文件：
<object width="100%" height="500px" data="snippet.html"></object>插入一张图片:
<object data="audi.jpeg"></object>-
<basefont>标签定义文档中所有文本的默认颜色、大小和字体。
<head>
<basefont color="red" size="5" />
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>-
<big>标签用来制作更大的文本。
<p><big>这个文本比较大。</big></p>-
<center>标签将 HTML 网页中的文本进行水平居中处理 -
<dir>标签被用来定义目录列表。
<dir>
<li>html</li>
<li>xhtml</li>
<li>css</li>
</dir>-
<font>标签规定 文本的字体、字体尺寸、字体颜色。
HTML5 不支持<basefont>、<big>、<center>、<dir>、<font>标签。请用 CSS 代替。 -
<frame>标签定义<frameset>中的子窗口（框架）<frameset>中的每个<frame>都可以设置不同的属性，比如 border、scrolling, noresize 等等。 -
<frameset>标签定义一个框架集。<frameset>元素被用来组织一个或者多个 元素。每个<frame>有各自独立的文档。<frameset>元素规定在框架集中存在多少列或多少行，以及每行每列占用的百分比/像素。 -
<noframes>元素可为那些不支持框架的浏览器显示文本
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
<noframes>
Sorry, your browser does not handle frames!
</noframes>
</frameset>
</html>-
<strike>定义加删除线文本。
HTML5 不支持<strike>标签。请用<del>标签代替
<p>
<del>这是一条友善出现的文本</del>
</p>-
<tt>标签定义打字机文本。
HTML5 不支持<tt>标签。请用 CSS 代替。
新增的input输入类型
- color类型用在input字段主要用于选取颜色，如下所示：
选择你喜欢的颜色:
<input type="color" name="favcolor">运行结果：
- Date类型允许你从一个日期选择器选择一个日期
生日:
<input type="date" name="bday">运行结果：
- datetime类型允许你选择一个日期（UTC 时间）
生日 (日期和时间):
<input type="datetime" name="bdaytime">- datetime-local 类型允许你选择一个日期和时间 (无时区)
- email 类型用于应该包含 e-mail 地址的输入域，在提交表单时，会自动验证 email 域的值是否合法有效
- month 类型允许你选择一个月份。
- number 类型用于应该包含数值的输入域，您还能够设定对所接受的数字的限定
数量 ( 1 到 5 之间 ):
<input type="number" name="quantity" min="1" max="5">使用下面的属性来规定对数字类型的限定：
- range 类型用于应该包含一定范围内数字值的输入域，显示为滑动条。
<input type="range" name="points" min="1" max="10">-运行结果：
== 使用下面的属性来规定对数字类型的限定：==
max - 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔
value - 规定默认值
- search 类型用于搜索域，比如站点搜索或 Google 搜索。
- tel类型定义输入电话号码字段:
- time 类型允许你选择一个时间。
- url 类型用于应该包含 URL 地址的输入域,在提交表单时，会自动验证 url 域的值。
- week 类型允许你选择周和年。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
