大佬教程收集整理的这篇文章主要介绍了Html5，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
HTML5 ≈ 标签(HTML5) +CSS3+JAVASCRIPT
@H_801_9@IE9 @H_801_9@chrome谷歌 @H_801_9@FF @H_801_9@Opear @H_801_9@Safari 2010开始支持HTML5
DTD文档声明 <!DOCTYPE html>
字符集 <Meta charset=”utf-8”>
标签书写的改变
br、hr、img、input、link、param、keygen、area、base、col、wbr、.....
li、tr、td、dd、dt、option、p...
head、body、html、tbody、thead、colgroup
有些单属性设置的时候可能需要加上 布尔值 checked=true（格式）
新增的标签:
Hgroup一组标题区域
<figure>
<figcaption><img src="t011f8ea1d640ac90d5.jpg" ></figcaption>
<P>中国反恐工作面临“严峻”挑战</P>
</figure>
figcaption 描述配合标签 （定义描述主体如图片，把图片包含其内部）
Address 真实地址或者URL地址区域
新增的其他标签:
格式:(普通格式)
<audio src=”音频地址” controls autoplay loop>后备内容：您的浏览器不支持该功能</audio>
格式:（完整格式）
<audio controls>
<source src=“音频地址” type=”audio/mp3”>
<source src=“音频地址” type=” audio/wav”>
<source src=“音频地址” type=”audio/ogg”>
</audio>
值二：auto 预先加载(打开页面就加载)
<source src=“视频地址” type=” video/mp4”>
<source src=“视频地址” type=” video/视频格式”>
Width:设置视频窗口宽度
Height：高度
Canvas 画布标签
embed 多媒体标签 1属性src=“用于引入flash路径”
<embed src="http://img5.3lian.com/flash/01/26/58.swf"></embed>
<meter max="100" min="0" value="59" low="60" high="85" optimum="100"></meter>
@H_815_5@max 最大值 min 最小值 value指定值
high指定边线值 大于指定值 默认绿色警告
low 指定边线值 小于指定值 默认红色警告
optimum 设置是否大于最大边线值或者小于最小边线值 optimum若大于最大边线值->指定值大于最大边线值时为绿色
optimum若小于最小边线值->指定值小于最小边线值时为绿色（也是默认的无optimum设定时的状态）
Progress 进度条标签
<progress max="100" value="0"></progress>
@H_815_5@max 进度条最大值-整数
value 进度条当前值-整数
<p>近几日，<mark style="BACkground:purple">苍老师</mark>要到烟台演出，据说门票580元，可惜俺去不了</p>
<p><time datetiR_556_11845@e="2014-05-08T19:30:28">今晚日落时分</time>，在宿舍洗干净等着我.</p>
<p><time datetiR_556_11845@e="2014-05-08T19:30:28" pubdate>今晚日落时分</time>，发布MH370事故报告.</p>
属性1: datetiR_556_11845@e解释具体的时间
格式: 年-月-日T时:分:秒
年-月-日T时:分:秒+08:00 带时区时间
年-月-日T时:分:秒Z 国际统一时间
@H_962_489@Ruby 设定文字的拼音或者其他音译解释
<ruby>
@H_962_489@漢 <rt>han</rt>
</ruby>
@H_962_489@<p>猥(zheng)琐(zhi)</p>
Details 细节描述标签
使用:
dialog 对话标签
dt标签用于表示姓名或者昵称
dd用来表示对话内容
1.可以使用CSS代替的标签
font、big、center、u、tt、basefont、s、Strike..
2.框架集标签
frame和frameset 被删除了，但是iframe没有删除
bgsound、applet、blink、marquee..
4.被替换的标签
Rb->ruby 代替
Acronym->abbr代替
Xmp->code 代替
。。。
新增的属性（智能表单）
新增的表单属性.type的新类型
email 邮件地址表单
url URL地址表单
number 数值表单
range 滑块表单
search 搜索表单 chrome 可以使用results=”n” 搜索小图标
color 颜色表单
tel 电话表单 没有验证规则 和type=text没区别
date 日期表单
time 时间表单
datetiR_556_11845@e 完整的日期时间表单
week 周选取表单
@H_524_517@month 月选取表单
表单的新用法:(分散式表单书写规则)
html5为了布局的方便，设定了新的表单使用方式
2.为所有当前form中的表单标签添加form属性指定form标签的id，即可绑定该表单,任意位置都可以使用.
其他表单属性：
@H_801_9@Autofocus 自动获取焦点属性 （焦点只能有一个）
@H_801_9@placeholder 用于设定表单的提示信息 不会随表单提交给服务器
@H_801_9@Form 为表单设定归属于哪一个form表单当中（值为form标签的id）
@H_801_9@required 设定字段的值必须由用户填写,不写不能提交
@H_801_9@@H_524_517@min 设定表单的最小值 （number类型 、时间类型、滑块类型）
@H_801_9@@H_524_517@max 设定表单的最大值 （number类型、时间类型、滑块类型）
@H_801_9@@H_524_517@multiple 多选下拉列表属性(SELEct) 多选文件上传表单（input type=”file”）
@H_801_9@Step 设定表单数值的增加或者减小的值(适合number表单)
@H_801_9@Pattern 设定一个表单的自定义验证规则.
@H_801_9@Formaction 设定当前提交按钮的提交页面（该设置会覆盖form标签的action属性）
@H_801_9@Formmethod 设定当前按钮的提交方式 （该设置会覆盖form标签的method属性）
@H_801_9@Formenctype 设定当前按钮的提交类型（该设置会覆盖form标签的enctype属性）
@H_801_9@Formtarget 设定当前按钮提交之后的页面打开方式.（该设置会覆盖form标签的target属性）
@H_801_9@Formnovalidate 设定当前按钮提交的验证方式.（该设置会覆盖form标签的novalidate属性）
@H_801_9@novalidate 禁止验证属性 form标签使用后，所有该表单中需要验证的表单将不做验证操作
新增的其他属性:
style标签 增加了scoped属性 用于设定CSS作用范围（重要但是不能用）
html标签增加了 mainfest属性 离线网站应用的属性
例如 body 标签中 bgcolor、BACkground、vlink、alink、等...
link标签中target属性,img标签中name属性...
新增的全局属性
ContentEditable 设定内容可以编辑
设定具有该属性的元素是否具备可以编辑的功能（页面中临时改变，如果需要改变真实内容，需要其他语言配合）
designMode 设定页面所有元素是否可以编辑（只能在JS中设置）
可以再JS中通过语法
document.designMode= ‘on’ ; 设置该选项
Hidden 设定元素是否显示
在HTML5中 该属性可以对任何元素使用，设定该元素为不显示状态，效果和display:none效果相似
Spellcheck 设定元素进行英文拼写检测属性（不支持汉字）（未实现）
tabindex 设定tab键的索引属性
video 视频标签
格式:(普通格式)
<video src=”视频地址” controls>后备内容</video >
Width:设置视频的宽度
height：设置视频的高度
poster: 设置视频预览图片
Details 细节描述标签
<details>
<p>
</p>
</details>
<input type="text" name="user" value="" list="lamp84" />
<datalist id="lamp84">
<option>丛涛的不归路</option>
<option>丛浩的不归路</option>
</datalist>
dialog 对话标签
<dialog>
<dt>丛浩:</dt>
<dd>小玲，今天晚上有空吗？</dd>
<dt>小玲:</dt>
<dd>我们一起翻滚吧~</dd>
<dt>莹莹:</dt>
<dd>你们不要这样子啦~~</dd>
</dialog>
abbr 缩写代码标签<abbr title="开房菜">KFC</abbr>
1.可以使用CSS代替的标签font、big.
2.框架集标签frame和frameset 被删除，但iframe木删除
3.只有部分浏览器支持的标签bgsound、marquee..
4.被替换的标签
Rb->ruby 代替-解释汉字
Acronym->abbr代替 <abbr title="开房菜">KFC</abbr>
Xmp->code 代替-代码
。。。
新增的表单属性.type的新类型
email 邮件-规定格式@
url URL地址-规定格式http://www...
number 数值
range 滑块(@H_777_1296@max="100" value="0")
滑块:<input type="range" name="fen1" @H_530_189@max="100" value="0" />
<output onforminput="value=fen1.value" >0</output>
search 搜索chrome 可以使用results=”n” 搜索小图标
<input type="search" name="keywords" value="" results="n" />
color 颜色表单
tel 电话表单 没有验证规则 和type=text没区别
date 日期表单
time 时间表单
datetiR_556_11845@e 完整的日期时间表单
week 周选取表单
@H_700_109@month 月选取表单
表单的新用法:(分散式表单书写规则)
@H_801_9@@H_344_1450@<!--使用前-->@H_801_9@
<form action="1.PHP" method="get">
<input type="text" name="username" value="" placeholder="请输入名字" autofocus >
<!-- @H_801_9@Autofocus 自动获取焦点(单属性)->
<!-- @H_801_9@placeholder设定表单的提示信息不会自动提交和value的区别->
<button type="submit">提交</button>
</form>
@H_801_9@@H_344_1450@<!--使用后-->@H_801_9@
<form action="1.PHP" method="get" id="myform"></form>
<input type="text" name="username" value="" form="myform" >
<button type="submit" form="myform">提交</button>
表单的其他属性
@H_801_9@required 设定字段的值必须由用户填写,不写不能提
用户名:<input type="text" name="username" value="" required /><br>
@H_801_9@@H_193_1551@min 设定最小值 （number 、时间、滑块）
@H_801_9@@H_193_1551@max 设定最大值 （number、时间、滑块）
@H_801_9@@H_193_1551@multiple多选文件上传
多文件上传:<input type="file" name="face" @H_700_109@multiple value="" /><br>
数值<input type="number" name="no" value="" step="5" >
@H_801_9@Pattern自定义验证规则 @H_801_9@=“”
电话:<input type="tel" name="tel" value="" pattern="\d{11}"><br>
电话：<input type="tel" name="tel" value="" pattern="^1((3\d)|(47)|(5[0-35-9])|(8[0-35-9]))\d{8}$"><br>
@H_801_9@Formaction@H_801_9@ 当前按钮提交页面formaction="2.PHP"
@H_801_9@Formmethod@H_801_9@ 当前按钮提交方式f ormmethod="post"
@H_801_9@Formenctype@H_801_9@ 当前按钮提交类型
@H_801_9@Formtarget@H_801_9@ 当前按钮提交后页面打开方式formtarget="_blank"
@H_801_9@Formnovalidate@H_801_9@ 当前按钮页面无验证提交（单属性）
@H_801_9@novalidate@H_801_9@ form里面的的禁止验证属性 设定后，该页面中所有设定验证的表单将不做验证就可提交（单属性）
新增的其他属性:
a 增media属性
Meta 增charset
link增size
base 增target
ol 增reversed----à列表的序号倒过来
<!doctype html>
<Meta charset="utf-8" >
<ol reversed type="a">
<li>曾小玲
<li>付莹莹
<li>许雪颖
<li>詹慧婷
</ol
@H_801_9@style标签 增加了scoped属性 用于设定CSS作用范围（重要但是不能用）@H_801_9@
script增 async
html增mainfest 离线网站应用的属性
1.页面中表示样式的属性全部删除bgcolor、BACkground、vlink、alink、等...
2.删除了无用属性link标签中target属性,img标签中name属性...
新增的全局属性
contentEditable 设定内容可以编辑
设定具有该属性的元素是否具备可以编辑的功能（页面中临时改变，如果需要改变真实内容，需要其他语言配合）
designMode 设定页面所有元素是否可以编辑（只能在JS中设置）
可以再JS中通过语法
document.designMode= ‘on’ ; 设置该选项
hidden 设定元素是否显示
在HTML5中 该属性可以对任何元素使用，设定该元素为不显示状态，效果和display:none效果相似
@H_962_489@Spellcheck 设定元素进行英文拼写检测属性单属性（不支持汉字）（未实现）
tabindex 设定tab键的索引顺序
<!doctype html>
<Meta charset="utf-8" >
<script>
//document.designMode=‘on‘;
</script>
<p hidden>请问:饥饿和饥渴有什么区别？答案:区别就是可以表示黄瓜的2种的不同用法!</p>
<p contentEditable>请问:饥饿和饥渴有什么区别？答案:区别就是可以表示黄瓜的2种的不同用法!</p>
<p hidden>请问:饥饿和饥渴有什么区别？答案:区别就是可以表示黄瓜的2种的不同用法!</p>
<p spellcheck> spellcheck </p>
<hr> value=”” placeholder=”请输入名字”该属性 不会提交默认字
<input type="text" name="user" value="" tabindex=1 autofocus />
<input type="text" name="user" value="" tabindex=4>
<input type="text" name="user" value="" tabindex=2 />
<input type="text" name="user" value="" tabindex=5>
<input type="text" name="user" value="" tabindex=3 />
<button type="submit" tabindex=6>提交</button>
@H_801_9@HTML5及DOM2.3扩展@H_801_9@
innerHTML 获取/设置元素内部所有的内容，包括文本，标签注释等...解析HTML标签
innerText / textContent获取/设置元素内容的文本内容，该方法设置时不解析HTML标签
outerHTML 获取当前元素和元素内部的所有内容，包括文本、注释、标签等....可以解析HTML标签效果.
outerText获取当前元素和元素内部的所有文本内容，但是效果和innerText一样 不解析HTML标签
@H_801_9@节点新增的属性：关系属性@H_801_9@
firstElementChild 获取元素的第一个子元素节点
lastElementChild 获取元素的最后一个子元素节点
prev@L_944_353@SELER_556_11845@entSibling获去上一个兄弟元素节点
ChildElementCount 获取某个元素的子元素节点个数
children获取元素所有子元素节点的列表数组
getElementsByClassName() 通过元素的class属性来获取节点集合
格式1：document.getElementsByClassName() 全文档查找
格式2: 元素节点.getElementsByClassName() 元素内部查找
getElementsByTagName() 通过元素的标签名来会获取属性节点集合
格式1：document.getElementsByTagName() 全文档查找
格式2: 元素节点.getElementsByTagName() 元素内部查找
querySELEctor() 通过CSS选择器来查找所有符合当前选择器的元素，但是返回第一个
querySELEctorAll() 通过CSS选择器来查找所有符合当前选择器的元素，返回所有符合当前选择器的数组
以上是大佬教程为你收集整理的Html5全部内容，希望文章能够帮你解决Html5所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。