h1标签内容
p标签内容
H5新增属性及标签
H5标签变化
目录
- 新增的语义化标签
- 结构标签（语义化标签）
- 表单标签
- 媒体标签
- 其他标签
- 删除废弃的标签
- H5属性变化
- 表单属性
新增的语义化标签
一：结构标签（语义化标签）
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标签定义带有记号的文本。请在需要突出显示文本时使用 标签。
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 元素之类的媒介规定外部文本轨道。用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。
例子如下（播放带有字幕的视频）：
四：其他标签
1.details。details标签用于描述文档或文档某个部分的细节。与 标签 配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。
2.summary。summary标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。
3.bdi。把用户名从周围的文本方向设置中隔离出来
4.canvas。canvas标签定义图形，比如图表和其他图像。只是图形容器，您必须使用脚本来绘制图形。
5.command。可以定义命令按钮，比如单选按钮、复选框或按钮。只有 Internet Explorer 9支持
6.datalist。比select更牛。用户不但可以选择还可以自己输入。
7.embed。embed标签定义嵌入的内容，比如插件。例：
8.keygen。keygen标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。
9.meter。meter标签定义度量衡（一般用于进度条）。仅用于已知最大和最小值的度量。例：3/10
60%
10.output。执行计算然后在 删除废弃的标签
acronym、applet、basefont、big、center、dir、font、frame、frameset、noframes、s[删除线]、strike[删除线]、tt[定义打字机文本]、u[下划线文本]、 xmp[和pre类似]。
H5属性变化
一、表单属性
1.autofocus
对input[所有类型]、select、textarea与button指定autofocus属性。让元素在页面加载后自动获得焦点。一个页面只能有一个元素有autofocus属性，同时设置多个，则第一个生效。例如登录页面，页面加载后用户可直接输入用户名。
2.placeholder
对input[text, search, url, telephone, email 以及 password]、textarea指定placeholder属性，它会对用户的输入进行提示，提示用户期待什么样的输入。
3.form
对input[所有类型]、output、select、textarea、button与fieldset指定form属性。它声明属于哪个表单，然后将其放置在页面的任何位置，都在表单之内。代码例子如下：
下面的密码框在form表单之外，但仍然属于form表单会被提交到服务器
密 码：
4.required
适用于以下类型的 input[text, search, url, telephone, email, password, date pickers, number, checkbox, radio, file]。 表示用户提交时检查该元素输入域不能为空。
5.autocomplete
适用于form,input[text,search,url,telephone,email,password,datepickers,range,color]。设置"autocomplete"属性为"on"，则用户在自动完成域输入时，浏览器会在该域内显示填写的选项。
6.formaction、formenctype、formmethod、formnovalidate与formtarget
重置表单默认行为的新属性。适用于input[submit,image]、button元素
- formaction：重写表单action属性
- formenctype：重写表单enctype属性
- formmethod：重写表单method属性
- formnovalidate：重写表单novalidate属性
- formtarget：重写表单target属性
举例：formaction和formmethod
html中，一个表单内的所有元素都通过表单的action属性统一提交到另一个页面。html5中可通过formaction属性实现点击不同提交按钮，将表单提交到不同的页面。
html中一个表单只有一个action属性来对表单内所有元素统一指定提交页面，每个表单只有一个method属性统一指定提交方法。html5中新增的formmethod方法，可以实现不同按钮指定不同提交方法，比如
post，get等。
点 btn1 按钮，将表单以get方法提交到s1.jsp页面，从url也可以看出地址栏显示提交参数。
点 btn2 按钮，将表单以post方法提交到s2.jsp页面。
7.image提交按钮新增width,height属性
8.list
list属性与 datalist标签配合使用，用来规定输入域的datalist。datalist是输入域的选项列表，该元素类似select，但是比select更好的一点在，当用户要设定的值不在选择列表内时，允许自行输入,该元素本身不显示，当文本框获得焦点时以提示输入的方式显示。
list属性适用于input[text,search,url,telephone,email,datepickers,numbers,range,color]
举例：顺便说一下datalist和autocomplete配合使用
前面讲了autocomplete属性可以让用户完成域输入时，浏览器在该域内显示填写的选项。现在datalist元素与autocomplete属性配合使用可更好的提升用户体验。
在上面代码基础上给datalist增加autocomplete属性，即。
用户第一次输入http:www.google.com提交后，再次输入时会同时给出datalist的option提示和autocomplete增加的提示。
9.max，min和step属性
max,min和step属性用来为包含数字或日期的input类型规定限定或者说约束。
max属性规定输入域所允许的最大值。
min属性规定输入域允许的最小值。
step属性为输入域规定合法的数字间隔。（假如 step=“3”，则合法数字应该是 -3、0、3、6，以此类推）step 属性可以与 max 以及 min 属性配合使用，以创建合法值的范围。
max,min,step属性适用于input[datepickers,number，range]。
10.pattern
pattern属性用于验证输入字段的模式，其实就是正则表达式，不用再写js绑定正则验证了，非常方便。
pattern属性适用于input[text,search,url,telephone,email,password]
举例：给输入框定义了 Pattern 为“[A-z]{3}”，也就是包含三个字母的正则表达式约束，如果输入不合法，会提示title属性对应的值。
11.multiple
multiple属性规定输入域中可选择多个值。
multiple属性适用于input[email,file]。
举例：允许上传时一次上传多个文件。
12.fieldset标签增加disabled属性
html5为 fieldset元素增加了disabled属性，可以把它的子元素设为disabled状态,但是注意不包括legend里的元素。
13.label标签增加control属性
html5中为标签新增了control属性，在标签内部放置一个表单元素，通过标签的control属性访问该表单元素。
通过label的control属性控制input输入框的value，所以点“设置默认值”按钮，将邮编输入框值初始化为"718308"。
14.SelectionDirection
selectionDirection适用于input元素和textarea元素。
用户在input元素或textarea元素中用鼠标选取部分文字时，可以使用该属性来获取选取方向。当用户正向选取文字时，该属性值为"forward"，反向选取值为“backward”，且当用户没有选取任何文字时，该属性值为"forward"。
15.indeterminate
这个属性用来表示复选框部分选中，像qq邮箱中，邮件部分选中就有这样的效果。
二、链接属性
1.media
为a、area增加media属性。规定目标 URL 是为哪种类型的媒介/设备进行优化的，只能在href属性存在时使用。该属性用于规定目标 URL 是为特殊设备（比如 iPhone）、语音或打印媒介设计的，可接受多个值。
查询
取值如下：
运算符：
[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新增herflang、media、rel、type属性
herflang,media,rel,type为了保证a元素和link元素的一致性。
hreflang【取值language_code】规定在被链接文档中的文本的语言。只有当设置了 href 属性时，才能使用该属性。注释：该属性是纯咨询性的。
media【取值media query】：对何种设备优化。
rel 【取值alternate, author, bookmark, external, help, license, next, nofollow, noreferrer, prefetch, prev, search, sidebar, tag】规定当前文档与被链接文档/资源之间的关系。只有当使用 href 属性时，才能使用 rel 属性。
type【mime_type】规定目标 URL 的 MIME 类型。
举例：
手持设备
电视
表示超链接使用的是中文，并且这个超链接是个外部的超链接。
3.link新增sizes属性
为link增加sizes属性。sizes 属性规定被链接资源的尺寸。只有当被链接资源是图标时 (rel=“icon”)，才能使用该属性。该属性可接受多个值。值由空格分隔。
目前几乎没有主流浏览器支持 sizes 属性
4.base新增target属性
为base元素增加target属性，主要是保持与a元素的一致性。
举例：target表示页面中超链接都将使用_blank在新窗口中打开页面，且加上http://localhost地址，后面相当于相对地址。
base element target
三、其他属性
1.ol新增reversed属性
reversed是个bool属性，规定有序列表倒序。
举例：有序列表起始值50，倒序。
- coffee
- Tea
- Milk
结果值是：50.coffee
49.Tea
48.Milk
2.meta新增charset属性
3.menu新增type和label属性
menu在html4.01中废弃，后在html5中重新定义，为menu增加type和label属性。label为菜单定义一个菜单的标注，type属性让才当可以以上下文菜单、工具条与列表右键菜单三种形式出现。
label取值是文本，表示菜单名称。
type取值三个：
popup:浏览器不支持。
toolbar:浏览器不支持。
context:右键菜单。仅firefox支持。
toolbar:
context:
在黄色div区域右键可看到右键菜单的效果哦~
目前仅firefox支持menu属性
4.style新增scoped属性
html5为style增加scoped属性。有了一个样式作用域的概念，它允许我们为文档的指定部分定义样式，而不是整个文档。如果使用 “scoped” 属性，那么所规定的样式只能应用到 style 元素的父元素及其子元素。 scoped为开发单页面样式带来方便，但不能常用，否则css难以维护。
h1标签内容，受局部作用域的样式控制
p标签内容，受局部作用域的样式控制
5.script新增async属性
html5为script新增了一个async属性，用来定义脚本是否异步执行。async仅适用于外部脚本（只有在使用src属性时）。
和async【异步执行】相近的还有一个属性defer【推迟执行】，defer属性过去也有，但在html5中进行了更好的支持。
使用：
如果 async=“async”：脚本相对于页面的其余部分异步地执行，因为async表示下载脚本文件，之后马上运行，运行的同时并不阻止浏览器去解析下面的内容，所以称之为异步。
如果不使用 async 且 defer=“defer”：脚本将在页面完成解析时执行，因为defer表示脚本下载完并不执行而是等页面全部加载完之后再执行。
如果既不使用 async 也不使用 defer：在浏览器继续解析页面之前，立即读取并执行脚本。
运行效果，先弹出b，后弹出a。
6.html元素新增manifest属性
html5为html元素增加manifest，指向一个用于结合离线web应用API的应用程序缓存清单。开发离线web应用程序时他与API结合使用，定义一个URL，在这个URL上描述文档的缓存信息。
访问一次以后下次就是断网了也能看到以前的内容。
用法：
首先，创建mainfest文件
CACHE MANIFEST
#This is a comment
CACHE #需要缓存的文件
index.html
style.css
NETWORK: #不需要缓存的文件
search.php
login.php
FALLBACK: #资源不可用的情况下，重定向的地址
/api offline.html
然后将该mainfest文件的地址加到html属性中。
7.iframe元素新增sandbox、seamless、srcdoc属性
为iframe增加三个属性，sandbox、seamless、srcdoc。用来提高页面安全性，防止不信任的web页面执行某些操作。
seamless：有这个属性，表示iframe框架没有边框，没有边距。
srcdoc:用来指定内嵌框架的内容，srcdoc和src属性有顺序区分，有了srcdoc，后面src的内容被忽略。
举例:
sandbox：是个安全沙箱。有了sandbox，内嵌框架就有了严格的安全限制，禁止提交表单，禁止运行js脚本，且内嵌页面和外面页面不同源。等。
当然可以通过给sandbox设置来取消限制。可选值：
""：应用以下所有限制。
allow-scripts:运行运行JavaScript。
allow-same-origin:允许iframe内容被视为与包含文档有相同的源。
allow-top-navigation：允许iframe内容从包含文档导航（加载）内容。
allow-forms：运行提交表单。
大多内容引用于https://www.cnblogs.com/starof/p/4587178.html