超文本標記語言HTML詳解
本文轉自（轉載請註明原始出處）：38.超文本標記語言HTML詳解（上），39.超文本標記語言HTML詳解（下），部份內容有整理。javascript
HTML(Hyper Text Markup Language)是超文本標記語言，不是編程性語言。使用標記標籤標記純文本。css
1）HTML版本
| 版本 | 發佈時間 |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2012 |
| XHTML5 | 2013 |
文檔類型聲明：聲明採用HTML 5的語句是<!DOCTYPE html>，這個語句不屬於HTML語言，只告訴瀏覽器HTML文檔使用的HTML版本，而且這個語句不區分大小寫。html
2）HTML標籤
使用尖括號包圍的關鍵詞稱爲標籤。標籤通常成對出現，如<p>和</p>，分別稱爲開始標籤（opening tag）和結束標籤（closing tag），或者開放標籤和閉合標籤，不成對出現的標籤如<br />。
HTML標準推薦全部標籤使用小寫，HTML全部標籤能夠參考HTML 參考手冊。java
3）HTML元素
HTML元素由開始標籤、元素內容及結束標籤組成，有的HTML元素具備空內容，稱爲空元素。
空元素在開始標籤中進行關閉，而且加上空格和斜槓，如<br />，空元素沒有結束標籤。
HTML元素能夠嵌套存在。web
4）HTML屬性
HTML屬性爲HTML元素提供更多信息，在開始標籤中設置，格式爲name="value"。
HTML標準推薦屬性使用小寫，而且始終爲屬性值添加引號，通常使用雙引號，若是值自己含有雙引號，須要使用單引號。
HTML的全部屬性能夠參考HTML 全局屬性 。編程
5）HTML文檔頭
要在網頁中正常顯示中文或其餘 UTF-8 編碼，能夠在 <head> 元素中添加：<meta charset="utf-8" /> 瀏覽器
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<head> 元素中必須包含 <title> 標籤，表示文檔標題，這個標題會用在搜索引擎的搜索結果展現、瀏覽器標籤標題、收藏夾標題。 服務器
<base href="地址" target="_blank/_self/_top/_parent/iframe_name" />：爲頁面上的全部連接規定默認地址和默認目標，只能放在 <head> 元素中，而且只能有一個。若是超連接標籤 <a> 中提供的 href 屬性或圖片標籤 <img> 中提供的 src 屬性是絕對路徑，則 base 的設置無效。 網絡
<link rel="關係" type="類型" href="URL">：定義文檔與外部資源的關係，只能放在<head>元素中，不過能夠出現數次。好比引用CSS文件： app
<link rel="stylesheet" type="text/css" href="sample.css" />
<meta> 標籤用於爲網頁提供元數據，好比網頁的描述、關鍵詞、做者等等：
<meta name="keywords" content="Love,Peace,World" /><!--定義網頁關鍵詞--> <meta name="description" content="This page is about love and peace." /><!--定義網頁描述--> <meta name="author" content="mars loo" /><!--定義網頁做者--> <meta http-equiv="refresh" content="5" /><!--定義頁面5秒鐘刷新一次-->
5.1 標題
<h1></h1>、<h2></h2>、<h3></h3>、<h4></h4>、<h5></h5>、<h6></h6>：用來標記1~6級標題，塊級元素。數字越小，標題級別越高（越重要）。
5.2 水平線
<hr/>：水平線標記，塊級元素，表示文檔內容變化。
5.3 註釋
<!-- 註釋內容 -->：爲HTML文檔添加註釋，能夠跨越多行。
5.4 段落
<p></p>：標記段落，塊級元素。
5.5 換行
<br/>：用於換行，行內元素。瀏覽器渲染頁面時，會移除源代碼中多餘的空格和空行，全部連續的空格或空行都會被算做一個空格顯示。若是須要顯示多個空格，使用多個 表示。
5.6 超連接
<a></a>：標記超連接，內聯元素。
- href 屬性指向連接地址
- target 屬性說明在什麼位置顯示連接文檔：
- _blank：在一個新打開、未命名的窗口中載入連接文檔。
- _self：在相同的框架中打開連接文檔。
- _parent：在父框架中打開連接文檔。
- _top：在頂級框架中打開連接文檔。
- iframe_name：在指定的iframe中打開連接文檔。
- download 屬性表示不跳轉連接，而是以指定的文件名直接下載文件，瀏覽器會自動確認文件的後綴。
- id 屬性（HTML5不支持使用name屬性建立錨）能夠建立本頁面內的錨，而後使用href屬性定義到轉到這個錨的超連接：
<a href="https://my.oschina.net/u/3314358/" target="_blank">訪問個人博客</a> <a id="anchor">這裏</a> <a href="#anchor">錨</a>
超連接能夠用於郵件發送，好比(使用%20代替空格)：
<a href="mailto:mars@loo.com?cc=sample@example.com&bcc=xxx@qq.com&subject=Hello%20Mars&body=你好%20博越！" style="text-decoration:none">寫信給mars</a>
能夠把圖像做爲超連接元素的內容，好比：
<a href="#">
<img src="sample.gif" width="50px" height="25px" />
</a>
5.7 圖片
<img src="圖片地址" width="寬度" height="高度" alt="圖片沒法加載時的顯示信息" />：顯示圖片，內聯元素。
- src屬性指向圖片地址(本地地址或網絡URL)。
- width和height屬性分別控制寬和高。
使用圖片做爲地圖：
<img src="china.jpg" width="145" height="126" alt="China" usemap="#chinamap"> <map name="chinamap" id="chinamap"> <area shape="rect" coords="0,0,82,126" alt="Beijing" href="Beijing.html"> <area shape="circle" coords="90,58,3" alt="Tianjin" href="Tianjin.html"> </map>
a. map 標籤
<map> 標籤的 name 和 id 屬性哪一個生效取決於瀏覽器，因此 HTML5 規定必須同時提供 name 和 id 屬性。
b. area 標籤
若是提供了 href 屬性，則必須提供 alt 屬性。
coords 屬性和 shape 屬性配合使用：
| coords屬性 | shape屬性 |
|---|---|
| x,y, radius | circle |
| x1, y1, x2, y2 | rect |
| x1, y1, x2, y2, …, xn, yn | poly |
target 屬性一樣能夠指定在何處打開新的連接。
5.8 格式化文本
<sub> </sub>：下標標記，下標文本將會顯示在當前文本流中字符高度的一半爲基準線的下方，可是與當前文本流中文字的字體和字號都是同樣的。
<sup> </sup>：上標標記，上標文本將會顯示在當前文本流中字符高度的一半爲基準線的上方，可是與當前文本流中文字的字體和字號都是同樣的。
<ins cite="url" datetime="insert_time"> </ins>：插入字標記，一般會顯示下劃線效果，cite 屬性指向一個解釋爲何插入的URL，datetime 屬性說明插入的時間，格式爲YYYY-MM-DDThh:mm:ssTZD，好比2016-08-15T22:55:03Z，其中 TZD（時區指示器 time zone designation)中的 Z 表示是格林威治時區。
<del cite="url" datetime="delete_time"> </del>：刪除字標記，一般會顯示爲刪除效果，cite屬性指向一個解釋爲何刪除的URL，datetime屬性說明刪除的時間，格式如<ins>標籤。
<strong> </strong>：重要文本。
<em> </em>：強調文本。
5.9 地址
<address> </address>：若是在<body>元素內定義，表示HTML文檔的做者/擁有者的聯繫信息；若是在<article>元素內定義，表示文章的做者/擁有者的聯繫信息，塊級元素。不要使用這個標籤表示郵政編碼信息，除非這些信息是聯繫信息的組成部分。
5.10 縮寫
<abbr title="全稱"> </abbr>：定義縮寫，title屬性定義鼠標懸浮在單詞上時彈出的全稱是什麼，行內元素。
5.11 改變文字方向
<bdo dir="方向"> </bdo>：定義文字顯示方向，dir屬性取值有兩個：ltr（從左到右）、rtl（從又到左），行內元素。
5.12 引用文字
<blockquote cite="引用的地址"> </blockquote>：定義長引用，塊級元素。
<q cite="引用的地址"> </q>：定義短引用，行內元素。
5.13 定義項目
1. 若是dfn標籤本身包含title屬性，則title屬性定義項目。
<dfn title="定義內容">定義</dfn>：定義項目或縮寫的定義
2. 若是dfn標籤包含abbr元素，則abbr元素中的title屬性定義項目。
<dfn><abbr title="World Health Organization">WHO</abbr></dfn>
3. 不然，<dfn>文本內容便是項目，而且父元素包含定義。
<p><dfn>WHO</dfn> World Health Organization </p>
<dfn>是行內標籤。
5.14 著做標題
<cite>標題</cite>：表示著做標題，行內元素。
5.15 計算機輸出
<samp>示例</samp>：能夠把計算機的輸出內容放在這兩個標籤之間，可是換行仍是須要是用<br />元素。
5.16 代碼
<code>代碼</code>：顯示計算機代碼。
若是要保留代碼中的縮進，須要使用<pre>標籤。
5.17 預格式文本
<pre>格式文本</pre>：顯示預格式文本，且爲等寬顯示。
5.18 變量
<var>變量名</var>：定義計算機變量。
5.19 打字機輸出
<tt>打字機輸出</tt>：表示打字機輸出。
5.20 表格
<table border="1"></table>：用來建立一個表格，塊級元素。border屬性值只容許爲1（有邊框）或""（無邊框）。
<tr></tr>：用來表示表格的行。
<td></td>：用來表示每一個單元格，內聯元素。
<th></th>：用來定義表頭，語義上講是表格某一行或某一列的標題。
<caption></caption>：定義表格標題。
表格中經常使用的屬性如colspan能夠定義表格的元素跨越幾列，rowspan定義跨越幾行，cellpadding定義單元格內容與邊框之間的留白，cellspacing定義單元格之間的距離。
<table border="1">
<tr>
<th>Name</th>
<th>Tel.</th>
</tr>
<tr>
<td rowspan="2">Tom K.</td>
<td>15613140520.</td>
</tr>
</table>
效果以下：
<colgroup span="列數"></colgroup>：用於將表格的列分組，span屬性定義列的數目：
<table border="1">
<colgroup span="2" style="background-color:blue"></colgroup>
<tr>
<th>Name</th>
<th>Gender.</th>
<th>Tel.</th>
</tr>
<tr>
<td rowspan="2">Tom K.</td>
<td>Male.</td>
<td>15613140520.</td>
</tr>
</table>
效果以下：
<col span="列數"></col>：在colgroup中實現更精細控制：
<table border="1">
<!--<colgroup span="2" style="background-color:blue"></colgroup>-->
<colgroup>
<col span="2" style="background-color:yellow" />
<col style="background-color:red" />
</colgroup>
<tr>
<th>Name</th>
<th>Gender.</th>
<th>Tel.</th>
</tr>
<tr>
<td rowspan="2">Tom K.</td>
<td>Male.</td>
<td>15613140520.</td>
</tr>
</table>
效果以下：
<thead></thead>：定義表頭，<tfoot></tfoot>：定義表格的頁腳，<tbody></tbody>：定義表格的主體。
在使用時，這三個標籤必須做爲<table>的子標籤，位於<caption>和<colgroup>以後，且三個標籤的順序是<thead>-><tfoot>-><tbody>：
<table border="1">
<caption>Table Sample</caption>
<!--<colgroup span="2" style="background-color:blue"></colgroup>-->
<colgroup>
<col span="2" style="background-color:yellow" />
<col style="background-color:red" />
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Gender.</th>
<th>Tel.</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Dummy</td>
<td>Dummy</td>
<td>Dummy</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tom K.</td>
<td>Male.</td>
<td>15613140520.</td>
</tr>
</tbody>
</table>
效果以下：
5.21 列表
<ul></ul>：定義無序列表，塊級元素。HTML5 中 ul 標籤的屬性已經被廢棄，應該用 CSS 控制項目符號的形狀，如style="list-style-type:disc" 表示使用實心圓形，circle 表示使用空心圓形，square 表示使用實心正方形。
<ol></ol>：定義有序列表，HTML5 中已經廢棄了 ol 標籤的屬性，控制列表的起始值、項目符號樣式應該使用 CSS 控制。
<li></li>：定義每一條列表項
好比：
<ul style="list-style-type:circle">
<li>
Orange
</li>
<li>
Apple
</li>
</ul>
效果以下：
a. 定義列表
<dl></dl>：用於定義列表，其中：
<dt></dt>：表示自定義列表項。
<dd></dd>：表示自定義列表項的定義，好比：
<dl>
<dt>WWW</dt>
<dd>world wide web</dd>
<dt>HTTP</dt>
<dd>hypertext transfer protocal</dd>
</dl>
效果以下：
5.22 塊級元素與內聯元素
定義塊級元素：<div></div>
定義內聯元素：<span></span>
使用 <div> 和 <span> 配合 CSS 進行頁面佈局和渲染，而不是使用 <table>。
6）表單
<form></form>：定義一個表單，屬性值列表：
- action：表單提交地址。
- enctype：表單編碼格式，有3種：
- application/x-www-form-urlencoded：enctype的默認值，空格轉換成+號，特殊字符轉換成ASCII HEX編碼。
- multipart/form-data：不對特殊字符編碼，上傳文件時，必須用此格式。
- text/plain：空格轉換成+號，可是不對特殊字符編碼。
- method：表單提交方式（post/get）。
- autocomplete：是否開啓自動完成（on/off）。
- novalidate：不對錶單進行驗證，好比：
<form action="" novalidate="novalidate">
<input type="email" name="user_email" />E-mail:
<input type="submit" value="Submit">
</form>
- 這樣表單不會對 email 這種 input 作驗證。
- target：在什麼位置提交表單，即在什麼位置顯示錶單提交後的結果，與
<a>標籤的 target 屬性同樣。
6.1 表單輸入元素
input
<input>標籤是最基本的 form 表單的輸入元素，屬性列表以下：
- type：輸入的類型：
- button：點擊按鈕，與 javascript 配合使用。
- checkbox：複選框，
checked="checked"表示預選該框，配合 name 和 value 屬性使用。 - color：拾色器，後臺接收到的是 #RRGGBB 值：
- date：日期選擇器，後臺接收到的是YYYY-MM-DD值：
- datetime-local：日期時間選擇器，後臺接受的是YYYY-MM-DDTHH:mm值：
- email：郵箱，有郵箱格式判斷，可是沒有判斷空字符串（Chrome瀏覽器），移動設備會根據此類型變化輸入法鍵盤格式。
- file：文件，有「瀏覽」按鈕供選擇文件。
- hidden：隱藏值，配合 name、value、Javascript 使用。
- image：將圖片做爲提交按鈕，同時瀏覽器還會上傳用戶點擊圖片的座標點，以x、y表示。
- month：月選擇器，後臺接收到的是 YYYY-MM 值（雖然客戶端能夠選擇到天）。
- number：數字選擇器，配合 min、max、step、value 能夠規定最小值、最大值、步長、默認值。
- password：密碼。
- radio：單選按鈕，
checked="checked"表示預選該按鈕，配合 name 和 value 屬性使用。 - range：不精確數字輸入，配合 min、max 規定最小值、最大值：
- reset：重置按鈕，充值表單爲默認值。
- search：搜索字段，外表看起來與text沒有什麼不一樣。
- submit：提交按鈕，能夠不提供value屬性。
- tel：電話號碼字段，沒有格式檢查。
- text：單行文本字段。
- time：時間選擇器，後臺接受HH:mm（小時：分鐘)值。
- url：URL，有基本的格式檢查，一樣沒有判空（Chrome)。
- week：年和周選擇器，後臺接受YYYY-WMM值，好比2016-W08表示2016年8月。
- accept：僅用於
type="file"時，表示接受的文件類型（若是有多個，使用逗號分隔），如：- audio/*：聲音文件。
- vedio/*：視頻文件。
- image/*：圖片文件。
- 其餘MIME_TYPE：參考這裏。
- alt：僅用於
type="image"時，用於圖片沒法加載的替換文字。圖片沒法加載時，也會上傳鼠標點擊處在圖片佔位符中的偏移量的x、y值。 - autocomplete：同
<form>標籤的autocomplete屬性。 - autofocus：該
<input>元素自動得到焦點，如autofocus="autofocus"。 - checked：見
<form>的type屬性爲checkbox和radio的標籤，預選該多選框或單選按鈕。 - disabled：禁用該
<input>元素，不適用於type="hidden"的<input>元素。 - form：設置
<input>元素所屬的form的id（若是有多個，用空格分隔），表示該輸入內容屬於哪一個表單，適用於<input>元素不在<form>元素中的情形。 - formaction：功能等同與
<form>標籤中的action屬性，可是配合類型爲submit或image的<input>標籤能夠實現更精細化的控制。 - formnovalidate：在
type="submit"的標籤中設置，表示採用不驗證提交（會覆蓋<form>元素的 novalidate 屬性），好比<input type="submit" formnovalidate="formnovalidate" value="不驗證提交" />。 - formtarget：表單在什麼位置提交（會覆蓋
<form>元素的target屬性），功能相似<form>元素的target屬性。 - height：只適合
type="image"的<input>元素，用來規定圖片的高度。 - list：引用
<datalist>元素的id，用於輸入有預設值的列表，如：<input list="browser_id" /> <datalist id="browser_id"> <option>360</option> <option>Chrome</option> <option>Firefox</option> </datalist>效果以下：
- max：定義
<input>元素能夠輸入的最大值，能夠配合type爲以下值的<input>元素工做：number、range、date、datetime、datetime-local、month、time 和 week。 - maxlength：定義
<input>元素能夠輸入的最多字符個數。 - min：同max屬性，可是定義了最小值。
- multiple：表示
<input>元素能夠輸入多個值，能夠配合type爲file或email的<input>元素使用：<form action="/check" method="post"> <input type="email" name="user_email" multiple="multiple" /> <input type="submit" /> </form>在瀏覽器中能夠輸入用逗號分隔的多個email地址：
後臺服務器收到的內容爲整個字符串，要獲取每一個email地址須要本身分隔。<form action="/check" method="post" enctype="multipart/form-data"> <input type="file" name="pro" multiple="multiple" /> <input type="submit" /> </form>在瀏覽器能夠上傳多個文件：
後臺服務器接收方法爲（Flask）：request.files.getlist('pro') - name：設置
<input>元素的名稱，服務器獲取數據須要使用根據這個名字。 - pattern：設置
<input>元素接受的輸入格式，適用於type爲text、search、url、tel、email 和 password的<input>元素，配合全局title屬性爲用戶提供格式解釋：<form action="/check" method="post"> <input type="text" name="num_id" pattern="\d{3}" title="Three Numbers" /> <input type="submit" /> </form>效果以下：
- placeholder：爲輸入項提供簡短的說明，適用於type爲text、search、url、tel、email 和 password的
<input>元素。 - readonly：屬性值是隻讀的，須要配合value屬性提供預設值，也能夠配合Javascript實現更精細的控制。
- required：該
<input>元素是必填項，適合type值爲text、search、url、tel、email、password、date pickers、number、checkbox、radio 和 file的<input>元素。 - size：
<input>元素的可見寬度，適合type值爲以下的<input>元素：text、search、tel、url、email 和 password。 - src：適合
type="image"的<input>元素，定義圖片的來源。 - step：定義
<input>元素的取值的步長，適合type值爲以下的<input>元素：number、range、date、datetime、datetime-local、month、time 和 week。通常須要配合min和max屬性使用。 - value：定義
<input>元素的值，對於不一樣類型的<input>元素含義不一樣：- 對於 button、reset、submit 類型 - 定義按鈕上的文本。
- 對於 text、password、hidden類型 - 定義輸入字段的初始（默認）值。
- 對於 checkbox、radio、image類型 - 定義與
<input>元素相關的值，當提交表單時該值會發送到表單的 action URL。
- width：適合
type="image"的<input>元素，用來規定圖片的寬度。
label
label標籤用來爲<input>元素添加說明，沒有特殊視覺效果，不過若是在label元素內點擊文本，與選擇label標籤綁定的元素效果同樣，提升了鼠標用戶的可用性。屬性以下：
- for：與那個元素綁定，設置爲被綁定元素的id。
- form：
<label>元素屬於哪一個<form>元素，一樣設置爲form的id，多個id之間用空格分隔。
datalist
datalist元素爲<input>標籤提供有預選值的列表，有提示功能，也能夠輸入不是預選值的值，參考<input>元素type="list"屬性的說明。
textarea
textarea是多行文本輸入標籤，默承認以輸入無限字符，屬性列表：
- autofocus：文本框在頁面載入時自動獲取焦點。
- cols：文本框的列數（以字符爲單位）。
- disabled：文本框被禁用。
- form：文本框屬於哪一個
<form>的id，多個id用空格分隔。 - maxlength：文本框容許輸入的最多字符個數。
- name：文本框名稱。
- placeholder：簡短說明。
- readonly：文本框只讀。
- required：文本框是必填項。
- rows：文本框行數。
- wrap：定義了cols屬性時，若是一行文字超出了cols定義的寬度，提交的文本是否包含換行，取值爲soft（不包括）或hard（包括）。
select
提供預選值的下拉列表，屬性列表以下：
- autofocus：下拉列表在頁面載入時自動獲取焦點。
- disabled：下拉列表被禁用。
- form：下拉列表屬於哪一個
<form>的id，多個id用空格分隔。 - multiple：下拉列表能夠多選。實際使用中，Windows用戶須要按住Ctrl進行多選，Mac用戶須要按住Command進行多選，這須要提示給用戶，因此這種狀況下直接用多選框更好。
- name：下拉列表名稱。
- required：提交表單前必須在下拉列表中選擇一項。
- size：下拉列表的可見項數，默認值是1。若是size的值小於
<option>元素的數量，自動會出現滾動條。
optgroup
optgroup元素將相關的選項元素分組，屬性列表以下：
- disabled：選項組被禁用。
- label：爲選項組添加描述
option
option元素定義<select>元素和<datalist>元素的一個選項，屬性列表以下：
- disabled：選項被禁用。
- label：定義選項的更簡短描述。
- selected：選項在頁面初次加載時被選中。
- value：選項發往服務器的值。
好比：
<form action="/check" method="post">
<select name="car">
<optgroup label="Chinese cars" disabled="disabled">
<option label="QQ" value="Chery">Chery</option>
<option label="GC9" value="Geely">Geely</option>
</optgroup>
<optgroup label="Swedis cars">
<option label="XC90" value="Volvo">Volvo</option>
<option label="Saab" value="Saab">Saab</option>
</optgroup>
</select>
<input type="submit" />
</form>
效果以下：
6.2 fieldset
fieldset將表單中相關的輸入元素分組，在瀏覽器上顯示時會有一條框線，屬性列表以下：
- disabled：該分組被禁用。
- form：該分組屬於哪一個form的id，多個id用空格分開，適用於fieldset不在form中的場景。
- name：分組的命名，能夠配合javascript作精細控制。
好比：
<form action="/check" id="demo" method="post">
<label for="username">Username:</label>
<input type="text" name="username" id="username" />
<button type="button" onclick="form.change_color.style.backgroundColor='#00FF00';">
change fieldset background
</button>
<button type="button" onclick="activateFieldset()">
activate fieldset
</button>
<input type="submit" value="submit" />
</form>
<fieldset name="change_color" form="demo">
<label for="password">Password:</label>
<input type="password" name="password" id="password" form="demo" />
license_id
</fieldset>
<fieldset disabled="disabled" form="demo" id="license">
<label for="license_id">License:</label>
<input type="text" name="license_id" id="license_id" form="demo" />
license_id
</fieldset>
<script>
function activateFieldset(){
var e = document.getElementById("license"):
e.disabled="";
}
</script>
效果以下（在form外部的fieldset中的元素的內容若是想上傳到服務器，須要依靠元素自身的form屬性 ，而不是fieldset的form屬性）：
6.3 legend
legend 標籤配合 fieldset 標籤，爲表單的分組定義名字，好比：
<form action="/check" id="demo" method="post">
<label for="username">Username:</label>
<input type="text" name="username" id="username" />
<fieldset>
<legend>Passowrd</legend>
<label for="password">Password:</label>
<input type="password" name="password" id="password" />
</fieldset>
<input type="submit" value="submit" />
</form>
效果以下：
6.4 button
button元素定義一個按鈕，這個按鈕能夠在<form>元素中或者不在<form>元素中，因爲瀏覽器兼容性問題，使用<button>元素時必須定義type和value兩個屬性。其屬性列表以下：
- autofocus：頁面加載時，按鈕自動得到焦點。
- disabled：禁用按鈕。
- form：按鈕屬於哪一個表單的id，多個id用空格分隔。
- formaction：當
type="submit"時，定義向何處發送表單數據，會覆蓋form元素的action屬性。 - formenctype：當
type="submit"時，向服務器提交表單時採用何種編碼，取值與form元素的enctype同樣，可是會覆蓋form元素的enctype的值。 - formmethod：當
type="submit"時，向服務器提交請求的方式（get、post），會覆蓋form元素的method屬性。 - formnovalidate：當
type="submit"時，定義該按鈕提交的內容在客戶端瀏覽器沒必要驗證，覆蓋form元素的novalidate屬性。 - formtarget：當
type="submit"時，定義表單返回的內容在什麼位置顯示，會覆蓋form元素的target屬性。 - name：定義按鈕名稱。
- type：按鈕類型，取值爲button/reset/submit。
- value：按鈕的提交值，由於有的瀏覽器使用
<button></button>標籤之間的值，有的使用button元素的value值，因此最好定義成一致的值。
7）表單輸出
output標籤用於展現輸出結果，屬性列表以下：
- for：輸出與頁面中哪一個元素有關，填寫元素的id，若是id有多個，使用空格分隔。
- form：輸出屬於哪一個表單，填寫表單的id，若是有多個，使用空格分隔。
- name：輸出對象的名稱。
好比：
<form action="#" oninput="out.value=parseInt(a.value)+parseInt(b.value)">
0<input value="50" type="range" max="100" min="0" name="a" />100+
<input type="text" value="50" readonly="readonly" name="b" />=
<output name="out" for="a b">100</output>
</form>
效果以下：
8）HTML框架
iframe標籤訂義內聯框架，屬性列表以下：
- height：框架的高度，單位爲像素。
- width：框架的寬度，單位爲像素。
- sandbox：沙盒，對框架中的內容增長限制，好比（若是是限制的組合，須要用空格分隔）：
""：開啓全部限制（不容許提交表單、不容許運行腳本、不容許超連接（除了target="_self"的之外））。- allow-forms：容許表單提交。
- allow-scripts：容許運行腳本。
- allow-top-navigation：容許超連接加載內容到頂級瀏覽視窗。
- allow-same-origin：容許同域請求。
- seamless：框架沒有邊框和滾動條，看起來像是原網頁的一部分。
- src：框架中顯示網頁的URL。
- srcdoc：規定框架中的頁面的HTML代碼。
經過HMTL框架在同一個瀏覽器窗口中顯示不止一個頁面，好比：
<iframe src="./401.html" width="500px" height="200px"></iframe>
未認證頁面 401.html 示例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>401 Unauthorized</title>
</head>
<body>
<h1>401 Unauthorized</h1>
<p>This server could not verify that
you are authorized to access the document requests.
Either you supplied document the wrong credentials (e.g.,bad password),
or your browser doesn't understand how to supply the credentials
required.
</p>
</body>
</html>
顯示效果以下：
有一種應用場景是，在框架外部有一個超連接，點擊以後但願將超連接對應的內容更新到iframe中去，這時須要在iframe中定義一個name，而後在超連接的定義中，target指向這個name:
<iframe height="50%" width="50%" frameborder="1" name="tar"></iframe> <a href="./401.html" target="tar">Go to tar</a>
開始訪問頁面時效果以下：
點擊超連接後效果以下：
9）HTML顏色
RGB（Red，Green，Blue），由三個十六進制數字表示，#RRGGBB，能夠有256*256*256種顏色表示。
10）HTML腳本
<script>標籤能夠用來添加客戶端腳本，如javascript，好比：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Learn HTML</title>
<script>
document.write('Hello world!')
</script>
</head>
<body>
</body>
</html>
<noscript></noscript>標籤訂義瀏覽器不支持腳本時的行爲，好比：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Learn HTML</title>
<script>
document.write('Hello world!')
</script>
<noscript>
Sorry,Your web browser doesn't support JavaScript.
</noscript>
</head>
<body>
</body>
</html>
正常狀況下，頁面顯示效果以下
若是設置瀏覽器禁用Javascript，顯示效果以下：
11）HTML字符實體
某些符號不能直接在 HTML 代碼中出現，好比大於號或小於號，瀏覽器會認爲他們是 HTML 標籤，使用字符實體能夠解決這個問題。好比：&entity_name;或 &#entity_number;。使用 entity name 會比較方便，可是可能有的瀏覽器不支持某些實體名，不過全部瀏覽器對 entity number 的支持很完善。<表示<，>表示>。
12）HTML與CSS樣式
- 內部樣式
在HTML<head>中添加樣式信息：
<style type="text/css">
p {color: red}
sub,sup {color: blue}
</style>
- 內聯樣式
<a href="mailto:mars@loo.com" style="text-decoration:none">寫信給mars</a> - 外部樣式
<link rel="stylesheet" type="text/css" href="sample.css" />
更多控制外觀的選項，好比：
<body style="background-color:PowderBlue"><!--設置背景顏色 --> <h1 style="font-family:arial;text-align:center"><!--設置字體、對齊方式 --> <p style="font-family:verdana;color:red;font-size:30px"><!--設置字體、顏色、文字大小 -->
- 1. 超文本標記語言--Html
- 2. 超文本標記語言 -- HTML
- 3. Browser Security-超文本標記語言（HTML）
- 4. HTML（超文本標記語言）
- 5. HTML—超文本標記語言
- 6. HTML語言標記詳解
- 7. 超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）
- 8. 從零開始的畢設--HTML(超文本標記語言)（3）
- 9. HTML（超文本標記語言）基礎知識彙總
- 10. HTML(超文本標記語言)之【動態網頁】
- 更多相關文章...
- • *.hbm.xml映射文件詳解 - Hibernate教程
- • ARP報文格式詳解 - TCP/IP教程
- • Kotlin學習（一）基本語法
- • Flink 數據傳輸及反壓詳解
-
每一个你不满意的现在，都有一个你没有努力的曾经。