目录
html5优势：
语义化标签：
布局标签：
状态标签：
列表标签：
文本标签：
表单控件：
视频标签：
音频标签：
全局属性：
article和section区别：
兼容性处理：
html5优势：
1 针对javascript，新增了很多可操作的接口
2 新增一些语义化标签，全局属性
3 新增多媒体标签，可以很好代替flash
4 更加语义化，对于seo（搜索引擎）友好
5 可移植性好，可以在移动设备使用
6 支持chrome，safari，Opera，firfox，ie（9版本以上）浏览器
语义化标签：
布局标签：
header 头部标签
footer 底部标签
nav 导航标签
article 文章标签
section 文章中某段文字标签
aside 侧边栏标签
main 内容标签（IE不支持）
hgroup 包裹连续标题（w3c不支持）
状态标签：
meter 例如电量显示
<meter max="100" min="0" low="20" high="90" optimum="90" value="5"></meter>
属性：
max :最大值
min :最小值
value: 取值
low :低值
high:高值
optimum :最佳值progress 进度条值
<progress max="100" value="10"></progress>
属性：
max 最大值
value 取值列表标签：
datalist （不同浏览器显示不同的样式）类似于百度搜索的下拉提示
<input type="text" list="lists">
<datalist id="lists">
<option value="测试111"></option>
<option value="测11"></option>
<option value="11"></option>
</datalist>details 展示问题和答案
<details>
<summary>使用标题</summary>
<div>使用内容</div>
</details>文本标签：
ruby 文本注音
<ruby>
<span>测试</span>
<rt>ceshi</rt>
</ruby>mark 文本标记
<mark>标记</mark>表单控件：
placeholder 提示语
用于文字输入的功能
required 设置为必填项
按钮不可使用
autofocus 自动获取焦点
autocomplete 自动完成
密码，多行框，单选框，多选框不可使用
属性：on 打开
off 关闭
pattern 正则表达式
添加required属性，效果最好
密码，多行框，单选框，多选框不可使用
form属性：
novalidate 不效验属性
input属性：
添加required使用，效果更好
type：
email 邮箱
url 网址
number 数值
<input type="number" name="" id="" step="" max="" min="">
search 搜索
tel 手机号---用于移动端
range 范围选择
color 颜色选择
date 日期选择
month 月份选择
week 一周选择
time 时间选择
datetime-local 年月日选择
视频标签：
video
<video src="" width="" height="" controls muted autoplay loop/>
<video src="" width="" height="" controls muted poster="视频封面路径"/>
<video src="" width="" height="" controls muted preload="metadata"/>音频标签：
audio
<audio src="" controls loop preload="auto" @error="" @play="" @pause="" @timeupdate="" @ended="" />
全局属性：
contenteditable 可编辑
draggable 可拖动
hidden 隐藏元素
spellcheck 拼写检查
article和section区别：
1 article内可以含有多个section
2 section强调的是分段或者分块
3 article比section更强调独立性
兼容性处理：
1 引入js文件文章来源：https://www.toymoban.com/news/detail-544675.html
//ie浏览器使用最优的渲染模式
<meta http-equiv="X-UA-Compatible" content="IE=edge">
//优先使用webkit内核渲染（谷歌内核）
<meta name="render" content="webkit">
//ie9及以下版本浏览器加载此文件
<!--[If lt ie 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
//扩展：
<!–[if !IE]><!–><!–<![endif]–> <!–除IE外都可识别（IE10版本以上也可以识别）–>
<!–[if IE]><![endif]–> <!–IE9以及以下版本可识别–>
<!–[if IE 5]><![endif]–> <!–仅IE5可识别–>
<!–[if IE 5.0]><![endif]–> <!–仅IE5.0可识别–>
<!–[if IE 5.5]><![endif]–> <!–仅IE5.5可识别–>
<!–[if IE 6]><![endif]–> <!–仅IE6可识别–>
<!–[if IE 7]><![endif]–> <!–仅IE7可识别–>
<!–[if IE 8]><![endif]–> <!–仅IE8可识别–>
<!–[if IE 9]><![endif]–> <!–仅IE9可识别–>
<!–[if lt IE 5]><![endif]–> <!–IE5以下版本可识别–>
<!–[if lt IE 5.0]><![endif]–> <!–IE5.0以下版本可识别–>
<!–[if lt IE 5.5]><![endif]–> <!–IE5.5以下版本可识别–>
<!–[if lt IE 6]><![endif]–> <!–IE6以下版本可识别–>
<!–[if lt IE 7]><![endif]–> <!–IE7以下版本可识别–>
<!–[if lt IE 8]><![endif]–> <!–IE8以下版本可识别–>
<!–[if lt IE 9]><![endif]–> <!–IE9以下版本可识别–>
<!–[if lte IE 5]><![endif]–> <!–IE5以及IE5以下版本可识别–>
<!–[if lte IE 5.0]><![endif]–> <!–IE5.0以及IE5.0以下版本可识别–>
<!–[if lte IE 5.5]><![endif]–> <!–IE5.5以及IE5.5以下版本可识别–>
<!–[if lte IE 6]><![endif]–> <!–IE6以及IE6以下版本可识别–>
<!–[if lte IE 7]><![endif]–> <!–IE7以及IE7以下版本可识别–>
<!–[if lte IE 8]><![endif]–> <!–IE8以及IE8以下版本可识别–>
<!–[if lte IE 9]><![endif]–> <!–IE9以及IE9以下版本可识别–>
<!–[if gt IE 5]><![endif]–> <!–IE5以上版本可识别–>
<!–[if gt IE 5.0]><![endif]–> <!–IE5.0以上版本可识别–>
<!–[if gt IE 5.5]><![endif]–> <!–IE5.5以上版本可识别–>
<!–[if gt IE 6]><![endif]–> <!–IE6以上版本可识别–>
<!–[if gt IE 7]><![endif]–> <!–IE7以上版本可识别–>
<!–[if gt IE 8]><![endif]–> <!–IE8以上版本可识别–>
<!–[if gt IE 9]><![endif]–> <!–IE9以上版本可识别–>
<!–[if gte IE 5]><![endif]–> <!–IE5以及IE5以上版本可识别–>
<!–[if gte IE 5.0]><![endif]–> <!–IE5.0以及IE5.0以上版本可识别–>
<!–[if gte IE 5.5]><![endif]–> <!–IE5.5以及IE5.5以上版本可识别–>
<!–[if gte IE 6]><![endif]–> <!–IE6以及IE6以上版本可识别–>
<!–[if gte IE 7]><![endif]–> <!–IE7以及IE7以上版本可识别–>
<!–[if gte IE 8]><![endif]–> <!–IE8以及IE8以上版本可识别–>
<!–[if gte IE 9]><![endif]–> <!–IE9以及IE9以上版本可识别–>
文章来源地址https://www.toymoban.com/news/detail-544675.html
到了这里，关于前端之html5的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
