html5相对以前的基础上增加了许多标签
Paste_Image.png
头尾部新增
头部新增header 、 nav 、input[ type=search ]等；
尾部新增footer 等
<header>
<h1>logo</h1>
<nav>
<a href="">导航1</a>
<a href="">导航2</a>
<a href="">导航3</a>
<a href="">导航4</a>
<a href="">导航5</a>
<a href="">导航6</a>
</nav>
<input type="search" name="search" id="search" placeholder="请输入搜索内容" />
</header>
主体部分新增
主体部分新增以下标签
<section><!--片段 -->
<figure> <!--这是一个独立的媒体内容 播放器 装图片-->
<figcaption>figure唯一标题</figcaption>
<mark>高亮显示</mark>
</figure>
<article><!--这是文章标签-->
<summary>文章摘要</summary>
</article>
<!--controls : 控制条 ; autoplay : 自动播放 ; loop : 循环播放 ;-->
<audio controls="controls" autoplay="autoplay" loop="loop" src=""></audio>
<video controls="controls" autoplay="autoplay" loop="loop" src=""></video>
<aside>aside 侧边栏 与主题内容没有关系的代码</aside>
<bdi>专门用来装人名</bdi>
<canvas id="" width="" height="">画布</canvas>
<time>2016-10-08</time>
</section>
table新增
table新增以下标签
<table summary="财务表格" border="1"><!--summary让浏览器识别-->
<caption>财务表格</caption>
<colgroup>
<col width="*"><!--*自动平均分配-->
<col width="*">
<col width="*">
<col width="*">
</colgroup>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr>
<td>01</td>
<td>02</td>
<td>03</td>
<td>04</td>
</tr>
</table>
表单新增
表单新增以下标签
姓名：<input autofocus pattern="[a-z]" id="userName" type="text" maxlength="6" placeholder="请输入姓名">
<!-- required必填项 disabled禁用项 pattern正则验证 maxlength最大长度 -->
年龄：<input type="number" max="18" min="12" step="2" >
阙值：<input type="range" id="range" max="200" min="100" step="10" >
<!--max为最大年龄 min为最小年龄 step表示以step值进行递增-->
电话号码：<input type="tel" /> <!-- 在移动端会调用9宫格的数字键盘 -->
<!-- 只能输入数字类型 在移动端会调用9宫格的数字键盘 -->
网址：<input type="url"> <!-- 校验网址 -->
Email: <input type="email"><!-- 校验邮箱 -->
颜色：<input type="color" > <!-- 拾色器 -->
日历1：<input type="date">
月历1：<input type="month">
周历1：<input type="week">
小时历1：<input type="time">
日历2：<input type="datetime-local"> <!-- UTC时间 -->
<progress value="50" max="100"></progress>
<button type="submit"> 提交 </button>
带输入功能的下拉
带输入功能的下拉
<input type="text" list="name" /><!--list名须与 datalist id名一致-->
<datalist id="name">
<option value="程序猿" />
<option value="产品狗" />
</datalist>
