曲振飞的个人博客

专注于Web全栈开发、APP设计、网站建设

当前位置 : 主页 > 前端开发 > HTML5语义化标签

HTML5语义化标签

时间:2016-10-28 17:22:18 栏目:前端开发 作者:曲振飞 点击: 530

在HTML5标签出来之前,我们用div来表示页面的结构,但是这些div并没有实际的意义,尽管我们使用css,js进行修饰,这些标签也只是我们提供给浏览器的一些指令,想想下之前页面太多的div标签,在我们后期维护的时候也不是很方便,如果现在页面能够加上我们的H5语义化标签,这样我们就能一目了然的看清我们的页面结构。这样也并不是说div标签就要被抛弃,大量的采用H5语义化标签,而是要根据我们页面实际情况来定,有选择的使用。

blob.png

HTML5布局

如上图所示都没有采用div,都是H5语义化标签。用什么标签来写,取决于你的页面结构。  

下面分别介绍下每个标签的意思:

Header元素

header 元素描述了文档的头部区域,一般可以包括页面的logo、搜索框、导航(nav).当然nav元素也可与header元素并列,同时显示。  

header 的实例代码:

<header>
  <h1>页面logo</h1>
</header>

Nav元素 

nav元素可以用于定义页面的导航链接部分。

实例代码如下:

<nav>
  <a href="#">首页</a>
  <a href="#">关于我</a>
  <a href="#">联系我们</a>
</nav>

section元素

section标签定义页面中的区域,代表文档中的“节”和“段”。

<section>
  <h1>文章标题</h1>
</section>

article元素

article元素定义篇文章的内容

实例代码如下:

<article>
  <h1>这是一篇文章的标题</h1>
  <p>文章的内容。。。。</p>
</article>

hgroup元素

hgroup元素代表“网页”或“section”的标题,当元素有多个层级时,该元素可以将h1到h6元素放在其内,譬如文章的主标题和副标题的组合

<hgroup>
  <h1>标题1</h1>
  <h2>标题2</h2>
</hgroup>

aside元素

aside元素定义页面区域之外的内容,比如页面的侧边栏

<aside>
  <h1>每日推荐</h1>
  <a>Docker搭建gitlab服务器让GitLab安装部署更简单</a>
  <a>Docker搭建gitlab服务器让GitLab安装部署更简单</a> 
  <a>Docker搭建gitlab服务器让GitLab安装部署更简单</a>
  <a>Docker搭建gitlab服务器让GitLab安装部署更简单</a>
<aside>

footer元素

footer元素描述了页面的底部区域。

<footer>
  <p>版权所有 XXX科技公司</p>
</footer>

address元素

address元素用于描述联系地址、方式等一般包括在footer元素里。

<footer>
  <p>版权所有 XXX科技公司</p>
  <address>
    <p>联系地址:XXX省XXX市XXX县</p>
    <p>联系方式:123456</p>
  </address>
</footer>


关键字: H5语义化

关于站长

曲振飞,一个热忠、从事于互联网的90后青年.专注于网站建站、网站设计及优化.以用户体验、WEB标准为主旨,将网站的整体设计与网页设计的相关原理紧密结合.