工具的配置：
sublime
安裝Sublime Package Control：
使用 Ctrl+` 快捷鍵打開 Sublime的命令行面板，複製粘貼：
import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
回車之後，就會發現在 Preferences 菜單下會多出兩個子菜單：Package settings、Package Control
5、安裝 Emmet 插件：
選擇菜單：Preferences -> Package Control -> Install Package
輸入：Emmet 回車
點擊搜索結果中的 Emmet 條目，即可安裝插件，完成後重啓 Sublime
配置瀏覽器：——————————html————————————
————基本結構
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>
1 / <!DOCTYPE>
文檔類型,文檔規範的定義
2 / <html>內容</html>
文檔標記，開始標記。分別位於網頁的最前端和最後端。表示開始和結束
3 / <head>內容</head>
文件頭標記，用來包含文件的基本信息，比如網頁的標題，關鍵字等。在head裏面的內容不會在瀏覽器中顯示
用於存放 title,mata,style,script,base,link
4 / <title>頁面標題</title>
標題標記，網頁的主題顯示在窗口左上邊。這個標記中不能包含其它標記。是放在head標記裏面的。
5 / <meta>內容</meta>
這個標記必須放在head元素裏面
1 / discription 頁面描述。提供有關頁面的元信息。SEO優化。
必須屬性： content 值：some_text 比如針對搜索引擎和更新頻度的描述和關鍵詞
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="discription" content="頁面內容描述">
<title>Document</title>
</head>必須屬性： content 值：some_text 比如針對搜索引擎和更新頻度的描述和關鍵詞
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="discription" content="頁面內容描述">
<meta name="keywords" content="關鍵詞">
<title>Document</title>
</head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8">6 / <body>頁面主體</body>
用於存放所有的html結構標籤。
————標籤：
標籤和被標籤的內容構建html文檔
格式：
<標籤>內容</標籤>
標籤的屬性：就是用來控制內容（圖像，文本等）如何的顯示
格式：
<標籤 屬性1=屬性值 屬性2=屬性值.....> 內容 <標籤>
————————————————————————————
1 / <h>內容</h>系列標籤
標題標籤（有默認屬性）
2 / <p>段落內容</p>標籤
P標籤表示段落，默認段落間是有間隔的。
<p>這是一段文字</p>
3 / <hr />標籤在頁面上顯示一條橫線，默認佔整行
<hr />
4 / <br />標籤
換行。
這是一行 <br /> 這是第二行
5 / 文本標籤：
b,u,i,s,strong,em,del,ins
<body>
<b>這是b標籤</b> <!-- 加粗 -->
<i>這是i標籤</i> <!-- 傾斜 -->
<u>這是u標籤</u> <!-- 下劃線 -->
<s>這是s標籤</s> <!-- 刪除線 -->
<hr />
<strong>這是strong</strong> <!-- 加粗 -->
<em>這是em</em> <!-- 傾斜 -->
<ins>這是ins</ins> <!-- 下劃線 -->
<del>這是del</del> <!-- 刪除線 -->
</body><body>
<img src="images/baidu.png" title="這是一張圖片" alt="這是什麼" />
</body>src屬性是img特有屬性。
img標籤的屬性：
1 / alt :圖片加載不出來就顯示alt裏面的文字。2 / title：鼠標移動到圖片上顯示的文字。
7 / <a></a>標籤
超鏈接標籤
<body>
<a href="跳轉路徑" target="_blank">跳轉的按鈕</a>
</body>1 / href = "#" //href = #的時候，a標籤不跳轉
2 / a標籤的“錨”——當前屏幕跳轉到指定位置（通過id #指定跳轉到某個id的位置）
<a href="#tt" target="_blank">錨點</a>
<div id="tt" >第一章</div>a標籤的屬性：
1 / href 跳轉路徑
2 / taget =“ _blank” :在新頁面跳轉
taget = "_self" 在當前頁面跳轉
3 / base ="_blank" 爲頁面中所有的a標籤設置跳轉，放置在head標籤中
target href 是a標籤獨有的屬性
8 / <div></div>標籤
用來佈局的標籤。
9 / <span></span>標籤
用來佈局的標籤。
————列表：
1 / <ul></ul>無序列表：
<li></li>
<body>
無序列表：
<ul>
<li><a href="#">列表1</a></li>
<li>列表2</li>
<li>列表3</li>
</ul>
</body>2 / <ol></ol>有序列表：
<li></li>
<body>
有序列表：
<ol>
<li><a href="#">列表1</a></li>
<li>列表2</li>
<li>列表3</li>
</ol>
</body><dt></dt>
<dd></dd>
<body>
自定義列表：
<dl>
<dt>大分類1</dt>
<dd>子類1</dd>
<dd>子類2</dd>
<dd>子類3</dd>
<dt>大分類2</dt>
<dd>子類1</dd>
<dd>子類2</dd>
<dd>子類3</dd>
</dl>
</body>1 / 表格標籤
<table></tabel> 表格範圍
<caption></caption> 表格標題
<tr></tr> 行
<th></th> 表頭標籤，放在表格的最上一行
<td></td> 列
<thead></thead> 存放當前列的表頭。如果沒有加css，頁面默認將表頭中的高度設置變小
<tbody></tbody> 存放表格中的主體數據。瀏覽器自動添加
<tfoot></tfoot> 一般情況不會出現
2 / 表格的屬性
border = " " 表格邊框
width = " " 表格寬度
height = " " 表格高度
align : 表格的顯示位置：
——| left 居左顯示 （默認）
——| center 居中顯示
——| right 居右顯示
cellspacing：單元格之間的間距，默認2px
cellpadding：單元格內容與單元格邊框的顯示距離。單位像素。
frame：控制表格邊框最外層的四條線框
rules： 控制是否顯示以及如何顯示單元格之間的分割線
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" width="300" height = "200">
<caption>表格標題</caption>
<thead>
<tr>
<th>序號</th>
<th>序號</th>
<th>序號</th>
<th>序號</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
</body>
</html>——表單元素：
1 / input 標籤
屬性：
① type 文本輸入框
= text :文本輸入框；
= password : 密碼輸入框 ；
= hidden :隱藏域；
= radio ：單選框（必須給每一個radio加一個相同的name屬性）
= checkbox ：多選框
= button ： 按鈕
= reset : 重置 （只能在form標籤中起作用）
= image : 圖片按鈕
= submit : 提交
② value = “XXXX” 設置默認顯示值 （text,password,button，reset)
③ checked ="checked" 默認選擇
④ name = "xxx" 相同name屬性，將radio,checkbox作爲一個選擇集合
2 / <select></select> 下拉選單
屬性：
① <option>內容</option> 選擇內容
② selected= "selected" 設置默認選擇
3 / <textarea></textarea>文本域
——form標籤：
用來管理頁面上的表單元素。表單元素必須放在form標籤中。
屬性：
action :將所有數據提交到action指定的頁面 （必須給要提交的標籤放置 name 屬性）
—————————
表單範例：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>註冊頁面</title>
</head>
<body>
<form action="頁面地址">
用戶名：<input type="text" value="默認顯示值"><br/>
密 碼：<input type="password">
<hr/>
<input type="hidden">
<hr/>
性 別：<input type="radio" name="sex">男 <input type="radio" name="sex">女 <input type="radio" name="sex" checked="checked">保密 <br/>
愛 好： <input type="checkbox">籃球 <input type="checkbox">足球 <input type="checkbox" checked="checked">檯球 <input type="checkbox">游泳 <br/>
國 籍：<select>
<option>中國</option>
<option selected="selected">日本</option>
<option>韓國</option>
</select> <br/>
籤 名：<textarea>這裏寫默認值</textarea> <br/>
<input type="button" value="點擊"> <input type="reset"> <br/>
<input type="image" src="images/baidu.png"> <br/>
<input type="submit">
</form>
</body>
</html>