文档元素

文档元素的主要作用是划分各个不同的内容,让整个布局清晰明快,让整个布局元素具有语义,进一步替代div

一.文档元素总汇

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

元素名称:

h1~h6:表示标题

header:表示首部

footer:表示尾部

nav:表示有意集中在一起的导航元素

section :表示重要概念或主题

article:表示一段独立的内容

address:表示文档或article的联系信息

aside:表示与周边内容少有牵涉的内容

hgroup:将一组标题组织在一起

details:生成一个区域,用户将起展开可以获得很多细节

summary:用在details元素中,表示该元素内容的标题或说明

二.文档元素解析

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

1.<header>表示首部

<header>

这里部分一般是页面头部,包括LOGO,标题,导航等内容

</header>

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

2.<footer>表示尾部

解释:这里是页面的尾部,一般包括:版权声明,友情链接等内容

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

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

4.<hgroup>组合标题

解释:<hgroup>元素的作用就是当多个标题出现,干扰到一对或多个本身需要整合的标题,这是使用次医院怒视包含群组

5.<section>文档主题

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

6.<nav>添加导航

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

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

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

8.<aside>生成注释栏

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

9.<address>表示文档或article元素的联系信息(本身有倾斜的作用)

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

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

解释:由于大多数主流浏览器尚未支持,暂略。

例子;

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<header>
<hgroup>形成整体之后,不会受到干扰
<h1>
这里是一个大标题
</h1>
<h4>这里是一个副标题</h4>
</hgroup>


这里一般存放网页的标头部分
</header>该标签会自动分行因为header相当于分区
<section>
这里是文档的主题部分。
</section>
<article>
<header>...</header>
<section>...</section>
<footer>...</footer>
</article>
<footer>

</footer>
</body>
</html>









  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值