说明
网道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>，不能包含其他标签。
