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