1、引子
①HTML
当浏览器阅读HTML时，它会解析包围文本的所有标记。标记使用尖括号括起来的字母或单词，标记告诉浏览器文本的结构和意义。
用包围文本的成对标记告诉浏览器网页的结构。
元素=开始标记+内容+结束标记
元素可以拥有“属性”：
属性用来为一个元素提供附加信息。例如，如果有一个样式元素，属性允许你确切地描述这个元素——用来提供该元素的额外信息。
②CSS
HTML ：超文本标记语言 HyperText Markup Language
CSS：级联样式表 Cascading Style Sheet
CSS是与HTML完全不同的语言。
分别使用两种语言，HTML用于创建结构，CSS用于创建样式，使用它们在各自的领域完成工作。
2、深入理解超文本
使用<a>标签，创建超文本链接到另外一个网页，<a>元素中的内容在网页中是可点击的，Href属性告诉浏览器链接的目的地。
3、构建模块
-
步骤：先计划好网页的结构，再绘制略图，最后写HTML。
-
使用大的块元素来创建网页，然后用内联元素修饰。
-
通常使用最能匹配内容含义的元素。例如，当你需要列表时绝不用段落表示。
块元素：<p>、<blockquote>、<ol>、<ul>和<li>：都是块元素，它们独立显示，文本前后有空行。
内联元素：<q>、<em>、<a>是内联元素，这些元素的内容和其他内容一起跟随在文字流中。
①q与blockquote
<q></q>
引用标签：简短地“引用”现有文字的一部分
<blockquote></blockquote>
区块引用：引用一大段文字并独立显示
<blockquote>和<q>是两种不同类型的元素，<blockquote>元素是块（block）元素而<q>是内联（inline）元素。
<br>元素：显示换行
②li与ol元素
用<li></li>把每个列表项封入，每个<li>元素将在列表中开始一个列表项。
unordered list = ul 无序列表
ordered list = ol 有序列表
list item = li 列表项
<ol>和<li>必须一起使用
列表是一组项目：<li>元素用来确定每个项目，<ol>则是把它们组成一组。
自定义列表<dl>：列表中每个项目都有一个项限<dt>和一个描述<dd>。
③空元素
<br>是个“空元素”，它没有内容，且仅由一个标记组成。
④嵌套
当把一个元素放入到另一个元素中，叫做嵌套。组织网页中的嵌套元素相当于画家族树。
作用：防止标记不匹配。
4、部署与扩展
①HTTP协议
HTTP协议是超文本传输协议，当找不到对应超文本时，返回404
②a标签的扩展
target属性告诉浏览器在哪打开href属性
5、图像
浏览器遇到<img>标签时，需要进行特殊处理：浏览器必须先接收图像，然后才能在该页面上显示图像。
alt属性：一小段描述图像的文字，当图像不能显示时，用这一小段叙述代替原有的图像。
6、CSS
使用选择符+内容来定义样式
若要使某类的元素拥有同一个样式，使用一个句点，并且接一个类名，则这个规则会适用于该类内的所有成员。
常用规则：
font-family 定义网页中的字体
font-size 控制字体的大小
color 文本的颜色
font-weight 设置字体
①盒模式
Box-Model
padding（补白）——>border（边框）——>margin（边界）
②div与span
div：用于划分页面，并改变块区样式。借助div，将页面划分为几个合理逻辑结构，有助于网页结构的清晰和样式化。
块元素的默认宽度是auto，也就是说会延伸到所有空间。
