深入了解html5新标签应用及感悟

深入的探讨一下我对html5的了解和我的感悟 ,分享给小伙伴们,废话不多说开始:
<body>
  <header></header>
  <main></main>
  <footer></footer>
</body>

一整个页面的代码就是这样<header>标签表示页面的头部,<footer>标签表示页面的底部,<main>是主内容标签,这样层次是不是很清楚。

在介绍下<header>标签里面放什么内容:

<header>
  <div class="xx">头部背景或者什么
  </div>
  <nav>
    导航
  </nav>
</header>

可以把导航标签<nav>放到<header>中,如果你想分出页面头部和导航标签也可以分开,我自己写电商平台首页的时候还是放在<header>标签中会比较规整。

介绍一下<main>标签,首页页面一般都是分三大部分,多一些宣传广告用<div>标签包含为第四大部分:

<main>
  <article>版块内容一</article>
  <div>版块内容二</div>
  <section>版块内容三</section>
  <aside>版块内容四</aside>
<main>
这样就能在组内容分出那个版块是干什么的,层次是不是很明显啊!

在介绍下底部<footer>用于底部的版权所属,或者合作企业网站等等一些东西:

<footer>
  <div>版权所属xxx</div>
</footer>

整体介绍完了 ,在介绍<main>标签里的几大部分的标签,<article>标签是放的第一大版块的内容,里面可以分成几个小版块内容:

<article>
  <section>
    <article></article>
    <aside></aside>
  </section>
</article>
这样层次能分的相当明确。<aside>标签是用来标识侧边栏的标签,也可以用来当做页脚上最后一个大版块的标签:

<aside>
  <section>
    <div></div>
    <article></article>
    <aside></aside>
  <section>
</aside>
中心内容我就是用的<section>标签:

<section>
  <article></article>
</section>
如果组内容有侧边栏再加一个,侧边栏的标签。以上就介绍到这里,做一下总结:

html5去除了传统的<div>标签,使代码的层次更加的明显,对于二次开发,或者是代码修改,能增加工作效率。






发布了31 篇原创文章 · 获赞 8 · 访问量 8万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章