说明

​​网道HTML 教程​​学习笔记

1、含义

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

<body>
  <header>页眉</header>
  <main>
    <article>
      <h1>文章标题</h1>
      <p>文章内容</p>
    </article>
  </main>
  <footer>页尾</footer>
</body>

2、常用标签

2.1、​​<header>​​

1、表示整个网页的头部

<header>
  <h1>公司名称</h1>
  <ul>
    <li><a href="/home">首页</a></li>
    <li><a href="/about">关于</a></li>
    <li><a href="/contact">联系</a></li>
  </ul>
  <form target="/search">
    <input name="q" type="search" />
    <input type="submit" />
  </form>
</header>

2、表示一篇文章或者一个区块的头部

<article>
  <header>
    <h1>罗翔讲刑法</h1>
    <p>张三，于2010年1月1日在xx地方。。。</p>
  </header>
</article>

注意

​​<header>​​​ 里面不能包含另一个 ​​<header> 或 <footer>​​。

2.2、​​<footer>​​

表示网页、文章或章节的尾部。

1、如果用于整张网页的尾部，就称为“页尾”，通常包含版权信息或者其他相关信息。

<body>
  <footer>
    <p>© 2018 xxx kaimo</p>
  </footer>
</body>

2、文章里面。

<article>
  <header>
    <h1>文章标题</h1>
  </header>
  <footer>
    <p>© 禁止转贴</p>
  </footer>
</body>

注意

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

2.3、​​<main>​​

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

<body>
    <header>页眉</header>
    <main>
      <article>文章</article>
    </main>
    <aside>侧边栏</aside>
    <footer>页尾</footer>
</body>

注意

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

2.4、​​<article>​​

​​<article>​​ 标签表示页面里面一段完整的内容

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

2.5、​​<aside>​​

​​<aside>​​ 标签用来放置与网页或文章主要内容间接相关的部分。

1、网页级别的 ​​<aside>​​，可以用来放置侧边栏

<body>
  <main>主体内容</main>
  <aside>侧边栏</aside>
</body>

2、文章级别的 ​​<aside>​​，可以用来放置评论或注释。

<p>第一段</p>

<aside>
  <p>本段是文章的重点。</p>
</aside>

2.6、​​<section>​​

​​<section>​​ 标签表示一个含有主题的独立部分，通常用在文档里面表示一个章节。

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

2.7、​​<nav>​​

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

<nav>
  <ol>
    <li><a href="item-a">商品 A</a></li>
    <li><a href="item-b">商品 B</a></li>
    <li>商品 C</li>
  </ol>
</nav>

2.8、​​<h1>-<h6>​​

6个标签，用来表示文章的标题。

  • ​​<h1>​​：一级标题
  • ​​<h2>​​：二级标题
  • ​​<h3>​​：三级标题
  • ​​<h4>​​：四级标题
  • ​​<h5>​​：五级标题
  • ​​<h6>​​：六级标题
<body>
  <h1>JavaScript 语言介绍</h1>
    <h2>概述</h2>
    <h2>基本概念</h2>
      <h3>网页</h3>
      <h3>链接</h3>
    <h2>主要用法</h2>
</body>

2.9、​​<hgroup>​​

如果主标题包含多级标题（比如带有副标题），那么可以使用 ​​<hgroup>​​ 标签，将多级标题放在其中。

<hgroup>
  <h1>Heading 1</h1>
  <h2>Subheading 1</h2>
  <h2>Subheading 2</h2>
</hgroup>

注意：

​​<hgroup>​​​ 只能包含 ​​<h1>~<h6>​​，不能包含其他标签。