设计师学习HTML/CSS之路-02
不了解前端的UI不是好美工，以下是慕课网HTML+CSS基础教程学习笔记，不废话，Start!
第2章 认识标签（第一部分）
2-1 语义化
语义化，让你的网页更好的被搜索引擎理解。
标签的用途：我们学习网页制作时，常常会听到一个词，语义化。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。
语义化的好处：
- 更容易被搜索引擎收录；
- 更容易让屏幕阅读器读出内容；
2-2 body标签
在网页上要展示出来的内容，一定要放在body标签中
<body>
网页展示内容
</body>
2-3 p标签，添加段落
语法： <p>段落文本</p>
<body>
<p>我的第一个段落。</p>
<p>我的第二个段落。</p>
</body>
2-4 hx标签，为网页添加标题
标题标签一共6个，分别是h1，h2，h3，h4，h5，h6
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
2-5 strong和em标签（加强语气标签）
语法：
<em>需要强调的文本（斜体）</em>（em=emphasize强调）
<strong>需要强调的文本（加粗）</strong>
国内推荐使用strong标签
2-6 使用span标签为文字设置单独样式
语法：
<span>文本</span>
<span>标签是没有语义的，他的作用就是为了设置单独的样式。
<html>
<head>
<style>
span{color:blue;}
</style>
</head>
<body>
<p>这是一段<span>示例</span>文字。</p>
</body>
</html>
q标签，短文本引用
语法：
<q>文本</q>
解释：
quote
<p>2005年5月2日星期一，这一天，是这位百岁老人阿朗.卡尔松的百岁生日，大家要为这个百岁老人举办一个大party，<q>市长会亲自来参加，还有全体工作人员，但唯一不打算出现的，是主角本人。</q>这老头从养老院的窗户里爬出来，身着棕色的外套，棕色的裤子，和棕色的尿点拖鞋，揣着几百块钱，消失了……
</p>
tips：<q>标签的目的是表达语义，而不是简单的加引号。
2-8 blockquote标签，长文本引用
语法：
<blockquote>引用文本</blockquote>
<p>2005年5月2日星期一，这一天，是这位百岁老人阿朗.卡尔松的百岁生日，大家要为这个百岁老人举办一个大party，<q>市长会亲自来参加，还有全体工作人员，但唯一不打算出现的，是主角本人。<blockquote>这老头从养老院的窗户里爬出来，身着棕色的外套，棕色的裤子，和棕色的尿点拖鞋，揣着几百块钱，消失了……</blockquote>
</p>
<p>2005年5月2日星期一，这一天，是这位百岁老人阿朗.卡尔松的百岁生日，大家要为这个百岁老人举办一个大party，<q>市长会亲自来参加，还有全体工作人员，但唯一不打算出现的，是主角本人。<blockquote>这老头从养老院的窗户里爬出来，身着棕色的外套，棕色的裤子，和棕色的尿点拖鞋，揣着几百块钱，消失了……</blockquote>
</p>
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 预定义
例：
<pre>
var message="欢迎";
for(var i=1;i<=10;i++)
{
alert(message);
}
</pre>
如果用老方法回车需要输入<br>，空格需要输入
<pre>标签不仅仅用于代码展示，其他需要的情况下，也可以使用
