首页 > 其他 > 详细

7、文档元素

时间:2017-02-14 22:22:52      阅读:212      评论:0      收藏:0      [点我收藏+]

一、文档元素汇总

文档元素基本没有什么实际作用效果,主要目的是在页面布局时区分各个主题和概念。


   元素名称                                                     说明
h1~h6表示标题
header表示首部
footer表示尾部
nav表示有意集中在一起的导航元素
section表示重要概念或主题
article表示一段独立的内容
address表示文档或article的联系信息
aside表示与周边内容有多少牵涉的内容
hgroup将一组标题组织在一起
details生成一个区域,用户将其展开可以获取更多细节
sumary用在details元素中,表示该元素内容的标题或说明



二、文档元素解析

文档元素的大部分标签,是没有任何效果的,完全是为了配合语义使用,以强调它的结构性,只有在后面的章节学习CSS,配合使用才能起到布局和样式的效果


1、<header>表示首部

   这里部分一般是页面头部,包括:LOGO,标题、导航等内容
</header>

解释:<header>元素主要设置页面的标题部分


2、<footer>表示尾部

<footer>
        这里是页面的尾部,一般包括,版权声明、友情链接等内容
</footer>

解释:<footer>元素主要设置页面的尾部


3、<h1>~<h6>添加标题

<h1>标题部分</h1>
<h4>小标题部分</h4>

解释:<h1>~<h6>实际作用就是加粗并且改变字体大小,用于各种标题文档。


4、<hgroup>组合标题

<hgroup>
   <h1>标题部分</h1>
   <h4>小标题部分</h4>
</hgroup>

解释:<hgroup>元素作用就是当多个标题出现,干扰到一对或多个本身需要整合的


5、<section>文档主题

<section>
    这里一般是存放文档主题内容,
</section>

解释:<section>元素的作用是定义一个文档的主体内容



6、<nav>添加导航

<nav>这里存放着文档的导航</nav>

解释:<nav>元素给文档页面添加一个导航



7、<article>添加一个独立成篇的文档

<article>
     <header>
           <nav></nav>
    </header>
    <footer></footer>
</article>

解释:<article>元素表示独立成篇的文档,里面可以包含头、尾、主题等一系列内容、在比较大的页面中会使用到。比如一篇博文的列表,每篇博文,都有自己的头尾、主题等内容,和此相似的还有论坛和帖子、用户的评论、新闻等。


8、<aside>生成注释栏

<aside>这是一个注释栏</aside>

解释:<aside>元素专门为某一段内容进行注释使用


9、<address>表示文档或article元素的联系信息

<address>联系信息</address>

解释:如果是在<body>元素下时,表示整个文档的联系信息,如果是在<article>元素下时,表示其下的联系信息。


10、<details>元素生成详情区域、<summary>元素在其内部生成说明标签

解释:由于大多数主流浏览器尚未支持、省略


技术分享























本文出自 “zengestudy” 博客,请务必保留此出处http://zengestudy.blog.51cto.com/1702365/1897766

7、文档元素

原文:http://zengestudy.blog.51cto.com/1702365/1897766

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!