目錄
1. HTML簡介
HTML由標簽和屬性構成的
1.1. HTML文檔基本結構
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>網頁標題</title>
</head>
<body>
網頁顯示內容
</body>
</html>
2. 標簽
學習html語言就是學習標簽的用法
2.1. 標簽語法
長在尖號后面第一個單詞就是標簽（標記，元素）
- 一組告訴瀏覽器如何處理一些內容的標簽，通過關鍵字來識別，
<body>, <title>, <meta> - 不同標簽代表不同含義，比如段落標簽、文本標簽、鏈接標簽、圖片標簽等
- 標簽一般分為兩種：
- 單標簽: 聲明（meta）或者插入元素(img)，
- 雙標簽: 設置一段區域的內容：
<p></p>
1.2. 標簽的屬性和值
在標簽后面的，並通過空格隔開的
- 元素內部可以設置屬性和值，這些屬性值用來改變元素某些方面的行為
- 屬性和屬性值用等號連接，屬性值用雙引號括起來
1.3. 常見的標簽
1. 基礎標簽
| 標簽 | 描述 |
|---|---|
<html> |
定義HTML文檔 |
<title> |
文檔標題 |
<body> |
文檔主體 |
<h1-6> |
HTML標題 |
<p> |
段落 |
<br> |
折行 |
<hr> |
水平線 |
<!--...--> |
注釋 |
2. 格式標簽
| 標簽名稱 | 說明 |
|---|---|
| a | 超鏈接元素-->(2) |
| br | 強制換行 |
| wbr | 安全換行(英文狀態下使用) |
| b | 加粗 |
| strong | 加粗 |
| i | 傾斜 |
| em | 傾斜 |
| s | 刪除線 |
| del | 刪除線 |
| u | 下划線 |
| ins | 下划線 |
| small | 小字體 |
| sub | 下標 |
| sup | 上標 |
| code | 代碼 |
| abbr | 縮寫(本身無實際作用) |
| dfn | 傾斜 |
| q | 加雙引號 |
| cite | 傾斜(引用標題) |
| ruby | 包含漢語拼音 |
| bdo | 文字方向(dir = “rtl或者lfr”) |
| mark | 突出顯示(黃色背景，黑色的字) |
| time | 顯示日期與實踐 |
| span | 一般性文本（一般用於CSS） |
| hr | 空標記，水平線 |
|
空格 |
< |
左括號> |
> |
右括號< |
3. 表單標簽
- form默認是GET方法提交，直接通過地址信息提交，用於大量文本且不敏感的信息
- form可以通過method改為post， 輸入的敏感信息就不會再地址中顯示出來，用於少量文本且敏感的信息
| 標簽名稱 | 說明 |
|---|---|
| form | 定義供用戶輸入的HTML表單 |
| input | 輸入控件 |
| textarea | 多行輸入控件 |
| button | 按鈕 |
| select | 選擇列表 |
| optgroup | 選擇列表中相關選項的組合 |
| option | 選擇列表中的選項 |
| label | input 元素的標注 |
| fieldset | 定義圍繞表單中元素的邊框 |
| legend | 定義 fieldset 元素的標題 |
| datalist | 定義下拉列表 |
| keygen | 定義生成密鑰 |
| output | 輸出的一些類型 |
例子：
<b>1. form元素（用以用戶輸入數據）:</b> <br>
<!--action：表單提交的頁面， method：用get和post提交，enctype：采用編碼格式，name：表單名稱，target：提交目標，
autocomplete瀏覽器記住用戶數據，novalidate驗證性,form讓表單為的元素和指定的表單掛鈎提交--->
<form name="form01" autocomplete="on" action="http://www.haosou.com" id="register">
<!--fieldset對表單進行分組, name+form+disabled-->
<fieldset>
<!--legend為分組添加標簽-->
<legend>注冊分組</legend>
<!--label可用於CSS-->
<label>
<!--input屬性:autofocus:光標選中，disabled不可輸入，autocomplete記住用戶，type，name用提交數據的，value的默認值--->
用戶名： <input name="User" value="666"> <br>
</label>
<label>
<!--外部表單控件可以連接form-->
電子郵件： <input name="email" form = "register">
</label>
<!--button屬性: type：submit提交/reset重置/button按鈕， formaction, formenctype, formmethod, formtarget, formvalidate-->
<button>提交</button>
</fieldset>
</form> <br>
<b>2. Input的type屬性：</b> <br>
<form>
<!--text的屬性: maxlength,size, name, value, readonly, disabled, list提供建議值,required必須輸入才能提交, palceholder輸入字符的提示 -->
文本：<input type="text" list="abc" required> <br>
<!--password的屬性：與text基本一致-->
密碼：<input type="password" placeholder="輸入密碼吧"> <br>
搜索: <input type="search"> <br>
<!--max,min,step,-->
數字: <input type="number"> <br>
范圍: <input type="range"> <br>
日期: <input type="date"> <input type="month"> <input type="time"> <input type="week"> <input type="datetime"> <input type="datetime-local"> <br>
顏色: <input type="color"> <br>
復選框: 音樂<input type="checkbox" name="music" value="1"> 體育<input type="checkbox" name="sport" value="2"> <br>
單選框: <input type="radio" name="sex" value="1" checked>男 <input type="radio" name="sex" value="2">女 <br>
提交: <input type = "submit"> <br>
重置: <input type="reset"> <br>
按鈕: <input type="button"><br>
圖片按鈕: <input type = "img" src="img/dog.jpg"> <br>
email: <input type="email"> <br>
telephone: <input type="tel"><br>
URL: <input type="url"><br>
隱藏:<input type="hidden" value="1"><br>
上傳文件:<input type="file" accept="image/gif"><br>
<button>提交</button>
</form>
<datalist id="abc">
<option value="1">蘋果</option>
<option value="2">橘子</option>
</datalist> <br>
<b>3. 下拉列表框：</b> <br>
<form action="http://www.haosou.com">
<!--auto,disabled,form size（下拉高度）,multiple（多選）,autofocus, required-->
<select name="fruit">
<!--選項分組-->
<optgroup label="水果">
<option value="1">蘋果</option>
<option value="2" selected>橙子</option>
<option value="3">香蕉</option>
</optgroup>
<optgroup label="粗糧">
<option value="4">大米</option>
<option value="5">稻谷</option>
<option value="6">玉米</option>
</optgroup>
</select>
<button>提交</button>
</form> <br>
<b>4.多行文本框：</b> <br>
<form action="http://www.haosou.com">
<!--name,form,readonly,disabled,maxlength,autpfocus,placeholder,rows,cols,wrap,requried-->
<textarea name="content" cols="30" rows="10">
請留下你的建議
</textarea>
<button>提交</button>
</form> <br>
4. 框架標簽
| 標簽名稱 | 說明 |
|---|---|
| frame | 定義框架集的窗口或框架 |
| frameset | 定義框架集 |
| noframes | 定義針對不支持框架的用戶的替代內容 |
| iframe | 定義內聯框架 |
5.圖形標簽
| 標簽名稱 | 說明 |
|---|---|
| img | 定義圖像 |
| map | 定義圖像映射 |
| area | 定義圖像地圖內部的區域 |
| canvas | 定義圖形 |
| figcaption | 定義 figure 元素的標題 |
| figure | 定義媒介內容的分組，以及它們的標題 |
在頁面中插入另外一個frame： <br>
<a href="http://www.baidu.com" target="in">百度</a> | <a href="http://www.haosou.com" target="in">好搜</a>
<br>
<iframe src="http://www.bilibili.com" frameborder="1" width="800", height="600" name="in"></iframe> <br>
6. 音頻視頻標簽
| 標簽名稱 | 說明 |
|---|---|
| audio | 聲音內容 |
| source | 媒介源 |
| track | 定義用在媒體播放器中的文本軌道 |
| video | 定義視頻 |
例子：
<h1>9.音頻和視頻</h1>
<!--autoplay自動播放，loop反復播放，muted靜音, poster是視頻開頭的圖片，preload加載網絡video使用，none什么都不加載，metadata下第一幀，auto盡快下載-->
<video src="pink.mp4" width="640" height="480" controls poster="img/dog.jpg"></video> <br> <br>
音頻和視頻幾乎一樣（除了沒有寬高）: <br>
<audio src="xusong.mp3" controls></audio> <br>
7. 鏈接標簽
| 標簽名稱 | 說明 |
|---|---|
<a href="val"> |
外部跳轉用url，內部跳轉用錨點# |
超鏈接的屬性
| 屬性 | 說明 |
|---|---|
| href | 指定a所指向的資源URL |
| hreflong | 指向的鏈接資源所用的語言 |
| meida | 說明所鏈接資源用於哪種設備 |
| rel | 說明文檔與所鏈接資源的關系類型 |
| target | 指定用以打開鎖鏈接自願的瀏覽環境 |
| type | 說明所鏈接資源的MIME類型 |
8. 列表標簽
| 標簽名稱 | 說明 |
|---|---|
| p | 段落 |
| div | 通用分組(用途較少) |
| blockquote | 引用大段內容 |
| pre | 展示格式化的內容 |
| hr | 添加分割水平線 |
| ul-li | 無序列表 |
| ol-li | 有序列表 |
| dl-dt-dd | 生成說明列表,用於圖片注釋 |
| figure-figcaption | 圖片及圖片標題 |
例子如下：
無序列表:<br>
<ul>
<li><a href="https://www.google.com.hk/">張三</a></li>
<li>李四</li>
<li>王五</li>
</ul> <br>
有序列表：<br>
<ol type = 'a' start="2">
<li>張三</li>
<li value="8">李四</li>
<li>王五</li>
</ol> <br>
9. 表格標簽
| 標簽名稱 | 說明 |
|---|---|
| table | 表格 |
| thead | 標題行 |
| tbody | 表格主體 |
| tfoot | 表腳 |
| tr | 一行單元格 |
| th | 標題行單元格 |
| td | 單元格 |
| col | 一列 |
| colgroup | 一組列 |
| caption | 表格標題 |
表格的屬性有如下的：
| 表格屬性 | 說明 |
|---|---|
| border | 表格的邊框 |
| cellpadding | 單元格內容和邊框距離 |
| cellspacing | 單元格之間的距離 |
| align | 水平對齊方式 |
| valign | 垂直對齊方式 |
| colspan | 單元格水平合並 |
| rowspan | 單元格垂直合並 |
例子如下：
<!--cellpadding: 內容和邊框的距離-->
<!--cellspacingg: 格子之間的距離-->
<table border="1" width="500" height = "300" cellpadding="10" cellspacing = "10">
<!--表的標題-->
<caption>這是標題</caption>
<!--設置某一列為紅色-->
<colgroup>
<!--第一列不設置-->
<col>
<!--第二列為紅色-->
<col style = "background: red;" span = "1">
</colgroup>
<!--tr表示一行-->
<tr>
<!--th表示表頭-->
<!--valign表示垂直對齊-->
<th valign="top">序號</th>
<th>產品名稱</th>
<th>產品價格</th>
<th>產品數量</th>
<th>統計</th>
</tr>
<tr>
<!--colspan表示水平合並-->
<td colspan="5">水平合並</td>
</tr>
<tr>
<!--td表示一格-->
<!--align表示水平對齊-->
<td align="center">1</td>
<td align="center">蘋果</td>
<td>￥5.00</td>
<td>1000</td>
<!--rowspan表示垂直合並-->
<td rowspan="3"></td>
</tr>
<tr>
<td>2</td>
<td>橘子</td>
<td>￥6.00</td>
<td>2000</td>
</tr>
<tr>
<td>3</td>
<td>葡萄</td>
<td>￥16.00</td>
<td>2300</td>
</tr>
</table> <br>
10. 樣式/節 標簽
| 標簽名稱 | 說明 |
|---|---|
| style | 文檔的樣式信息 |
| div | 文檔的節 |
| span | 文檔的節 |
| header | section或者page的頁眉 |
| footer | section或者page的頁腳 |
| section | 定義section |
| article | 定義文章 |
| aside | 定義頁面內容之外的內容 |
| details | 定義元素的細節 |
| dialog | 定義對話框或窗口 |