HTML学习-3.部分标签介绍

语义化标签

各种不同的标签自身在网页中就有其自带的样式，比如不同标签内的字体大小、字体样式各有不同，但是标签的各类样式我们通过CSS进行改变，并且后期我们为了网页的美观或者达到某种要求，一定会用CSS重新进行样式设置。因此，我们在学习HTML标签时，只需要重点记住标签的语义即可，不必在意它的具体样式。

内容语义标签

• 标题标签（h1~h6)

h1 ~ h6 一共有六级标题,从 h1 ~ h6重要性递减 ，h1最重要，h6最不重要，h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1（搜索引擎搜索网页时，可能会通过标题来了解网页内容，因此title和h1中一般放非常重要的内容），通常情况下标题标签只会使用到h1~ h3，h4 ~ h6很少用。另外，有些情况下文章的两级标题存在关联性，例如我们的文章标题HTML学习标题下有一个副标题3.部分标签介绍。因此还存在一个标签 hgroup 专门为标题进行分组。

不必在意样式，只关注标签语义即可。

• 段落标签 （p）

p标签表示页面中的一个段落，就是我们平时写文章中的段落。

• 强调标签（em 和 strong）

em标签把文本定义为强调的内容
strong标签把文本定义为语气更强的强调的内容。

• 引用标签（blockquote 和 q）

blockquote标签定义块引用。blockquote中的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进，而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。
q标签定义短的引用。浏览器经常在引用的内容周围添加引号。

• 换行标签（br）

br标签可插入一个简单的换行符（就是按一次回车）。br标签是空标签（意味着它没有结束标签，因此这是错误的：< b r> < / br >）

结构化语义标签

结构化语义标签即布局标签，主要是用于网页的布局。

• header 表示网页的头部
• main表示网页的主体部分(一个页面中只会有一个main)
• footer 表示网页的底部
• nav表示网页中的导航 aside 和主体相关的其他内容（侧边栏）
• article 表示一个独立的文章
• section表示一个独立的区块，上边的标签都不能表示时使用section

块元素与行内元素

仔细观察上面的例子我们就会发现，有些标签的内容即使很短它也会自动占满一行 即使后面有很大的空白也不会写入内容，像标题标签、段落标签、长引用标签等，而有些标签的内容则不会单独占据一行，写完之后仍然和其他内容共处一行 ，例如强调标签 、短引用标签，这就是块标签和行内标签的区别。
块元素：独占一行，在网页中一般通过块元素来对页面进行布局。
行内元素：可以多个标签存在一行，行内元素主要用来包裹文字。
一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素。

非语义标签

div：div标签是一个块元素，它没有语义，几乎可以用所有块元素的位置，因此是HTML文档中使用最多的一个标签。
span：span标签是一个行内元素，它同样没有特定的语义，可以用于大部分需要行内元素的位置。

[注] 本人也正在自学当中，文中如有理解不当或者错误表述之处，欢迎交流指正。