html5学习-布局标签
2011-12-15 10:37
369 查看
过去的html标签大多是非描述性的,html5中的新标签都是能相互关联的,且封装了各自的作用与用法,让人能够更直观的了解到该标签的作用。高效的利用这些标签可以更好的帮助来组织和整理我们页面中的内容。这次主要学习的标签有<header>、<nav>、<section>、<article>、<aside>、<footer>等
先了解一下各个标签的含义.
<header> 一般用来定义文档的页眉
footer> 一般用来定义文档的页脚
<nav> 一般用来定义导航栏
<section> section是表现文档结构最基本的元素,一般用来定义文档的某个区段
<article> 一般来表现文档正文内容
<aside> 表现与页面正文内容关系不大的部分的section元素
我们可能经常会碰到这样一个页面:
我们以前的写法可能是:(只是列出html结构代码,未添加css代码)
我们用新的写法来看看:(只是列出html结构代码,未添加css代码)
其实我们可以看出,这两段代码其实并没有非常大的区别,只不过我们采用标签的方式来替代了<div id="header"></div>的代码,这个主要是我们通过自己的经验,大家约定俗成的这么一个代码风格,现在html5以内置的标签来提供,不是更加方便了我们,也更加规范更加语义化了吗?
先了解一下各个标签的含义.
<header> 一般用来定义文档的页眉
<header><h1>walker石的博客</h1></header>
footer> 一般用来定义文档的页脚
<footer><h1>版权所有@OOXX</h1></footer>
<nav> 一般用来定义导航栏
<nav> <ul> <li><a href="#">菜单一</a></li> <li><a href="#">菜单二</a></li> <li><a href="#">菜单三</a></li> </ul> </nav>
<section> section是表现文档结构最基本的元素,一般用来定义文档的某个区段
<section> <h1>标题一</h1> <p>文章段落内容</p> </section>
<article> 一般来表现文档正文内容
<article>文章内容</article>
<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以内置的标签来提供,不是更加方便了我们,也更加规范更加语义化了吗?
相关文章推荐
- html5学习之第一步:认识标签,了解布局
- 学习html5布局标签
- ASP.NET MVC 学习 --- 第八课(使用机器名访问网站出现html5标签不识别问题)
- html5与css3学习实践--基础的内容划分标签
- HTML5的学习(三)HTML5标签
- 学习《html5.css3.0》网页布局和样式精粹(第一天)
- HTML5标签学习之~~~
- 蓝鸥零基础学习HTML5第七讲 常见标签及标签类型的转换
- HTML5的重点知识小结——整体布局(标签尺寸处理)
- HTML5 布局,新标签
- HTML5学习之新增标签
- HTML5 Details标签学习笔记
- HTML5中canvas使用技巧和布局标签介绍
- 学习笔记 HTML5--table布局与div+css布局
- HTML5学习(2) canvas标签的使用四
- html5新标签布局应用指南
- CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset
- HTML5学习04-HTML5列表、快和布局
- HTML5学习---新标签(一)
- 蓝鸥零基础学习HTML5第七讲 常见标签及标签类型的转换