快速學習HTML
HTML入門
HTML初識
<strong>我是加粗的字型</strong>
HTML骨架
<html> <head> <title></title> </head> <body> </body> </html>
HTML標籤分類
雙標籤
<body>
我是文字
</body>
單標籤
<br />
標籤巢狀和並列關係
巢狀關係
<head><title></title></head>
並列關係
<head></head>
<body></body>
開發工具sublime
生成html骨架
html:5 + Tab 或者 ! + Tab
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
sublime text3安裝後html:5+Tab不能快速生成html頭部資訊的解決辦法：
需要下載Emmet外掛，ctrl+shift+P開啟命令面板，輸入install，點選installPackage
Preference-->Package Control，點選Install Package，在接下來出現的視窗中輸入emmet，選擇Emment Css Snippets
版本號
<!DOCTYPE html>
字符集
<meta charset="UTF-8">
UTF-8 包含全世界所有國家需要用到的字元
GB2312 簡單中文，包括6763個漢字
BIG5 繁體中文 港澳臺
GBK 包含全部中文，是GB2312的擴充套件，加入對繁體字的支援，相容GB2312
HTML標籤
排版標籤
標題標籤
<h1>標題</h1>
<h2>標題</h2>
<h3>標題</h3>
<h4>標題</h4>
<h5>標題</h5>
<h6>標題</h6>
h1標籤因為重要，儘量少用。一般h1都是給logo使用
段落標籤
<p>文字</p>
單詞縮寫：paragraph 段落
水平線標籤
<hr />
hr是單標籤，單詞縮寫：horizontal 橫線
換行標籤
<br />
br是單標籤，單詞縮寫：break 打斷、換行
div span標籤
<div></div>
<span></span>
div span 是沒有語義的 是我們網頁佈局主要的兩個盒子
div 就是 division的縮寫 分割，分割槽的意思 其實有很多div來組合網頁
span 跨度、跨距、範圍
文字格式化標籤
<b></b><strong></strong> 粗體
<i></i><em></em> 斜體
<s></s><del></del> 加刪除線
<u></u><ins></ins> 加下劃線
b i s u 只有使用沒有強調的意思 strong em del ins 語義更強烈（XHTML推薦使用）
標籤屬性
<標籤名 屬性1="屬性值1" 屬性2="屬性值2" >內容</標籤名>
常用屬性：height、width、color等
影象標籤img
<img src="影象URL" />
img是單標籤，單詞縮寫：image 影象
| 屬性 | 屬性值 | 描述 |
|---|---|---|
| src | URL | 影象的路徑 |
| alt | 文字 | 影象不能顯示時的替換文字 |
| title | 文字 | 滑鼠懸停時的顯示內容 |
| width | 畫素（XHTML不支援%頁面百分比） | 設定影象的寬度 |
| height | 畫素（XHTML不支援%頁面百分比） | 設定影象的高度 |
| border | 數字 | 設定影象邊框的寬度 |
圖片會等比縮放，一般給個寬度足夠
連結標籤
<a href="跳轉目標" target="目標視窗的彈出方式">文字或影象</a>
單詞縮寫：anchor 錨
href 可以定義內部或外部連結，包括圖片網頁等
target 定義開啟方式，有self和blank兩種，其中_self為預設值，_blank為在新視窗中開啟
<a href="https://www.baidu.com">文字或影象</a>
https:// 是協議，不可省略
<a href="#">文字或影象</a>
”#“ 定義空連結
錨點定位
<a href="#anchor">跳轉到anchor</a>
<h3 id="anchor">我是anchor</h3>
link標籤
<link />
定義文件與外部資源的關係，必須置於head裡
href：被連結文件的地址
rel：當前文件與被連結文件的關係（rel="stylesheet"）
type：規定被連結文件的型別（type="text/css"）
media：被連結的文件顯示在什麼裝置上
head新增小圖示
<link rel="shortcut icon" href="" type="image/x-icon" />
script標籤
<script type="text/javascript"></script>
可置於head裡、也可置於body裡
定義客戶端指令碼或者引入指令碼
必填屬性
type 指定指令碼的型別，text/javascript
選填屬性
src 外部指令碼檔案的URL
defer 規定是否對指令碼執行進行延遲，直到頁面載入為止，值和屬性名一樣
async 規定非同步執行指令碼（僅適用於外部指令碼），值和屬性名一樣
style標籤
<style type="text/css"></style>
置於head裡 為HTML文件定義樣式資訊
必填屬性
type 指定樣式表的型別，text/css
選填屬性
media 為樣式表規定不同的媒介型別
常用的值：
screen 計算機螢幕（預設值）
print 列印預覽模式/列印頁
handheld 手持裝置
all 所有裝置
base標籤
<head>
<base target="_blank" />
</head>
base是單標籤，可以設定整體連結的開啟狀態，需要在head中定義
在設定base標籤之後，連結也可以單獨定義
特殊字元
| 特殊字元 | 描述 | 字元的程式碼 |
|---|---|---|
| 空格符 | | |
| < | 小於號 | < |
| > | 大於號 | > |
| & | 和號 | & |
| ¥ | 人民幣 | ¥ |
| © | 版權 | © |
| ® | 註冊商標 | ® |
| ° | 攝氏度 | ° |
| ± | 正負號 | ± |
| × | 乘號 | × |
| ÷ | 除號 | ÷ |
| ² | 平方2（上標2） | ² |
| ³ | 平方3（上標3） | ³ |
註釋標籤
<!-- 會把之後的內容全部註釋
<!-- 內容 --> 註釋掉內容
相對路徑
- 圖片和HTML檔案位於同一資料夾，<img src="logo.gif" />
- 圖片和HTML檔案位於下一級資料夾，輸入資料夾和檔名，之間用”/“隔開，<img src="img/logo.gif" />
- 圖片和HTML檔案位於上一級資料夾，在檔名之前加入”../“，上兩級，則需要使用”../../“，<img src="../logo.gif" />
絕對路徑
完整的地址（本地及網路）
無序列表
<ul>
<li>列表</li>
<li>列表</li>
<li>列表</li>
</ul>
ul 裡建議只放 li 標籤，li 標籤裡可以放其他標籤
有序列表
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
</ol>
自定義列表
自定義列表常用於對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何專案符號。其基本語法如下：
<dl>
<dt>名詞1</dt>
<dd>名詞1解釋1</dd>
<dd>名詞1解釋2</dd>
<dt>名詞2</dt>
<dd>名詞2解釋1</dd>
<dd>名詞2解釋2</dd>
</dl>
表格
<table>
<tr>
<th></th>
<td></td>
</tr>
</table>
table 表
tr 行
th 表頭
td 每行被分為若干個單元格
td裡面還可以巢狀表格
表單
<form name="form1" action="register.aspx" method="post">
</form>
表單在網頁中主要負責資料採集功能
action 屬性定義在提交表單時執行的動作。
向伺服器提交表單的通常做法是使用提交按鈕。
如果省略 action 屬性，則 action 會被設定為當前頁面。
method 屬性規定在提交表單時所用的 HTTP 方法（GET 或 POST）：
<form action="action_page.php" method="GET">
或：
<form action="action_page.php" method="POST">
何時使用 GET？
您能夠使用 GET（預設方法）：
如果表單提交是被動的（比如搜尋引擎查詢），並且沒有敏感資訊。
當您使用 GET 時，表單資料在頁面位址列中是可見的：
action_page.php?firstname=Mickey&lastname=Mouse
註釋：GET 最適合少量資料的提交。瀏覽器會設定容量限制。
何時使用 POST？
您應該使用 POST：
如果表單正在更新資料，或者包含敏感資訊（例如密碼）。
POST 的安全性更加，因為在頁面位址列中被提交的資料是不可見的。
文字框
<input />單標籤
單行文字
<form>
<input name="username" type="text" />
</form>
密碼框
<form>
<input name="password" type="password" />
</form>
單選框
<form>
<input name="d1" type="radio" value="" checked />
<input name="d1" type="radio" value="" />
</form>
一組單選name必須相同，提交value的值
複選框
<form>
<input name="d1" type="checkbox" value="" checked />
<input name="d1" type="checkbox" value="" />
</form>
下拉選單
<select name="select" id="select">
<option value="01">北京</option>
<option value="02" selected="selected">上海</option>
</select>
上傳
<input type="file" />
用於檔案上傳
多行文字
<textarea name="" rows="" cols=""></textarea>
提交按鈕
<input name="submit" type="submit" value="註冊" />
重置按鈕
<input name="reset" type="reset" value="重填" />
用於清空表單已經填寫的資料