html5之新增主体结构元素,能用并不代表对了

作者: 编程应用  发布:2019-10-04

此前几日开端讲自个儿讲陆陆续续写一些网页移动端(前面作者只会说是“移动端”都指是网页)开拓的篇章。首尽管为了让我们明白活动端支出学习如何本事和当做三个知识的回想,同一时间也是三个很好的自身升高机遇。好了,废话少之又少说。上菜......

做运动端有一段时间,前几日有同事问了自己 article 和 section 标签的选拔,模模糊糊的解释了下,他似懂非懂,有一点小狼狈。顿然间认为温馨有不能缺少再翻翻书籍,重温下 html5 的新因素。html5 新添的布局成分,有的有的时候采纳到,有的用不上,当页面禁止使用样式后,它们的显示跟 div 是没撒差异,有同学恐怕会说,既然同样,又不影响页面的尾声表现,不管是 article 照旧 section 能用就好了。要是虚拟实际项目针对顾客,作者也是这么觉得的,但作为三个重构仔,我们必要让标签语义化,清晰的布局,更加好的 seo,利于特殊终端的阅读(无障碍),此时 html5 标签的功效就很引人瞩目了,实际不是说能用就好。于是复习下内容并记录在博客上,顺便分享给大家,也方便温馨之后查找。

前些天大家要说的是html5新扩充的主脑结构成分,这一块和我们原先使用的div成分很像。但千万别这么去切磋,不然要被本人带沟里面去了。其实那个大旨布局成分首借使为着语义可以结构化,越来越好的seo。首要要素如下:article、section、nav、aside、time。有些日常使用,某些则不niao它。

HTML5 新添结构成分分为主旨布局成分和非入眼布局成分

  • 焦点结构成分: article、section、nav、aside、time
  • 非主体布局成分:header、hgroup、footer、address

article元素

article标签从语义上看为文书档案、页面。用法:常常是一篇小说、页面、三个独门完整内容。重申的是独立性,article能够互相嵌套何况普通具备header标签,它能够视作特殊的section成分。使用频率高,代码如下:

<!DOCTYPE HTML><html><body><article> <header> <h1> apple教程</h1> <p>时间:<time pubdate="pubdate">2013-2-1</time></p> </header> <p>轻松学习apple教程,就来</p> <a href="http://www.apple.com">www.apple.com</a><br /> <footer> <p><small>底部版权信息:apple.com公司所有</small></p> </footer> </article></body></html>

一、主体布局成分

section元素

section成分语义为部分,用法:用于页面中内容的某一段,如小说的一段,经常由标题和剧情结合,未有题指标有的不推荐使用section。section能够嵌套article成分,因为article更独立。使用频率低,重申分段分块。代码如下:

<!DOCTYPE HTML><html><body> <section> <h2>section元素使用方法</h2> <p> section元素用于对网站或应用程序中页面上的内容进行分块。</p> </section></body> </html>

注意:当贰个器皿须要被定义样式可能脚背定义行为时,推荐应用div。不利用section.

article

article 标签,从语义化上看为文书档案、页面,其用法如下:

  • 普普通通是一篇文章、多少个页面、贰个单独完整的内容模块
  • 诚如会带个标题,并投身 header 标签中
  • article 成分可以互相嵌套

使用频率相当高,强调独立性,多留神下与 header 标签的应用。

<article>      <header>          <h1>是我标签</h1>      </header>      <p>我是段落</p>      <article>          <div>我的内容</div>      </article>  </article>

nav元素

nav成分语义为导航,用法:平常作为页面导航部分,使用频率高。代码如下:

<html><body><nav> <ul> <li><a href="">菜单1</a></li> <li><a href="">菜单2</a></li> <li><a href="">菜单3</a></li> </ul></nav> </body> </html>

section

section 标签,从语义化上看为局地,其用法如下:

  • 用来页面内容的单独分块,往往是文章的一段
  • 经常由内容和标题组成,没有标题标开始和结果不推荐应用 section

选用功效低,重申分段分块。

注:《HTML5与CSS3权威指南》那本书中表达:一个器皿须要被定义样式也许脚本定义行为时,推荐用div而非section,不要将section用作设置样式的器皿。

<section>      <h1>水果</h1>       <article>           <h2>苹果</h2>          <div>苹果是撒?</div>       </article>        <article>           <h2>桔子</h2>          <div>桔子是撒?</div>       </article>   </section>  <!-- article可以看成是一种特殊种类的section元素,它比section更强调独立性 -->  <article>      <h1>中国人物</h1>      <p>三国、两晋、南北朝</p>      <section>          <h2>三国</h3>          <p>猛将猛将猛将猛将</p>      </section>      <section>          <h2>两晋</h3>          <p>猛将猛将猛将猛将</p>      </section>  </article>

aside元素

aside元素语义为一侧、左边,用法:在 article 标签中使用时,作为根本内容的从属音讯部分,如有关的参考资料、名词解释等。在 article 标签外使用时,作为页面大概站点全局的专门项目消息部分,如右边栏、博客的友情链接部分、广告区域等。 使用频率低。代码如下:

<!DOCTYPE HTML><html><body><!-- 在article标签内使用时 --><article> <h1>马云是谁</h1> <p>马云,男,1964年10月15日出生于浙江省杭州市,中国著名企业家,阿里巴巴集团、淘宝网、支付宝创始人..........</p> <aside> <h1>参考资料</h1> <p>百度网、维基百科...</p> </aside></article> <!-- 在article标签外使用时 侧导航栏--><aside> <nav> <ul> <li><a href="">老赵的博客</a></li> <li><a href="">鬼哥的博客</a></li> <li><a href="">彪叔的博客</a></li> </ul> </nav></aside> </body></html>

nav

nav 标签,从语义化上看为导航,其用法如下:

  • 日常作为页面导航的链接组
  • 侧边栏导航

选择功效高。

<nav>      <ul>          <li><a href="">菜单1</a></li>          <li><a href="">菜单2</a></li>          <li><a href="">菜单3</a></li>      </ul>  </nav>

time元素

time成分是光阴标签。用法:代表 24 小时中的某些时刻或某些日期,表示时刻时允许带时间差,可定义比相当多格式的日子和岁月,使用功能低。代码如下:

<!DOCTYPE HTML><html><meta charset='utf-8'><body><aside> <time datetime="2013-3-6">2014年3月6日</time> <br/> <!-- datetime属性中日期与时间之间要用“T” 文字分隔,“T”表示时间 --> <time datetime="2013-3-6T20:00">2014年3月6日20:00</time> <br/> <!-- 时间加上“Z”表示给机器编码时使用UTC标准时间 --> <time datetime="2013-3-6T20:00Z">2014年3月6日20:00</time> </aside> </body></html>

aside

aside 标签,从语义化上看为在边上、左边,其用法如下:

  • 在 article 标签中央银行使时,作为入眼内容的直属消息部分,如关于的参照他事他说加以考察资料、名词解释等。
  • 在 article 标签外使用时,作为页面大概站点全局的直属音信部分,如右边栏、博客的友情链接部分、广告区域等。

动用频率低。

<!-- 在article标签外使用时 -->  <article>      <h1>马云是谁</h1>      <p>马云,男,1964年10月15日出生于浙江省杭州市,中国著名企业家,阿里巴巴集团、淘宝网、支付宝创始人..........</p>      <aside>          <h1>参考资料</h1>          <p>百度网、维基百科...</p>      </aside>  </article>    <!-- 在article标签内使用时 -->  <aside>      <nav>          <ul>              <li><a href="">老赵的博客</a></li>              <li><a href="">鬼哥的博客</a></li>              <li><a href="">彪叔的博客</a></li>          </ul>      </nav>  </aside>

time

time 标签,从语义化上看为时间,其用法如下:

  • 代表 24 小时中的有个别时刻或有些日期
  • 代表时刻时允许带时间差
  • 可定义比很多格式的日期和岁月

利用频率低。

<time datetime="2013-3-6">2014年3月6日</time>  <!-- datetime 属性中日期与时间之间要用"T" 分隔,"T'表示时间 -->  <time datetime="2013-3-6T20:00">2014年3月6日20:00</time>  <!-- 时间加上"Z"表示给机器编码时使用 UTC 标准时间 -->  <time datetime="2013-3-6T20:00Z">2014年3月6日20:00</time>

二、非大旨布局成分

header

header 标签,从语义化上看为文书档案的页眉,其用法如下:

  • 一种具备辅导和导航成效的布局成分
  • 平凡放置在一切页面也许页面内的一个内容区块的标题
  • 贰个网页内并从未限定 header 标签的个数

选择频率异常高,比较便于精通。

<header>      <h1>我是大头</h1>  </header>  <article>      <header>          <h1>我是脖子</h1>      </header>      <p>我是身体</p>  </article>

hgroup

hgroup 标签,从语义化上看为标题组,其用法如下:

  • 用作 header 标签的子成分
  • 贰个内容模块中包涵了主标题和起码二个子标题才使用 hgroup
  • 常见会将 h1~h6 因素举行分组

利用效用高。

<article>      <header>          <hgrounp>              <h1>我是刘备</h1>              <h2>我是关羽</h2>              <h3>我是张飞</h3>          </hgrounp>      </header>      <p>吕布惊呆了</p>  </article>

footer

footer 标签,从语义化上看为文书档案的脚注,其用法如下:

  • 多少个内容块区的脚注
  • 常备内容为挂钩新闻、相关阅读、版权音讯等

行使作用高,比较轻松通晓。

<article>      <p>吕布惊呆了</p>      <footer>          <ul>              <li>关于三国</li>              <li>地图信息</li>              <li>游戏攻略</li>          </ul>      </footer>  </article>

address

address 标签,从语义化上看为地址,其用法如下:

  • 用于文档中表现的关系音讯
  • 日常内容为我、网址链接、电子邮箱、地址、电话号码等

应用效用低。

<address>      <a href="">作者:张三丰</a>      <a href="">地址:武当山</a>      <a href="">联系方式:1247</a>  </address>

 多谢webapp群的猎巫同学提示,那本本性其实HTML 4.01就曾经有了,这里勘误下。

 

瞩望本文对我们在 html5 结构标签上的应用有早晚的引导,假使开掘内容有错误的地方,应接我们指正~

 

参照他事他说加以考察资料《HTML5与CSS3权威指南》


本文由金沙澳门官网送注册58发布于编程应用,转载请注明出处:html5之新增主体结构元素,能用并不代表对了

关键词:

上一篇:没有了
下一篇:没有了