HTML、CSS、JavaScript的學習順序一般為html,css,javascript
HTML、CSS、JavaScript的詳細知識點介紹：
1. HTML
包含文字、圖片、視頻等。
或為標題加入背景圖片、顏色變化，標題字體、比如，就像網頁的外衣。樣式是表現。2. CSS
邊框等。所有這些用來改變內容外觀的東西稱之為表現。
是用來實現網頁上的特效效果。如：鼠標滑過彈出下拉菜單。或鼠標滑過表格JavaScript3.
的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這么理解，有動畫的，有交互的
來實現的。JavaScript一般都是用
1-2
1是一樣的，但建議小寫，因為大部分程序員都以<H1>和<h1>標簽不區分大小寫，HTML ，
小寫為准。
1-3
文件是有自己固定的結構的。HTML一個
<html>
<head>...</head>
<body>...</body>
</html>
代碼講解：
中。<html></html>稱為根標簽，所有的網頁標簽都在1. <html></html>
、<script>、<title>頭部元素有它是所有頭部元素的容器。標簽用於定義文檔的頭部，2. <head>
等標簽，頭部標簽在下一小節中會有詳細介紹。<meta> 、<link>、<style>
等網<img>、<a>、<p>、<h1>標簽之間的內容是網頁的主要內容，如</body>和<body>在3.
頁內容標簽，在這里的標簽中的內容會在瀏覽器中顯示出來。
1-4
部分：head ，下面這些標簽可用在1
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
，代碼注釋不僅方便程序員自己回憶起以前代碼的用途，還可以幫助其他程序員很快的讀2
懂你的程序的功能，方便多人合作開發網頁代碼。
語法：
<!----> 注釋文字
注釋代碼CSS，3
<!--中使用Html來標明（*/注釋語句/*用中也有注釋語句：CSS在的注釋一樣，Html就像在
注釋語句-->)
1-5
，語義化：說的通俗點就是：明白每個標簽的用途（在什么情況下我可以使用這個標簽才1
網頁上的各個欄目的欄目名稱也可以使網頁上的文章的標題就得用標題標簽，比如，合理）
用標題標簽。
，語義化的作用2
更容易被搜索引擎收錄。. ）1
2
更容易讓屏幕閱讀器讀出網頁內容。. ）2
二，認識標簽（第一部分）
2-1
標簽中。<p>標簽了，把文章的段落放到<p>如果想在網頁上顯示文章，這時就需要
語法：
</p> 段落文本<p>
2-2
標簽來制作文章的標題。<hx>
分別為一級標題、二級標題、三級標題、h6、h5、h4、h3、h2、h1個，6標題標簽一共有
是最高的等級。<h1>四級標題、五級標題、六級標題。並且依據重要性遞減。
語法：
1-6) 為</hx> (x標題文本<hx>
另外網頁上的各個欄目的標題也可使用它可以使用標題標簽，文章的標題前面已經說過了，
們
2-3
<em>這時候就可以用到現在如果想在一段話中特別強調某幾個文字，有了段落又有了標題，
標簽。<strong>或
表示更強烈的強調。並且在瀏覽<strong> 表示強調，:<em> 但兩者在強調的語氣上有區別
用粗體表示。兩個標簽相比，目前國內前端程序員更<strong> 默認用斜體表示，<em> 器中
表示強調<strong>喜歡使用
2-4
的區別：<span>、<strong>、<em>
標簽是為了強調一段話中的關鍵字時使用，它們的語義是強調。<strong>和1. <em>
然它的作用就是為了設置單獨的樣式用的，把一段話圈起來，標簽是沒有語義的，2. <span>
設置樣式。css后用
3
2-5
標簽，短文本引用q
<q>比如在你的網頁的文章里想引用某個作家的一句詩，這樣會使你的文章更加出彩，那么
標簽是你所需要的。
語法：
</q> 引用文本<q>
標簽自動添加雙引號。q，注意要引用的文本不用加雙引號，瀏覽器會對1
（如果這樣我們不如自己在鍵標簽的真正關鍵點不是它的默認樣式雙引號<q>注意這里用，2
，而是它的語義：引用別人的話盤上輸入雙引號就行了）
標簽，長文本引用blockquote
的作用也是引用別人的文本。但它是對長文本的引用<blockquote>
標簽。<q>標簽是對簡短文本的引用，比如說引用一句話就用到<q>
: 語法
</blockquote> 引用文本<blockquote>
標簽的解析是縮進樣式<blockquote>瀏覽器對
2-6
<br/> 換行標簽
文檔中的回車。word標簽作用相當於<br/>
分割線標簽<hr/>
標簽一樣也是一個空標簽，所以只有一個開始標簽，沒有結束標簽。<br/>標簽和<hr/>
標簽的在瀏覽器中的默認樣式線條比較粗，顏色為灰色，可能有些人覺得這種樣式不<hr/>
樣式表之后，都可以對其修改。css美觀，沒有關系，這些外在樣式在我們以后學習了
2-7
特殊字符html
4
) 分號必不可少 (;空格：
2-8
標簽，為網頁加入地址信息address
語法：
</address> 地址信息<address>
如：
10北京市西城區德外大街<address></address> 號
css在瀏覽器上顯示的樣式為斜體，如果不喜歡斜體，當然可以，可以在后面的課程中使用
標簽的默認樣式<address>樣式來修改它
2-9
當代碼為一必免不了在網頁中顯示一些計算機專業的編程代碼，在介紹語言技術的網站中，
標簽了，如下面例子：<code>行代碼時，你就可以使用
<code>var i=i+300;</code>
語法：
</code> 代碼語言<code>
可以使如果是多行代碼，標簽，<code>在文章中一般如果要插入多行代碼時不能使用注意：
標簽。<pre>用
元素中的文本通常會保留空格和換pre 預格式化的文本。被包圍在:標簽的主要作用<pre>
簽，空格需要輸入<br>行符。如果用以前的方法，回車需要輸入 。
在你需要在網頁中預顯示格式時都標簽不只是為顯示計算機的源代碼時用的，<pre> 注意：
標簽的一個常見應用就是用來展示計算機的源代碼。<pre>可以使用它，只是
三，認識標簽（第二部分）
3-1
，無序列表1
5
是沒有前后順序的信息列表。ul-li
語法：
<ul>
</li> 信息<li>
</li> 信息<li>
......
</ul>
舉例：
<ul>
</li> 精彩少年<li>
</li> 美麗突然出現<li>
觸動心靈的旋律<li></li>
</ul>
前都自帶一個圓點li在網頁中顯示的默認樣式一般為：每項ul-li
有序列表2,
語法：
<ol>
</li> 信息<li>
</li> 信息<li>
......
</ol>
舉例：
6
下面是一個熱點課程下載排行榜：
<ol>
</li> 前端開發面試心法<li>
html</li> 零基礎學習<li>
</li> 全攻略<li>JavaScript
</ol>
開1前都自帶一個序號，序號默認從<li>在網頁中顯示的默認樣式一般為：每項<ol>
3-2
容器標簽<div>
標簽中，這個<div>在網頁制作過程過中，可以把一些獨立的邏輯部分划分出來，放在一個
標簽的作用就相當於一個容器。<div>
語法：
</div> „<div>
確定邏輯部分：
就是一個如網頁中的獨立的欄目版塊，什么是邏輯部分？它是頁面上相互關聯的一組元素。
就可以使用圖中用紅色邊框標出的部分就是一個邏輯部分，如下圖所示：典型的邏輯部分。
標簽作為容器<div>
元素前后放置一個換行符。div 是一個塊級元素，也就是說，瀏覽器通常會在<div> 注釋：
3-3
創建表格的五個元素：
td 、th、tr、tbody、table
、1 標記結束。</table>標記開始、<table>：整個表格以</table>„<table>
<tbody>但如果加上表格會下載一點顯示一點，當表格內容非常多時，：</tbody>„<tbody>、2
（這標簽后，這個表格就要等表格內容全部下載完才會顯示。如右側代碼編輯器中的代碼。
個標簽基本上不怎么用了）
7
表格就有幾行。tr ：表格的一行，所以有幾對</tr>„<tr>、3
，說明一行中就有幾列。<td>...<td/>：表格的一個單元格，一行中包含幾對</td>„<td>、4
：表格的頭部的一個單元格，表格表頭。</th>„<th>、5
6 、表格中列的個數，取決於一行中數據單元格的個數。
表格還是需要添加一些標簽進行優化，可以添加標題和摘要
"> 盤和耳機庫存量U年庫存記錄，記錄包括2013年到2012本表格記錄<table summary="
</caption> 年庫存記錄2013年到<caption>2012
3-4
標簽，鏈接到別一個頁面<a>，使用1
標簽可實現超鏈接，它在網頁制作中可以說是無處不在，只要有鏈接的地方，就會<a>使用
有這個標簽。
語法：
</a> 鏈接顯示的文本>”目標網址”<a href=
例如：
<a href = "http://www.imooc.com">click here!</a>
這個網頁。http://www.imooc.com文字，網頁鏈接到click here!上面例子作用是單擊
3-5
認識 標簽，為網頁插入圖片<img>
標簽來插入圖片。<img>可以使用肯定是缺少不了圖片，在網頁的制作中為使網頁炫麗美觀，
語法：
"> 提示文本" title = "下載失敗時的替換文本" alt="圖片地址<img src="
舉例：
8
<img src = "myimage.gif" alt = "My Image" title = "My Image" />
講解：
：標識圖像的位置；src、1
，可看到該屬性指定的文：指定圖像的描述性文本，當圖像不可見時（下載不成功時）alt、2
本；
；)鼠標滑過圖片時顯示的文本(：提供在圖像可見時對圖像的描述title、3
4 格式的圖像文件。JPEG，PNG，GIF、圖像可以是
四，表單標簽（與用戶進行交互）
4-1
這樣服務器端程序就可以處理表單傳過來表單是可以把瀏覽者輸入的數據傳送到服務器端，
的數據。
語法：
" 傳送方式method=" <form "> 服務器文件action="
講解：
結束。</form>開始，以<form>標簽是成對出現的，以<form>：1.<form>
。(save.php)頁面PHP比如一個,：瀏覽者輸入的數據被傳送到的地方2.action
：3.method 。）get/post數據傳送的方式（
4-2
輸入框<input>
文本輸入框、密碼輸入框
文本框也可以轉化為密就會用到文本輸入框。數字等內容時，當用戶要在表單中鍵入字母、
碼輸入框。
語法：
<form>
9
" /> 文本" value="名稱<input type="text/password" name="
</form>
：type、1
type="text"當; 時，輸入框為文本輸入框
輸入框為密碼輸入框。, 時type="password"當
PHP、ASP ：為文本框命名，以備后台程序name、2 使用。
) 一般起到提示作用(：為文本輸入框設置默認值。value、3
4-3
文本域，支持多行文本輸入
當用戶需要在表單中輸入大段文字時，需要用到文本輸入域。
語法：
</textarea> 文本">列數" cols="行數rows=" <textarea
、1 結束。</textarea>開始，以<textarea>標簽是成對出現的，以<textarea>
：多行輸入域的列數。cols 、2
rows 、3 ：多行輸入域的行數。
4-4
單選框，復選框
語法：
type="radio/checkbox" <input checked="checked"/> " 名稱name=" " 值value="
type: 、1
時，控件為單選框type="radio"當
時，控件為復選框type="checkbox"當
10
使用）PHP：提交數據到服務器的值（后台程序value、2
使用PHP、ASP：為控件命名，以備后台程序name、3
時，該選項被默認選中checked="checked"：當設置checked、4
取值一定要一致，這樣同一組的單選按鈕才可以起到單選name注意：同一組的單選按鈕，
的作用。
4-5
下拉列表框，節省空間
下拉列表在網頁中也常會用到，它可以有效的節省網頁空間。既可以單選、又可以多選。
</option> 選項">提交值<option value="語法：
提交值是向服務器提交的值，選項是顯示的值。
<form action="save.php" method="post">
:</label> 愛好<label>
<select>
</option> 看書">看書<option value="
</option> 旅游" selected="selected">旅游<option value="
</option> 運動">運動<option value="
<option value="</option> 購物">購物
</select>
</form>
4-6
使用下拉列表框進行多選
屬性，multiple="multiple"標簽中設置<select>下拉列表也可以進行多選操作，在
11
鍵同時進行單擊，可以選擇多個選項。Ctrl就可以實現多選功能，進行多選時按下
如下代碼：
<form action="save.php" method="post">
:</label> 愛好<label>
<select multiple="multiple">
</option> 看書">看書<option value="
">旅游<option value="</option> 旅游
</option> 運動">運動<option value="
</option> 購物">購物<option value="
</select>
</form>
4-7
在表單中有兩種按鈕可以使用，分別為：提交按鈕、重置。
1 ，提交按鈕：當用戶需要提交表單信息到服務器時，需要用到提交按鈕。
語法：
"> 提交value=" type="submit" <input
時，按鈕才有提交作用submit值設置為type：只有當type
value ：按鈕上顯示的文字
，重置按鈕，重置表單信息2
當用戶需要重置表單信息到初始時的狀態時，比如用戶輸入“用戶名”后，發現書寫有誤，
就可以。"reset"設置為type可以使用重置按鈕使輸入框恢復到初始狀態。只需要把
語法：
"> 重置<input type="reset" value="
12
時，按鈕才有重置作用reset值設置為type：只有當type
：按鈕上顯示的文字value
樣式css五，
5-1
樣式css認識
內容在瀏覽器HTML，它主要是用於定義”(Cascading Style Sheets) 全稱為“層疊樣式表CSS
內的顯示樣式，如文字大小、顏色、字體加粗等。
如下列代碼：
p{
font-size:12px;
color:red;
font-weight:bold;
}
使用可以讓不同網頁位置的文字有着統一的字體、樣式的一個好處是通過定義某個樣式，CSS
字號或者顏色等。
5-2
代碼語法CSS
樣式由選擇符和聲明組成，而聲明又由屬性和值組成css
} 值:屬性{選擇符
p{color:red;}
）p（如本例中是網頁中所有的段指明網頁中要應用樣式規則的元素，又稱選擇器，選擇符：
）不會受到影響。ol的文字將變成藍色，而其他的元素（如
”分隔。當有多”中的的就是聲明，屬性和值之間用英文冒號“：｛｝聲明：在英文大括號“
”分隔，如下所示：;條聲明時，中間可以英文分號“
13
p{font-size:12px;color:red;}
5-3
種：3樣式代碼插入的形式來看基本可以分為以下CSS 從
內聯式、嵌入式和外部式三種
樣式css內聯式1,
標簽中，如下面代碼：HTML代碼直接寫在現有的css就是把
這里文字是紅色。<p style="color:red"></p>
樣式代碼設置可以寫在一起，中間用css雙引號中，如果有多條style=""樣式代碼要寫在css
分號隔開。如下代碼：
</p> 這里文字是紅色。<p style="color:red;font-size:12px">
樣式，css嵌入式2,
標簽之間。如下面代碼實現把三type="text/css"></style><style 樣式代碼寫在css就是可以把
標簽中的文字設置為紅色：<span>個
<style type="text/css">
span{
color:red;
}
</style>
樣式寫在css之間，並且一般情況下嵌入式<style></style>樣式必須寫在css嵌入式
之間。<head></head>
樣式css外部式3,
寫在單獨的一個文件中
樣式文css這個代碼寫一個單獨的外部文件中，css就是把)也可稱為外聯式(樣式css外部式
樣式文件css標簽將<link>標簽內）使用<style>內（不是在<head>”為擴展名，在.css件以“
14
文件內，如下面代碼：HTML鏈接到
<link href="base.css" rel="stylesheet" type="text/css" />
注意：
。main.css 樣式文件名稱以有意義的英文字母命名，如css、1
是固定寫法不可修改。rel="stylesheet" type="text/css" 、2
標簽之內。<head>標簽位置一般寫在<link>、3
選擇器CSS六，
樣式定義由兩部分組成，形式如下：css每一條
{ 選擇器
; 樣式
}
中的“樣式”的作用對象，也就是“樣{}“選擇器”指明了，之前的部分就是“選擇器”{}在
式”作用於網頁中的哪些元素
6-1 ，標簽選擇器
、<h1>、<body>、<html>代碼中的標簽。如右側代碼編輯器中的html標簽選擇器其實就是
。例如下面代碼：<img>、<p>
p{font-size:12px;line-height:1.6em;}
的樣式。1.6em字號，行間距設置12px標簽設置p樣式代碼的作用：為css上面的
，類選擇器6-2
“膽小如可以實現為:如右側代碼編輯器中的代碼樣式編碼中是最常用到的，css類選擇器在
“勇氣”字體設置為紅色。、鼠”
語法：
;} 樣式代碼{css類選器名稱.
注意：
15
、英文圓點開頭1
、其中類選器名稱可以任意起名（但不要起中文噢）2
使用方法：
第一步：使用合適的標簽把要修飾的內容標記起來，如下：
</span> 膽小如鼠<span>
為標簽設置一個類，如下："類選擇器名稱class="第二步：使用
</span> 膽小如鼠<span class="stress">
樣式，如下：css第三步：設置類選器
*/ 類前面要加入一個英文圓點.stress{color:red;}/*
選擇器ID，6-3
選擇器都類似於類選擇符，但也有一些重要的區別：ID在很多方面，
。"類名稱class="，而不是"名稱id="ID、為標簽設置1
。）.）號，而不是英文圓點（#選擇符的前面是井號（ID、2
選擇器的區別ID類和6-4,
相同點：可以應用於任何元素
不同點：
HTML選擇器只能在文檔中使用一次。與類選擇器不同，在一個ID、1選擇器只ID文檔中，
能使用一次，而且僅一次。而類選擇器可以使用多次。
下面代碼是正確的：
的小女孩，上課從來不敢回</span>膽小如鼠<span class="stress">三年級時，我還是一個<p>
勇氣<span class="stress">答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個
</p> 來回答老師提出的問題。</span>
而下面代碼是錯誤的：
16
的小女孩，上課從來不敢回答</span>膽小如鼠id="stress"><span 三年級時，我還是一個<p>
</span>勇氣<span id="stress">就一直沒有這個生怕回答錯了老師會批評我。老師提出的問題，
</p> 來回答老師提出的問題。
、可以使用類選擇器詞列表方法為一個元素同時設置多個樣式。我們可以為一個元素同時2
（不能使用選擇器是不可以的ID但只可以用類選擇器的方法實現，設多個樣式， 。詞列表）ID
) 完整代碼見右側代碼編輯器(下面的代碼是正確的
.stress{
color:red;
}
.bigsize{
font-size:25px;
}
...</p> 下學期時，我們班上了一節公開課</span>三年級<span class="stress bigsize">到了<p>
25px 上面代碼的作用是為“三年級”三個文字設置文本顏色為紅色並且字號為
) 完整代碼見右側代碼編輯器(下面的代碼是不正確的
#stressid{
color:red;
}
#bigsizeid{
font-size:25px;
}
...</p> 下學期時，我們班上了一節公開課</span>三年級<span id="stressid bigsizeid">到了<p>
的作用。25px上面代碼不可以實現為“三年級”三個文字設置文本顏色為紅色並且字號為
，子選擇器6-5
17
用於選擇指定標簽元素的子元素。如(>),還有一個比較有用的選擇器子選擇器，即大於符號
下面的代碼：
.food>li{border:1px solid red;}
加入紅色實線邊框。li下的子元素food名為class這行代碼會使
選擇器)后代(，包含6-6
用於選擇指定標簽元素下的后輩元素。如右側代碼編輯器中的代,包含選擇器，即加入空格
碼：
span{color:red;} .first
請注意這個選擇器與子選擇器的區別
）僅是指它的直接后代，或者你可以理解為作用於子元素的第一child selector，子選擇器（1
代后代
，后代選擇器是作用於所有子后代元素。后代選擇器通過空格來進行選擇，而子選擇器是2
>通過“ ”進行選擇。
作用於元素的第一代后代，空格作用於元素的所有后代。>總結：
，通用選擇器6-7
中任意html）號指定，它的作用是匹配*通用選擇器是功能最強大的選擇器，它使用一個（
中任意標簽元素字體顏色全部設置為紅色：html標簽元素，如下使用下面代碼使用
* {color:red;}
6-8 ，偽類選擇符
不存在的標簽設置樣式，html更有趣的是偽類選擇符，為什么叫做偽類選擇符，它允許給
中一個標簽元素的鼠標滑過的狀態來設置字體顏色：html比如說我們給
a:hover{color:red;}
標簽包裹的文字內容中的“膽小如鼠”字體顏色在鼠標滑過時變為<a></a>這行代碼會使被
紅色。
，分組選擇符6-9
18
，如下代碼為）中多個標簽元素設置同一個樣式時，可以使用分組選擇符（，html當你想為
標簽同時設置字體顏色為紅色：span、h1右側代碼編輯器中的
h1,span{color:red;}
它相當於下面兩行代碼：
h1{color:red;}
span{color:red;}
的繼承、層疊和特殊性。CSS七，
7-1
的某些樣式是具有繼承性的，那么什么是繼承呢？繼承是一種規則，它允許樣式不僅應CSS
標p標簽元素，而且應用於其后代。比如下面代碼：如某種顏色應用於html用於某個特定
標簽中的所有子元素文本，這里子元素為p標簽，還應用於p簽，這個顏色設置不僅應用
標簽。span
border:1px solid red; 樣式是不具有繼承性的。如css但注意有一些
7-2
樣式css根據權值來判斷使用哪個
樣式。css樣式的，權值高的就使用哪種css瀏覽器是根據權值來判斷使用哪種
下面是權值的規則：
。例如下面的代碼：100選擇符的權值最高為ID，10，類選擇符的權值為1標簽的權值為
1*/ 權值為p{color:red;} /*
1+1=2*/ 權值為p span{color:green;} /*
10*/ 權值為.warning{color:white;} /*
1+1+10=12*/ 權值為p span.warning{color:purple;} /*
100+10+1=111*/ 權值為#footer .note p{color:yellow;} /*
，所以可以0.1繼承也有權值但很低，有的文獻提出它只有--注意：還有一個權值比較特殊
理解為繼承的權值最低
19
，層疊7-3
樣式存在並且這css文件中對於同一個元素可以有多個html我們來思考一個問題：如果在
樣式具有相同權重值怎么辦？好，這一小節中的層疊幫你解決這個問題。css多個
樣式存在，當有相同權重的樣式存css文件中對於同一個元素可以有多個html層疊就是在
樣式會被應用。css樣式的前后順序來決定，處於最后面的css在時，會根據這些
: 如下面代碼
p{color:red;}
p{color:green;}
</p> 的小女孩。</span>膽小如鼠<span>三年級時，我還是一個<p class="first">
，這個層疊很好理解，理解為后面的樣式會覆蓋前面的樣green中的文本會設置為p 最后
式。
樣式優先級就不難理解了：css所以前面的
> 內聯樣式表（標簽內部） 。外部樣式表（外部文件中）> 嵌入樣式表（當前文件中）
，重要性7-4
重要性
怎么辦？這時有些特殊的情況需要為某些樣式設置具有最高權值，我們在做網頁代碼的時，
來解決。!important候我們可以使用
如下代碼：
p{color:red!important;}
p{color:green;}
<p class="first"></p> 的小女孩。</span>膽小如鼠<span>三年級時，我還是一個
紅色。red段落中的文本會顯示的p 這時
要寫在分號的前面!important注意：
格式化排版CSS八，
20
8-1
文字排版
字體--，文字排版1
樣式為網頁中的文字設置字體、字號、顏色等樣式屬性。下面我們來看一css我們可以使用
個例子，下面代碼實現：為網頁中的文字設置字體為宋體。
";} 宋體body{font-family:"
就因為如果用戶本地電腦上如果沒有安裝你設置的字體，這里注意不要設置不常用的字體，
（因為用戶是否可以看到你設置的字體樣式取決於用戶本地電腦會顯示瀏覽器默認的字體。
）上是否安裝你設置的字體。
字號、顏色--，文字排版2
：)灰色#666(像素，並把字體顏色設置為12可以使用下面代碼設置網頁中文字的字號為
body{font-size:12px;color:#666}
，文字排版3 粗體--
樣式來改變文字的樣式：粗體、斜體、下划線、刪除線，可以使用下面css我們還可以使用
代碼實現設置文字以粗體樣式顯示出來。
p span{font-weight:bold;}
斜體--，文字排版4
以下代碼可以實現文字以斜體樣式在瀏覽器中顯示：
p a{font-style:italic;}
三年級時，我還是一個<p></p> 的小女孩。</a>膽小如鼠<a>
下划線--，文字排版5
可以使用下面代碼來這樣可以在視覺上強調文字，有些情況下想為文字設置為下划線樣式，
實現：
p a{text-decoration:underline;}
21
</p> 的小女孩。</a>膽小如鼠<a>三年級時，我還是一個<p>
刪除線，在電商網站上經常見。
p a{text-decoration:line-through;}
8-2
段落排版
縮進--，段落排版1
中文文字中的段前習慣空兩個文字的空白，這個特殊的樣式可以用下面代碼來實現：
p{text-indent:2em;}
倍大小。2的意思就是文字的2em注意：
行間距--，段落排版2
）line-height（這一小節我們來學習一下另一個在段落排版中起重要作用的行間距屬性如下，
倍。1.5代碼實現設置段落行間距為
p{line-height:1.5em;}
字間距、字母間距--，段落排版3
文字間隔、字母間隔設置：
如果想在網頁排版中設置文字間隔或者字母間隔就可以使用如下來實現，letter-spacing
面代碼：
h1{
letter-spacing:50px;
}
...
</h1> 了不起的蓋茨比<h1>
注意：這個樣式使用在英文單詞時，是設置字母與字母之間的間距。
22
單詞間距設置：
來實現。如下代碼：word-spacing如果我想設置英文單詞之間的間距呢？可以使用
h1{
word-spacing:50px;
}
...
<h1>welcome to imooc!</h1>
盒模型CSS九，
9-1
元素分類
CSS在我們需要提前知道一些知識，布局之前，CSS在講解中的標簽元素大體被分html中，
為三種不同的類型：塊狀元素、內聯元素和內聯塊狀元素。
常用的塊狀元素有：
、<ol>、<h1>...<h6>、<p>、<div><form> 、<blockquote> 、<address>、<table>、<dl>、<ul>
常用的內聯元素有：
、<a><code> 、<cite>、<var>、<q>、<label>、<strong>、<em>、<i>、<br>、<span>
常用的內聯塊狀元素有：
<input> 、<img>
9-2
塊級元素--元素分類
html什么是塊級元素？在就是塊級元素。設置<li> 和<ul> 、<form>、<h1>、<p> 、<div>中
就是將元素顯示為塊級元素。如下代碼就是將行內元素display:block轉換為塊狀元素，從a
元素具有塊狀元素特點。a頁使用
a{display:block;}
23
塊級元素特點：
一個塊級元素（真霸道，並且其后的元素也另起一行。每個塊級元素都從新的一行開始，、1
獨占一行）
、元素的高度、寬度、行高以及頂和底邊距都可設置。2
3，除非設（和父元素的寬度一致）100%、元素寬度在不設置的情況下，是它本身父容器的
定一個寬度。
9-3
行內元素--元素分類
<span>中，html在就是典型的行內元<em>和<strong> 、<img> 、<input>、<label>、<a>、
）元素。當然塊狀元素也可以通過代碼inline素（ 將元素設置為行內元素。display:inline
行內元素特點：
、和其他元素都在一行上；1
、元素的高度、寬度、行高及頂部和底部邊距不可設置；2
、元素的寬度就是它包含的文字或圖片的寬度，不可改變。3
9-4
內聯塊狀元素--元素分類
就）inline-block（素元狀塊聯內碼代，點特的素元狀塊、素元聯內備具時同是
標簽就是<input>、<img>，)新增(css2.1就是將元素設置為內聯塊狀元素。display:inline-block
這種內聯塊狀標簽。
元素特點：inline-block
1 、和其他元素都在一行上；
、元素的高度、寬度、行高以及頂和底邊距都可設置。2
9-5
邊框（一）--盒模型
24
邊(盒子模型的邊框就是圍繞着內容及補白的線，這條線你可以設置它的粗細、樣式和顏色
。)框三個屬性
、樣式為實心的、顏色為紅色的邊框：2px來設置邊框粗細為div如下面代碼為
div{
red; solid border:2px
}
代碼的縮寫形式，可以分開寫：border上面是
div{
border-width:2px;
border-style:solid;
border-color:red;
}
注意：
border-style、1 （邊框樣式）常見樣式有：
。（實線）| solid（點線）| dotted（虛線）dashed
: （邊框顏色）中的顏色可設置為十六進制顏色，如border-color、2
前面的井號不要忘掉。border-color:#888;//
9-6
邊框（二）--盒模型
而其它三邊都不設置邊框樣式怎么辦標簽單獨設置下邊框，p如果有想為現在有一個問題，
樣式中允許只為一個方向的邊框設置樣式：css呢？
div{border-bottom:1px solid red;}
同樣可以使用下面代碼實現其它三邊上、右、左邊框的設置：
25
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
9-7
邊界--盒模型
）來設置。邊界也是可分為上、右、下、margin元素與其它元素之間的距離可以使用邊界（
左。如下代碼：
div{margin:20px 10px 15px 30px;}
也可以分開寫：
div{
margin-top:20px;
margin-right:10px;
margin-bottom:15px;
margin-left:30px;
}
如果上下左右的邊界都為 可以這么寫：10px;
div{ margin:10px;}
，可以這么寫：20px，左右一樣為10px如果上下邊界一樣為
div{ margin:10px 20px;}
margin和padding總結一下： 在邊框外。margin在邊框里，padding的區別，
9-8
填充--盒模型
元素內容與邊框之間是可以設置距離的，稱之為填充。填充也可分為上、右、下、左。如下
26
代碼：
div{padding:20px 10px15px 30px;}
順序一定不要搞混。可以分開寫上面代碼：
div{
padding-top:20px;
padding-right:10px;
padding-bottom:15px;
padding-left:30px;
}
可以這么寫10px;如果上、右、下、左的填充都為
div{padding:10px;}
，可以這么寫：20px，左右一樣為10px如果上下填充一樣為
div{padding:10px 20px;}
9-9
盒模型代碼簡寫
(padding)內邊距、(margin)還記得在講盒模型時外邊距設置上下左右四個方向(border)和邊框
的例子如下：padding和margin的邊距是按照順時針方向設置的：上右下左。具體應用在
14px*/ 左設置為、12px下設置為、15px右設置為、10px上設置為margin:10px 15px 12px 14px;/*
: 通常有下面三種縮寫方法
的值相同，如下面代碼：left、bottom、right、top、如果1
margin:10px 10px 10px 10px;
可縮寫為：
margin:10px;
27
的值相同，如下面代碼：right 和left值相同、bottom和top、如果2
margin:10px 20px 10px 20px;
可縮寫為：
margin:10px 20px;
、如果3 的值相同，如下面代碼：right和left
margin:10px 20px 30px 20px;
可縮寫為：
margin:10px 20px 30px;
是一致的。margin的縮寫方法和border、padding注意：
9-10
顏色值縮寫
進制的色彩值時，如果每兩位16樣式也是可以縮寫的，當你設置的顏色是css關於顏色的
的值相同，可以縮寫一半。
：1例子
p{color:#000000;}
可以縮寫為：
p{color: #000;}
：2例子
p{color: #336699;}
可以縮寫為：
p{color: #369;}
布局模型CSS十，
28
10-1
布局模型css
我們就可以深入探討網頁布局的基本模型 盒模型類型， 盒模型的基本概念、CSS 清楚了
最基本、CSS 了。布局模型與盒模型一樣都是但布局模型是建立在盒模 最核心的概念。
布局模板。如果說布局模型是本，CSS 布局樣式或CSS 型基礎之上，又不同於我們常說的
布局模板就是末了，是外在的表現形式。CSS 那么
。Float 和Layer 、Flow種基本的布局模型，用英文概括為：3包含CSS
在網頁中，元素有三種布局模型：
）Flow、流動模型（1
(Float) 、浮動模型2
）Layer、層模型（3
10-2
流動模型（一）
：自上而下。）Flow流動（
）是默認的網頁布局模式。也就是說網頁在默認狀態下的Flow先來說一說流動模型，流動（
網頁元素都是根據流動模型來分布網頁內容的。HTML
個比較典型的特征：2流動布局模型具有
因為在默認狀態塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，第一點，
。實際上，塊狀元素都會以行的形式占據位置。如右側代碼100%下，塊狀元素的寬度都為
h1，(div編輯器中三個塊狀元素標簽 。100%寬度顯示為p)，
（內聯第二點，在流動模型下，內聯元素都會在所處的包含元素內從左到右水平分布顯示。
元素可不像塊狀元素這么霸道獨占一行）
、span、a右側代碼編輯器中內聯元素標簽 都是內聯元素。strong、em
10-3
浮動模型
怎么辦呢？不如果現在我們想讓兩個塊狀元素並排顯示，塊狀元素這么霸道都是獨占一行，
29
但可以任何元素在默認情況下是不能浮動的，設置元素浮動就可以實現這一願望。要着急，
等元素都可以被定義為浮動。如下代碼可以實現img、table、p、div定義為浮動，如CSS用
元素一行顯示。div兩個
div{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
<div id="div1"></div>
<div id="div2"></div>
且需要浮動的幾個元素寬度加起來一設置浮動的同時一定要先設置塊狀元素的寬度，注意：
定要小於容器元素的寬度。
10-4
什么是層模型？
中非常流行的圖層編輯功能一PhotoShop什么是層布局模型？層布局模型就像是圖像軟件
樣，每個圖層能夠精確定位操作，但在網頁設計領域，由於網頁大小的活動性，層布局沒能
html受到熱捧。但是在網頁上局部使用層布局還是有其方便之處的。下面我們來學習一下
中的層布局。
中的圖層一樣可以對每個圖PhotoShop元素在網頁中精確定位，就像圖像軟件html如何讓
）屬性來支持層布局模型。positioning定義了一組定位（CSS層能夠精確定位操作。
層模型有三種形式：
(position: absolute) 、絕對定位1
(position: relative) 、相對定位2
(position: fixed) 、固定定位3
絕對定位（相對於父類）--，層模型1
30
這條語，)表示絕對定位position:absolute(需要設置如果想為元素設置層模型中的絕對定位，
屬性相對於其最接bottom、top、right、left句的作用將元素從文檔流中拖出來，然后使用
body則相對於如果不存在這樣的包含塊，近的一個具有定位屬性的父包含塊進行絕對定位。
元素，即相對於瀏覽器窗口。
div如下面代碼可以實現 。50px，向下移動100px元素相對於瀏覽器窗口向右移動
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
<div id="div1"></div>
2 相對定位（相對於以前）--，層模型
，它通（表示相對定位）position:relative如果想為元素設置層模型中的相對定位，需要設置
屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過bottom、top、right、left過
，然后相對於以前)並且元素像層一樣浮動了起來(方式生成一個元素static(float)程是首先按
的位置移動，移動的方向和幅度由屬性確定，偏移前的位置保留bottom、top、right、left
不動。
100px; ，向右移動50px如下代碼實現相對於以前位置向下移動
#div1{
width:200px;
height:200px;
border:2px red solid;
31
position:relative;
left:100px;
top:50px;
}
<div id="div1"></div>
固定定位（相對於網頁窗口）--，層模型3
固定住某一坐標。
定位類型類似，但它的相對移動的坐標是視圖（屏幕內的absolute：表示固定定位，與fixed
除非本身。由於視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，網頁窗口）
或改變瀏覽器窗口的顯示大小，你在屏幕中移動瀏覽器窗口的屏幕位置，因此固定定位的元
動流檔文受會不，置位個某的圖視內口窗器覽瀏於位終始會素與這，響影
屬性功能相同。以下代碼可以實現相對於瀏覽器視圖向右移動background-attachment:fixed?
。並且拖動滾動條時位置固定不變。50px，向下移動100px
#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}
10-5
組合使用Absolute與Relative
可以實現被設置元素相position:absolute使用小節的相對定位的方法：12-6小伙伴們學習了
大家有沒有想過可不可以相對於其它元素進行定位呢？設置定位以后，）body（對於瀏覽器
來幫忙，但是必須遵守下面規范：position:relative答案是肯定的，當然可以。使用
32
、參照定位的元素必須是相對定位元素的前輩元素：1
--> 參照定位的元素<div id="box1"><!--
--> 相對定位元素</div><!--相對參照元素進行定位<div id="box2">
</div>
。的父元素（父元素當然也是前輩元素了）box2是box1從上面代碼可以看出
position:relative; 、參照定位的元素必須加入2
#box1{
width:200px;
height:200px;
position:relative;
}
3 來進行偏移定位了。right、left、bottom、top便可以使用，position:absolute定位元素加入、
#box2{
position:absolute;
top:20px;
left:30px;
}
而可以（這里注意參照物就可以不是瀏覽器了，定位了box1就可以相對於父元素box2這樣
。自由設置了）