HTML5的新增特性主要是针对于以前的不足, 增了一些新的标签、新的表单和新的表单属性等。
这些新特性都有兼容性问题,基本是IE9+以上版本的浏览器才支持, 如果不考虑兼容性问题,可以大量使用这些新特性。
1.1 HTML5 新增的语义化标签
●<header> : 头部标签
●<nav> : 导航标签
●<article> : 内容标签
●<section> : 定义文档某个区域
●<aside> : 侧边栏标签
●<footer> : 尾部标签
注意:
这种语义化标准主要是针对搜索引|擎的
●这些新标签 页面中可以使用多次
●在IE9中 ,需要把这些元素转换为块级元素
●移动端更喜欢使用这些标签
1.2 HTML5新增的多媒体标签
新增的多媒体标签主要包含两个:
1.音频 : < audio>
2.视频 : < video>
使用它们可以很方便的在页面中嵌入音频和视频, 而不再去使用flash和其他浏览器插件。
1.视频< video>
（1）当前< video>元素支持3种视频格式：尽量使用mp4格式
语法
<video src="文件地址" controls="controls"></video>
另外一种写法（了解）
<video controls="controls" width="300">
<source src="move.ogg" type="video/ogg" >
<source src="move.mp4" type="video/mp4" >
您的浏览器暂不支持 <video> 标签播放视频
</video >
（2）< video>常见属性
2.音频< audio>
当前< audio>元素支持3种音频格式：mp3、Wav、Ogg
语法
<audio src="文件地址" controls="controls"></ audio>
另外一种写法（了解）
<audio controls="controls ">
<source src="happy.mp3" type="audio/ mpeg" >
<source src="happy.ogg" type="audio/ ogg" >
您的浏览器暂不支持<audio>标签。
</audio>
（2）常见属性
●谷歌浏览器把音频和视频自动播放静止了
3.多媒体标签总结
●音频标签和视频标签使用方式基本一致
●浏览器支持情况不同
●谷歌浏览器把音频和视频自动播放禁止了
●我们可以给视频标签添加muted属性来静音播放视频, 音频不可以(可以通过JavaScript解决)
●视频标签是重点, 我们经常设置自动播放, 不使用controls控件, 循环和设置大小属性
1.3 HTML5新增的 input类型
●重点记住number tell search这 3个
【示例代码】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 验证的时候必须添加form表单域 -->
<form action="">
<ul>
<li>邮箱：<input type="email"> </li>
<li>网址：<input type="url"></li>
<li>日期：<input type="date"></li>
<li>日期：<input type="time"></li>
<li>数量：<input type="number"></li>
<li>手机号码：<input type="tel"></li>
<li>搜索：<input type="search"></li>
<li>颜色：<input type="color"></li>
<li><input type="submit" value="提交"></li>
</ul>
</form>
</body>
</html>
1.4 HTML5新增的表单属性
可以通过以下设置方式修改placeholder里面的字体颜色：
input::placeholder {
color:pink;
}
