html5新增标签

html5新增标签
一、语义化标签

1.没有特殊样式盒模型干净的标签

<header></header> 页眉主要用于页面的头部的信息介绍，也可用于板块头部

<footer></footer>页脚页面的底部或者版块底部

<hgroup></hgroup> 页面上的一个标题组合一个标题和一个子标题，或者标语的组合 <hgroup> <h1>妙味课堂</h1> <h2>带您进入富有人情味的IT培训</h2> </hgroup>

<nav></nav> 导航（包含链接的的一个列表）格式多样可以包含各种标签
```
<nav>
<a href=“#”>链接</a><a href=“#”>链接</a>
</nav> 
<nav>
 <p><a href=“#”>妙味课堂</a></p> 
<p><a href=“#”>妙味课堂</a></p>
 </nav> 
<nav> 
<h2>妙味精品课程</h2> 
<ul> <li><a href=“#”>javascript</a></li> </ul> 
</nav>
```
<section> <section> 页面上的版块用于划分页面上的不同区域,或者划分文章里不同的节 section元素不是一般的容器元素，所以如果一个元素需要定义相应的style或者script脚本的话，那推荐使用div元素，section的使用条件是确保这个元素的内容能够明确地展示在文档的大纲里

<article></ article > 用来在页面中表示一套结构完整且独立的内容部分

<aside></ aside> 元素标签可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分

<figure> < figure > 用于对元素进行组合。一般用于图片或视频

<figcaption> <figcaption> figure的子元素用于对figure的内容进行说明

<figure> <img src=“miaov.png”/>(注意没有alt) <figcaption> 妙味课堂 photo &copy 妙味趣学</figcaption> </figure>

2.有样式的标签

<time></time>用来表现时间或日期

<datalist></datalist>选项列表。与 input 元素配合使用，来定义 input 可能的值。双击input时出现下拉框选择
```
<input type="text" list="valList"> 
<datalist id="valList"> 
<option value="javascript">javascript</option> 
<option value="html">html</option> 
<option value="css">css</option> 
</datalist>
```
<details></details>用于描述文档或文档某个部分的细节该元素用于摘录引用等应该与页面的主要内容区分开的其他内容 Open 属性默认展开

< summary></summary> details 元素的标题
```
<details>
        <summary>妙味课堂</summary>
        <p>国内将知名的IT培训机构</p>
</details>
```
<dialog></dialog>定义一段对话
```
<dialog>
  <dt>老师</dt>
  <dd>2+2 等于？</dd>
  <dt>学生</dt>
  <dd>4</dd>
  <dt>老师</dt>
  <dd>答对了！</dd>
</dialog>
```
<address></address> 定义文章或页面作者的详细联系信息

<mark></mark> 需要标记的词或句子

<keygen>给表单添加一个公钥

<progress><progress>定义进度条 span用于progress不能显示时显示76%
```
<progress max="100" value="76"> 
<span>76</span>% 
</progress>
```
3.媒体标签

<video> 视屏
```
<video width="640"  height="360" src="http://www.youtube.com/demo/google_main.mp4"  controls autobuffer>
  <p>
    Try this page in Safari  4! Or you can
    <a  href="http://www.youtube.com/demo/google_main.mp4">download the  video</a>
    instead.
  </p>
</video>
```
video属性
1. Autoplay: 用来设定视频是否在页面加载后自动播放。
2. Src: 为视频指定文件链接或下载路径，当浏览器不支持<video>标签或发生某种播放错误时，可以提供给用户进行下载。
3. Autobuffer: 用来设定视频是否自动缓冲；如果设定，那么页面加载之后，视频会自动下载缓冲，当用户点击播放按钮后，至少已经有一部分视频可以直接观看而无需等待了。
4. Poster: 用来为视频设置一个“相框默认图片”性质的背景图片；当视频无法正常加载播放时可以向用户呈现。
5. Controls: 用来设置是否为视频添加控制条，例如“播放”、“暂停”等；控制条的外观可以自定义。
6. Loop: 用来设置视频是否循环播放。
7. Width , Height: 用来控制视频的宽度与高度。
<audio>音频
```
<audio src="elvis.ogg" controls autobuffer></audio>
```
<audio>元素标签的一些常用属性：
1. src：音频文件路径。
2. autobuffer：设置是否在页面加载时自动缓冲音频。
3. autoplay：设置音频是否自动播放。
4. loop：设置音频是否要循环播放。
5. controls：设置是否显示播放控制面板。
二、IE兼容

在低版本的ie下header等标签不兼容，以下是解决方法。不过仅能解决header footer 等没有特殊样式的仅划分页面区域的标签。

1.原生js

通过js 创建元素不过创建的元素没有任何特性需要添加dispaly：block使元素为块级元素<!doctype html>
```
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>video</title>
    <style>
        header,article{
            border:1px solid black;
　　　　　　　　//块级元素
            display: block;
        }
    </style>
</head>
<body>
    <header>
        nihao
    </header>
    <article>
        hi
    </article>
<script>
//创建元素

    document.createElement('header');
    document.createElement('article');
</script>
</body>
</html>
```
2.插件

引入html5shiv.js插件
相关阅读:
layui动态修改select的选中项
 ES6数组新增方法
 A Realtime BigData Dashboad
Spark Streaming
使用Converter实现控件的动态显隐
 Mysql 使用mysqldump进行备份与还原
 大型Java进阶专题(六) 设计模式之代理模式
 HTML开发之--marquee标签
 iOS开发之--instancetype和id
请求处理常见tag语法
原文地址：https://www.cnblogs.com/xinup/p/4803701.html

一、语义化标签

1.没有特殊样式盒模型干净的标签

2.有样式的标签

3.媒体标签

二、IE兼容