一、HTML5中的新增标签
1.图形的绘制
<canvas> 标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API
2.多媒体
<audio> 定义音频
属性:
autoplay="autoplay"如果出现该属性,则音频在就绪后马上播放。
controls="controls"如果出现该属性,则向用户显示控件,比如播放按钮。
loop="loop"如果出现该属性,则每当音频结束时重新开始播放。
preload="preload"如果出现该属性,则音频在页面加载时进行加载,并预备播放。
如果使用 "autoplay",则忽略该属性。
srcurl要播放的音频的 URL。
<video> 定义视频(video 或者 movie)
属性:
autoplay="autoplay" 如果出现该属性,则视频在就绪后马上播放。
controls="controls" 如果出现该属性,则向用户显示控件,比如播放按钮。
height="pixels" 设置视频播放器的高度。
loop="loop" 如果出现该属性,则当媒介文件完成播放后再次开始播放。
preload="preload"如果出现该属性,则视频在页面加载时进行加载,并预备播放。
如果使用 "autoplay",则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。
<source> 定义多媒体资源 <video> 和 <audio> 字体
<embed> 定义嵌入的内容,比如插件。
<track> 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。
3.表单
<datalist> 定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值,类似于拥有输入功能的下拉列表
<keygen> 规定用于表单的密钥对生成器字段。提供一种验证用户数据的可靠方法。在提交表单数据的时候,会生成两个键,一个私钥,一个公钥。私钥存储在本地,公钥发送到服务器。在需要做验证的时候,我们可以从服务器下载一个客户端证书,通过私钥和证书来实现相关的验证操作。
<output> 定义不同类型的输出,比如脚本的输出。4.用于展示内容,只能展示,不能进行编辑
4.语义和结构
<article> 定义页面的侧边栏内容
<aside> 定义页面内容之外的内容。
<bdi> 允许您设置一段文本,使其脱离其父元素的文本方向设置。
<command> 定义命令按钮,比如单选按钮、复选框或按钮
<details> 用于描述文档或文档某个部分的细节
<dialog> 定义对话框,比如提示框
<summary> 标签包含 details 元素的标题
<figure> 规定独立的流内容(图像、图表、照片、代码等等)。
<figcaption> 定义 <figure> 元素的标题
<footer> 定义 section 或 document 的页脚。
<header> 定义了文档的头部区域
<mark> 定义带有记号的文本。
<meter> 定义度量衡。仅用于已知最大和最小值的度量。
<nav> 定义运行中的进度(进程)。
<progress> 定义任何类型的任务的进度。
<ruby> 定义 ruby 注释(中文注音或字符)。
<rt> 定义字符(中文注音或字符)的解释或发音。
<rp> 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。
<section> 定义文档中的节(section、区段)。
<time> 定义日期或时间。
<wbr> 规定在文本中的何处适合添加换行符。
二、HTML中移除的标签:
<acronym> 字体兼容
<applet> java组件
<basefont> 字体
<big>
<center>
<dir> 目录
<font>
<frame>
<frameset>
<noframes>
<strike>
三、HTML中的语义标签
<body>
<header>定义了文档的头部区域</header>
<div>
<article>定义页面的侧边栏内容</article>
<aside>定义页面内容之外的内容</aside>
</div>
<footer>定义 section 或 document 的页脚</footer>
</body>
四、如何处理HTML5新标签的浏览器兼容问题
1.在不支持HTML5新标签的浏览器里,会将这些新的标签解析成行内元素(inline)对待,所以我们只需要将其转换成块元素(block)即可使用,但是在IE9版本以下,并不能正常解析这些新标签,但是却可以识别通过document.createElement('tagName')
创建的自定义标签,于是我们的解决方案就是将HTML5的新标签全部通过document.createElement('tagName')
来创建一遍,这样IE低版本也能正常解析HTML5新标签了。
处理方式:在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题(测试在IE下面的兼容性:ieTester软件的使用)
五、表单新增的属性
autocomplete:属性规定表单是否应该启用自动完成功能。autocomplete 属性适用于 <form>,以及下面的 input 类型:text, search, url, telephone, email, password, datepickers, range 以及 color。<br>
<form action="" autocomplete="on">
autofocus定位文本框焦点:<input type="text" autofocus> <br>
placeholder设置文本框默认提示:<input type="text" placeholder="请输入***"><br>
email邮件类型自带验证和提示:<input type="email"> <br>
required属性设置非空特性:<input type="tel" required><br>
pattern设置验证规则:<input type="tel" name="tel" required pattern="^(\+86)?1[358]\d{5}$"><br>
multiple多文件选择:<input type="file" multiple><br>
<input type="submit" value="提交"/>
</form>
六、表单的输入类型
a)email: 输入email格式
b)tel: 手机号码
c)url: 只能输入url格式
d)number: 只能输入数字
e)search: 搜索框
f)range: 范围,可以进行拖动,通过value进行取值
g)color :拾色器,通过value进行取值
h)time :时间
i)date: 日期 不是绝对的
j)datetime: 时间日期
k)month: 月份
l)week: 星期
七、表单新增的事件:
oninput 用户输入内容时触发,可用于移动端输入字数统计
oninvalid 验证不通过时触发
<script>
/*oninput可以监听用户的每一次输入*/
document.getElementById("name").oninput=function(){
console.log(this.value);
}
/*监听键盘弹起,每一个键盘弹出触发一次*/
document.getElementById("name").onkeyup=function(){
console.log("---"+this.value);
}
/*当指定表单元素验证不通过时触发*/
document.getElementById("phone").oninvalid=function(){
console.log("验证不通过");
}
</script>