標籤：
1.HTML 簡稱
1.HyperText Markup Language簡稱為HTML
2.HyperText:超文本（文本+圖片+視頻+串連）
3.Markup Language:標記語言
4.由SGML（標準通用標記語言 (SGML)）發展而來
5.寫給瀏覽器的語言
2.版本及曆史
1.超文字標記語言 (HTML)（第一版）1993年6月（IETF制定）
2.HTML 2.0-----1995年11月
3.HTML 3.0-----1996年1月
4.HTML 4.0-----1997年
5.HTML 5.0-----2014年10月29日（W3C和WHATWG合作發布）
註明：
1.W3C：World Wide Wed Consortion(W3C理事會或全球資訊網聯盟）
2.WHATWG （Web超文本應用技術工作群組）
3.關於新的HTML5標準
HTML5的設計目的是為了在行動裝置上支援多媒體。
新的文法特徵被引進以支援這一點，如video,audio和canvas標記。
HTML5還引進了新功能，可以真正改變使用者與文檔的互動方式，包括：
1.新的解析規則增強了靈活性
2.新屬性
3.淘汰過時的或冗餘的屬性
4.一個HTML5文檔到另一個文檔間的拖放功能
5.離線編輯等等
支援Html5的瀏覽器包括Firefox（Firefox瀏覽器），IE9及其更高版本，Chrome（Google瀏覽器），Safari，Opera等；國內的遨遊瀏覽器（Maxthon），以及基於IE或Chromium（Chrome的工程版或稱實驗版）所推出的360瀏覽器、搜狗瀏覽器、QQ瀏覽器、獵豹瀏覽器等國產瀏覽器同樣具備支援HTML5的能力。
4.HTML的基本結構
<html>
<head>
<title>我的第一個網頁</titlle>:head是頭部
</head>
<body>
歡迎來到HTNL世界
</body>:是頁面的主體</html>html:裡面的東西是HTML網頁
5:標籤具有屬性， 屬性用來表示標籤的性質和特徵。屬性要在開始標籤中指定
6.定義一個合格的HTML頁面
1.HTML5文檔聲明
<!DOCTYPE HTML>
說明：位於 <html> 標籤之前，不區分大小寫。告知瀏覽器該文檔遵循HTML規範
2.設定網頁標題
<title>---</title>
3.設定網頁編碼
<meta charset="utf-8"/>
說明：（utf-8是多國語言編碼）（gb2312是中文簡體編碼）
4設定頁面關鍵字，內容介紹
<meta name="keywords" conteny="關鍵字1，關鍵字2，。。。"/>
<meta name="description" content="內容介紹" />
1html的元素
1.分行符號 <br />:就是換行
2.段落標籤 <p>這是一個段落</p> 屬性align只能寫在前p裡面：屬性值有（left左,right右,center中）
3.寫法：<p align="left">這是一個段落</p>:這是一個段落(會往靠左對齊）
4.標題
<h1>字最大</h1>
<h2>字比1小</h2>
<h3>字比2小</h3>
<h4>字比3小</h4>
<h5>字比4小</h5>
<h6>字最小沒有在小的字了（在標題）</h6>
5文字格式設定化
<b>字加粗</p>
<i>字是斜體</i>
<del>字是刪除的</del>
<sup>定義上標字</sup>
<sub>定義下標字</sub>
6.連結
<a href="點擊名字要去的地方">是取名字（顯示名字下有底線）</a>
1.說明屬性：1，herf(是定義連結地址）2，title（是連結提示資訊）3，target（連結開啟檔案【值有blank是新視窗開啟】【self是本視窗開啟】【top是頂視窗開啟】）
2.常規應用
1.<a href=“http://www.163.com”>外部連結</a>
2.<a href=“about.html”>內部連結 </a>
3.其他應用
1.<a href=“mailto:郵箱地址”>郵件連結</a>
2.<a href=“tel:電話號碼”>一鍵撥打</a>
3.<a href="sms:139xxxxxxx">一鍵傳送簡訊</a>
7.映像
<img src="url" width="100" height="10" alt="替代文字"/>
說明：src(定義映像的url)
alt(定義映像的替代文本）
width寬（height高）{是圖片的高寬}
8.圖片相對位址的定義（重點）
1.（./是目前的目錄）
2.（../回到上一層目錄）
3.（images/進入images一層目錄）
4.（../images/回到上一層目錄，然後再進入images目錄）
9.映像熱區（擴充）
<img src="URL" usemap="# map 名稱" />
<map name="map 名稱">
<area shape="形狀" coords="座標值" href="URL" />
</map>
1.說明shape 熱區形狀（rect. circle.poly)
2.coords 現狀的座標值
10. audio(音頻)
帶控制器的音頻播放器
文法：
<audio src="song.ogg" controls="controls"></audio>
如果考慮到不同瀏覽器對視頻檔案的相容性
<audio width="320" height="240" controls="controls">
<source src="song.ogg" type="audio/ogg">
<source src="song.mp3" type="audio/mpeg">
<p>Your browser does not support the audio tag.</p>
</audio >
屬性說明：
autoplay autoplay 如果出現該屬性，則音頻在就緒後馬上播放。
controls controls 如果出現該屬性，則向使用者顯示控制項，比如播放按鈕。
loop loop 如果出現該屬性，則每當音頻結束時重新開始播放。
preload preload 如果出現該屬性，則音頻在頁面載入時進行載入，並預備播放。如果使用 "autoplay"，則忽略該屬性。
src url 要播放的音訊 URL
11. video(視頻)
帶控制器的視頻播放器
文法：
<video src=“movie.mp4” controls="controls"></video>
如果考慮到不同瀏覽器對視頻檔案的相容性
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
<p>Your browser does not support the video tag.</p>
</video>
屬性說明：
autoplayautoplay如果出現該屬性，則視頻在就緒後馬上播放。
controlscontrols如果出現該屬性，則向使用者顯示控制項，比如播放按鈕。
looploop如果出現該屬性，則當媒介檔案完成播放後再次開始播放。
mutedmuted規定視頻的音訊輸出應該被靜音。
posterURL規定視頻下載時顯示的映像，或者在使用者點擊播放按鈕前顯示的映像。
preloadpreload如果出現該屬性，則視頻在頁面載入時進行載入，並預備播放。如果使用 "autoplay"，則忽略該屬性。
srcurl要播放的視頻的 URL。
widthpixels設定視頻播放器的寬度。
heightpixels設定視頻播放器的高度。
12.html 實體字元
1.(>是>),(<是<),("是’引號）（®；註冊商標(?)）（©；是著作權符號?）（&；是&）
13.無序列表 說明：屬性type 屬性值（disc)（circle）（上去了吧）
<ul>
<li>ewew</li>
<li>ewwe</li>
</ul>
14.有序列表 屬性有（type或start）
1.屬性值（type有1.a.A.i.I)用來設定項目前面的標記
2.start數值 排序的起點數值
3.<ol>
<li>ere</li>
<li>ewew</li>
</ol>
15.定義列表
<dl>
<dt>HTML</dt>
<dd>html 是超文字標記語言 (HTML)</dd>
<dt>XHTML</dt>
<dd>可擴充超文本置標語言 </dd>
<dd>表現方式與超文本置標語言（HTML）類似，不過文法上更加嚴格 </dd>
</dl>
16.html 表格
1.表格由<table>標籤以及一個或多個tr.th或td元素組成。
2.儲存格可以包含文本。圖片。列表。段落。表單。水平線。表格等等。
基本結構：
<table border="1">
<tr>
<td>row1,cel1 1</td>
<td>row1,cell 2</td>
</tr>
</table>
1.<table>定義表格 2.<th>定義表頭 3.<tr>定義表格行 4.<td>定義表格的單元。
1，屬性值說明
width px,%指定表格的寬度
heightpx,%表格的高度
borderpx指定表格邊框的寬度
cellpadding px指定邊框與內容之間的空白
cellspacing px ，%指定儲存格之間的空白
align left,right ,center指定對齊
valign top, middie, bottom 垂直相片順序
colspan 合并列儲存格
rowspan合并行儲存格
17.<iframe>內嵌架構
說明： 屬性屬性值說明
widthpx .% 指定架構的寬度
heightpx .% 指定架構的高度
scrolling yes,no,auto 是否顯示捲軸
frameborder1,o 是否顯示邊框
文法：<iframe src="url" name="架構名" ></iframe>
18.form（表單）（重點）
1.表單是一個包含表單元素的地區。
2.表單能夠包含 input 元素，textarea、select、fieldset、legend 和 label 元素。
3.表單使用標籤（<form>）定義。
4.表單用於向伺服器傳輸資料。
1，表單的基本結構：
<form name="form1" action="URL" method="get">
使用者名稱：<input type="text" name="uname" />
密 碼：<input type="password" name="passwd" />
</form>
2，說明：屬性說明
name表單的名稱
action表單提交地址
method表單資料提交的方式 （get ,post）
enctypeMIME類型
target開啟檔案
19.<input>(表單元素：輸入框）（重點）
說明：屬性說明
typeinput元素類型
nameinput 元素的名稱
valueinput 元素的值
sizeinput 元素的寬度
readonly是否唯讀
maxlength 輸入字元的最大長度
disabled是否禁用
20.複選框
<input type="checkbox"name="love" value="music" checked="checked"/>聽音樂
<input type="checkbox"name="love" value="movie"/> 看電影
<input type="checkbox"name="love" value="game"/> 玩遊戲
20.1選項按鈕
<input type="submit" name="comit" value="提交"/>
<input type="reset" name="reset" value="重寫"/>
<input type="image"name="img_btn" src="btn.gif"/>《圖片按鈕有提交功能》
21.隱藏欄位
隱藏欄位用於在程式發送沒有必要讓使用者看到特定值的時候使用。
<input type="hidden" name="uid" value="10"/>
1.上傳檔案
<input type="file" name="photo"/>
注意： 利用這項功能時，在form標籤中要指定method屬性。要把method指定為post,enctype屬性指定為multipart/data。
說明：multiple 控制是否上傳多檔案
22.HTML5的表單所有TYPE類型
button定義可點擊的按鈕（大多與 JavaScript 使用來啟動指令碼）
checkbox定義複選框。
color定義拾色器。
date定義日期欄位（帶有 calendar 控制項）
datetime定義日期欄位（帶有 calendar 和 time 控制項）
datetime-local定義日期欄位（帶有 calendar 和 time 控制項）
month定義日期欄位的月（帶有 calendar 控制項）
week定義日期欄位的周（帶有 calendar 控制項）
time定義日期欄位的時、分、秒（帶有 time 控制項）
email定義用於 e-mail 地址的文字欄位
file定義輸入欄位和 "瀏覽..." 按鈕，供檔案上傳
hidden定義隱藏輸入欄位
image定義映像作為提交按鈕
number定義帶有 spinner 控制項的數字欄位
password定義密碼欄位。欄位中的字元會被遮蔽。
radio定義選項按鈕。
range定義帶有 slider 控制項的數字欄位。
reset定義重設按鈕。重設按鈕會將所有表單欄位重設為初始值。
search定義用於搜尋的文字欄位。
submit定義提交按鈕。提交按鈕向伺服器發送資料。
tel定義用於電話號碼的文字欄位。
text預設。定義單行輸入欄位，使用者可在其中輸入文本。預設是 20 個字元。
url定義用於 URL 的文字欄位。
23.textarea(表單元素：多行文本域）
<textarea name="content" rows="5" cols="40"></textarea>
(rows,cols,只可以控制視覺的效果不可以控制px的大小）
24.select（表單元素：下拉框）
說明：屬性說明
name下拉式清單方塊的名稱
size下拉式清單方塊的顯示行數
multiple是否多選
disabled是否禁用
selected設定預設選中的選項
value選項的值
例：
<select name="city">
<option value="0">請選擇</option>
<option value="bj">北京</option>
<option value="gz">廣州</option>
</select>
25.optgroup(表單元素：下拉框分組）
optgroup元素用於組合選項
說明：屬性說明
label指定組合選項名稱
例：
<select name="city" multiple>
<optgroup label="廣東">
<option value="1">廣州</option>
<option value="2">深圳</option>
</optgroup>
<optgroup label="其他">
<option value="3">長沙</option>
<option value="4">香港</option>
</optgroup>
</select>
26. label
lablel 標籤的作用是將輸入項或選項及其標籤文字關聯起來。
例：<input type="radio" name="sex" value="1" id="male" />
<label for="male">男</label>
<input type="radio" name="sex" value="0" id="female" />
<label for="female">女</label>
總結：html
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
