HTML5新增的语义化标签
1、HTML5在页面结构上的简化由原来的
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 </body> 10 </html>
缩减为如今的
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 </body> 10 </html>
方便了开发人员。
2、新增的对页面结构进行划分的标签（没有过多的默认样式）
1 // 关于头部、底部、导航的新增标签 2 <header>用于页面的头部或者某个板块的头部</header> 3 <footer>用于页面的底部或者某个板块的底部</footer> 4 <nav><a href="">导航栏标签</a></nav> 5 <hgroup>页面上的一个标题组合标签</hgroup> 6 7 // 内容部分新增标签 8 <section>用于划分页面区域，没有特殊的语义化</section> 9 <article>用于在页面中表示一套结构完整且独立的内容部分</article> 10 <aside>表示和主体相关的附属信息</aside>
3、相对独立的语义化标签
1 <figure>用于对元素进行组合。一般用于图片或者视频</figure> 2 <figcaption>figure的子元素，用于对figure的内容进行说明</figcaption> 3 ex: 4 <figure> 5 <img src=""> 6 // 注意img内没有alt="" 7 <figcaption>关于对图片或视频描述的文字</figcaption> 8 </figure> 9 10 <time>用于表示时间的标签(没有特殊功能，方便查找)</time> 11 12 <datalist>选项列表。与input元素配合使用，定义input可能出现的值</datalist> 13 ex: 14 <input type="text" list="valList"> 15 <datalist id="valList"> 16 <option value="html">html</option> 17 <option value="css">css</option> 18 <option value="javaScript">javaScript</option> 19 </datalist> 20 21 <details>用于描述文档或文档某个部分的细节(缩略信息或详情信息)</details> 22 ex: 23 <details> 24 <summary>元素的标题</summary> 25 <p>点击打开后，显示的信息</p> 26 </details> 27 28 <address>定义文章或者页面作者的详细联系信息</address> 29 <mark>需要标记的词或句子</mark> 30 <keygen>给表单添加一个公钥</keygen> 31 ex: 32 <form action="http://www.baidu.com" method="get"> 33 用户:<input type="text" name="user_name"> 34 公钥:<keygen name="security" /> 35 <input type="submit" name=""> 36 </form> 37 38 // 进度条 39 <progress value="76" max="100"></progress> 40 <progress value="76" max="100"> 41 // 此处只是为了向下兼容IE6、7、8 42 <span>76</span>% 43 </progress>
