HTML标记与文档结构
之所以从HTML讲起，是因为CSS的用途就是为HTML标记添加样式。
1.1 HTML标记基础
对于每个包含内容的元素，根据它所包含的内容是不是文本，有两种不同的方式给它们加标记，一种是使用闭合标签，另一种是使用自闭合标签。
1.1.1 文本用闭合标签
<标签名 属性1="属性值">文本内容</标签名>
标题、段落等文本元素都要求闭合标签，也就是要有一个开标签和一个闭标签。
比如:<p>Words by Paul</p>
1.1.2 引用内容用自闭合标签
<标签名 属性1="属性值" />
非文本内容是通过自闭合标签显示的。闭合标签与自闭合标签的区别在于，闭合标签包含的是会显示的实际内容，而自闭合标签只是给浏览器提供一个对要显示内容的引用。浏览器会在HTML页面加载的时候，额外向服务器发送请求，以取得自闭合标签引用的内容。
比如:<img src="images/cisco.jpg" alt="Cisco icon" />
1.1.3 属性
属性负责为浏览器提供有关标签的额外信息，每个HTML标签都可以添加属性，class和id等属性几乎可以适用于任何标签，而有些属性则适用于特定的标签类型，比如src属性只适用于类似<img>这样的标签。
1.1.4 复合元素
所谓复合元素即它们是由多个标签共同组成的。比如<li>是一个列表项，它只在<ol>(ordered list,有序列表)和<ul>(unordered list,无序列表)这两种列表标签中才有效。
<ol>
<li>step 1</li>
<li>step 2</li>
<li>step 3</li>
</ol>
1.2 HTML文档剖析
1.2.1 块级元素和行内元素
几乎所有HTML元素的display属性值要么是block，要么为inline.最明显的一个例外是table元素，它有自己特殊的display属性值。
块级元素(比如标题和段落)会相互堆叠在一起沿页面向下排列，每个元素分别占一行。而行内元素(比如链接和图片)则会相互并列，只有在空间不足以并列的情况下才会折到下一行显示。无论你想了解哪个HTML元素，第一个要问的问题都应该是:它是块级元素还是行内元素？
<p>、<div>默认为块级元素,但可显示修改其display属性，转换为行内元素。
<head runat="server">
<title>Handsome paul</title>
<meta charset="utf-8" />
<style>
p {
display: inline;
}
div {
display: inline;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<p>This is a p element</p>
<div>This is a div element</div>
</form>
</body>
1.3 文档对象模型DOM
DOM是从浏览器的视角来观察页面中的元素以及每个元素的属性。，由此得出这些元素的一个家族树。通过DOM，可以确定元素之间的相互关系。在CSS中引用DOM中特定的位置，就可以选中相应的HTML元素，并修改其样式属性。