整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
HTML 是一種描述網頁語言， 指的是超文本標記語言 (Hyper Text Markup Language)。其中，超文本指的是網頁上可以包含圖片，視頻，連接信息。標記也叫做標簽，所以標簽書寫的是<內容>。語言就是一種交流工具，HTML 是用戶與瀏覽器之間交互工具。
簡單說，HTML 是由瀏覽器解析執行的，它不會將 HTML 標簽展示出來，而是會解析 HTML 標簽，以特定效果展示出來。
<html>
<head>HEAD</head>
<body>BODY</body>
</html>可以使用 JetBrains WebStorm 或者 VS Code 進行開發。
<html> 代表當前書寫的是一個 HTML 文檔
<head> 存儲的本頁面的一些重要的信息，它不會顯示
標簽下有一個子標簽 <title> 它是用于定義頁面的標題的
<body> 書寫的內容會顯示出來，屬性：1. text 用于設置文字顏色；2. bgcolor 用于設置頁面的背景色；3. background 用于設置頁面的背景圖片
<!-- 注釋不會在瀏覽器中顯示 -->
br 標簽就是一個換行功能標簽
在 p 標簽中的內容會在開始與結束之間產生一個空白行并且它會自動換行
常用屬性 align 的作用是設置段落中的內容對齊方式，可取值有 left right center
hr 標簽會在頁面上產生一個水平線
常用屬性：
align：可取值有 left right center 代表水平線位置
size：代表水平線高度（厚度）
width：代表水平線寬度
color：水平線的顏色
兩種方式:
Div 是一個塊標簽
Div 與 CSS 結合，會更好對頁面進行排版
Span 標簽也是一個塊標簽Div 與 span 區別：Div 會自動換行，我們也叫這樣的標簽為行級元素Span 標簽它不會自動換行，我們也叫它為行內元素
Font 標簽可以設置字體，字的大小及顏色
常用屬性：
Face：用于設置字體，例如 宋體 隸書 楷體
Size：用于設置字的大小
Color：用于設置字的顏色
我們所看到的屏幕上所有的顏色都是由紅、綠、藍這三種基色調混合而成的。每一種顏色的飽和度和透明度都是可以變化的，用 0～255 的數值來表示。如純紅色表示為 (255，0，0)，十六進制表示為 #FF0000。按這種表達方式，理論上我們可以得到 256 * 256 *256=16777216 種顏色。
<h1> 最大 <h6> 最小，它們代表的是標題，可以使用 <b> <i> 對文字設置加粗或傾斜
注意：在 HTML 中允許標簽進行嵌套的，但是一般都包裹嵌套，而不可以進行交叉嵌套
有序清單：
<!-- 有序列表 I II III-->
<ol type="I" start="3">
<li>張三</li>
<li>李四</li>
<li>王五</li>
</ol>
<!-- 無序列表 -->
<ul type="square">
<li>Java</li>
<li>Python</li>
<li>C#</li>
</ul><img> 可以讓我們在網頁引入一張圖片
常用屬性
<a> 標簽可以實現跳轉到其它頁面操作。超鏈接內容不僅可以是文本，也可以是圖片等信息
常用屬性
<!-- 學習表格標簽 -->
<table border="2" align="center" width="400px">
<caption>學生成績單</caption>
<tr>
<th>姓名</th>
<th>語文成績</th>
<th>數學成績</th>
<td colspan="2" align="center"><b>操作</b></td>
</tr>
<tr align="center">
<td>張三</td>
<td>99</td>
<td>100</td>
<td>修改</td>
<td>刪除</td>
</tr>
<tr align="center">
<td>李四</td>
<td>90</td>
<td>66</td>
<td>修改</td>
<td>刪除</td>
</tr>
</table>通過表單可以將要提交的數據提交到指定的位置
<!-- 表單：用戶注冊案例 -->
<form name="form1" action="user/login" method="POST">
<table border="1" width="64%" align="center">
<tr>
<td>用戶名：</td>
<td>
<input type="text" name="username">
</td>
</tr>
<tr>
<td>密碼：</td>
<td>
<input type="password" name="password">
</td>
</tr>
<tr>
<td>性別：</td>
<td>
<input type="radio" name="sex" checked="checked">男
<input type="radio" name="sex" >女
</td>
</tr>
<tr>
<td>地址：</td>
<td>
<select name="province">
<option value="0">--請選擇省--</option>
<option value="10001">廣東</option>
<option value="10002">上海</option>
<option value="10003">山東</option>
</select> 省
<select name="city">
<option>--請選擇市--</option>
<option value="1000301">廣州市</option>
<option>深圳市</option>
<option>東莞市</option>
</select> 市
</td>
</tr>
<tr>
<td>編程語言：</td>
<td>
<input type="checkbox" name="language" checked="checked">Java
<input type="checkbox" name="language">Python
<input type="checkbox" name="language">Go
</td>
</tr>
<tr>
<td>照片：</td>
<td>
<input type="file" name="image">
</td>
</tr>
<tr>
<td>自我介紹：</td>
<td>
<textarea name="remark" rows="5" cols="100"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注冊">
<input type="reset" value="取消">
</td>
</tr>
</table>
</form>通過框架標簽可以定制 HTML 頁面布局
在 HTML 頁面上去描述框架信息時，不可以將 <frameset> 寫在 <body> 標簽中
framesetTest.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 框架標簽</title>
</head>
<!-- rows 定義了三行：第一行 100 像素，第三行：100 像素；第二行：剩下的像素 -->
<frameset rows="100, * , 100">
<frame name="topModule" src="./top.html"></frame>
<frameset cols="100, * ">
<frame name="menuModule" src="./menu.html"></frame>
<frame name="contentModule" src="./content.html"></frame>
</frameset>
<frame name="footModule" src="./foot.html"></frame>
</frameset>
</html>top.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>top</title>
</head>
<body>
<div>頭部信息</div>
</body>
</html>foot.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>footL</title>
</head>
<body>
<div>底部信息</div>
</body>
</html>menu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>menu</title>
</head>
<body>
<div>菜單信息</div>
</body>
</html>content.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>content</title>
</head>
<body>
<div>內容顯示區</div>
</body>
</html><meta> 標簽必須寫在 <head> 標簽之間
使用 link 標簽來導入 CSS
詳情查看菜鳥教程：https://www.runoob.com/charsets/ref-html-ascii.html
DOM, Document Object Model -- 文檔對象模型，是 HTML 和 XML 文檔的編程接口，以樹結構表達 HTML 文檔。
DOM 是 W3C（萬維網聯盟）的標準。
DOM 定義了訪問 HTML 和 XML 文檔的標準。
W3C DOM 標準被分為 3 個不同的部分：
DOM 是被視為節點樹的 HTML。
根據 W3C 的 HTML DOM 標準，HTML 文檔中的所有內容都是節點：
HTML DOM 將 HTML 文檔視作樹結構，這種結構被稱為節點樹。
節點樹中的節點彼此擁有層級關系。常用父（parent）、子（child）和同胞（sibling）等術語來描述這些關系。父節點擁有子節點。同級的子節點被稱為同胞（兄弟或姐妹）。
HTML DOM 方法是可以在節點（HTML 元素）上執行的動作。
HTML DOM 屬性是可以在節點（HTML 元素）設置和修改的值。
可通過 JavaScript （以及其他編程語言）對 HTML DOM 進行訪問。所有 HTML 元素被定義為對象，而編程接口則是對象方法和對象屬性。方法是能夠執行的動作（比如添加或修改元素）。屬性是能夠獲取或設置的值（比如節點的名稱或內容）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM</title>
</head>
<body>
<div id="div1">
<p id="p1">Hello</p>
<p id="p2">Hello</p>
</div>
<script>
// 先獲取 P 元素
var element = document.getElementById("p1")
// 直接修改 p 元素的內容
element.innerHTML = "此時已是修改后的內容"
// 修改 p2 標簽的樣式
var ele = document.getElementById("p2")
ele.style.color="blue"
ele.style.fontFamily="宋體"
ele.style.fontSize="larger"
// 添加元素
// 創建一個p元素
var elementP = document.createElement("p")
// 創建一個內容
var nodeText = document.createTextNode("新加的 P 元素")
// 把文字內容添加到p元素中
elementP.appendChild(nodeText)
// 把新創建的p元素添加div1元素中
var div1 = document.getElementById("div1")
div1.appendChild(elementP)
// 插入添加新的元素
// 創建一個新的元素
var eleP = document.createElement("p")
// 創建一個內容
var noText = document.createTextNode("在 P1 元素前添加的新元素")
// 把文字內容添加到 p 元素中
eleP.appendChild(noText)
// 把新創建的 p 元素添加 div 1 元素中
var parentDiv1 = document.getElementById("div1")
// 獲取指定被添加的元素
var p1 = document.getElementById("p1")
// 在元素前添加；參數說明：1.要添加的元素；2.在那個元素之前添加（指定一個元素）
parentDiv1.insertBefore(eleP, p1)
// 刪除元素
// 獲取父元素
var pdiv1 = document.getElementById("div1")
var removep1 = document.getElementById("p1")
// 使用父元素刪除該元素
pdiv1.removeChild(removep1)
</script>
</body>
</html>HTML DOM 允許 JavaScript 對 HTML 事件作出反應。當事件發生時，可以執行 JavaScript，比如發生用戶點擊一個 HTML 元素的事件。
如需在用戶點擊某個元素時執行代碼，可以把 JavaScript 代碼添加到 HTML 事件屬性中：onclick=JavaScript
HTML 事件的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>DOM 事件</title>
<!-- JavaScript 代碼必須寫在 script 中 -->
<script>
function onLoadFun(){
alert("已載入...");
}
// 文本框失去焦點事件
function onBlurFun(){
alert("此方法是文本框失去焦點事件，用來校驗此文本框輸入數據的")
}
// 表單被提交時執行事件
function onSubmitFun(){
alert("此表單已提交，這個方法也可以來作為數據校驗的");
}
// 元素被改變時觸發事件
function onChangeFun(){
alert("文本框元素已輸入新的數據")
}
// 當鼠標懸停在某一個元素上時執行的方法
function onMouseOverFun(element){
element.innerHTML = "鼠標已停在H1元素上了"
}
// 當鼠標離開某一個元素時執行事件
function onMouseOutFun(element){
element.innerHTML = "鼠標已離開H1元素上了..."
}
</script>
</head>
<!-- 需求：當頁面被載入時，執行一個代碼，彈框提示已載入 -->
<body onload="onLoadFun()">
<!-- 需求：在一個表單中有用戶名錄入的文本框，當輸入完文本框的時候進行名稱校驗，提交的時候彈框顯示 -->
<form onsubmit="onSubmitFun()">
用戶名：<input id="username" name="username" onchange="onChangeFun()" >
<br/>
<button type="submit">提交</button>
</form>
<!-- 需求：有一個 H1 標簽元素，當鼠標移動到 H1 元素上時，修改文字，當鼠標移出元素時執行事件 -->
<h1 onmouseover="onMouseOverFun(this)" onmouseout="onMouseOutFun(this)">我是一個標題</h1>
</body>
</html>想了解更多，歡迎關注我的微信公眾號：Renda_Zhang
HTML 實例
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>h5混合開發(www.zixue365.com)</title></head><body><h1>我的第一個標題</h1><p>我的第一個段落。</p></body></html>
嘗試一下 ?
實例解析
<!DOCTYPE html> 聲明為 HTML5 文檔
<html> 元素是 HTML 頁面的根元素
<head> 元素包含了文檔的元（meta）數據
<title> 元素描述了文檔的標題
<body> 元素包含了可見的頁面內容
<h1> 元素定義一個大標題
<p> 元素定義一個段落
什么是HTML?
HTML 是用來描述網頁的一種語言。
HTML 指的是超文本標記語言: HyperText Markup Language
HTML 不是一種編程語言，而是一種標記語言
標記語言是一套標記標簽 (markup tag)
HTML 使用標記標簽來描述網頁
HTML 文檔包含了HTML 標簽及文本內容
HTML文檔也叫做 web 頁面
HTML 標簽
HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)。
HTML 標簽是由尖括號包圍的關鍵詞，比如 <html>
HTML 標簽通常是成對出現的，比如 <b> 和 </b>
標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽
開始和結束標簽也被稱為開放標簽和閉合標簽
<標簽>內容</標簽>
HTML 元素
"HTML 標簽" 和 "HTML 元素" 通常都是描述同樣的意思.
但是嚴格來講, 一個 HTML 元素包含了開始標簽與結束標簽，如下實例:
HTML 元素:
<p>這是一個段落。</p>
Web 瀏覽器
Web瀏覽器（如谷歌瀏覽器，Internet Explorer，Firefox，Safari）是用于讀取HTML文件，并將其作為網頁顯示。
瀏覽器并不是直接顯示的HTML標簽，但可以使用標簽來決定如何展現HTML頁面的內容給用戶：
HTML 網頁結構
下面是一個可視化的HTML頁面結構：
<html>
<head>
<title>頁面標題</title>
</head>
<body>
<h1>這是一個標題</h1>
<p>這是一個段落。</p>
<p>這是另外一個段落。</p>
</body>
</html>
| 只有 <body> 區域 (白色部分) 才會在瀏覽器中顯示。 |
| 版本 | 發布時間 |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
<!DOCTYPE> 聲明
<!DOCTYPE>聲明有助于瀏覽器中正確顯示網頁。
網絡上有很多不同的文件，如果能夠正確聲明HTML的版本，瀏覽器就能正確顯示網頁內容。
doctype 聲明是不區分大小寫的，以下方式均可：
<!DOCTYPE html>
<!DOCTYPE HTML>
<!doctype html>
<!Doctype Html>
通用聲明
HTML5
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
查看完整網頁聲明類型 DOCTYPE 參考手冊。
中文編碼
目前在大部分瀏覽器中，直接輸出中文會出現中文亂碼的情況，這時候我們就需要在頭部將字符聲明為 UTF-8。
HTML 實例
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>頁面標題</title></head><body><h1>我的第一個標題</h1><p>我的第一個段落。</p></body></html>
HTML 編輯器推薦
可以使用專業的 HTML 編輯器來編輯 HTML，菜鳥教程為大家推薦幾款常用的編輯器：
Notepad++：https://notepad-plus-plus.org/
Sublime Text：http://www.sublimetext.com/
HBuilder：http://www.dcloud.io/
你可以從以上軟件的官網中下載對應的軟件，按步驟安裝即可。
接下來我們將為大家演示如何使用Notepad++工具來創建 HTML 文件，其他兩個工具操作步驟類似。
Notepad++
Notepad++是 Windows操作系統下的一套文本編輯器(軟件版權許可證: GPL)，有完整的中文化接口及支持多國語言編寫的功能(UTF8技術)。
步驟 1: 新建 HTML 文件
在 Notepad++ 安裝完成后，選擇" 文件(F)->新建(N) "，在新建的文件中輸入以下代碼：
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>h5混合開發提供(www.zixue365.com)</title></head><body><h1>我的第一個標題</h1><p>我的第一個段落。</p></body></html>
步驟 2: 另存為 HTML 文件
然后選擇" 文件(F)->另存為(A) "，文件名為 runoob.html:
當您保存 HTML 文件時，既可以使用 .htm 也可以使用 .html 擴展名。兩者沒有區別，完全根據您的喜好。
在一個容易記憶的文件夾中保存這個文件，比如h5混合開發
步驟 3: 在瀏覽器中運行這個 HTML 文件
啟動您的瀏覽器，然后選擇"文件"菜單的"打開文件"命令，或者直接在文件夾中雙擊您的 HTML 文件,
運行顯示結果類似如下:
Notepad++ 和 Sublime Text 還可以配合 Emmet 插件來提高編碼速度。
Emmet 官網：http://emmet.io/
不要擔心本章中您還沒有學過的例子，
您將在下面的章節中學到它們。
HTML 標題
HTML 標題（Heading）是通過<h1> - <h6> 標簽來定義的.
實例
<h1>這是一個標題</h1><h2>這是一個標題</h2><h3>這是一個標題</h3>
嘗試一下 ?
HTML 段落
HTML 段落是通過標簽 <p> 來定義的.
實例
<p>這是一個段落。</p><p>這是另外一個段落。</p>
嘗試一下 ?
HTML 鏈接
HTML 鏈接是通過標簽 <a> 來定義的.
實例
<a>這是一個鏈接</a>
嘗試一下 ?
提示:在 href 屬性中指定鏈接的地址。
(您將在本教程稍后的章節中學習更多有關屬性的知識).
HTML 圖像
HTML 圖像是通過標簽 <img> 來定義的.
實例
<imgsrc="/images/logo.png"width="258"height="39"/>
嘗試一下 ?
注意： 圖像的名稱和尺寸是以屬性的形式提供的。
HTML 文檔由 HTML 元素定義。
HTML 元素
<phtml 元素指的是從開始標簽（start="" tag）到結束標簽（end="" tag）的所有代碼。<="" p="">
| 開始標簽 * | 元素內容 | 結束標簽 * |
|---|---|---|
| <p> | 這是一個段落 | </p> |
| <a href="default.htm"> | 這是一個鏈接 | </a> |
| <br> |
*開始標簽常被稱為起始標簽（opening tag），結束標簽常稱為閉合標簽（closing tag）。
HTML 元素語法
HTML 元素以開始標簽起始
HTML 元素以結束標簽終止
元素的內容是開始標簽與結束標簽之間的內容
某些 HTML 元素具有空內容（empty content）
空元素在開始標簽中進行關閉（以開始標簽的結束而結束）
大多數 HTML 元素可擁有屬性
注釋: 您將在本教程的下一章中學習更多有關屬性的內容。
嵌套的 HTML 元素
<p大多數 html="" 元素可以嵌套（可以包含其他="" 元素）。<="" p="">
HTML 文檔由嵌套的 HTML 元素構成。
HTML 文檔實例
<!DOCTYPE html>
<html>
<body>
<p>這是第一個段落。</p>
</body>
</html>
以上實例包含了三個 HTML 元素。
HTML 實例解析
<p> 元素:
<p>這是第一個段落。</p>
這個 <p> 元素定義了 HTML 文檔中的一個段落。
這個元素擁有一個開始標簽 <p> 以及一個結束標簽 </p>.
元素內容是: 這是第一個段落。
<body> 元素:
<body>
<p>這是第一個段落。</p>
</body>
<body> 元素定義了 HTML 文檔的主體。
這個元素擁有一個開始標簽 <body> 以及一個結束標簽 </body>。
元素內容是另一個 HTML 元素（p 元素）。
<html> 元素：
<html>
<body>
<p>這是第一個段落。</p>
</body>
</html>
<html> 元素定義了整個 HTML 文檔。
這個元素擁有一個開始標簽 <html> ，以及一個結束標簽 </html>.
元素內容是另一個 HTML 元素（body 元素）。
不要忘記結束標簽
即使您忘記了使用結束標簽，大多數瀏覽器也會正確地顯示 HTML：
<p>這是一個段落
<p>這是一個段落
以上實例在瀏覽器中也能正常顯示，因為關閉標簽是可選的。
但不要依賴這種做法。忘記使用結束標簽會產生不可預料的結果或錯誤。
HTML 空元素
沒有內容的 HTML 元素被稱為空元素。空元素是在開始標簽中關閉的。
<br> 就是沒有關閉標簽的空元素（<br> 標簽定義換行）。
在 XHTML、XML 以及未來版本的 HTML 中，所有元素都必須被關閉。
在開始標簽中添加斜杠，比如 <br />，是關閉空元素的正確方法，HTML、XHTML 和 XML 都接受這種方式。
即使 <br> 在所有瀏覽器中都是有效的，但使用 <br /> 其實是更長遠的保障。
HTML 提示：使用小寫標簽
HTML 標簽對大小寫不敏感：<P> 等同于 <p>。許多網站都使用大寫的 HTML 標簽。
h5混合開發使用的是小寫標簽，因為萬維網聯盟（W3C）在 HTML 4 中推薦使用小寫，而在未來 (X)HTML 版本中強制使用小寫。
TML+CSS
Hyper Text Markup Language（超文本標記語言）
超文本包括：文字、圖片、音頻、視頻、動畫等
注釋格式：<!—內容 –>
編碼與特殊符號
1. (空格)
2.> (大于號)
3.<；(小于號)
4."(引號)
5.©(版權號@)
路徑
1.相對路徑(Relative Path) 同一個目錄的文件引用如果源文件和引用文件在同一個目錄里，直接寫引用文件名即可。
2.Web根目錄下建了一個目錄叫html_demo，然后在該目錄下放了一個文件index.html，
這個文件的絕對路徑:
http://127.0.0.1:8080/html_demo/index.html
表單（form）元素
1.單行文本框（text)
2.密碼框（password）
3.單選按鈕（radio) 選中的話checked=="true"
4.文件選擇框（file）
5.復選框（checkbox）
6.下拉列表（select）
7.提交按鈕（submit）
8.重置按鈕（reset）
9.文本域（textarea）
表單高級用法
1.關聯表單元素（label）
2.只讀屬性（readonly）
3.禁用屬性（disabled）
表格高級標簽
1.表格標題<caption>
2.頁眉<thead>
3.表頭<th>
4.數據主體<tbody>
5.頁腳<tfoot>
表格的跨行與跨列
1.跨列 colspan
2.跨行rowspan
文檔的內聯框架
使用<iframe>標簽嵌套另一個頁面
面試題：get方法和post方法區別
1.get方法提交參數在地址欄可見
2.post方法一般用于多數據、保密數據提交
CSS
Cascading Style Sheet 級聯樣式表
能控制頁面的樣式和布局，包括對字體、顏色、邊距、高度、寬度、背景圖片、網頁定位等設定
網頁文件與樣式文件相分離，提高開發效率
應寫在<head>標簽之間，加上 type="text/css"屬性
<div>和<span>提高網頁加載速度
1．常用塊元素div，p，ul，li //ul是定義無序列表的樣式 li是列表內行的樣式 ol是有序 dl.dt是自定義列表
2．常用內聯元素span，a，label //span定義一個區域 //label標簽主要用于綁定一個表單元素
SEO搜索引擎優化：在搜索時從搜索結果中獲取的訪問量將更高
CSS手冊：http://www.w3school.com.cn/cssref/index.asp
注釋格式：/* 內容 */
CSS屬性
1．CSS 背景屬性（Background）
| background-color | 背景色，取值如，red，#FF0000 |
| background-image | 背景圖片,如:background-image:url(“./images/bg.png”); |
| background-position | 背景開始位置,包括水平方向(X軸)和豎直方向(Y軸)的設置 X軸取值：left，center，right或像素值或百分比 Y軸取值：top，center，bottom或像素值或百分比 |
| background-repeat | 背景填充方式,取值：repeat-x|repeat-y|no-repeat |
2．CSS 內邊距屬性（Padding）
3．CSS 文本屬性（Text）
| color | 設置文本的顏色，如red，#FF0000 |
| line-height | 設置文本的行高 |
| text-align | 設置文本的對齊方式,如left、center、right |
| text-decoration | 設置文本裝修，如underline、none、line-through |
4．CSS 字體屬性（Font）
| font-weight | 設置字體粗細 |
| font-size | 設置字體的尺寸 |
| font-family | 設置字體系列 |
類選擇器（.class）
格式：.classname { font-size : 16px; }
注意：網頁中可給不同標簽相同的class
ID選擇器（#id）
格式：#idname { font-size : 16px; }
注意：網頁中標簽的ID 不能重復,唯一存在
復合選擇器
1．并集選擇器
格式：p , #idname , .classname{ font-size : 16px; }
注意：多個選擇器之間必須用英文半角的逗號“,”隔開
2．交集選擇器
格式：
input#idtest { font-size : 16px; }
p.classname{ font-size : 16px; }
注意：選擇器之間不能有空格
3．后代選擇器
格式：p a { color:red; }
注意：選擇器之間用空格隔開；選擇器之間可以是多個不同或相同類型并有層級關系的。
CSS的引入方式
1．行內樣式：
<h1 style="color:red; " >style行內樣式的應用</h1>
2．內部樣式：（必須寫在head標簽中間）
<style type="text/css">
h3{ color: red; }
</style>
3．外部樣式：
a) CSS代碼保存在擴展名為.css的文件中
b) 引用擴展名為.css文件的兩種方式：
i.鏈接式：
<link type="text/css" href="stylefile.css" rel="styleSheet"/>
ii.導入式：
<style type="text/css">
@import url("css/stylefile.css");
</style>
CSS中的優先級
1.行內樣式 > 內部樣式表 > 外部樣式表（鏈接式 > 導入式）
2.ID選擇器 > 類選擇器 > 標簽選擇器
/*樣式hover，文本修飾：下劃線*/
a:hover{
text-decoration:underline;
案例：北風網新聞
1．制作北風網網站信息展示頁面
2．使用外部樣式表創建頁面樣式
需求：
1．標題字體大小18px，行高40px ，居中顯示
2．時間來源居中顯示，文字大小 12px，字體顏色 #666666
3．段落字體12px 行高20px
4．內容中小標題<h2>行高28px， 字體大小12px
案例：利用盒子模型制作登錄頁面
需求：
1．盒子寬度width為300px；邊界margin為50px auto；盒子邊框border為實線1px，顏值#3a6587
2．設置標題文字字體16px；高35px；左邊距20px；背景色同盒子邊框顏色#3a6587；字體白色；文字行高35px
3．設置表單上下距離30像素，左右距離20像素
4．設置表格中標題的類選擇器text-align靠右； 分別為表格中標題配上類樣式
5．設置表格中內容與提交按鈕的類選擇器，邊框border為實線1px顏值#ccc；分別配上類樣式
分析：
盒子模型總尺度：
border + padding + margin + content內容
1、用div標簽做盒子
2、設置標題
3、設置表單
4、設置表格中標題內容“姓名、郵箱、聯系電話、登錄”；分別加入文本域
5、設置為內部引用樣式
6、設置外邊距 (margin) 和 內邊距 (padding)
7、設置上述標簽的ID選擇器和類選擇器
案例：為banner圖片加按鈕
案例：網頁基本布局
需求分析：
1.使用DIV標簽
2.使用id選擇器
3.使用class選擇器
步驟：
1.設置div上 中 下；使用id選擇器
2.設置中間部分為div 左 中 右 使用class選擇器
3.初始化邊界不留空白
4.設置id選擇器，div上中下共用： width960px，border1px實線加紅色
5.設置頭部id選擇器高度，height230px
6.設置中部id選擇器最小高度，min-height300px
7.設置底部id選擇器高度，height85px
8.設置中部div左中右，border1px實線加紅色藍色
案例：制作網頁自動居中
需求分析：
1.元素必須為塊元素div
2.元素必須設定其寬度width
3.元素的上下邊距可自定義
步驟：
1.在上中下id選擇器中加入自動居中margin-left和margin-right
案例：制作浮動布局
步驟：
1.設置main區域水平3欄分布，float靠左，min-height300px
2.設置main區域左，width200px，background-color綠
3.設置main區域中，width500px，background-color藍
4.設置main區域右，width254px，background-color黃
案例：制作網頁導航
需求分析：
1.使用導入CSS樣式表
2.掌握CSS調試
步驟：
1.創建新的CSS文件
2.創建HTML文件
3.在HTML文件中使用外部引用樣式表
4.設置導航div類選擇器
5.設置菜單id選擇器
6.設置7個欄目的鏈接與類選擇器
7.在CSS文件中創建樣式：
a)設置body標簽樣式，邊距去白；font-size12px；
b)設置鏈接標簽a樣式，color黑色，文本的修飾none。
c)設置鼠標移到a標簽樣式hover，文本的修飾underline。
d)開始設置頭部類選擇器，居中；width640px；左右兩側均不允許浮動元素clear:both;
e)設置菜單id選擇器，圖像向左浮動；背景圖片dd_head_bg_mid.gif；設置背景圖像的起始位置0px -63px;高27px；寬99%；行高28px；文本居中；顏值#FFF
f)設置導航欄目類選擇器，顏值白色#FFF；元素的 4 個內邊距0px 4px 0px 4px （順序：上 右 下 左）。
最近忙著搬磚，忘記更了，以后爭取每周都更一篇，好辣 ~周末來辣~大家浪起來~~~~~
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
