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