学习
实践
活动
工具
TVP
写文章

html 的结构部分标签

html 的结构部分标签

二、网页常见的结构

header 标签 --- 头部分结构

nav标签 --- 导航条部分结构

main标签 --- 主核心部分内容

footer 标签 --- 页尾

01.代码示例:

...

...

...

...

02.以上源代码使用 DOM(文件对象模型)表示:

body

header

nav

main

footer

03. header 与 footer 用法

header --- 指整个网页/或某个区块的头部。

一定会包含该区块的标题

可能会包含该区块的副标题、版本、署名等等

footer --- 表示整个网页/或某个区块的脚部

可能包括版权信息、参考资源、附注等等

小结:

头是header,脚是footer。

header 和 footer 都可能多次出现,但它们的级别是不同的。

04.nav(navgation 导航) --- 包含一组链接,连接至网站其它主要页面。

nav 标签 与 header 标签的关系

不建议将nav放置在header内

头部/header是从上下文逻辑关系上来说的,并不一定是视觉设计中摆在顶上的内

容,所以一般不会包含nav。

小结:

导航 navigation包含一组链接,指向网站的其他主要栏目。

nav和header通常是互相独立的并列关系。

nav可能在页面中多次出现,分别指主导航、二级导航等等。

05.main 标签和 aside 标签

main --- 代表网页中的主要内容/主结构

不会包含网站的主导航条、网站总标题和网站总页脚,但可能包含次一级别的

header/van/footer。

*注:每个网页最多只有一个main

main 不可能是以下元素的后代:

article(文章标签)、aside(附属内容标签)、footer(网页标签)、deader(头部标签) 或

nav(导航标签)

aside(附属内容)

附属内容

如果删除,影响不大

应与主内容main相关

aside有时被翻译成"侧边",这种翻译是不准确的。

代码示例:

...

...

...

按 DOM(文件对象模型)构建 html :

body

header

nav

main

aside

footer

小结:

01.主内容main,每个页面只有一个,指该页面专属的内容块,区别于网站的其他页面。

02.附属内容aside,与主内容有一些联系,如果被删除,对网页的阅读没有明显影响。

06. article 标签与 section 标签

article 是一篇完整的文章,代表页面中独立的、完整的、可以独自被外部引用的内容。

注意:header/footer/nav都可能出现在article中,作为文章自身的头、尾与文章内部导航。

section (片段或章节) :

无法独立成文,通常性属于 article 的一部分,该片段里的开始部分仍有一个自然标题以

及相关内容。

section 也可能是main的子元素。

07.关于 id :

唯一标识符,同一页面里id不得重复,以半角英文字母开头,不含特殊字符与空格,描述职能

,不描述样式。

小结:

01.article 是一篇独立的完整的文章,可以被外界引用的。

02.section 可以是 article 中的一个章节,也可以是主内容中的一个区块。

03.不管是 article 还是 section , 第一个子元素总是标题(header 或 h1)。

08. div 标签(部门、分块)

div --- 根据职能的不同,划分出特定的一块区域,常常结合id属性使用。

示例:

internet...

...

---今日热点功能区域

...

---登陆相关功能区域

...

---搜索功能区域

article、section、div 的区别:

aricle:文章

如果上下文能联合组成一个有意义的独立文章;应优先使用 article

section:片段,章节

无法使用article时,该片段里的开始部分仍有一个自然标题,和相关内容。

div:部门、分块

在无法使用article/section/aside等时,仍承担着特定功能的分块。

小结:

在无法使用article/section/aside等时,仍承担着特定功能的分块,就可以使用 div 标签。

div标签和section标签一样,常常带有id属性。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20200408A0OJ6O00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

同媒体快讯

扫码关注腾讯云开发者

领取腾讯云代金券