您的位置：首页 > Web前端 > HTML5

学习html5布局标签

2017-02-23 17:35 295 查看

过去的html标签大多是非描述性的，html5中的新标签都是能相互关联的，且封装了各自的作用与用法，让人能够更直观的了解到该标签的作用。高效的利用这些标签可以更好的帮助来组织和整理我们页面中的内容。这次主要学习的标签有:

<header>、<nav>、<section>、<article>、<aside>、<footer>等

　　先了解一下各个标签的含义.

(1)<header> 一般用来定义文档的页眉

<header><h1>walker石的博客</h1></header>

(2)<footer> 一般用来定义文档的页脚

<footer><h1>版权所有@OOXX</h1></footer>

(3)<nav> 一般用来定义导航栏
  <nav>

　　 <ul>

　　　　 <li><a href="#">菜单一</a></li>

　　　　 <li><a href="#">菜单二</a></li>

　　　　 <li><a href="#">菜单三</a></li>

　　 </ul>

  </nav>

(4)<section> section是表现文档结构最基本的元素，一般用来定义文档的某个区段　

<section>

  <h1>标题一</h1>

  <p>文章段落内容</p>

</section>

(5)<article> 一般来表现文档正文内容　　

  <article>文章内容</article>

(6)<aside> 表现与页面正文内容关系不大的部分的section元素

  <aside>文章内容相关</aside>

我们可能经常会碰到这样一个页面：

　我们以前的写法可能是：(只是列出html结构代码，未添加css代码)

<div id="header">顶部</div>

<div id="nav">导航栏</div>

<div id="container">

<div id="title">标题</div>

<div id="content">内容</div>

</div>

<div id="side">辅助栏</div>

<div id="footer">底部</div>

我们用新的写法来看看：(只是列出html结构代码，未添加css代码)

<header>顶部</header>

<nav>导航栏</nav>

<section>

　 <header>标题</header>

　 <article>内容<article>

</section>

<aside>辅助栏</aside>

<footer>底部</footer>

　　其实我们可以看出，这两段代码其实并没有非常大的区别，只不过我们采用标签的方式来替代了<div id="header"></div>的代码，这个主要是我们通过自己的经验，大家约定俗成的这么一个代码风格，现在html5以内置的标签来提供，不是更加方便了我们，也更加规范更加语义化了吗?

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航