不了解前端的UI不是好美工，以下是慕课网HTML+CSS基础教程学习笔记，不废话，Start!

第2章 认识标签（第一部分）

2-1 语义化

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

语义化的好处：

1. 更容易被搜索引擎收录；
2. 更容易让屏幕阅读器读出内容；

2-2 body标签

在网页上要展示出来的内容，一定要放在body标签中

网页展示内容复制代码

2-3 p标签，添加段落

语法： <p>段落文本</p>

 
我的第一个段落。
 
我的第二个段落。
复制代码

2-4 hx标签，为网页添加标题

标题标签一共6个，分别是h1，h2，h3，h4，h5，h6

一级标题

二级标题

三级标题

四级标题

五级标题

六级标题

一级标题
二级标题
三级标题
四级标题
五级标题
六级标题
复制代码

2-5 strong和em标签（加强语气标签）

语法：

<em>需要强调的文本（斜体）</em>（em=emphasize强调）

<strong>需要强调的文本（加粗）</strong>

国内推荐使用strong标签

2-6 使用span标签为文字设置单独样式

语法：

<span>文本</span>

<span>标签是没有语义的，他的作用就是为了设置单独的样式。

                   
这是一段示例文字。
    复制代码

q标签，短文本引用

语法： <q>文本</q>

解释： quote

2005年5月2日星期一，这一天，是这位百岁老人阿朗.卡尔松的百岁生日，大家要为这个百岁老人举办一个大party，市长会亲自来参加，还有全体工作人员，但唯一不打算出现的，是主角本人。这老头从养老院的窗户里爬出来，身着棕色的外套，棕色的裤子，和棕色的尿点拖鞋，揣着几百块钱，消失了……

tips：<q>标签的目的是表达语义，而不是简单的加引号。

2-8 blockquote标签，长文本引用

语法：

<blockquote>引用文本</blockquote>

2005年5月2日星期一，这一天，是这位百岁老人阿朗.卡尔松的百岁生日，大家要为这个百岁老人举办一个大party，市长会亲自来参加，还有全体工作人员，但唯一不打算出现的，是主角本人。

这老头从养老院的窗户里爬出来，身着棕色的外套，棕色的裤子，和棕色的尿点拖鞋，揣着几百块钱，消失了……

2005年5月2日星期一，这一天，是这位百岁老人阿朗.卡尔松的百岁生日，大家要为这个百岁老人举办一个大party，市长会亲自来参加，还有全体工作人员，但唯一不打算出现的，是主角本人。
    
     这老头从养老院的窗户里爬出来，身着棕色的外套，棕色的裤子，和棕色的尿点拖鞋，揣着几百块钱，消失了……
    
复制代码

2-9 使用br标签分行显示文本

语法：

文本</br>

文本</br>

文本</br>

</br>标签相当于Word文档里的回车

解释：

line break

2-10 添加空格

语法：

     

解释：

Non-Breaking Space

2005年5月2日  星期一

2-11 hr水平横线标签

语法：

<hr>

解释：

horizontal rule

---

2-12 address标签，为网页加入地址信息

语法：

<address>联系地址信息</address>

在浏览器上显示的样式为斜体

2-13 加入一行代码 用code标签

语法：

<code>代码语言</code>

注：

如果是多行代码，使用<pre></pre>标签

2-14 使用pre标签，为网页加入大段代码

语法：

<pre>代码语言</pre>

标签的主要作用:

预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。

解释：

predefined 预定义

例：

var message="欢迎";    for(var i=1;i<=10;i++)    {        alert(message);    }

如果用老方法回车需要输入<br>，空格需要输入&nbsp;

<pre>标签不仅仅用于代码展示，其他需要的情况下，也可以使用