章节标签和内容标签

最新推荐文章于 2024-04-13 17:02:31 发布

「已注销」

最新推荐文章于 2024-04-13 17:02:31 发布

阅读量1.3k

点赞数 1

分类专栏：笔记本文章标签： HTML 章节标签内容标签

本文链接：https://blog.csdn.net/sanshiliuxiao/article/details/99764731

版权

笔记本专栏收录该内容

10 篇文章 0 订阅

订阅专栏

阮一峰老师的 HTML 教程
本文属于笔记性质，内容大部分出于上述教程，但会对内容进行组织，精简。
范围：五、六、七章节。

HTML5 标签

标签的意义在于只需要阅读 HTML 源码就能了解网页的大致结构。

HTML 标签的名称都带有语义化（semantic），所以在使用时尽量选择符合语义的标签。

语义良好的标签，不仅对开发者友好，又对计算机友好。

<!-- 一个具有语义结构的网页 -->
<body>
  <header>页眉</header>
  <main>
    <article>
      <h1>文章标题</h1>
      <p>文章内容</p>
    </article>
  </main>
  <footer>页尾</footer>
</body>

HTML5 标签列表：目前大约有 110 个标签。

记住所有的标签是不现实的，因此应该优先学习其中一些比较重要的标签和标签上面的属性。

本文记录一些常用的一些标签，其余一小部分标签会合为一篇或多篇，至于剩余部分的不重要的标签，则不记录。

标签的默认样式

浏览器会给标签设置一套默认样式，这样的话，没有 CSS，浏览器渲染出的文本内容也能够正常的显示，而且能够区分出内容的重要程度，但是浏览器的默认样式实在是太丑了，而且不同的浏览器的默认样式还不统一，因此为了解决这种情况，出现了两种办法：

CSS reset：完全重置，将所有默认样式清除，有很多版本，自行搜索。
CSS normalize：使所有浏览器的默认样式统一。

章节标签

章节标签主要是用来表示网页的层次结构，当然这不是严格的进行划分，但大致上是这样一种情况。

常用的章节标签有如下这些：

标签名	含义	标签名	含义
`header`	头部	`footer`	尾部
`main`	主体	`aside`	旁支
`section`	章节	`article`	文章
`nav`	导航	`hgroup`	标题包含块
`p`	段落	`h1-h6`	标题
`div`	划分块（无语义）

header

既可以表示整个网页的头部，也可以表示一篇文章或者一个区块的头部。

一个页面可以有多个 header，但它们属于不同的场景中，也即一个具体的场景内只能包含一个，如网页的页眉就只能有一个。

注意： header 标签内不能嵌套另一个 header 或者 footer，但是并不强制。

<body>
  <!-- 整张网页 -->
  <header></header>

  <!--
    不允许在同一个场景下存在两个 header
    <header></header>
  -->
  <main>
    <article>
      <!-- 某篇文章内 -->
      <header>
        <!--
          不建议 header 内部 嵌套 header 或 footer
          <header></header>
          <footer></footer>
        -->

        <h2>文章标题</h2>
        <p>张三，发表于2010年1月1日</p>
      </header>
    </article>

    <section>
      <!-- 某个区块内 -->
      <header></header>
    </section>
  </main>
  <footer></footer>
</body>

footer

表示网页、文章或者章节的尾部。如果用于整张网页的尾部，通常会包含版权或其他相关信息。

用法和 header 一样，但一个表示头部，一个表示尾部。

<body>
  <footer>
    <p>© 2018 xxx 公司</p>
  </footer>
</body>

main

表示页面的主体内容，一个页面只能有一个 main 标签。该标签属于顶层标签，不能放置在其他的章节标签之中。

<body>
  <!-- 典型的页面结构  -->
  <header>页眉</header>
  <main>
    <article>文章</article>
  </main>
  <aside>侧边栏</aside>
  <footer>页尾</footer>
</body>

article

表示页面里面一段完整的内容，通常表示一篇文章或者帖子。一张网页里面可以包含一个或篇文章。

<article>
  <h2>文章标题</h2>
  <p>文章内容</p>
</article>

aside

用来放置与网页或文章主要内容相关的间接部分，因此它有网页级别和文章级别。

<body>
  <main>主体内容</main>
  <!-- 网页级别，用于放置侧边栏 -->
  <aside></asice>
</body>

<article>
  <p>第一段</p>
  <!-- 文章级别 常用来放置评论或注释 -->
  <aside>
    <p>本段很重要</p>
  </aside>
</article>

section

表示一个含有主题的独立部分，称之为章节。一个 article 标签可以包含有多个 section，当然一个 section 标签也能包含多个 article，这取决于当前页面的含义。

section 很适合做幻灯片展示，一个 section 代表一个幻灯片。

<article>
  <h1>文章标题</h1>
  <section>
    <h2>第一章</h2>
    <p>...</p>
  </section>
  <section>
    <h2>第二章</h2>
    <p>...</p>
  </section>
</article>

nav

用来放置页面或者文章的导航信息，所以它也有页面级别和文章级别。通常 nav 标签会放在 header 里面，当然没有强制要求。

<body>
  <nav>
    <ol>
      <li><a href="item-a"> A</a></li>
      <li><a href="item-b"> B</a></li>
    </ol>
  </nav>
</body>

h1-h6

h1 是最高级别的标题，h6是最低级别的标题。

标题的使用要点：

浏览器默认一级标签字号最大，依次递减。
一级标题下可有多个二级标题，以此类推。
标题不能越级，一级标题下，直接三级标题，以此类推。
一般只用到前三级标签。

在这里插入图片描述

p

代表文章的一个段落，任何想以段落显示的内容，比如图片或者表单，都可以放进 p 标签中。

<p>hello wrold</p>

<p>
  <img src="dog.png" alt="狗子">
</p>

hgroup

如果主标题包含多级标题（如副标题），那么可以使用 hgroup 标签。

该标签使用较少，而且只能包含 h1-h6 标签。

<hgroup>
  <h1>奇诺之旅</h1>
  <h2>-the Beautiful World-</h2>
</hgroup>

div

这是一个通用标签，表示一个区块（division），它没有语义，如果网页需要一个块级元素容器，有没有其他合适的标签，那就能够使用这个标签。而且通常作为 CSS 样式的钩子，进行样式的指定。

<div class="dog">
  <img src="dog.png" alt="狗子">
  <p>狗子，你变了！</p>
</div>

内容标签

内容标签用于表示网页的内容，当然划分也不是那么严格。

常用的内容标签有下面这些：

span
ol、ul、li
dl、 dt、dd
hr、br
em、strong
pre、code
q、cite、blockquote

span

和 div 类似，这也是一个通用标签，没有语义，并且是内联标签（不会产生换行）。

<p>
  这是一只<span class="dog">狗子</span>
</p>

ol、ul、li

ol：有序列表容器（ordered list），列表项的顺序具有一定的意义，该标签有三个属性：
- reversed：顺序反过来
- start：属性值是整数，表示从第几开始。
- type：显示的样式类型，比如阿拉伯数字，罗马数字等。
ul: 无序列表容器（unordered list），列表项的顺序无意义。
li: 列表项（list item）。

ol 标签内部可以具有 li 标签，而且还可以嵌套 ol 或者 ul 标签。

ul 标签内部可以具有 li 标签，同样可以嵌套 ul 或者 ol 标签。

li 标签用于 ol 或 li 标签之中，表示列表项。

在这里插入图片描述

dl、 dt、dd

dl：一组术语的列表（description list）
dt：术语名（description term）
dd: 术语解释（description detail）

dl 类似于 ol 或者 ul，但是它的列表项的信息更加的详细。

在这里插入图片描述

hr、br

hr：水平分割线，用于手动分割两个不同的主题，浏览器默认渲染为一条水平线，该标签是自闭合标签。现在很少使用，一般用 CSS 样式制作出水平线效果。
br:因为 HTML 的渲染规则，直接敲击回车，回车是会转换成空格，所以该标签能够让网页产生换行效果，该标签也是自闭合标签。

在这里插入图片描述

em、strong

em：表示语气的强调（emphasize），浏览器的默认渲染样式是斜体。
strong：表示内容本身的重要性，浏览器默认渲染样式为粗体。

在这里插入图片描述

pre、code

pre: 保留原来的格式（preformatted），浏览器会保留该标签内部原始的换行和空格，并且默认以等宽字体显示标签内容。
注意：HTML 的其他标签在 pre 标签也还是起作用的，这个标签只是保留了空格和换行。
code: 表示标签内容是计算机代码，浏览器默认以等宽字体显示。
注意：code 标签本身仅代表一行代码，如果想要多行代码，通常与 pre 标签连用。

在这里插入图片描述

q、cite、blockquote

q：表示引用，不过他是内联标签，即不会自动换行，浏览器的默认样式是前后加上双引号。
blockquote：也表示引用，不过他是块级标签，浏览器默认样式是缩进成块。
cite: 表示引言出处或者作者，浏览器默认样式是斜体

q 和 blockquote 都具有 cite 属性（不是标签），属性值是网址，表示引用的来源，一般不显示在网页上。
在这里插入图片描述

「已注销」

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
章节标签和内容标签

阮一峰老师的 HTML 教程本文属于笔记性质，内容大部分出于上述教程，但会对内容进行组织，精简。范围：五、六、七章节。文章始发于个人博客：椎咲良田的个人博客HTML5 标签标签的意义在于只需要阅读 HTML 源码就能了解网页的大致结构。HTML 标签的名称都带有语义化（semantic），所以在使用时尽量选择符合语义的标签。语义良好的标签，不仅对开发者友好，又对计算机友好。&l...
复制链接

扫一扫