HTML5语义化标签

时间 2019-11-11

标签 html5 html 语义标签栏目 HTML5 繁體版

原文原文链接

在HTML5中最基础也是比较好理解的也就是语义化标签了，，顾名思义语义化也就是能够直接读懂的标签~，这样咱们在项目开发过程当中不但本身不会由于5花8门的标签命名而伤脑筋，跟同事对接项目也会节约不少时间~~ 谁不想简单轻松一些呢。。。javascript

语义化标签有2种，一种是单纯语义化的，无功能，二种是语义化，且有功能的。css

一：无功能，语义化标签html

1.1 - <header></header>java

SM:也就是咱们的头部标签，通常用于网站头部内容浏览器

1.2 <footer></footer>ide

SM:有头部确定就有底部，通常用于网站底部（赶脚好废话呀~~）。post

1.3 <nav></nav>网站

SM:导航标签，这个也比较好理解，平时咱们用UL标签写导航的时候，UL里面必定是要包含li标签标签的，这样会有必定的局限性，<nav></nav>标签就不局限里面所房标签，能够是一群的a标签，也能够是一个a，一个p，你喜欢就好！spa

 
           < 
           nav 
           > 
          
 
           　　< 
           a 
           href="">导航1</ 
           a 
           > 
          
 
           　　< 
           a 
           href="">导航2</ 
           a 
           > 
          
 
           　　< 
           a 
           href="">导航3</ 
           a 
           > 
          
 
           　　< 
           a 
           href="">导航4</ 
           a 
           > 
          
 
           </ 
           nav 
           >　 
          

1.4 <hgroup></hgroup>插件

SM:标题组合，通常为页面的主要标题加描述

<hgroup>
　　<h2>我是标题</h2>
　　<h3>我是标题描述</h3>
</hgroup>

1.5 <section></section>

SM:一个板块或者一个区域内容，用于划分页面不一样区域

1.6 <article></article>

SM:用来在页面中表示一套结构完整且独立的内容部分

1.6.1 <aslde></aside>

SM:主题的附属信息(用途很广，主要就是一个附属内容)，若是article里面为一篇文章的话，那么文章的做者以及信息内容就是这篇文章的附属内容了

1.7 <figure></figure>

SM:媒体元素，好比一些视频，图片啊等等

 
           < 
           figure 
           > 
          
 
           　　< 
           img  
           /> //图片 
          
 
           　　< 
           figcaption 
           >我是图片的说明描述</ 
           figcaption 
           > //图片说明 
          
 
           </ 
           figure 
           > 
          

1.8 <time></time>

SM:专门为时间而出的标签，以往咱们时间标签不少，好比span,i,b等等 time标签有个属性datetime="" //没实际功能，便于查找

二：有功能，语义化标签

2.1 <datalist></datalist>

SM:选项列表，与input元素配合使用，来定义input可能的值

 
           < 
           input 
           type="text" list="valList">  //要在input标签中添加一个新的list属性，属性值为datalist的ID~ 
          
 
           　　< 
           datalist 
           id="valList"> 
          
 
           　　< 
           option 
           value="javascript">javascript</ 
           option 
           > 
          
 
           　　< 
           option 
           value="html">html</ 
           option 
           > 
          
 
           　　< 
           option 
           value="css">css</ 
           option 
           > 
          
 
           </ 
           datalist 
           > 
          

当我在输入框中输入一个j的时候，里面相关的javascript就会显示出来~~

2.2 <details></details>

SM:用于描述文档或者文档某个部分的细节~ 默认属性为open~

ps:配合summary一块儿使用

 
           < 
           details 
           > 
          
 
           　　< 
           summary 
           >芝麻开门</ 
           summary 
           > 
          
 
           　　< 
           p 
           >BOOM!!!!!!!!!!!!</ 
           p 
           > 
          
 
           </ 
           details 
           > 
          

　 //没有点击时候的页面显示

//点击以后的内容显示

2.3 <progress></progress>

SM:用于制做进度条，里面有2个属性，1：max 总的进度 2：value 如今的进度

 
           < 
           progress 
           max="200" value="100">  // max:总共为200，当前为100，就是说进度条只到的50% 
          
 
           　　< 
           span 
           >20</ 
           span 
           >%  //用于兼容不支持此属性的浏览器 
          
 
           </ 
           progress 
           > 
          

　三：关于兼容

毫无疑问，H5标签确定是有兼容问题的，低版本的IE是不认识这些语义化标签的，通常有2种办法能够解决这个问题

NO.1

本身写javascript代码，由于IE不认识这些标签，因此咱们只须要在js中建立这些标签就好

 
           <script type= 
           "text/javascript" 
           > 
          
           document.createElement( 
           'header' 
           );   
           //建立一个header元素 
          
           </script>

这样咱们就建立出来了一个header头部元素，如今咱们就能够HTML和样式中写入这个标签

ps:由于建立出来的标签是没有任何默认属性的，因此咱们要给建立出来的标签建立一个CSS属性display：block ;

NO.2

直接在外部引入一个js文件，引入方法跟咱们平时引入插件的方式同样（这里就再也不阐述）。。。。

来自<http://www.cnblogs.com/htzan/p/4516057.html>