HTML5学习（二）：语义标签

语义标签

在网页中HTML专门用来负责网页的结构所以在使用html标签时，应该关注的是标签的语义，而不是它的样式。

1.几个基本的语义标签

标签	作用	描述
<h1> <h2> <h3> <h4> <h5> <h6>	标题	一共有六级标题 从h1 ~ h6重要性递减，h1最重要，h6最不重要 h1在网页中的重要性仅次于title标签 一般情况下一个页面中只会有一个h1 一般情况下标题标签只会使用到h1 ～ h3，h4 ～ h6很少用
<hgroup>	标题组	多层次的标题。它将一组<h1> ～ <h6>元素分组
<p>	段落	页面中的一个段落。由空行或第一行缩进将相邻的文本块分开
<blockquote>	长引文	用缩进表示所包含文本。 可以用cite属性表示引文来源，用<cite>元素表示来源的文本表述
<q>	短引文	用一个简短的内联引号包围文本。 大多数浏览器通过在文本周围加上引号来实现。 该元素用于不需要段落分隔的短引文
<br>	换行
<em>	强调	表示强调作用。<em>元素可以嵌套，每一级嵌套表示更高的强调程度<i>元素效果与它相同，不过<i>不属于语义标签
<strong>	重要	表示重要性、严肃性或紧迫性。浏览器通常以粗体字呈现内容 <b>元素效果与它相同，不过<b>不属于语义标签

举例：

<h1>Beetles</h1>
<h2>External morphology</h2>
<h3>Head</h3>
<h4>Mouthparts</h4>
<h3>Thorax</h3>
<h4>Prothorax</h4>
<h4>Pterothorax</h4>

效果：

2.HTML5 提供的新语义元素

标签	作用	描述
<header>	页眉	介绍性的内容
<footer>	页脚	通常包含有关作者的信息、版权或文件链接
<nav>	导航链接	可以是当前文档内的，也可以是到其他文档的。常见例子是菜单、目录和索引
<main>	文档主内容	中心主题直接相关或扩展的内容
<article>	文章	自成一体，独立分发，可重复使用
<section>	文档中的节	没有一个更具体的语义元素来代表
<aside>	页面内容以外的内容	其内容与文档的主要内容只有间接的关系。经常以边栏或呼出框的形式出现
<mark>	重要或强调的文本	为参考或记事目的而被标记或突出的文本，表明其相关性和重要性
<summary>	<details> 标题	为<details>指定一个摘要、标题或图例。点击<summary>可以切换<details>打开和关闭
<details>	用户能够查看或隐藏的额外细节	其中的信息只有被切换到 "打开 "状态时才可见。必须使用<summary>提供一个摘要或标签
<figure>	自包含内容	独立的内容，用<figcaption>元素指定一个可选的标题。比如图示、图表、照片、代码清单等
<figcaption>	<figure> 的标题	描述其父元素 其余内容的标题或图例
<time>	定义日期/时间	可能包括datetime属性，将日期翻译成机器可读的格式，以便获得更好的搜索引擎结果或自定义功能。如提醒

这些新语义标签在视觉效果上基本上没有什么区别

3.块元素与行内元素

• 块元素（block element）
  • 在网页中一般通过块元素来对页面进行布局
• 行内元素（inline element）
  • 行内元素主要用来包裹文字
  • 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
    • 如<p>元素中不能放任何的块元素