html標簽
1、<strong>、<em>語氣強調
<em> 表示強調，<strong> 表示更強烈的強調。并且在瀏覽器中<em> 默認用斜體表示，<strong> 用粗體表示。兩個標簽相比，目前國內前端程序員更喜歡使用<strong>表示強調。
2、<q>、<blockquote>對文本進行引用
<q>標簽是對短文本進行引用，其樣式是對文本添加雙引號，<blockquote>標簽是對長文本進行引用，其樣式是對文本進行縮進。
3、 空格
標簽是在網頁中顯示空格的效果。
4、<hr>水平橫線
<hr>標簽是添加水平橫線。
5、<address>為網頁加入地址信息
有些網頁底下可能會有聯系地址，展示的時候用<address>就好了，樣式為斜體，可以自己更改。
6、<code>、<pre>為網頁添加代碼
<code>是添加一行代碼，<pre>是添加多行代碼
7、<table>、<tbody>、<tr>、<th>、<td>表格
7.1、整個表格以table標簽開始
7.2、如果不加<thead>、<tbody>、<tfooter>, table表格加載完后才顯示。加上這些表格結構， tbody包含行的內容下載完優先顯示，不必等待表格結束后在顯示，同時如果表格很長，用tbody分段，可以一部分一部分地顯示。（通俗理解table可以按結構一塊塊的顯示，不在等整個表格加載完后顯示。）
7.3、<tr>表示表格的一行，所以有幾對tr標簽，表格就有幾行。
7.4、<td>表示表格的一個單元格，一行中包含幾對td標簽，說明一行中就有幾列。
7.5、<th>表示表格的頭部，表格表頭
7.6、表格中列的個數，取決于一行中數據單元格的個數。
8、<mailto>在網頁中鏈接email地址
注意：如果mailto后面同時有多個參數的話，第一個參數必須以“?”開頭，后面的參數每一個都以“&”分隔。
CSS樣式
1、寫法（三種）
1.1、內聯式css樣式
直接在html標簽中寫
<span style="color:red;font-size:20px;">Hello World!</span>
1.2、嵌入式css樣式
直接在html標簽中寫
<html>
<style type="text/css">
...css樣式寫在此處
</style>
</html>
1.3、外部式css樣式
這種就是新建一個css文件，把所有的css樣式寫在css文件中，然后在html中引用就好了
<html>
<link href="style.css" rel="stylesheet" type="text/css" />
</html>
總結：三種方式都可以給html設置樣式，但是它們之間有優先級，內聯式 > 嵌入式 > 外部式，當三種都設置了，會優先使用內聯式。
2、選擇器
2.1、標簽選擇器
標簽選擇器其實就是html代碼中的標簽。就像p，span，body等等，都可以直接設置樣式。
<span>Hello World!</span>
span{
}
2.2、類選擇器
類選擇器就是為html標簽設置一個名稱，以英文圓點開頭，后面跟名稱，類選擇器名稱可以任意取，但是不要用中文；先把要修飾的內容用標簽標記，然后再取名字，最后再寫css樣式：
<span class="hello">Hello World!</span>
.hello{
}
2.3、ID選擇器
ID選擇器和類選擇器很像，但是它是為標簽設置一個id，以#開頭：
<span id="hello">Hello World!</span>
#hello{
}
總結：類選擇器和ID選擇器的共同點是他們可以應用于任何元素；不同點是，ID選擇器只能在文檔中使用一次，二類選擇器可以使用多次（ID選擇器的一個名稱只能修飾一個標簽，而類選擇器的名稱可以修飾多個）；可以使用類選擇器詞列表方法為一個元素同時設置多個樣式，但是ID選擇器不能；還有一點就是ID選擇器的優先級更高。
3、CSS排版
3.1、字體（font-family）
我們可以使用css樣式為網頁中的文字設置字體、字號、顏色等樣式屬性。
body{
font-family:"宋體";
}
3.2、粗體（font-weight）
p{
font-weight:bold;
}
3.3、斜體（font-style）
p{
font-style:italic;
}
3.4、下劃線和刪除線（text-decoration）
下劃線：
p{
text-decoration:underline;
}
刪除線：
p{
text-decoration:line-through;
}
3.5、縮進（text-indent）
p{
text-indent:2em;
}
注意：2em的意思就是文字的2倍大小。
3.6、行間距（line-height）
p{
line-height:2em;
}
3.7、字母間距（letter-spacing，word-spacing）
letter-spacing表示單詞的字母的間距，word-spacing表示單詞與單詞的間距
h3{
letter-spacing:10px;
}
h4{
word-spacing:5px;
}
3.8、段落對齊（text-align）
可以使用text-align樣式代碼為塊狀元素中的文本、圖片設置居中樣式。
h2{
text-align:center;
}
4、CSS盒模型
4.1、塊級元素
特點：每個塊級元素都從新的一行開始，并且其后的元素也另起一行；元素的高度、寬度、行高以及頂和底邊距都可設置，元素寬度在不設置的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。
常用的塊級元素有：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>
4.2、內聯元素
特點：內聯元素和其他元素都在一行上；元素的高度、寬度及頂部和底部邊距不可設置；元素的寬度就是它包含的文字或圖片的寬度，不可改變。
常見的內聯元素有：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
4.3、內聯塊級元素
特點：和其他元素都在一行上；元素的高度、寬度、行高以及頂和底邊距都可設置。
常見的內聯塊級元素有：<img>、<input>
總結：每一種類型的元素都可以通過代碼來設置成其他類型元素，比如你可以使用display:block將元素設置成塊級元素，使用display:inline將元素設置成內聯元素，使用display:inline-block將元素設置成內聯塊級元素。
4.4、邊框（border）
邊框就是圍繞著內容及補白的線，這條線你可以設置它的粗細、樣式和顏色(邊框三個屬性)。
簡寫：
div{
border:2px solod red;
}
分開寫：
div{
border-width:2px;
border-style:solid;
border-color:red;
}
還可以給某一邊單獨設置：
div{
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
border-bottom:1px solid red;
}
注意：
border-style（邊框樣式）常見樣式有：
dashed（虛線）| dotted（點線）| solid（實線）。
border-color（邊框顏色）中的顏色可設置為十六進制顏色，如:
border-color:#888;//前面的井號不要忘掉。
border-width（邊框寬度）中的寬度也可以設置為：
thin | medium | thick（但不是很常用），最常還是用象素（px）。
4.5、寬度和高度（width，height）
一個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界；高度同理。
div{
width:200px;
height:30px;
}
4.6、填充（padding）
元素內容與邊框之間是可以設置距離的，稱之為“填充”。填充有很多種寫法。邊界（margin）和填充（padding）設置一樣。
合并上、右、下、左（順時針）：
div{
20px 10px 15px 25px
}
分開：
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:25px;
}
如果上、右、下、左的填充都一樣：
div{
padding:20px;
}
如果上下填充一樣，左右填充一樣：
div{
padding:20px 10px;
}
5、布局模型
5.1、流動模型（Flow）
流動（Flow）是默認的網頁布局模式。也就是說網頁在默認狀態下的 HTML 網頁元素都是根據流動模型來分布網頁內容的。
特征：第一，塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在默認狀態下，塊狀元素的寬度都為100%。實際上，塊狀元素都會以行的形式占據位置。第二，在流動模型下，內聯元素都會在所處的包含元素內從左到右水平分布顯示。
5.2、浮動模型（Float）
任何元素在默認情況下是不能浮動的，但可以用 CSS 定義為浮動，如div、p、table、img等元素都可以被定義為浮動。
div{
float:left; /*向左浮動*/
float:right; /*向右浮動*/
}
5.3、層模型（Layer）
層布局模型就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣，每個圖層能夠精確定位操作，但在網頁設計領域，由于網頁大小的活動性，層布局沒能受到熱捧。但是在網頁上局部使用層布局還是有其方便之處的。層模型有三種形式的定位來讓html元素在網頁中精確定位：
(1)、絕對定位（position:absolute）
position:absolute這條語句的作用將元素從文檔流中拖出來，然后使用left、right、top、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對于body元素，即相對于瀏覽器窗口。
div{
position:absolute;
left:100px; /*向右移100px*/
top:50px; /*向下移50px*/
}
(2)、相對定位（position:relative）
如果想為元素設置層模型中的相對定位，需要設置position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(并且元素像層一樣浮動了起來)，然后相對于以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。
#div{
position:relative;
left:100px;
top:50px;
}
(3)、固定定位（position:fixed）
與absolute定位類型類似，但它的相對移動的坐標是視圖（屏幕內的網頁窗口）本身。由于視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變瀏覽器窗口的顯示大小，因此固定定位的元素會始終位于瀏覽器窗口內視圖的某個位置，不會受文檔流動影響，這與background-attachment:fixed?屬性功能相同。
#div{
position:fixed;
left:0;
top:0;
}
6、長度和顏色
6.1、顏色值
關于顏色的css樣式也是可以縮寫的，當你設置的顏色是16進制的色彩值時，如果每兩位的值相同，可以縮寫一半。設置顏色也有很多種方法
可縮寫的顏色值：
p{
color:#000000; /*原寫法*/
color:#000; /*縮寫*/
}
p{
color:#336699; /*原寫法*/
color:#369; /*縮寫*/
}
設置顏色的方法：
(1)、英文命令顏色
p{
color:red;
}
(2)、RGB顏色
p{
color:rgb(133,45,200);
color:rgb(20%,33%,25%); /*也可以是百分比*/
}
(3)、十六進制顏色
p{
color:#00ffff;
}
6.2、長度值
長度單位總結一下，目前比較常用到px（像素）、em、% 百分比，要注意其實這三種單位都是相對單位。
(1)、px (像素)
像素指的是顯示器上的小點（CSS規范中假設“90像素=1英寸”）。實際情況是瀏覽器會使用顯示器的實際像素值有關，在目前大多數的設計者都傾向于使用像素（px）作為單位。
(2)、em
就是本元素給定字體的 font-size 值，如果元素的 font-size 為 14px ，那么 1em = 14px；如果 font-size 為 18px，那么 1em = 18px。但當給 font-size 設置單位為 em 時，此時計算的標準以 p 的父元素的 font-size 為基礎。
(3)、% 百分比
也是本元素給定字體的 font-size 值乘以百分比，如果元素的 font-size 為 14px，那么乘以百分比就是最后的結果。
p{
font-size:12px;
line-height:130%;
}
line-height的實際就是：12*130%=15.6px
