6.jpg 0
前端程序猿

专注于前端的程序猿

2022-04-13

html笔记04-网页语义结构元素

2022-04-14 0 33 web前端社区

6.jpg 0 前端程序猿

网页的语义结构

HTML 标签的名称都带有语义(semantic),使用时应该尽量符合标签的语义,不要用错误语义的标签。语义良好的网页,天然具有良好的结构,对于开发者易读易写,容易维护,也能帮助计算机更好地处理网页内容。

HTML 标签的一个重要作用,就是声明网页元素的性质,使得用户只看标签,就能了解这个元素的意义,阅读 HTML 源码就能了解网页的大致结构。这被称为 HTML 的语义原则。

  1. <body>
  2. <header>页眉</header>
  3. <main>
  4. <article>
  5. <h1>文章标题</h1>
  6. <p>文章内容</p>
  7. </article>
  8. </main>
  9. <footer>页尾</footer>
  10. </body>

只看上面的代码,就可以知道,页面分成页眉(<header>)、主体(<main>)、页尾(<footer>)三个部分。

编写 HTML 网页,第一步就是写出语义结构的网页骨架。

header

<header>标签可以用在多个场景,既可以表示整个网页的头部,也可以表示一篇文章或者一个区块的头部。

如果用在网页的头部,就称为“页眉”。网站导航和搜索栏通常会放在<header>里面。

  1. <header>
  2. <h1>公司名称</h1>
  3. </header>

如果<header>用在文章的头部,则可以把文章标题、作者等信息放进去。

  1. <article>
  2. <header>
  3. <h2>文章标题</h2>
  4. <p>张三,发表于2010年1月1日</p>
  5. </header>
  6. </article>

由于<header>可以用在多种场景,所以一个页面可能包含多个<header>,但是一个具体的场景里面只能包含一个,比如网页的页眉只能有一个。另外,<header>里面不能包含另一个<header><footer>

<footer>标签表示网页、文章或章节的尾部。如果用于整张网页的尾部,就称为“页尾”,通常包含版权信息或者其他相关信息。

  1. <body>
  2. <footer>
  3. <p>© copyright 2018 xxx 公司</p>
  4. </footer>
  5. </body>

<footer>也可以放在文章里面。

  1. <article>
  2. <header>
  3. <h1>文章标题</h1>
  4. </header>
  5. <footer>
  6. <p>© 禁止转贴</p>
  7. </footer>
  8. </article>

<footer>不能嵌套,即内部不能放置另一个<footer>,也不能放置<header>

main

<main>标签表示页面的主体内容,一个页面只能有一个<main>

  1. <body>
  2. <header>页眉</header>
  3. <main>
  4. <article>文章</article>
  5. </main>
  6. <aside>侧边栏</aside>
  7. <footer>页尾</footer>
  8. </body>

上面代码就是最典型的页面结构。

<main>是顶层标签,不能放置在<header><footer><article><aside><nav>等标签之中。

功能性区块(比如搜索栏)不适合放入<main>,除非当前页面就是搜索页面。

article

<article>标签表示页面里面一段完整的内容,即使页面的其他部分不存在,也具有独立使用的意义,通常用来表示一篇文章或者一个论坛帖子。它可以有自己的标题(<h1><h6>)。

  1. <article>
  2. <h2>文章标题</h2>
  3. <p>文章内容</p>
  4. </article>

一个网页可以包含一个或多个<article>,比如包含多篇文章。

aside

<aside>标签用来放置与网页或文章主要内容间接相关的部分。网页级别的<aside>,可以用来放置侧边栏,但不一定就在页面的侧边;文章级别的<aside>,可以用来放置补充信息、评论或注释。

下面是网页级别的<aside>的例子。

  1. <body>
  2. <main>主体内容</main>
  3. <aside>侧边栏</aside>
  4. </body>

下面是文章评注的例子。

  1. <p>第一段</p>
  2. <aside>
  3. <p>本段是文章的重点。</p>
  4. </aside>

section

<section>标签表示一个含有主题的独立部分,通常用在文档里面表示一个章节,比如<article>可以包含多个<section><section>总是多个一起使用,一个页面不能只有一个<section>

  1. <article>
  2. <h1>文章标题</h1>
  3. <section>
  4. <h2>第一章</h2>
  5. <p>...</p>
  6. </section>
  7. <section>
  8. <h2>第二章</h2>
  9. <p>...</p>
  10. </section>
  11. </article>

上面代码中,<article>包含了两个<section>,代表两章。

<section>很适合幻灯片展示的页面,每个<section>代表一个幻灯片。

一般来说,<section>都应该有标题,即包含<h1>~<h6>标签。多个<section>可以放置在同一个<article>里面,一个<section>里面也可能包含多个<article>,这取决于<section><article>在当前页面的含义。

nav

<nav>标签用于放置页面或文档的导航信息。

  1. <nav>
  2. <ol>
  3. <li><a href="item-a">商品 A</a></li>
  4. <li><a href="item-b">商品 B</a></li>
  5. <li>商品 C</li>
  6. </ol>
  7. </nav>

一般来说,<nav>往往放置在<header>里面,不适合放入<footer>。另外,一个页面可以有多个<nav>,比如一个用于站点导航,另一个用于文章导航。

<nav>里面通常是列表,但也可以放置其他标签。

div

如果不指定用什么意义表示结构,就用万能的div

  1. <div class="main">
  2. <div class="title">
  3. <h1>文章标题</h1>
  4. </div>
  5. </div>

是一个通用标签,表示一个区块(division)。它没有语义,如果网页需要一个块级元素容器,又没有其他合适的标签,就可以使用这个标签。

0

Copyright (C) 2021-2026 98社区 All Rights Reserved 蜀ICP备20012692号-3