新增的布局标签
header标签
定义文档或文档中内容块的页眉。通常可以包含整个页面或一个内容区的标题、搜搜、表单、相关的logo
footer标签
通常用来定义文档或节的页脚，如网页的版权信息，相关阅读链接等等
nav标签
定义导航链接的部分。一般来说用于页面中主要的导航连接组，如传统的导航条，侧边栏导航，页内导航，翻页操作等
article标签
表示文档中独立完整的，可以独自被外部引用的内容。如一篇博文、论坛的帖子、报刊中的文章、一段用户评论或独立的插件
section标签
表示页面中内容的分区、文章中的章节。一个section元素通常由内容及标题组成
aside标签
表示当前页面或文章的附属信息部分，如与主要内容相关的引用、侧边栏、广告、链接组等
hgroup标签
可以为标题或者子标题进行分组，通常与h1-h6组合使用
figure标签
figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。
figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
mark标签
定义带有几号的文本
time标签
定义公立日期或时间，或者两者
datetime属性：定义元素的日期和时间。如果未定义该属性，则必须在元素的内容中规定日期或时间
fieldset标签
fieldset 标签用于从逻辑上将表单中的元素组合起来。
fieldset标签会在相关表单元素周围绘制边框。
legend标签为 fieldset 元素定义标题。
HTML5兼容
最新版本版本的Safari、chrome、firefox以及Opera支持部分HTML5特性
IE9支持某部分HTML5特性
HTML5新标签对IE低版本浏览器的影响及兼容情况处理方案：
1.使用js新增元素的方法解决
document.createElement(“header”)
由于创建出来的元素为行内元素，需要转换块级，宽高才能生效
2使用封装好的插件html5shiv.js解决兼容性问题
<!--[if lt IE 9]>
<script src="./html5shiv.js" type="text/javascript"></script>
<![endif]-->
HTML5已移除的标签
acronym
applet
basefont
big
center
dir
font
frame
frameset
noframes
strike
新增的多媒体标签
audio标签
定义声音，比如音乐或其他音频流。
IE8或更早的浏览器不支持该标签
属性
autoplay autoplay 如果出现该属性，则音频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则每当音频结束时重新开始播放。
muted muted 规定视频输出应该被静音。
preload preload
如果出现该属性，则音频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。
src url 要播放的音频的 URL。
HTML支持的音频格式
Firefox：支持 Ogg Vorbis和WAV
Opera ：支持Ogg Vorbis和WAV
Safari ：支持MP3，AAC格式 ，和MP4
Chrome ：支持Ogg Vorbis，MP3，WAV，AAC和MP4
Internet Explorer 9+ ：支持MP3，AAC格式 ，和MP4
IOS ：支持MP3，AAC格式 ，和MP4
Android ：支持AAC和MP3
为了最大程度支持所有上面提到的浏览器，建议开发者使用Ogg Vorbis和MP3这两种格式例如。
<audio controls>
<source src="myAudio.ogg" type="audio/ogg">
<source src="myAudio.mp3" type="audio/mp3">
</audio>
video标签
标签定义视频，比如电影片段或其他视频流。
属性
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted muted 规定视频的音频输出应该被静音。
poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload preload
如果出现该属性，则视频在页面加载时进行加载，并预备播放。
如果使用 "autoplay"，则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。
HTML支持的视频格式
Firefox ：支持Ogg Theora格式和WEBM
Opera ：支持Ogg Theora格式和WEBM
Safari ：支持MP4
Chrome ：支持Ogg Theora格式，MP4和WEBM
Internet Explorer 9 ：支持MP4和WEBM(需要安装插件)
IOS ：支持MP4
Android ：支持MP4和WEBM(Android 2.3版本以上)
为了支持上述所有的浏览器，建议使用WebM和MP4视频文件作为source元素。例如。
<video controls>
<source src="myVideo.mp4" type="video/mp4">
<source src="myVideo.webm" type="video/webm">
</video>
新增表单元素
input类型 url
用于应该包含url的地址输入域；在地址提交表单时，会自动验证url域的值
<input type="url" name="myUrl">
type="email" 完整验证 提交的时候才会检测用户输入的邮箱合不合法
不合法 阻止表单数据的提交
邮箱: <input type="email" name="useremail"><br>
telephone 手机 iphone 智能手机 电话号验证
没有验证作用 不用再pc端 专用于移动端 打开数字键盘的
方法： 文件通过qq发到手机上 拿浏览器的打开 点一下
电话号: <input type="tel">
type="number" 输入数据 整数数据 min 属性代表最小值 max属性最大值
分数: <input type="number" name="userweight" min="0" max="100" value="83"><br>
你最喜欢的颜色: <input type="color" name="usercolor"><br>
游标 range 范围
收入区间: <input type="range" name="eco" min="200000" max="121321324324" >
search 不是搜索框 文本框 小×号 提高用户体验
专业: <input type="search" name="major"><br>
date 年月日 time时刻
<input type="date" name="meetingTime">
<input type="time" name="meetingTime"><br>
datetime和date是一样的 都是指的年月日 date是用在普通浏览器 goole firfox ie9
datetime 用在safiri上
datetime: <input type="datetime" ><br>
周 选择日期对应的第几周
<input type="week"><br>
<!-- mouth 只包含年和月 -->
<input type="month"><br>
度量衡 meter
用在： 磁盘的统计大小 统计投票数
min:最小值
max:最大值
low:区间最低值 high:区间最高值
optimum: 最佳值
optimum<low 越小越好 optimum>high 越大越好
<meter min="0" max="100" low="60" high="80" optimum="50" value="40"></meter>
<!-- 红色：2 (1)optimum [min,low] value [high,max]---》value越小越好 绿色
(2)value [min,low] optimum [high,max]----》 value值越大越好 绿色
绿色: optimum和value在一个区间 [min,low] [low,high] [high,max]
现象:value接近最佳值 安全 ---》绿色
datalist标签
用来定义选项列表，与input元素搭配使用，来定义input可能的值。
datalist及其选项不会被显示出来，它仅仅是合法的输入值列表。使用input元素的list属性来绑定datalist标签
<form action="">
<!-- 下拉列表 不能自己输入数据 -->
请选择你最喜欢的城市:
<!-- <select name="" id="">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">天津</option>
</select> -->
<!-- 提供给用户做输入用
input文本框 list="对应的下拉列表的id值" 绑定
说明用户自己输入的数据也会被作为option提交给后台
-->
<input type="text" list="city" name="city">
<datalist id="city">
<option value="北京"></option>
<option value="上海"></option>
<option value="广州"></option>
<option value="深圳"></option>
</datalist>
</form>
新增表单属性
label标签通过文字提示 起到自动聚焦的作用
for=“表单控件id属性值 "
1:自动聚焦属性 autofocus (true写 false不写 )
2:required 必填属性 如果没有这个属性就意味这一项不是必填项
如果不输入，导致阻止表单提交
3: placeholder 文字默认提示
4: 历史记录的功能 autocomplete=“on/off” 自动完成功能 on 开启 off关闭
前提条件 (1)表单控件必须有name属性
（2）此表单必须提交过一次
5：patten 验证字符串是否符合规则
pattern=”[0-9]{11}"
6:多文件上传属性 multiple
上传文件
7:accesskey 键盘聚焦某个元素的具体键码
accesskey=“a” alt+a聚焦某个元素
扫一扫
8773
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
