文章目录
- 一、H5的兼容
- 二、H5新增特性
- 2.1 语义化标签
- 2.2 增强表单
- 2.3 音频、视频
一、H5的兼容
支持 HTML5的浏览器包括Firefox(火狐浏览器)，IE9及其更高版本，Chrome(谷歌浏览器)，Safari,Opera等，国内的遨游浏览器，以及基于IE或Chrominum所推出的360浏览器，搜狗浏览器等同样具备支持HTML5的能力。
HTML5是第五个版本
HTML5基本语法
1、文件类型依然是.html或都 .htm结尾
2、不区分大小写
3、指定字符集UTF-8
4、省略部分标签
4.1单标签可以不写结束标签 /
br,img,input,link,meta,hr
<br /> 等价于<br>
4.2双标签可以当做单标签使用
p,li,…
4.3 可以完全省略的标签
html, head, tbody…
二、H5新增特性
2.1 语义化标签
语义化标签：见名知意，根据标签的名称就知道标签在布局当中的作用，优点，页面结构更清晰有利于搜索引擎检索和爬虫数据分析…
以前：
<div class="header"></div>
<div class="main"><div class="nav"></div>
</div>
<div class="footer"></div>
使用html5语义化标签定义页面结构
<heaer>头部</header>
<section>主体<nav>导航</nav>
</section>
<footer>尾部</footer>
常见的html5语义化标签：
header 头部
footer 尾部
section 主体
main 主要显示区域
nav导航
articl独立的文章区域
figure独立文档区域
figcaption独立的文档区域的标题
以上都是块标签，用起来跟div一样。
2.2 增强表单
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>H5学习</title><style type="text/css">*{margin: 0;padding: 0;}</style>
</head>
<body><form action="#" method="">拾色器: <input type="color"> <br>拨号盘(移动端): <input type="tel"> <br>滑块: <input type="range" min="0" max="1000" step="100"> <br>数值: <input type="number" min="30" max="50" step="10"> <br>搜索: <input type="search"> <br>日期: <input type="date"> <br>月份: <input type="month"> <br>周: <input type="week"> <br>时间: <input type="time"> <br>获取本地时间: <input type="datetime-local"> <br><!-- autofocus自动获取焦点 -->邮箱: <input type="email" autofocus="autofocus"> <br>网址: <input type="url"> <br><!-- 可以通过正则表达式对文本框输入内容进行限制 -->文本框: <input type="text" pattern="[0-9]{2}[A-Z]{3}"><input type="submit" value="提交"></form>
</body>
</html>
文本搜索框
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>H5学习</title><style type="text/css">*{margin: 0;padding: 0;}</style>
</head>
<body><form action="#" method="">文本搜索框: <input type="text" list="name"><datalist id="name"><option value="电视">电视</option><option value="电脑">电脑</option><option value="电话">电话</option><option value="电瓶车">电瓶车</option><option value="电动汽车">电动汽车</option><option value="深圳人民">深圳人民</option><option value="深圳龙岗">深圳龙岗</option></datalist></form>
</body>
</html>
2.3 音频、视频
音频
语法：
<audio src="./music/cd.mp3" controls="controls" autoplay="autoplay" loop="loop" preload="auto"></audio>
取值：
src音频路径
controls显示空间
autoplay自动播放
loop循环播放
meted静音
视频
语法：
<video src=""></video>
取值：
src音频路径
controls显示空间
autoplay自动播放
loop循环播放
meted静音
