【HTML5+CSS3自学笔记】第二节：HTML5语义化标签

学习材料来源：慕课网-初识HTML(5)+CSS(3)-升级版 by：五月的夏天

语义化，让你的网页更好的被搜索引擎理解

学习html标签过程中，主要注意两个方面的学习：标签的用途、标签在浏览器中的默认样式

标签的用途：我们学习网页制作时，常常会听到一个词，语义化。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中等等。

讲了这么多语义化，但是语义化可以给我们带来什么样的好处呢？

1. 更容易被搜索引擎收录。

2. 更容易让屏幕阅读器读出网页内容。

段落标签

如果想在网页上显示文章，这时就需要<p>标签了，把文章的段落放到<p>标签中。

语法：

<p>段落文本</p>

 注意一段文字一个<p>标签，如在一篇新闻文章中有3段文字，就要把这3个段落分别放到3个<p>标签中。如下图所示

<p>标签的默认样式，可以在上图中看出来，段前段后都会有空白，如果不喜欢这个空白，可以用css样式来删除或改变它，在后面课程中会学习到。

diy一个标签吧 - 使用<span>标签自定义文字样式

这一小节讲解<span>标签，这个标签是没有语义的，它的作用就是为了设置单独的样式用的。

如果现在我们想把下面的第一段话“美国梦”三个字设置成blue（蓝色），所以这样情况下就可以用到<span>标签了。

语法：

<span>文本</span>

使用<hx>标签为网页增加标题

文章的段落用<p>标签，那么文章的标题用什么标签呢？在本节我们将使用<hx>标签来制作文章的标题。

标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。<h1>是最高的等级。

语法：

<hx>标题文本</hx> (x为1-6)

我还想diy点样式- 使用<div>标签自定义块

在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。

语法：

<div>…</div>

确定逻辑部分：

什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。如下图所示：图中用红色边框标出的部分就是一个逻辑部分，就可以使用<div>标签作为容器。

听说开头写的好就能一键三连 - <header>标签定义头部区域

语法：

<header>…</header>

结尾神转折 - <footer>标签定义底部区域

正文才是重点喔 - <section>定义区段

再加个侧边菜单吧 - <aside>定义侧边栏区域