H5 label change
table of Contents
- The new semantic tags
- Tag structure (semantic labels)
- Form tag
- Media label
- Other labels
- Delete obsolete label
- H5 attribute changes
- Form Properties
The new semantic tags
一：结构标签（语义化标签）
1.section。section标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
2.article。article标签装载显示一个独立的文章内容。还可以嵌套，则内层的artilce对外层的article标签有隶属的关系。例如，一个博客文章，可以用article显示，然后一 些评论可以以article的形式嵌入其中。
3.aside。标签内容之外与标签内容相关的辅助信息；
4.header。header标签定义文档的页面组合，通常是一些引导和导航信息。
5.hgroup。hgroup标签用于对网页或区段的标题元素（h1-h6）进行组合。例如，在一个区段中你有连续的h系列的标签元素，则可以用hgroup将他们括起来。
6.footer。页尾信息；
7.nav。nav标签定义显示导航链接。
8.figure。独立的单元，例如某个有图片与内容的新闻块。
9.time。time标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码，这样， 举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。
10.mark。mark标签定义带有记号的文本。请在需要突出显示文本时使用 <mark> 标签。
11.figure。figure标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
12.figcaption。figcaption 标签定义 figure 元素的标题（caption）。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
13.contextmenu。contextmenu 标签添加到系统右键菜单 [貌似这个功能只有firefox支持]
二：表单标签
1.email。必须输入邮件。
2.url。必须输入url地址。
3.number。必须输入数值。
4.range。必须输入一定范围内的数值。
5.Date Pickers。日期选择器。
6.search。搜索常规的文本域。
7.color。颜色。
三：媒体标签
1.video。视频
2.audio。音频
3.embed。嵌入内容（包括各种媒体），Midi、Wav、AU、MP3、Flash、AIFF等。
4.source。source设置两份或多份源文件的音频播放器。浏览器应该选择它所支持的文件（如果有的话）
5.track。诸如 video 元素之类的媒介规定外部文本轨道。用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。
例子如下（播放带有字幕的视频）：
<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>
四：其他标签
1.details。details标签用于描述文档或文档某个部分的细节。与 <summary> 标签 配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。
2.summary。summary标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。
3.bdi。把用户名从周围的文本方向设置中隔离出来
4.canvas。canvas标签定义图形，比如图表和其他图像。只是图形容器，您必须使用脚本来绘制图形。
5.command。可以定义命令按钮，比如单选按钮、复选框或按钮。只有 Internet Explorer 9支持
6.datalist。比select更牛。用户不但可以选择还可以自己输入。
7.embed。embed标签定义嵌入的内容，比如插件。例：<embed src="helloworld.swf" />
8.keygen。keygen标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。
9.meter。meter标签定义度量衡（一般用于进度条）。仅用于已知最大和最小值的度量。例：<meter value="3" min="0" max="10">3/10</meter><br><meter value="0.6">60%</meter>
10.output。执行计算然后在 <output> 元素中显示结果
11.progress。progress标签定义运行中的进度（进程）。例：<progress value="22" max="100"></progress>
12.rp。rp标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
13.rt。rt标签定义字符（中文注音或字符）的解释或发音。
14.ruby。ruby标签定义 ruby 注释（中文注音或字符）。<ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
Delete obsolete label
acronym, applet, basefont, big, center, dir, font, frame, frameset, noframes, s [strikethrough], strike [strikethrough], tt [defined typewriter text], u [underlined text], xmp [and pre similar ].
H5 attribute changes
First, the Form Properties
1.autofocus
of input [all types], select, textarea autofocus attribute specified with the button. Let the elements get focus automatically when the page is loaded. A page can have only one element has autofocus attribute, and set more, the first effect. For example login page after page loads a user can enter a user name directly.
2.placeholder
on input [text, search, url, telephone, email and password], textarea placeholder attribute specified, it will prompt the user's input, prompts the user to look forward to what kind of input.
3.form
of input [all types], output, select, textarea, button and fieldset specified form attribute. It belongs declaration form, and then place it anywhere on the page, they are in the form of. Code examples are as follows:
<form action="" method="" id="user_form">
<p>用户名：<input type="text" autofocus placeholder="用户名"/></p>
</form>
<p>下面的密码框在form表单之外，但仍然属于form表单会被提交到服务器</p>
<p>密 码：<input type="password" placeholder="密码" form="user_form"/></p>
4.required
for the following types of input [text, search, url, telephone, email, password, date pickers, number, checkbox, radio, file]. Check field indicates that the input element can not be empty when the user submits.
5.autocomplete
suitable form, input [text, search, url, telephone, email, password, datepickers, range, color]. Set "autocomplete" attribute is "on", the user automatically when the input domain, the browser will display an option to fill in the region.
6.formaction, formenctype, formmethod, formnovalidate and formtarget
reset form new property default behavior. Suitable button element input [submit, image],
- formaction: Overrides the form action attribute
- formenctype: Overrides the form enctype attribute
- formmethod: Overrides the form method attribute
- formnovalidate: Overrides the form novalidate property
- formtarget: Overrides the form target attribute
Example: formaction and formmethod
html, one all the elements are unified in the form submitted to another page through the action attribute of the form. html5 can be achieved in different click the submit button to submit the form to a different page by formaction property.
html in a form action attribute to submit only one page all the elements specified in the unified form pairs, each form has only one uniform method attribute specifies the submission method. html5 formmethod in new methods can achieve different submit button to specify different methods, such as
post, get and so on.
<form action="server.jsp" method="get" id="user_form">
E-mail:
<input type="email" name="useremail" /><br />
<input type="submit" id="btn1" formmethod="get" formaction="s1.jsp" value="get方法提交到s1.jsp" /><br />
<input type="submit" id="btn2" formmethod="post" formaction="s2.jsp" value="post方法提交到s2.jsp" /><br />
</form>
Point btn1 button to submit the form to get the method to s1.jsp page, it can also be seen from url address bar to submit arguments.
Point btn2 button to submit the form to the post method to s2.jsp page.
7.image submit button to add width, height property
<form action="server.jsp" method="get" id="user_form">
<input type="image" src="img/submit.png" width="30px" height="30px"/>
</form>
8.list
List attributes datalist labels used in conjunction datalist for a predetermined input field. datalist input field is a list of options, select the elements similar to, but better than that in the select, when the value of the user selected not to be set within the list, to allow input by the element itself is not displayed, the focus is obtained when the text box when displayed in a manner prompt input.
The list attribute applied to input [text, search, url, telephone, email, datepickers, numbers, range, color]
<form action="demo_form.jsp" method="get">
主页:<input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="baidu" value="http://www.baidu.com" />
<option label="qq" value="http://www.qq.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>
<input type="submit" />
</form>
Example: By the way datalist and used in conjunction with autocomplete
When speaking in front of the autocomplete attribute allows the user to enter complete domain, the browser displays the option to fill in the region. Now datalist element used in conjunction with the autocomplete attribute can better enhance the user experience.
On the basis of the above code to increase datalist autocomplete attribute, i.e..
The first user input http: www.google.com Once submitted, you will be given the option datalist hints and tips while autocomplete increase input again.
9.max, min and step attributes
max, min and step attributes used to define or constrain input types containing numbers or dates.
max attribute specifies the maximum allowed input field.
min attribute specifies the minimum allowed value input field.
step attribute for the input field specifies the legal number intervals. (If step = "3", then the figure should be -3,0,3,6 legitimate, and so on) step can be used with properties max and min attributes to create a range of legal values.
max, min, step attribute applies to input [datepickers, number, range].
<form action="demo_form.jsp" method="get">
<label>time小时，分钟：<input type="time" name="user_time"></label>
<p>input类型time在firefox下不支持，给出模拟实现方案</p>
<label><input type="number" min="0" max="23" step="1">时</label>
<label><input type="number" min="0" max="59">分</label>
<input type="submit" value="提交"/>
</form>
10.pattern
pattern attribute is used to validate the input mode field, in fact, regular expressions, do not write js binding regular verification, and very convenient.
pattern attribute applies to input [text, search, url, telephone, email, password]
Example: to input box as defined Pattern "[Az] {3}", i.e. containing three-letter regex constraints, if the input is not valid, will prompt a value corresponding to the attribute title.
<form action="#" method="get" id="user_form">
Country code:
<input type="text" name="country_code" pattern="[A-z]{3}"title="Three letter country code" />
<input type="submit" />
</form>
11.multiple
Multiple attribute specifies a plurality of input field select value.
multiple attribute applies to input [email, file].
Example: upload multiple files allowed to upload.
<form action="demo_form.jsp" method="get">
选择图片:<input type="file" name="img" multiple="multiple" />
<input type="submit" />
</form>
12.fieldset increase disabled tag attributes
html5 fieldset element is to increase the disabled attribute, it can be a child element is set to disabled state, but pay attention to legend, the elements not included.
<form>
<fieldset name="userInfo">
<legend>
<label><input type="checkbox" checked name="enableUserInfo" onchange="form.userInfo.disabled=!checked">启用用户信息</label>
</legend>
<p>
<label>姓名:<input name="userName" required></label>
</p>
<fieldset name="personalInfo">
<legend>
<label><input type="checkbox" checked name="enablePersonalInfo" onchange="form.personalInfo.disabled=!checked">个人信息</label>
</legend>
<p>
<label>生日:<input name="birthday" required></label>
</p>
</fieldset>
<fieldset name="companyInfo">
<legend>
<label><input type="checkbox" checked name="enableCompanyInfo" onchange="form.companyInfo.disabled=!checked">公司信息</label>
</legend>
<p>
<label>公司名称:<input name="companyName" required></label>
</p>
</fieldset>
</fieldset>
</form>
13.label increase control attribute tag
html5 is added in the control tag attributes, a form element is placed inside the label, access control attributes by the form element tag.
<script>
function setValue(){
var label=document.getElementById("label");
var textbox=label.control;
textbox.value="718308";
}
</script>
<form>
<label id="label">
邮编：
<input id="txt_zip" maxlength="6">
<small>请输入6位数字</small>
</label>
<input type="button" value="设置默认值" onclick="setValue()">
</form>
通过label的control属性控制input输入框的value，所以点“设置默认值”按钮，将邮编输入框值初始化为"718308"。
14.SelectionDirection
selectionDirection suitable for input element and textarea elements.
Mouse to select the user input elements or portions of text with textarea element, you can use this property to get the selected direction. When the user selected text forward, the attribute value is "forward", the value of the reverse select "backward", and when the user does not select any character, the attribute value is "forward".
15.indeterminate
This property is used to indicate the portion of the check box is selected, like qq mailbox, select Mail section has such an effect.
<form>
<input type="checkbox" checked/>
<input type="checkbox" indeterminate/>只写一个indeterminate不起作用
<input type="checkbox" id="test"/>
<input type="checkbox" />
</form>
<script>
document.getElementById('test').indeterminate = true;
</script>
Second, the link properties
1.media
is a, area increases media attribute. Specify the target URL is optimized for what type of media / devices, can only be used when href attribute is present. This attribute is used to specify a destination URL for a particular device (such as the iPhone), or a voice print medium designed to accept multiple values.
<a href="http://www.baidu.com" media="print and (resolution:300dpi)" >查询</a>
取值如下：
运算符：
[and]and运算符，[not]not运算符，[,]or运算符。
设备：
all：默认，适合所有设备。
aural：语音合成器
braille：盲文反馈装置
handheld：手持设备（小屏幕，有限的带宽）
projection：投影机
print：打印预览模式/打印页面
screen：计算机屏幕
tty：电传打字机以及使用等宽字符网格的类似媒介
tv：电视类型设备（低分辨率，有限的分页能力）
值：
width:规定目标显示区域的宽度，可使用"min-" 和 "max-" 前缀。例：media="screen and (min-width:500px)"
height:同width，用来设置高度。
device-width:规定目标显示器/纸张的宽度。可使用 "min-" 和 "max-" 前缀。例：media="screen and (device-width:500px)"
device-height:同device-height,用来设置高度。
orientation:英文意思"方向"，用来规定目标显示器/纸张的取向。可能的值："portrait" 或 "landscape"。例：media="all and(orientation: landscape)"
aspect-ratio：规定目标显示区域的宽高比。可使用 "min-" 和 "max-" 前缀。例：media="screen and (aspect-ratio:16/9)"
device-aspect-ratio：规定目标显示器/纸张的 device-width/device-height 比率。可使用 "min-" 和 "max-" 前缀。例：media="screen and (aspect-ratio:16/9)"
color：规定目标显示器的 bits per color。可使用 "min-" 和 "max-" 前缀。例：media="screen and (color:3)"
color-index：规定目标显示器能够处理的颜色数。可使用 "min-" 和 "max-" 前缀。例：media="screen and (min-color-index:256)"
monochrome：规定在单色帧缓冲中的每像素比特。可使用 "min-" 和 "max-" 前缀。例：media="screen and (monochrome:2)"
resolution：规定目标显示器/纸张的像素密度 (dpi or dpcm)。可使用 "min-" 和 "max-" 前缀。例：media="print and (resolution:300dpi)"
scan：规定 tv 显示器的扫描方法。可能的值是："progressive" 和 "interlace"。例：media="tv and (scan:interlace)"
grid：规定输出设备是网格还是位图。可能的值："1" 代表网格，"0" 是其他。例：media="handheld and (grid:1)"
2.area new herflang, media, rel, type attribute
herflang, media, rel, type elements in order to ensure consistency and a link element.
hreflang value language_code [The provisions in the language of the text links in the document. Only when the href attribute is set to use the property. Note: This attribute is purely advisory.
media media query [value]: optimization of what device.
[rel value of alternate, author, bookmark, external, help, license, next, nofollow, noreferrer, prefetch, prev, search, sidebar, tag] provisions of the current document and the linked documents the relationship between / resources. Only when using the href attribute, you can use the rel attribute.
mime_type type [] specified MIME type of the target URL.
For example:
<a media="handheld" href="#">手持设备</a>
<a media="tv" href="#">电视</a>
<a href=http://www.mukewang.com/" hreflang="zh" rel="external">
表示超链接使用的是中文，并且这个超链接是个外部的超链接。
3.link new sizes attribute
to link increase property sizes. sizes attribute specifies the size of the link resources. Only when the resource is linked icon (rel = "icon"), in order to use the property. The plurality of property values acceptable. Values are separated by a space.
There are few major browsers support sizes attribute
4.base new target attribute
the increase target attribute to base elements are consistent with a major element.
For example: target presentation page hyperlinks will use _blank open the page in a new window, and add http: // localhost address, followed by the equivalent relative address.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>base element target</title>
<base href="http://localhost/ " target="_blank">
</head>
<body>
<a href="a.html" >a.html页面</a>
</body>
</html>
Third, other properties
1.ol new reversed attribute
reversed a bool property, the provisions of an ordered list in reverse order.
Example: start value of 50 ordered list, in reverse order.
<ol start="50" reversed>
<li>coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
The resulting value is: 50.coffee
49.Tea
48.Milk
2.meta new charset attribute
3.menu new label attribute type and
menu html4.01 discarded. After html5 redefined in order to increase the menu label type and properties. define a label for the label menu menu, type attribute lets only when you can, toolbar and right-click menu lists three forms appear in the context menu.
The value is a text label indicates the menu name.
type three values:
popup: browser does not support.
toolbar: browser does not support.
context: the context menu. Only firefox support.
toolbar:
<menu type="toolbar" label="menu">
<li><input type="checkbox" />red</li>
<li><input type="checkbox">blue</li>
</menu>
context:
<div contextmenu="mymenu">
<p>在黄色div区域右键可看到右键菜单的效果哦~</p>
<menu type="context" id="mymenu">
<menuitem label="自定义刷新" onclick="window.location.reload();" icon="ico_reload.png"></menuitem>
<menu label="自定义分享到...">
<menuitem label="Twitter" icon="ico_twitter.png" onclick="window.open('//twitter.com/intent/tweet?text=' + window.location.href);"></menuitem>
<menuitem label="Facebook" icon="ico_facebook.png" onclick="window.open('//facebook.com/sharer/sharer.php?u=' + window.location.href);"></menuitem>
</menu>
<menuitem label="自定义发送邮件" onclick="window.location='mailto:?body='+window.location.href;"></menuitem>
</menu>
</div>
<p>目前仅firefox支持menu属性</p>
4.style new scoped attribute
html5 increase scoped attribute style. With a scope of the concept of style, it allows us to define a style for a specified portion of the document, rather than the entire document. If you use the "scoped" attribute, then the style specified only apply to the parent element style element and its child elements. scoped for the development of single-page style brings convenience, but not used, otherwise css difficult to maintain.
<!-- 这个article正常使用head里声明的style -->
<article>
<h1>h1标签内容</h1>
<p>p标签内容</p>
</article>
<article>
<!-- 这里声明的style只能让该article以及子元素使用 -->
<style scoped>
h1,p{ color: hotpink; }
article { border: solid 1px hotpink; }
</style>
<h1>h1标签内容，受局部作用域的样式控制</h1>
<p>p标签内容，受局部作用域的样式控制</p>
</article>
5.script New async attribute
html5 for the script adds a async attribute that defines whether the script asynchronously. async only applies to external script (only when using the src attribute).
Async [and] there is a property asynchronous execution defer similar delays in the implementation of [], defer property in the past also, but were better in support html5.
use:
If async = "async": scripts asynchronously relative to the rest of the page execution, because the download async script file, after running immediately, while running does not prevent the browser to parse the following, so called asynchronous.
If you do not use async and defer = "defer": script will be executed when the page is completed parsing, because defer represents the script does not execute downloaded again performed after all but finished, etc. page loads.
If neither async nor defer: Before proceeding to resolve the page in a browser, reads and executes the script immediately.
<!DOCTYPE>
<meta charset="utf-8"></meta>
<meta http-equiv="prama" content="no-cache"><!--禁止掉页面缓存-->
<script defer src="http://code.jquery.com/jquery-1.11.3.min.js" onload="alert('a')"></script>
<script async src="http://code.jquery.com/jquery-migrate-1.2.1.min.js" onload="alert('b')"></script>
运行效果，先弹出b，后弹出a。
6.html new elements manifest attributes
html5 html elements to increase the manifest, point to a combination of offline web application API's application cache manifest. The development of offline web applications use him in conjunction with API, the definition of a URL, cache information described in this document URL.
Access is off the network the next time after the previous contents can be seen.
usage:
First, create a file mainfest
CACHE MANIFEST
#This is a comment
CACHE #需要缓存的文件
index.html
style.css
NETWORK: #不需要缓存的文件
search.php
login.php
FALLBACK: #资源不可用的情况下，重定向的地址
/api offline.html
The address is then added to mainfest html file attribute.
<html manifest="/offline.manifest">
7.iframe elements of the new sandbox, seamless, srcdoc property
to increase iframe three properties, sandbox, seamless, srcdoc. To improve the security of the page, to prevent untrusted web pages perform certain operations.
seamless: has the property, represents the iframe framework no border, no margins.
srcdoc: iframe used to specify content, srcdoc src attribute and sequential distinction, with srcdoc, the contents are ignored behind src.
For example:
<iframe srcdoc="<h1>srcdoc出现，后面src内容被忽略</h1>" src="http://www.baidu.com"></iframe>
sandbox: a security sandbox. With the sandbox, iframe have a strict security restrictions, prohibit the submission form, prohibit running js script, and embedded in pages and pages of different outside sources. Wait.
Of course, the lifting of restrictions can be set by a sandbox. Optional values:
""：应用以下所有限制。
allow-scripts:运行运行JavaScript。
allow-same-origin:允许iframe内容被视为与包含文档有相同的源。
allow-top-navigation：允许iframe内容从包含文档导航（加载）内容。
allow-forms：运行提交表单。
Most of the contents of references to https://www.cnblogs.com/starof/p/4587178.html