一、Web項目（可跳過，直接從下一個標題開始）
1、Web項目：
指的是帶網頁的項目，通過瀏覽器可以訪問的項目。比如：淘寶、天貓等。
2、Web項目構成：
瀏覽器（客戶端）、服務器、數據庫。
3、Java Web項目訪問流程：
客戶端通過Servlet/JSP與服務器進行聯系，服務器通過JDBC與數據庫進行聯系。
4、Java Web程序員學習目標：
（1）如何對服務器進行編程。
（2）如何對數據庫進行編程。
（3）如何使服務器訪問數據庫。
（4）如何對客戶端進行編程。
（5）如何使客戶端訪問服務器。
（6）如何使用框架提高效率。
5、Web基礎（寫網頁）：
（1）HTML：用來勾勒出網頁的結構與內容。
（2）CSS：用來裝飾網頁。控制頁面的外觀和表現。
（3）JavaScript：用來使網頁出現動態的效果。控制頁面的行為。
二、HTML
1、HTML工作原理：
HTML是部署在服務器上的文本文件。
（1）根據HTTP協議，瀏覽器發送請求到服務器。
（2）服務器做出響應，並返回響應請求到瀏覽器。
（3）瀏覽器執行HTML，並顯示內容。
即HTML部署在服務端，運行在客戶端。
2、XML：
（1）XML（Extensible Markup Language）指可擴展標記語言。主要用於存儲或傳輸數據以及作為配置文件。（重點為數據的內容）
（2）可擴展表現為：標簽可擴展、屬性可擴展、元素之間嵌套關系可擴展。
（3）嚴格要求標簽的嵌套、配對，屬性必須要有值，屬性值寫在引號中。
（4）XML解析方式：
DOM解析方式：指Document Object Model，即文檔對象模型，是W3C組織推薦的一種處理XML的一種方式。DOM解析文檔時，會將文檔中所有元素，按照其出現的層次關系，將其解析成一個一個的Node對象（節點）。DOM優點：把xml文件在內存中構造出樹形結構，可以遍歷並修改節點。缺點：如果文件較大，內存有壓力，解析時間長。
SAX解析方式：指simple API for XML ，是一種XML解析的替代方法。SAX逐行掃描文檔，邊掃描邊解析。相比於DOM，SAX是一種速度更快、更有效的方法，且SAX可以在解析文檔的任意時刻停止解析。SAX優點：解析速度快，沒內存壓力。缺點：不能對節點進行修改。（比如安卓）
3、HTML:
（1）HTML（HyperText Markup Language）指超文本標記語言，是一種純文本類型的語言。用於顯示數據。（重點是數據的外觀）
（2）可以理解為固定的XML，標簽固定、屬性固定、元素嵌套關系固定。
（3）HTML存在多個版本，若不能正確識別版本，則瀏覽器不能正確的顯示頁面。使用<!DOCTYPE>用於聲明HTML版本。
例如： 聲明HTML5版本， <!DOCTYPE html>
（4）基本結構：
<!-- 將文檔聲明為HTML5版本 --> <!DOCTYPE html> <!--html是唯一的根--> <html> <head> <!--設置文檔標題、編碼、引入的資源--> </head> <body> <!--頁面上要呈現的內容--> Hello HTML! </body> </html>
（5）<head>標簽：
是所有頭部元素的容器。
<head>可以有元素<title>,<meta>,<link>,<style>,<script>。用於設置文檔標題、編碼、引入的資源。
<title>定義頁面標題，若不設置，則默認為當前文件名。
<meta>提供關於HTML文檔的元數據，該數據不會顯示在頁面上，但對於機器是可讀的。常見屬性有：content, http-equiv, charset。用於規定頁面的描述、關鍵字、文檔的作者、最后修改的時間以及其他元數據。
<!-- 將文檔聲明為HTML5版本 --> <!DOCTYPE html> <!--html是唯一的根元素 --> <html> <head> <!-- 設置標題、編碼、引入的資源 --> <!-- 設置文檔標題 --> <title>我的第一個網頁</title> <!-- 設置編碼格式, 要和文檔保存的編碼格式相同--> <meta charset = "utf-8"/> </head> <body> <!-- 文檔呈現的內容 --> Hello HTML! </body> </html>
三、HTML標簽
1、文本元素（文本標簽）
（1）作用：
文本是網頁上的重要組成部分，直接書寫的文本會使用瀏覽器的默認樣式顯示。
（2）分類：
標題元素（<h1> ~ <h6>）。
段落元素（<p>）。
列表元素（<ol> <li>, <ul> <li>）。
分區元素（<div>， <span>）。
行內元素（<i>, <em>, <br>等）。
（3）標題元素（<h1> ~ <h6>）：
標題元素使文字突出，一般用於文章的標題，顯示不同的字體大小。
語法規則：
<h#></h#>，其中# = 1,2,3,4,5,6。其中<h1>為最大號標題。
（4）段落元素（<p>）：
段落元素提供了結構化文本的方式。文本會用單獨的段落顯示，與前后文本分開，並添加一段額外的垂直空白距離。可以使用<br>主動換行。
語法規則：
<p>文本內容</p>。
（5）列表元素（<ol> <li>, <ul> <li>）：
列表將具有相似特征或者具有先后順序的幾行文字進行排序。所有的列表都由列表類型和列表項組成。
列表類型：有序列表（<ol>），無序列表（<ul>）。
列表項指：<li>，用於顯示具體的列表內容。
語法規則：
【有序列表（在文本內容前加數字表示順序）：】 <ol> <li>文本內容</li> <li>文本內容</li> </ol> 【無序列表（在文本內容前加小圓點表示無序）：】 <ul> <li>文本內容</li> <li>文本內容</li> </ul> 【有序、無序嵌套：】 <ol> <li> 文本內容 <ul> <li>文本內容</li> <li>文本內容</li> </ul> </li> <li>文本內容</li> </ol>
（6）分區元素（<div>， <span>）
分區元素用於元素分組，常用於頁面布局，便於開發。
語法規則：
【塊分區元素（會影響頁面布局）】： <div>文本內容</div> 【行內分區元素（設置同一行文字中的不同格式）】： <span>文本內容</span>
（7）行內元素（<i>, <em>, <br>等）
<i>， <em>元素用來定義斜體字。 <b>, <strong>元素用來定義粗體字。 <del>元素用來定義帶刪除線的文字。 <u>元素用來定義帶下划線的文字。 <br>元素用來換行。 表示空格（其分號不能少）。 < 表示小於號（<）。 > 表示大於號（>）。 & 表示（&）。 © 表示版權（©）。
2、圖像、超鏈接、錨點、表格
（1）圖像<img>:
使用<img>元素將圖像添加到頁面。
必須存在的屬性：src（添加路徑）。常用屬性：width, height。
語法規則：
<img src="" width="" height=""> src屬性：指圖片路徑。 width屬性：指圖片寬度。 height屬性：指圖片高度。
（2）超鏈接<a>:
使用<a>元素創建一個超鏈接。
語法規則：
<a href ="" target = "">文本</a>。 href屬性：指鏈接的URL。 target屬性：指目標的打開方式，可取值為_blank（打開新窗口）， _self（當前窗口打開）等。
（3）錨點（特殊的超鏈接）：
錨點是文檔中某行的一個記號，用於鏈接（跳轉）到文檔中的某個位置。
語法規則：
定義錨點： <a name = "name1">錨點一</a> 鏈接到錨點（要在錨點名前加#）： <a href = "#name1">回到錨點一</a> 默認的鏈接為回到頂部，不需要設置錨點。 格式： <a href = "#"></a>
（4）表格：
表格通常用來組織結構化的信息。表格是由一些矩形框（單元格）按照從左到右，從上到下的順序排列而成的。表格的數據顯示在單元格內。
表格元素為： table（表格）, td（列，是單元格）, tr（行）。 默認情況下，表格的邊線看不見，可以給table統一設置邊線可見。 cellpadding:單元格邊框與內容間的間距。 cellspacing:單元格之間的間距。 常用屬性： <table>常用屬性：border, width, height, align, cellpadding, cellspacing. <tr>常用屬性:align, valign . <td>常用屬性：align, valign, width, height, colspan, rowspan。 rowspan：跨行，使當前單元格沿着垂直方向延伸，值為合並單元格數。 colspan：跨列，使當前單元格沿着水平方向延伸，值為合並單元格數。 caption元素：為表格定義標題，默認居中顯示在表格上方。 舉例： <!-- 創建一個兩行兩列的表格 --> <table border="1px" width="100px" height="100px"> <caption> 測試 </caption> <tr> <td colspan="2" align="center"> aaa </td> </tr> <tr> <td> ccc </td> <td> ddd </td> </tr> </table> 表格行分組： 表格可以分成3部分：表頭，表主體和表尾。分組的目的是為了方便對組內元素設置樣式以及編程（JS）。 表頭行分組：<thead></thead> 表主體行分組：<tbody></tbody> 表尾行分組：<tfoot></tfoot> 【舉例：】 <!-- 創建一個兩行兩列的表格，使用<tbody> --> <table border="1px" width="100px" height="100px"> <caption> 測試 </caption> <tbody> <tr> <td colspan="2" align="center"> aaa </td> </tr> <tr> <td> ccc </td> <td> ddd </td> </tr> </tbody> </table>
3、表單<form>
（1）表單的作用：
表單用於顯示、收集信息，並提交信息到服務器。表單是瀏覽器向服務器傳輸數據的手段。
表單處理：
實現數據交換的可見界面元素，比如文本框、按鈕等。
提交后的表單處理（不可見）。
（2）表單<form>：
使用<form>元素創建表單。並在<form>元素中添加表單控件元素。即form元素在頁面上有固定的表單范圍，其內部的空間才可提交。
主要屬性：
action：定義表單被提交時發生的動作，通常包含服務方腳本的URL（JSP或PHP等）。
method：指出表單數據的提交方式，取值為get或者post。
enctype：表單數據進行編碼的方式。
name：表單的名稱。
（3）表單控件：
表單控件元素是包含在表單元素中具有可視化外觀的HTML元素，用於訪問者輸入信息。即表單控件是一種HTML元素，是信息輸入項。表單可以包含很多不同類型的表單控件。
常用表單控件：
input元素：文本輸入控件、按鈕、單選和復選框、選擇框、文件選擇框和隱藏控件等。
textarea元素：定義多行的文本輸入控件。
select和option元素：可創建單選或多選菜單。
（4）<input>標簽：
<input>元素用於收集用戶信息。該元素是一個單標記，即格式為<input />。
屬性： type：根據不同type值，可以創建各種類型的輸入字段，比如文本框、復選框等。 value：控件的數據。 name：控件的名稱。 文本框與密碼框： 文本框：<input type="text" /> 密碼框：<input type="password" /> 【主要屬性：】 value屬性：由訪問者自由輸入的任何文本。 maxlength屬性：限制輸入的字符數。 readonly屬性：設置文本控件可讀。 【舉例：】 <!-- label是表單中的文本，通過for屬性可以綁定到input元素上，使得點擊此label時，相當於點擊了對應的input。id相當於元素的身份證號，用來引用該元素 --> <label for="userName">賬號：</label> <input type="text" id="userName"/> <label for="pwd">密碼：</label> <input type="password" id="pwd" /> 單選框與復選框： 單選框：<input type="radio" /> 復選框：<input type="checkbox" /> 【主要屬性：】 value：文本，當提交form時，如果選中此單選按鈕，那么該value值將被發送到服務器。 name：用於實現分組，一組單選框或者復選框名稱必須相同。 checked：設置選中。 【舉例：】 <!-- 單選框(按鈕) ，一組單選框間需彼此互斥，需使其同名，即radio同名.checked表示默認選項（默認選中）--> <input type="radio" name="sex" id="male" checked/> <label for="male">男</label> <input type="radio" name="sex" id="female" /> <label for="female">女</label> <!-- 多選框（按鈕）name屬性用於分組，id用於標識 --> <input type="checkbox" name="favorites" id="basketball" /> <label for="basketball">籃球</label> <input type="checkbox" name="favorites" id="football" /> <label for="football">足球</label> <input type="checkbox" name="favorites" id="volleyball" /> <label for="volleyball">排球</label> 提交、重置、普通按鈕： 提交按鈕：<input type="submit" />傳送表單數據到服務器端或其他程序進行處理。 重置按鈕：<input type="reset" />清空表單數據，並將表單控件設置為最初的默認值。 普通按鈕：<input type="button" />用於執行客戶端腳本。 【主要屬性：】 value：按鈕的標題文本，即按鈕上顯示的文本內容。 【舉例：】 <input type="submit" value="提交"/> <input type="reset" value="重置"/> <input type="button" value="取消"/> 隱藏域、文件選擇框： 隱藏域：<input type="hidden" />在表單中包含不希望用戶看見的信息。 文件選擇框：<input type="file" />選擇要上傳的文件。 【舉例：】 <!-- 隱藏域，即隱藏的文本框（看不見），用來封裝一些不希望被用戶看到的數據。該控件的數據不需手動輸入，而是預置數據。 --> <input type="hidden" value="123"/> <!-- 文件選擇框 ,用於提交文件--> <lable for="attachment">上傳附件：</lable> <input type="file" id="attachment" />
（5）<textarea>標簽：
文本域：相當於多行文本框。 語法：
<textarea>文本</textarea>
主要屬性： cols：指定文本區域的列數。 rows：指定文本區域的行數。 readonly：只讀。 【舉例：】 <!-- 文本域可以使用cols設置列數，使用rows設置行數。文本內容為默認值，可不寫。--> <label for="desc">自我介紹</label> <textarea id="desc" cols="30" rows="5"> Hello World! </textarea>
（6）<select>標簽：
下拉選項：下拉框，用於多個內容的選擇。 語法： <select> <option>---請選擇---</option> <option value="1">Java</option> <option value="2">Php</option> <option value="3">.net</option> </select>
四、CSS
1、CSS
（1）什么是CSS？
CSS（Cascading Style Sheets）,指層疊樣式表。樣式通常存儲在樣式表中，定義如何顯示HTML，即CSS給HTML化妝（修飾）的。
（2）如何使用CSS？
內聯方式：即樣式表定義在單個HTML元素中。
內部樣式表：樣式定義在HTML頁的頭元素中。
外部樣式表（推薦使用）：將樣式定義在一個外部的CSS文件中（.css文件）。由HTML頁面引用樣式表文件。
（3）CSS內聯樣式：
樣式定義在HTML標簽的style屬性里。
語法規則：
1、只需將分號隔開的一個或多個屬性/值對作為元素的style屬性的值。 2、屬性和屬性值間用（:）冒號連接。 3、多個屬性間用（;）分號隔開。 【格式：】 <h1 style="color:red;">內聯樣式演示</h1>
（4）CSS內部樣式：
樣式定義在HTML文檔的頭部標簽<head>的<style>標簽內。
語法規則：
在<head>元素里添加<style>元素，然后在<style>元素里添加樣式規則。 【格式：】 <head> <title>CSS演示</title> <meta charset="utf-8" /> <!-- 內部樣式 --> <style type="text/css"> h2{ color:blue; } </style> </head>
（5）CSS外部樣式：
樣式定義在獨立的（.css）文件里。是一個純文本文件，文件后綴名（.css）。該文件只包含樣式規則。然后在HTML的頭部標簽<head>中通過<link>元素來引用。
語法規則：
<!-- 外部樣式，需引用（.css）文件。 rel表示引用的是什么文件，type表示引用的格式。href表示路徑--> <link rel="stylesheet" type="text/css" href="../css/CSS演示.css"/>
（6）CSS規則特性：
繼承性： 父元素的CSS聲明可以被子元素繼承、比如字體、顏色等。
層疊性： 同一個元素若存在多個CSS規則，對於不沖突的聲明可以進行疊加。
優先級： 同一個元素若存在多個CSS規則，對於沖突的聲明可以以優先級高的為准。即相同的樣式，如果重復定義，則以最后一次定義為准（就近原則）。
（7）CSS寫法：
CSS由CSS選擇器以及CSS聲明組成。
選擇器用於定位到某個元素。
聲明用於給元素附加效果。
2、CSS選擇器
（1）分類：
元素選擇器。
類選擇器。
id選擇器。
選擇器組。
派生選擇器。
偽類選擇器。
（2）元素選擇器：
通過元素名（標簽名）來選擇CSS作用的目標。
格式： p{ } 使用情景： 如果頁面中有多個相同元素需要相同的樣式效果，那么可以使用元素選擇器。 【舉例：】 <style type="text/css"> p{ color:red; } </style>
（3）類選擇器：
類選擇器允許以一種獨立於文檔元素的方式來指定樣式。所有能附帶class屬性的元素都可以使用此樣式聲明，並將元素的class屬性值設置為樣式類名。
格式： .className{ } 使用情景： 如果頁面中有不同的元素需要相同的樣式效果，可以使用類選擇器。 【舉例：】 <style type="text/css"> .important{ color:red; } </style> <h1 class = "important">Hello</h1> <h2 class = "important">World</h2> 可以將類選擇器和元素選擇器結合，以實現一個元素中不同樣式的控制。 【格式：】 元素選擇器.className{ } 【舉例：】 <style type="text/css"> p.test1{ color : red; } p.test2{ color : yellow; } </style> <p class = "test1">Hello</p> <p class = "test2">Hello</p>
（4）id選擇器：
id選擇器以一種獨立於文檔元素的方式來指定樣式。僅作用於id的值。
格式：
【格式：】 #id{ } 【舉例：】 <style type="text/css"> #d1{ color:red; } </style> <div id="d1">HelloWorld</div>
（5）選擇器組：
選擇器組是以逗號隔開的選擇器列表，將一些相同的規則作用於多個元素。
【格式：】 .className, #id{ } 【舉例：】 <style type="text/css"> .test1, #e2{ color : blue; } </style> <p class = "test1" id="e1">Hello</p> <p class = "test2" id="e2">Hello</p>
（6）派生選擇器：
派生選擇器用來選擇子元素。
分類：
后代選擇器：選擇某元素的所有后代（子孫）元素。（以空格隔開）
子元素選擇器：選擇某元素的所有子（兒子）元素。（以>隔開）
【舉例：后代選擇器】 <style type="text/css"> /*將 id=d1 元素中 所有元素中的 p元素 改為紅色*/ #d1 p{ color:red; } </style> <div id="d1"> <p id="p1">Hello</p> <p id="p2">Hello</p> </div> 【舉例：子元素選擇器】 <style type="text/css"> /*將 id=d1 元素中 id=p1 的元素 改為紅色*/ #d1>#p1{ color:red; } </style> <div id="d1"> <p id="p1">Hello</p> <p id="p2">Hello</p> </div>
（7）偽類選擇器：
偽類用於設置同一元素在不同狀態下的樣式。
常用偽類： :link：向未被訪問的超鏈接添加樣式。 :visited：向已被訪問的超鏈接添加樣式。 :active：向被激活的元素添加樣式。 :hover：當鼠標懸停在元素上方時，向該元素添加樣式。 :focus：當元素獲取焦點時，向該元素添加樣式。 【舉例：】 <!DOCTYPE html> <html> <head> <title>CSS演示</title> <meta charset="utf-8" /> <style type="text/css"> /*瀏覽器從未點擊過的超鏈接，顯示相應樣式*/ a:link{ color:blue; } /*瀏覽器點擊過的超鏈接，顯示相應樣式*/ a:visited { color:red; } /*選擇激活（正被點擊）的元素，正被點擊的話改變樣式*/ #btn:active{ background: pink; } /*選擇鼠標懸停的目標，鼠標懸停在目標上方會改變樣式*/ img:hover{ width:200px; height:200px; } /*選擇有焦點的文本框,點擊選中后會改變相應樣式*/ #t1:focus{ background-color:red; } </style> </head> <body > <p> <!--測試（:link）與（:visited），若超鏈接被點擊過，則顯示紅色，未被點擊過，則顯示藍色--> <a href="http://www.baidu.com" target="blank">百度</a> </p> <p> <!--測試（:active），若點擊按鈕，則變粉紅色，不點擊會恢復原來的顏色--> <input type="button" value="點我啊" id="btn" /> </p> <p> <!--測試（:hover）,鼠標放在圖片上，則圖片會改變大小--> <img src="../images/pig.png"> </p> <p> <!--測試（:focus），鼠標點擊后（獲取焦點），則背景改為紅色--> <input type="text" id="t1" /> </p> </body> </html>
3、常用CSS聲明（border, box, background, table, font）
（1）樣式規則：
樣式單位：
%：百分比。（常用，動態適應大小）
in：英寸。
cm：厘米。
mm：毫米。
pt：磅（1pt等於 1/72 英寸）。
px：像素（計算機屏幕上的一個點）。（常用，固定大小）
em：1em相當於當前字體尺寸，2em為當前尺寸的兩倍。（常用，根據文字設置大小）
樣式顏色：
#rrggbb：十六進制數。如#ff0000.
#rgb：簡寫的十六進制數。如#f00，等價於#ff0000
rgb(x, y, z)：RGB的值，如rgb(255, 0 , 0)。
rgb(x%, y% , z%)：RGB的百分比值，如rgb(100%, 0%, 0%)。
表示顏色的英文單詞，如red。
【舉例：】
黑色（rgb(0,0,0)），白色（rgb(1,1,1)），灰色（rgb(a,a,a)）
（2）boeder(邊框)
border屬性：用來設置元素的邊框。
格式： 【四邊整體設置：】 格式： border: width值 style值 color值; 【四邊單獨設置：】 格式： border-left: width值 style值 color值; border-right: width值 style值 color值; border-top: width值 style值 color值; border-bottom: width值 style值 color值; 【style值：】 dashed 用於表示虛線邊框 solid 用於表示實線邊框 即： border: 1px dashed #ccc;表示灰色虛線邊框。 border: 1px solid #ccc;表示灰色實線邊框。 【舉例：】 <style type="text/css"> /*dashed為虛線，solid為實線*/ p{ border: 1px solid red; width:100px; height:100px; } h1{ border-left: 15px solid #ccc; border-bottom: 2px solid red; } </style> 數據溢出元素框處理：（overflow） visible:默認格式，顯示溢出的元素。 hidden：隱藏，不顯示溢出的元素。 scroll：加滾動條，無論是否數據溢出，都加滾動條。 auto：自動，若溢出，則加滾動條，否則，不加。 【寫法：】 【默認情況：（visible）】 div{ width:300px; height:50px; border:1px solid blue; } 【隱藏數據：（hidden）】 div{ width:300px; height:50px; border:1px solid blue; overflow:hidden; } 【加滾動條：（scroll）】 div{ width:300px; height:50px; border:1px solid blue; overflow:scroll; } 【自動加滾動條：（auto）】 div{ width:300px; height:50px; border:1px solid blue; overflow:auto; }
（3）box
框模型（box model）定義了元素框處理元素的內容、內邊距、邊框、外邊距的方式。
內邊距（padding）：元素的內容與border間的距離。默認為0 。
外邊距（margin）：border與另外一個元素的距離。默認為0 。
注：增加內邊距、外邊距、邊框的尺寸不會影響元素的內容尺寸，但會增加元素實際總尺寸。元素的內容尺寸與width與height有關。
【四邊整體設置1：】
格式：
padding:width值;
margin:width值;
【四邊整體設置2：順序為上右下左（推薦）】
格式：
padding:width值 width值 width值 width值;
margin:width值 width值 width值 width值;
【四邊整體設置3：對邊設置】
格式：
padding:width值 width值;
margin:width值 auto;
【四邊單獨設置：】
格式：
padding-top:width值;
padding-right:width值;
padding-bottom:width值;
padding-left:width值;
margin-top:width值;
margin-right:width值;
margin-bottom:width值;
margin-left:width值;
（4）background
背景色：
background-color屬性用於給元素設置背景色，該屬性接受任何合法的顏色值。
【舉例：】
body{
background-color:#ccc;
}
背景圖片：
background-image屬性用於設置背景圖片。默認值為none，表示背景上沒有放置任何圖像。若想設置一個背景圖像，需使用 url 且添加一個相對URL（相對路徑）或者絕對URL。
默認情況下，背景圖片在水平和垂直方向上重復出現，類似於“牆紙”的效果。
background-repeat屬性可以控制背景圖片的平鋪效果。
background-repeat:repeat；默認值，在水平和垂直方向上重復，為重復值。
background-repeat:repeat-x;僅在水平方向重復。
background-repeat:repeat-y;僅在垂直方向重復。
background-repeat:no-repeat;僅顯示一次。
background-position屬性用於改變背景圖片在元素中的位置。
取值為：x% y% 或 x y 或 left\center\right\top\bottom等
注：
background: url("../images/hero0.png") no-repeat center;
等價於
background-image: url("../images/hero0.png");
background-repeat: no-repeat;
background-position: center;
默認情況下，背景圖像會隨着頁面的滾動而滾動，可以通過background-attachment屬性來改變此特征，
默認為scroll，即背景隨文檔滾動。
若取值為fixed，則背景圖片固定，不隨頁面滾動，通常用於實現“水印”效果。
即：
body{
background-attachment:fixed;
}
（5）font
用於格式化文本信息。
指定字體（可以指定多個字體）：font-family:value1, value2;
設置字體大小：font-size:value;
將字體加粗：font-weight:normal/bold;
設置文本顏色：color:value;
設置文本排列：text-align:left\right\center。
文字修飾：text-decoration:none\underline.
行高：line-height:value(1.6em); eg: line-height: 1.6em;
注：若行高與元素等高時，文字居中顯示（文字默認不居中）。
首行文本縮進：text-indent:value(2em); eg: text-indent: 2em;
（6）table
表格同樣也有box框（邊框、內邊距、外邊距、寬、高）以及文本格式化屬性。
若設置了單元格的邊框，則相鄰單元格的邊框會單獨顯示（默認，即邊框與邊框間有縫隙）。
使用border-collapse屬性可以合並相鄰的邊框（即邊框間無縫隙）。
即
border-collapse: separate/collapse；
4、定位（流定位、浮動定位、相對定位、絕對定位）
（1）定位
什么是定位：
指的是定義元素框 相對於 其正常位置應該出現的位置、或者相對於父元素、另一個元素甚至瀏覽器窗口所在的位置。
分類：
流定位（默認）
浮動定位
相對定位
絕對定位
固定定位。
屬性：
position：規定元素的定位類型，取值為：static/relative/absolute/fixed。操作流定位、相對定位、絕對定位、固定定位。
偏移屬性：用於定義元素框的偏移位置，取值為：top/bottom/left/right。
z-index：設置元素的堆疊順序。（序號越大，越在上層，即覆蓋其他元素）
float：浮動定位的屬性，用於左、右浮動。
clear：浮動定位的屬性，用於消除浮動的影響。
（2）流定位（默認）
頁面中的塊級元素框從上到下一個接一個排列。每一個塊級元素都會出現在一個新的行中。元素框間的垂直距離是由框的垂直外邊距計算出來的。
行內元素在一行中從左到右排列，水平布置，不從新行開始，可以使用水平內邊距、邊框和外邊距來調整它們的間距。
（3）浮動定位：（float，clear）
浮動定位指讓元素脫離普通的流定位，將浮動元素放置在父元素的左邊或者右邊，浮動元素依舊存在於父元素內。
浮動的框可以向左或者向右移動，直到它的外邊緣碰到父元素或者另外一個浮動框為止。經常用來實現特殊的定位效果。
使元素實現水平布局的效果。
float屬性定義元素在哪個方向浮動，在CSS中，任意元素均可浮動。
float: none/left/right。不浮動/左浮動/右浮動
【格式：】
.d1, .d2, .d3{
float:left;
}
clear屬性用來清除浮動所帶來的影響。消除一個元素A浮動對另一個元素B的影響，操作的是元素B，只能消除對元素B的影響，不能消除元素A自身的影響。（可能不能完全消除所有影響）
clear:none/left/right/both;定義元素的哪邊不允許出現浮動元素。
【格式：】
p{
clear:left;
}
浮動定位舉例：（右浮動）
假如父元素有三個元素框，其由上到下排序，若將框1向右移動，則框1脫離並向右移動，直到碰到父元素的邊框為止。且每次浮動完，父元素會收縮。
（4）相對定位（position：relative）
元素所占的空間不釋放，元素框會相對於它原位置偏移某個距離。可以設置水平或者垂直位置，讓元素相對於它的起點進行移動。
常用於照片的抖動效果。
【設置元素的相對定位：】 1、先設置position屬性值為relative。 2、然后使用left屬性或者right屬性設置水平方向的偏移量，也可使用top屬性或者bottom屬性設置垂直方向的偏移量。 【格式：】 div{ position:relative; left:50px; top:50px; } 【舉例：照片牆效果】 <!DOCTYPE html> <html> <head> <title>照片牆效果</title> <meta charset="utf-8" /> <style type="text/css"> body{ background-color: #300; } ul{ width:780px; margin:10px auto; /*去掉li前的符號*/ list-style-type: none; } li{ background-color: #fff; border: 1px solid #ccc; width:218px; margin: 10px; padding: 10px; float:left; } li p{ text-align: center; } li:hover{ position: relative; left:-5px; top:-5px; } </style> </head> <body> <!-- 照片牆，首先是一個無序列表li,用於保存照片，（此時排列順序由上到下） 然后使用左浮動，將圖片進行排列， （此時排列順序從左到右，從上到下） 當鼠標懸浮在圖片上時，讓圖片偏移一點點（使用相對定位）。--> <ul> <li> <img src="../images/01.jpg"> <p>啊</p> </li> <li> <img src="../images/02.jpg"> <p>在蒼茫的大海上</p> </li> <li> <img src="../images/03.jpg"> <p>狂風卷積着烏雲</p> </li> <li> <img src="../images/04.jpg"> <p>在烏雲和大海之間</p> </li> <li> <img src="../images/05.jpg"> <p>有只海燕</p> </li> <li> <img src="../images/06.jpg"> <p>來為我牽線</p> </li> </ul> </body> </html>
（5）絕對定位（position：absolute）
將元素內容從當前定位中移出，並釋放空間。
使用偏移屬性來固定該元素的位置。位置 相對於最近的已定位（相對定位）祖先元素，如果元素沒有已定位的祖先元素，那么它的位置相對於最初的包含塊（比如body元素）。
相對定位是相對於自身產生偏移，絕對定位是特殊的相對定位，相對於已定位的祖先元素產生偏移。
常用於文字在圖片的各種位置上顯示。
【設置元素的絕對定位：】
1、首先設置position屬性的值為absolute。
2、然后使用left屬性或者right屬性設置元素的水平位置。（left取負值則向左移，right取負值向右移）
3、可以使用top屬性或者bottom屬性設置元素的垂直位置。
【格式：】
div{
position:absolute;
left:50px;
top:50px;
}
（6）固定定位（position：fixed）
將元素內容固定到頁面的某個位置。此時元素從普通流中完全移出，不占用頁面的空間，且用戶滾動頁面時，元素框不會隨着移動。
常用於“水印”的效果。與背景圖片中的background-attachment: fixed；功能類似。
常用於“跳轉效果”，即頁面滾動，其一直顯示在某處，點擊會跳轉到頂部。
【 設置固定定位：】
1、首先設置position屬性值為fixed。
2、通過left或right或top或bottom這些偏移屬性來定義元素的位置。
【格式：】
div{
position:fixed;
left:50px;
top:50px;
}
（7）堆疊順序（z-index）
一旦修改元素的定位方式，那么元素間可能存在堆疊情況。
使用z-index屬性來控制元素框出現的重疊順序。
常用於多個頁面相互覆蓋的情況，根據操作顯示不同的頁面。
z-index屬性：
值為數值：數值越大，表示堆疊的順序越高，即在頁面中顯示的越上方，離用戶近。
可以將其設置成負值，表示離底層越近。
5、list-style-type、cursor
（1）列表樣式（list-style-type、list-style-image）
list-style-type屬性用於控制列表中列表項標志的樣式。
無序列表（ul）:出現在列表旁的是圓點。
【取值為：】
none：無標記。
disc：實心圓（默認值）。
circle:空心圓。
square：實心塊。
【格式：】
.ul{
list-style-type:circle;
}
有序列表（ol）:出現的可能是字母、數字或其他計數體系的一個符號。
【取值為：】
none：無標記。
decimal：數字（如1，2,3,4），為默認值。
lower-roman：小寫羅馬數字。（i, ii, iii, iv, v）
upper-roman：大寫羅馬數字。(I, II ,III, IV, V)
【格式：】
.ol{
list-style-type:decimal;
}
list-style-image屬性是使用圖像來代替列表項的標志。
【取值為：】
url(""),指定某圖像作為標志。
【格式：】
.image{
list-style-image:url('');
}
（2）cursor
默認情況下，光標會根據用戶的操作發生改變，當鼠標懸停在一個鏈接上時，光標由指針形狀改為手指形狀。當鼠標懸停在文本區域時，光標由指針改為I形狀。當鼠標懸停在一個按鈕上時，光標會顯示為箭頭。
可以使用cursor屬性指定鼠標的光標形狀，以提示用戶進行操作。cursor屬性定義了鼠標指針放在某一個元素邊界范圍內時所用的光標形狀。
取值：
default 默認光標（通常是一個箭頭）
pointer 光標呈現為指示鏈接的指針（一只手）
crosshair 光標呈現為十字線。
text 此光標指示文本
wait 此光標指示程序正忙（通常是一只表或沙漏）。
help 此光標指示可用的幫助（通常是一個問號或一個氣球）。