一、什么是HTML5
- 万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改
- 支持Html5的浏览器包括Firefox(火狐浏览器),IE9及其更高版本,Chrome(谷歌浏览器),Safari,Opera等;国内的傲游浏览器(Maxthon),以及基于IE或Chromium(Chrome的工程版或称实验版)所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力
- HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点,如video、audio和canvas 标记。HTML5还引进了新的功能,可以真正改变用户与文档的交互方式
- 增加了新特性:语义特性,本地存储特性,设备兼容特性,连接特性,网页多媒体特性,三维、图形及特效特性,性能与集成特性,CSS3特性
- 相比之前的进步:取消了一些过时的HTML4标记,将内容和展示分离,一些全新的表单输入对象,全新的,更合理的Tag,本地数据库,Canvas 对象,浏览器中的真正程序,Html5取代Flash在移动设备的地位
优点:
- 提高可用性和改进用户的友好体验;
- 有几个新的标签,这将有助于开发人员定义重要的内容;
- 可以给站点带来更多的多媒体元素(视频和音频);
- 可以很好的替代FLASH和Silverlight;
- 当涉及到网站的抓取和索引的时候,对于SEO很友好;
- 将被大量应用于移动应用程序和游戏;
- 可移植性好。
缺点:
该标准并未能很好的被Pc端浏览器所支持。因新标签的引入,各浏览器之间将缺少一种统一的数据描述格式,造成用户体验不佳。
未来趋势
- 移动优先
- 游戏开发者领衔“主演”
二、语义和结构
HTML5提供了新的元素来创建更好的页面结构:
标签 | 描述 |
<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> | 规定在文本中的何处适合添加换行符。 |
三、HTML5中的新增标签
为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页 应用程序缓存,存储,网络工作者,等。
canvas:
标签 | 描述 |
<canvas> | 标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API |
多媒体:
标签 | 描述 |
<audio> | 定义音频内容 |
<video> | 定义视频(video 或者 movie) |
<source> | 定义多媒体资源 <video> 和 <audio> 字体 |
<embed> | 定义嵌入的内容,比如插件。 |
<track> | 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。 |
表单:
标签 | 描述 |
<datalist> | 定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。 |
<keygen> | 规定用于表单的密钥对生成器字段。 |
<output> | 定义不同类型的输出,比如脚本的输出。 |
<meter> | 度量器,可用于标示级别 |
<meter>的属性:
属性 | 值 | 描述 |
high | number | 定义度量的值位于哪个点,被界定为高的值。 |
low | number | 定义度量的值位于哪个点,被界定为低的值。 |
max | number | 定义最大值。默认值是 1。 |
min | number | 定义最小值。默认值是 0。 |
optimum | number | 定义什么样的度量值是最佳的值。 如果该值高于 "high" 属性,则意味着值越高越好。 如果该值低于 "low" 属性的值,则意味着值越低越好。 |
value | number | 定义度量的值。 |
注意:
datalist:创建选项值,有两个属性:value具体的值,lable:提示信息,辅助值
建立输入框与datalist关联,list等于datalist的id
<input type=”text” list="datalist的id">
四、多媒体
1.音频播放:audio标签的使用
- 属性
autoplay | 如果出现该属性,则音频在就绪后马上播放。 | |
controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 | |
loop | 如果出现该属性,则每当音频结束时重新开始播放。 | |
preload | 如果出现该属性,则音频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 | |
url | 要播放的音频的 URL。 |
- 示例:播放音频
<audio src="../mp3/See.mp3" controls autoplay></audio>
2.视频播放:video标签的使用
- 属性
autoplay | 如果出现该属性,则视频在就绪后马上播放。 | |
controls | 如果出现该属性,则向用户显示控件,比如播放按钮。 | |
pixels | 设置视频播放器的高度。 | |
loop | 如果出现该属性,则当媒介文件完成播放后再次开始播放。 | |
preload | 如果出现该属性,则视频在页面加载时进行加载,并预备播放。 如果使用 "autoplay",则忽略该属性。 | |
url | 要播放的视频的 URL。 | |
pixels | 设置视频播放器的宽度。 | |
poster: | 当视频还没有完全下载,或者用户还没有点击播放前默认显示的封面。默认显示当前视频的第一幅画面。也可以自己添加封面。
|
注意:设置宽高的时候,一般情况下只会设置宽度或高度,让其自动的等比缩放。如果同时设置高度和宽度,视频不会真正的调整到所设置的宽度和高度,除非设置的值刚好是等比的。
- 示例:视频播放
<video src="../mp3/561902ae6ac6e6649.mp4" controls></video>
- 说明:由于版权等原因,不同的浏览器可支持播放的格式是不一样的
四、表单
1、新增的属性
- placeholder 占位符 提示文本
- autofocus 获取焦点
- multiple 文件上传多选或多个邮箱地址 ,多个邮箱地址用逗号分隔
- autocomplete 自动完成,用于表单元素,也可用于表单自身
on(打开自动提示) off(关闭自动提示)autocomplete=”on”
自动提示的两个条件:1、必须成功提交过才会记录下来 2、当前添加的autocomplete元素必须有name属性
- form 指定表单项属于哪个form,处理复杂表单时会需要
- novalidate 关闭验证,可用于<form>标签
- required 验证条件,必填项
- pattern 正则表达式 验证表单
2、增的输入类型
<input type=””/>
- email: 输入email格式
- tel: 手机号码 不能做验证只是能在移动端打开数字键盘,必要时可以用正则表达式验证
- url: 只能输入url格式
- number: 只能输入数字
- search: 搜索框
- file:文件
- range: 范围,可以进行拖动,通过value进行取值
- color :拾色器,通过value进行取值
-
time :时间
- date: 日期 不是绝对的
- datetime: 时间日期(只有苹果下面的safafi支持)
- datetime-local :日期时间
- month: 月份
- week: 星期
说明:部分类型是针对移动设备生效的,且具有一定的兼容性,在实际应用当中可选择性的使用。
3、新增的事件
- oninput 用户输入内容时触发,可用于移动端输入字数统计。监听当前指定元素内容的改变:只要改变内容就会触发这个事件
- oninvalid 验证不通过时触发
4、新增表单元素和属性的案例
效果图:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/form.css">
</head>
<body>
<form>
<fieldset>
<legend>学生档案</legend>
<label for="userName">姓名:</label>
<input type="text" name="userName" id="userName" placeholder="请输入姓名" required="" />
<label for="phone">手机号码:</label>
<input type="tel" name="phone" id="phone" pattern="^(\+86)?1[358]\d{9}$" />
<label for="email">邮箱地址:</label>
<input type="text" name="email" id="email" />
<label for="collage">所属学院:</label>
<input type="text" name="collage" id="collage" list="cList" placeholder="请选择">
<datalist id="cList">
<option>移动与前端开发学院</option>
<option>IOS</option>
<option>andriod</option>
<option>c++</option>
</datalist>
<label for="score">入学成绩:</label>
<input type="number" name="score" id="score" max="100" min="0" step="1" value="0" />
<label for="level">基础水平:</label>
<meter name="lever" id="lever" low="59" high="90" max="100" min="0" value="0"></meter>
<label for="inTime">入学日期</label>
<input type="date" name="inTime" id="inTime" />
<label for="outTime">毕业日期</label>
<input type="date" name="outTime" id="outTime" />
<input type="submit" />
</fieldset>
</form>
<script>
document.getElementById("score").oninput = function() {
document.getElementById("lever").value = this.value;
}
</script>
</body>
</html>
*{
margin: 0;
padding: 0;
}
body{
margin: 0 auto;
max-width: 600px;
}
form{
width: 100%;
}
form fieldset{
padding: 20px 20px 10px;
}
form fieldset label{
font-weight: bold;
line-height: 20px;
}
form meter{
padding-left: 0px;
}
form input,form meter{
width: 100%;
margin: 10px 0;
display: block;
height: 40px;
line-height: 40px;
border: none;
border: 1px solid #ccc;
padding-left: 5px;
border-radius: 6px;
box-sizing: border-box;
font-size: 16px;
}
- 说明:
1.<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。
2. legend 元素为 fieldset 元素定义标题(caption)
五、兼容处理
- 在不支持HTML5新标签的浏览器里,会将这些新的标签解析成行内元素(inline)对待,所以我们只需要将其转换成块元素(block)即可使用,但是在IE9版本以下,并不能正常解析这些新标签,但是却可以识别通过document.createElement('tagName')创建的自定义标签,于是我们的解决方案就是将HTML5的新标签全部通过document.createElement('tagName')来创建一遍,这样IE低版本也能正常解析HTML5新标签了。
- 处理方式:在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载三方的一个JS库来解决兼容问题(测试在IE下面的兼容性:ieTester软件的使用)