本教程原出处：网道
本教程文档在原作基础上进行了一定的补充、修改和完善，以满足个人学习、工作中的需要，亦可作为个人口袋书使用。
本教程文档中的原文部分，其版权仍归原作者所有。
本教程文档仅作个人学习、教学和工作使用，任何他人、或机构、组织不得恶意传播、复制本文档，或将本教程文档用做商用
网页的语义结构
- HTML 标签的名称都带有语义（semantic），使用时应该尽量符合标签的语义，不要用错误语义的标签。语义良好的网页，天然具有良好的结构，对于开发者易读易写，容易维护，也能帮助计算机更好地处理网页内容。
- 含义
- HTML 标签的一个重要作用，就是声明网页元素的性质，使得用户只看标签，就能了解这个元素的意义，阅读 HTML 源码就能了解网页的大致结构。这被称为 HTML 的语义原则。
- 下面就是一个典型的语义结构的网页。
<body>
<header>页眉</header>
<main>
<article>
<h1>文章标题</h1>
<p>文章内容</p>
</article>
</main>
<footer>页尾</footer>
</body>
- 只看上面的代码，就可以知道，页面分成页眉（
）、主体（）、页尾（ - 编写 HTML 网页，第一步就是写出语义结构的网页骨架。
- 常用标签
- <header>
- <header>标签可以用在多个场景，既可以表示整个网页的头部，也可以表示一篇文章或者一个区块的头部。如果用在网页的头部，就称为“页眉”。网站导航和搜索栏通常会放在<header>里面。
<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>
- 如果<header>用在文章的头部，则可以把文章标题、作者等信息放进去。
<article>
<header>
<h2>文章标题</h2>
<p>张三，发表于2010年1月1日</p>
</header>
</article>
- 由于<header>可以用在多种场景，所以一个页面可能包含多个<header>，但是一个具体的场景里面只能包含一个，比如网页的页眉只能有一个。另外，<header>里面不能包含另一个<header>或<footer>。
- <footer>
- <main>
- <article>
- <aside>
- <section>
- <nav>
- <h1>~<h6>
- <hgroup>
- 如果主标题包含多级标题（比如带有副标题），那么可以使用<hgroup>标签，将多级标题放在其中。
<hgroup>
<h1>Heading 1</h1>
<h2>Subheading 1</h2>
<h2>Subheading 2</h2>
</hgroup>
- 注意，<hgroup>只能包含<h1>~<h6>，不能包含其他标签。
扫一扫
2834
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
