大家好，我是ChrisChenJL·宸叡，一個立志奔向Java的自由少年。

博主萌新一枚，理解淺顯，不足之處望各位大佬多多指教，謝謝大家 ᕦ(･ㅂ･)ᕤ

Web前端之HTML

一、HTML簡介
二、主流瀏覽器
三、HTML小零碎
四、HTML標籤
五、HTML列表
六、HTML表格
七、HTML表單
八、HTML速查列表
九、總結

一、HTML簡介

超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用於創建網頁的標準標記語言，用於描述網頁中存在哪些網頁元素。

HTML 不是一種編程語言，而是一種標記語言
標記語言是一套標記標籤 (markup tag)
HTML 使用標記標籤來描述網頁
HTML 文檔包含了HTML 標籤及文本內容
HTML文檔也叫做 web 頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Chris·宸叡（ChrisChenJL）</title>
</head>
<body>
    <h1>Web前端之HTML</h1>
    
    <p>Web前端第一彈：HTML</p>
</body>
</html>

實例解析：
<!DOCTYPE html> 聲明爲 HTML5 文檔
<html> 元素是 HTML 頁面的根元素，用於標識當前是一個html文檔，是一切內容的開頭和結束，任何html網頁中的內容都包括在這組標籤中；並沒有實際意義，但卻是每個html文檔中不可缺少的一個部分。
<head> 元素包含了文檔的元（meta）數據，如<meta charset="utf-8"> 定義網頁編碼格式爲 utf-8。即非網頁中顯示的內容部分，放在這組標籤中。
<title> 元素描述了文檔的標題
<body> 元素包含了可見的頁面內容。即所有網頁中顯示的內容部分，都放在這組標籤中。
<h1> 元素定義一個大標題
<p> 元素定義一個段落

二、主流瀏覽器

瀏覽器的名稱	內核	瀏覽器的由來	瀏覽器的性能	兼容性
谷歌（chrome）	Webkit Chrome 28以上爲Blink內核	Google公司旗下瀏覽器	快速、安全、搜索引擎好、速度最快的瀏覽器	-webkit-
火狐（Firefox）	Gecko	mozilla公司旗下瀏覽器簡稱：FF	安全性高，速度中等	-moz-
IE瀏覽器	Trident	微軟公司在Mosaic代碼的基礎之上修改而來的瀏覽器	速度慢，安全性中等	-ms-
Safari	Webkit	蘋果公司旗下瀏覽器	在蘋果系統下是很優秀的瀏覽器	-webkit-
歐朋(Opera)	Presto Opera 15 版本以上是Blink內核	是挪威Opera Software ASA公司製作的支持多頁面標籤式瀏覽的網絡瀏覽器	速度快，瀏覽器界面簡潔

那到底要使用哪個呢？

如果你日後是一個前端開發人員，那麼你大概需要IE/Edge/火狐/Chrome等多個瀏覽器，至少市場上主流的瀏覽器內核中，每個你都需要一個對應的瀏覽器。以便開發測試效果。
如果你日後是一個程序開發人員，你只需要配合前端開發人員編寫極少的前端部分內容，基本上你只需要一個IE/Chrome基本上就夠了。
對於日常用戶，看個人喜好即可，大多數都用360/QQ等IE內核的瀏覽器。

三、HTML小零碎

1、註解

註釋的作用：

在html中，註釋完全是給人看的，也就是給開發者；通常開發着會對自己編寫的代碼進行一定的文字說明，以便進行工作交接等。在html中寫註釋的方法是：

你好，<!-- 註釋中的內容 -->我是小白。

如上這種寫法被叫做“html註釋”，具備以下特點：

加載到客戶端，會在一定程度上影響網頁的打開速度，當然對於至今電腦的性能，這一點可以在一定程度上忽略不計。
不會被執行，不會影響內容加載之後的執行速度。
HTML、CSS、JS的註釋可以被第三方工具刪除。

2、特殊字符

HTML源代碼	顯示結果	說明
&lt；	<	小於號或顯示標記
&gt；	>	大於號或顯示標記
&amp；	&	可用於顯示其他特殊字符
&quot；	"	引號
&reg；	®	已註冊
&copy；	©	版權
&trade；	™	商標
&ensp；		半個空白位置
&emsp；		一個空白位置
&nbsp；		一個不斷行的空白位置

3、預格式化標籤

預格式化的作用
<pre></pre>：規定一個範圍，在此範圍內的內容都會直接遵從HTML代碼中書寫時候的樣式，而不被html預定義的樣式所約束。

<pre>
    2020年1月11日
    預格式化，
    Chris。
</pre>

4、路徑

路徑就是需要引用資源的引用地址，分爲絕對路徑和相對路徑。

1）絕對路徑

絕對路徑可以說是一個完整的地址，根據這個地址，可以完全確定的找到一個資源。與你當前在哪裏和任何參照物都無關。

2）相對路徑

選定一個參照物，根據這個參照物找到具體的資源確切地址。

/ ：代表根目錄
. ：代表當前所在目錄（可以省略）
.. ：代表上一層目錄

四、HTML標籤

1、標籤的種類

1）單標籤

以“<”開頭，中間包含指定意義的字符，然後以“/>”結尾
例如：<br/>

2）雙標籤

起始標籤
以“<”開頭，中間包含指定意義的字符，然後以“>”結尾。

終止標籤
以“<”開頭，中間包含指定意義的字符，然後以“/>”結尾。
要求起始標籤和終止標籤中的字符必須完全一樣
例如：<em></em>

單標籤和雙標籤在意義上是完全相同的，只是因爲標識的內容範圍不同，所以在寫法上有所不同，所以說單標籤和雙標籤的區分是格式上的區分。
事實上很多時候，單標籤可以寫成雙標籤，而雙標籤也可以寫成單標籤。

2、HTML基本標籤

1）標題字標籤

<h1></h1>一級標題
<h2></h2>二級標題
<h3></h3>三級標題
<h4></h4>四級標題
<h5></h5>五級標題
<h6></h6>六級標題

被標題標籤所約束的內容，其字體大小會有所改變。其中h1爲最大，h6爲最小。

align屬性：用於改變標題文字的對齊方式
- left：向左對齊
- right：向右對齊
- center ：居中對齊

	<h1 align="center">標題11</h1>
	<h2 align="left">標題12</h2>
	<h3 align="right">標題13</h3>
	<h2 align="20px">標題2</h2>
	<h3>標題3</h3>
	<h4>標題4</h4>
 	<h5>標題5</h5>
	<h6>標題6</h6>

2）換行標籤

<br/>單標籤，用於將內容換行使用，相當於文檔編輯中回車鍵的作用。

	ChrisChenJL·宸叡<br/>

3）段落標籤

<p></p>段落標籤，類似於一個自然段，段落標籤中包裹的內容可以視爲一個段落，段落標籤會在包裹的內容上下各加一個空行。而對於段落標籤內部的內容並不受到任何影響。

	<p>ChrisChenJL·宸叡</p>

4）水平線標籤

<hr/>橫線標籤，用於在網頁頁面上對應部位輸出一條橫線。

	ChrisChenJL·宸叡
	<!--橫線標籤-->
	<hr size="10px" color="pink"/>

5）居中標籤

<center></center>居中標籤，將包裹的內容相對於頁面居中顯示。

<center>
	ChrisChenJL·宸叡
</center>

6）滾動標籤

<marquee><marquee>滾動標籤，將包裹的內容在頁面中滾動。

<marquee>
	ChrisChenJL·宸叡
</marquee>

3、HTML超鏈接

1）跳轉鏈接（頁面跳轉）

通常上網的時候你應該無數次的接觸過超鏈接，例如某些文字和圖片可以被鼠標點擊，大多數時候點擊這些圖片或者文字之後瀏覽器的頁面會打開與此圖片或者文字內容相關的另一個頁面。這種打開頁面的行爲，我們稱之爲“跳轉”。而用於點擊響應不同功能的內容，我們稱之爲“超鏈接”。

<a></a>：超鏈接標籤，用於定義一個超鏈接。

href屬性：指定點擊當前超鏈接後，頁面所跳轉到的地址。

target屬性：指定打開新頁面的方式

_slef：在當前瀏覽器正在瀏覽的頁面中打開新的頁面。

_blank：另起一個新的頁面，打開想要訪問的內容。

<body>
    <!--
        超鏈接標籤：a
        href ： 連接目標地址
        target : 設定超鏈接的打開方式 _self(默認，不創建新的窗口) _blank(創建新的窗口)
        title : 對當前超鏈接的描述

        |--指向下一級
            |--下級路徑/文件名稱
        |--指向當前級
            |--./
            |--什麼都不加
        |--指向上一級
            |--../
    -->
    <a href="http://www.biqu6.com/19_19126/" target="_blank" title="連載中">點我觀看伏天氏</a>
    <a href="pm_2_Test.html" target="_blank">點我進入小練習</a>
    <a href="a/b/c/test.html" target="_blank">點我進入</a>
</body>

2）錨鏈接

你虛擬上網的時候通常會看到“到結尾”，“到開頭”這種字樣的超鏈接，點擊之後並不會跳轉到其他網頁，而是到當前網頁中的某個位置。這種超鏈接叫做“錨鏈接”，用於將當前網頁瀏覽位置跳轉到其他位置。當然僅僅是本頁面，也可以打開一個新的頁面，同時跳轉到指定的位置。

href屬性：屬性值以#開頭，後面加上要跳轉到的位置的內容控件id屬性值即可，這種寫法叫做“錨點”。
例如：

點擊跳轉到當前頁面中的某個位置<a href="#b">點擊跳轉到</a>，這個#b即是錨點。

點擊跳轉到另一個頁面的指定位置<a href="d.html#b">點擊跳轉到</a>，d.html是要跳轉到的頁面，#b是存在於b.html頁面的一個指定的錨點位置。

	<a href="#last" id="first">跳轉到最後</a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><h2 id="id2">這裏是中間</h2><br><br id="id3">這裏是中間<br><br><pean id="id4">這裏是中間</pean><br>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <a href="#first" id="last">跳轉到開始</a>
    <a href="#id2">跳轉到中間</a>

3）功能性鏈接（用途相對較少）

這種超鏈接使用場景並不多，一般用於點擊後觸發某些功能，用途是鏈接到第三方資源。

如下例舉一些功能性鏈接：

觸發發送電子郵件：<a href="mailto:[email protected]">給我發郵件</a>

觸發撥打電話：<a href="tel:18888888888">給我打電話</a>

觸發發送短信：<a href="sms:18888888888">給我發短信</a>

觸發內容播放：<a href="a.mp4">播放視頻</a>
這種超鏈接使用場景並不多，一般用於點擊後觸發某些功能，用途是鏈接到第三方資源；如下例舉一些功能性鏈接。

4、HTML圖像

1）3種圖像格式

GIF格式：支持256種顏色，最適合顯示色調不連續或者具有大面積單一顏色的圖像，例如導航條、按鈕、圖標等一些內容。GIF格式最大的優點是可以製作動態的圖像，像是小視頻一樣的效果。
JPEG格式：一種圖像壓縮格式，而且壓縮得非常緊湊。專用於不含有大色塊的元素，這個格式有一定的失真度，但是在正常情況下一般根本無法被肉眼所識別。不支持透明色，如果圖像需要全色彩模式才能表現效果，那麼JPEG就是最佳的選擇。
PNG格式：一種非破壞性的網頁圖像文件格式，不僅具備了GIF圖像格式大部分的優點，還支持48位色彩。

2）定義一個圖像

<img/>：用於定義一個圖片

title屬性：定義鼠標懸停時候提示文字的內容

alt屬性：對照片的描述，當圖片資源無法找到時，或當路徑出現問題時，或還沒有加載出來的時候展示的替換文字。

src屬性：指定圖片資源所在的位置，可以是絕對路徑或者相對路徑

width屬性：寬度設置

height屬性：高度設置

border屬性：增加邊框

<img src="chris.jpg" title="ChrisChenJL·宸叡" alt="ChrisChenJL" width="600px" height="750px" border="5px">

5、HTML文本格式化

1）字體加粗

<b></b>：字體加粗標籤，包裹在這組標籤中的內容中，文字部分都會加粗顯示，相當於world文檔中的加粗選項。

2）字體強調

<strong></strong>：用於強調一段內容，實際上就是字體加粗顯示，與字體加粗標籤的功能差不多。

3）下劃線

<u></u>：放在這組標籤中的內容會顯示下方有一條下劃線。
<ins></ins>：着重意思爲定義插入字。

4）字體傾斜

<em></em>：用於設置字體傾斜，報國的內容中文字部分會斜體展示。

<i></i>：<i> 標籤和基於內容的樣式標籤 <em> 類似。它告訴瀏覽器將包含其中的文本以斜體字（italic）或者傾斜（oblique）字體顯示。如果這種斜體字對該瀏覽器不可用的話，可以使用高亮、反白或加下劃線等樣式。

5）小號字體

<small></small>：放在這組標籤中的內容會比正常字體小上一些。

6）下標字

<sub></sub>：放在這組標籤中的內容會變成下標字形態。

7）上標字

<sup></sup>：放在這組標籤中的內容會變成上標字形態。

8）刪除字體

<del></del>：放在這組標籤中的內容會在字中間有條刪除線。

<body>
<!--
    字體加粗：<b></b>
    字體強調（相當於加粗）：<strong></strong>
    字體傾斜：<em></em>
    字體下劃線：<u></u>
-->
青州學宮，<strong>青州城聖地</strong>，<b>青州城豪門貴族</b>以及<u>宗門世家</u>內<small>半數以上</small>的強者，都從<sub>青州</sub><sup>學宮</sup>走出。<br/>
<del>因而</del>，<em>青州城之人皆以能夠入學宮中修行爲榮，</em><br/>
<!--下面文字，既能加粗又能加下劃線，也能傾斜-->
<strong><u><em>旦有機會踏入學宮，必刻苦求學。</em></u></strong>
</body>

五、HTML列表

1、有序列表

有序列表是一列項目，默認展示效果上每個列表項都有一個序號。有序列表始於 <ol>標籤。每個列表項始於 <li> 標籤。
例如：

第一個列表項
第二個列表項
第三個列表項

<ol></ol>：用於定義一組有序列表
type屬性：用於設置當前有序列表的展示效果

type=“1”：使用數字進行編號

type=“A”：使用大寫字母進行編號

type=“a”：使用小寫字母進行編號

type=“I”：使用大寫羅馬數字方式進行編號

type=“i”：是用小寫羅馬數字方式進行編號

start屬性：規定有序列表的編號起始值，填寫一個值，從指定的值開始標號。設置的是一個數字，不需要跟隨type屬性，更改起始值的內容
reversed屬性：規定有序列表的標號排序方式爲“降序”

reversed=“reversed”

有序列表的嵌套
有序列表同樣支持直接嵌套，但是需要注意。<ol>標籤中只能直接包含<li>標籤，而後在需要放置二級內容的<li>標籤後繼續添加<ol>標籤。即<ol>標籤不能直接包含<ol>標籤。

對於<ol>標籤所定義的type屬性之對於當前的<ol>起作用，對後續嵌套的內容不會有所影響。

<!--有序列表-->
<ol>
    <li>Chris</li>
    <ol>
        <li>Chris</li>
        <li>宸叡</li>
    </ol>
    <li>宸叡</li>
</ol>

2、無序列表

無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。無序列表始於 <ul>標籤。每個列表項始於 <li> 標籤。

<ul></ul>：用於定義一組無序列表。
type屬性：設置當前無序列表的展示樣式

type=“disc”：默認列表項以小黑點開頭的樣式

type=“circle”：列表項以空心小圓圈開頭

type=“square”：列表項以實心方塊開頭

<li></li>：列表項標籤，用於規劃列表中展示的每一項內容。

無序列表的嵌套
無序列表可以進行嵌套分級內容的展示，但是需要注意。<ul>標籤中只能直接包含<li>標籤，而後在需要放置二級內容的<li>標籤中繼續添加<ul>標籤。即<ul>標籤不能直接包含<ul>標籤。

對於<ul>標籤所定義的type屬性之對於當前的<ul>起作用，對後續嵌套的內容不會有所影響。

<!--無序列表-->
<ul>
    <li>Chris</li>
    <ul>
        <li>Chris</li>
        <li>宸叡</li>
    </ul>
    <li>宸叡</li>
</ul>

3、自定義列表

自定義列表不僅僅是一列項目，而是項目及其註釋的組合。

自定義列表以 <dl> 標籤開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。

<dl>
	<dt>ChrisChenJL·宸叡</dt>
	<dd>做一個立志奔向Java的自由少年。</dd>
</dl>

六、HTML表格

1、表格標籤

<table></table>表格標籤，類似於excel中，將內容以劃分爲表格的方式展示。單獨使用此標籤沒有實質性的效果，需要配合下方的行標籤和單元格標籤一起使用。

border屬性：設置表格的邊框大小，如果針對於這個屬性進行設置只會影響表格四周邊框的大小，並不會影響到表格的單元格邊框粗細。
bordercolor屬性：設置表格的邊框顏色。（不是所有的瀏覽器都可以正常展示）
cellspacing屬性：內框寬度值，用於設置表格內部每個單元格之間的間距。值爲數字其單位爲像素。
cellpadding屬性：表格與內容的內邊框距離，默認情況下單元格的內容會緊貼着單元格的邊框，可以使用cellpadding來設置單元格與單元格中的內容之間的距離。值爲數字，單位爲像素。
bgcolor屬性：設置整個表格的背景顏色，取值爲顏色值。
background屬性：設置整個表格的背景圖像，取值爲圖像文件的絕對目錄或者相對目錄

2、表格行標籤

<tr></tr>表格行標籤，需要放在表格標籤中使用纔有效果，用於劃分出單獨一行存放單元格。

height屬性：控制行的高度，值爲一個數字，單位爲像素。
bordercolor屬性：控制行的邊框顏色，值爲顏色取值。（不是所有瀏覽器都可以正常展示）
bgcolor屬性：設置當前行的背景顏色，取值爲顏色值。
background屬性：設置當前行所採用的背景圖片，值爲圖片文件所在的絕對或者相對路徑。
align屬性：設置當前行內容的水平對齊方式，不受表格的整體對齊方式影響，卻可以被單元格中所定義的對齊方式覆蓋。

left：靠左對齊（默認）

right：靠右對齊

middle：居中對齊

valign屬性：設置當前行內容的垂直對齊方式，不受表格整體對齊方式影響，卻可以被單元格中所定義的對齊方式覆蓋。

top：靠上對齊

middle：居中對齊（默認）

botton：靠下對齊

3、表格單元格標籤

<td></td>表格單元格標籤：放在單元格行標籤內，用於展示一個單一的單元格。單元格內可以包含任何你需要包含的內容。

默認情況下，單元格的寬度和高度會隨着內容的大小自動調整，但是我們也可通過width屬性和height屬性進行干預。但是如果我們設置了表格的高和寬，這將會覆蓋tr和table中已經定義的樣式。

width屬性：設置單元格的寬度，值位數字，單位爲像素。
height屬性：設置單元格的高度，職位數字，單位爲像素。
bgcolor屬性：設置單元格的背景顏色，值爲顏色取值。
background屬性：設置單元格的背景圖片，值爲圖片文件的絕對路徑或者相對路徑。
align：設置單元格內容的水平對齊方式。
valign：設置單元格內容的垂直對齊方式。

4、列標題單元格標籤

<th></th>列標題單元格標籤，與單元格標籤類似，只是會針對於單元格內的內容進行加測和居中顯示，更加美觀，所以適合作爲列標題使用。當然，也比更不是隻能加在第一行，這個標籤這是提供了格式和樣式，位置隨意，沒有硬性規定。

<body>
<table border="1">
    <tr>
        <th>姓名</th>
        <th>年齡</th>
    </tr>
    <tr>
        <td>小路</td>
        <td>22</td>
    </tr>
    <tr>
        <td>小蘭</td>
        <td>21</td>
    </tr>
    <tr>
        <td>小率</td>
        <td>20</td>
    </tr>
</table>
</body>

5、TABLE中的合併單元格

可以聯想一下Excel中針對於單元格的合併，無非兩種方式：橫向合併、縱向合併。

rowspan屬性：跨行合併單元格（縱向合併）
colspan屬性：跨列合併單元格（橫向合併）
合併後的單元格歸屬原則都是左上原則，即下歸上，右歸左，越往左上角越優先

<table border="1" width="300" height="200px">
    <tr>
        <td></td>
        <td></td>
        <td rowspan="2"></td>
    </tr>
    <tr>
        <td colspan="2"></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>

七、HTML表單

1、表單的定義

<form></form>：定義一個表單。如果希望一個控件有效使用，那麼必須將空間放在表單標籤中。

• action屬性：表單提交到的目標地址
• name屬性：給表單一個命名，通常來說這個屬性在大多數情況下不是必須的。但是爲了防止表單提交到後臺之後程序處理出現混亂，也有時候會給表單一個命名。表單名稱中不可以包含特殊字符和空格。
• mehtod屬性：採取的提交方式
• enctype屬性：提交編碼方式
• target屬性：用於指定目標窗口的打開方式，同超鏈接中的使用方法完全一致。

2、表單控件

1）input輸入標籤

<input />：大多數的表單控件標籤，都是input標籤。

輸入類型是由類型屬性（type）定義的。大多數經常被用到的輸入類型如下：

type屬性：指定當前控件的類別

type=“text”：文本框（供用戶輸入內容使用）

name屬性：文字字段的名稱，用於和頁面中其他控件加以區別，名稱由英文、字母、下劃線區分，但是區分大小寫。

size屬性：文本框在網頁上展示的長度，值爲數字，以字符爲單位。最小值爲1，最大值取決於瀏覽器的寬度。

maxlength屬性：用來設置文本框中最多可以輸入的字符個數。

value屬性：文字字段的默認取值

placeholder屬性：提示文字的內容（老版本的瀏覽器可能不支持）

type=“password”：密碼框（供用戶輸入內容使用，不現實實際內容。）

name屬性：文字字段的名稱，用於和頁面中其他控件加以區別，名稱由英文、字母、下劃線區分，但是區分大小寫。

size屬性：密碼框在網頁上展示的長度，值爲數字，以字符爲單位。最小值爲1，最大值取決於瀏覽器的寬度。

maxlength屬性：用來設置密碼框中最多可以輸入的字符個數。

value屬性：密碼字段的默認取值

placeholder屬性：提示文字的內容（老版本的瀏覽器可能不支持）

type=“radio”：單選框（多個選項只允許同時有效選擇其中一項使用。）

name屬性：同上。

value屬性：當前單選框的實際值

checked屬性：用於讓當前單選框默認處於選中狀態：當設置 checked=“checked” 時，該選項被默認選中

注意：同一組的單選按鈕，name 取值一定要一致，這樣同一組的單選按鈕纔可以起到單選的作用。

type=“hidden”：隱藏域（一種看不到的控件，可以保存一個值。後續有場景會使用到。經常在需要在頁面元素中保存一個內容的時候使用。）

name屬性：同上

value屬性：同上

type=“file”：文件選擇框（可供用戶點擊後選擇本地計算機上的文件）

size屬性：設置文件選擇框的寬度，以字符爲單位。

name屬性：同上。

value屬性：同上

type=“checkbox”：複選框（多個選項可以同時有效選中其中多項使用。）

name屬性：同上。

value屬性：同上

checked屬性：用於讓當前單選框默認處於選中狀態，當設置 checked=“checked” 時，該選項被默認選中

type=“button”：按鈕控件（用於各類綜合場景使用，最普通的按鈕。）

name屬性：同上。

value屬性：可以設定按鈕上所展示的文字。

type=“image”：圖片按鈕（與普通的按鈕功能相同，只是按鈕上支持放圖片，也有其他方式實現同樣的按鈕圖片效果。）

name屬性：同上。

value屬性：可以設定按鈕上所展示的文字，但是如果設定了圖片，則文字不可見。

src屬性：引用圖片的地址（絕對目錄或相對目錄）

type=“submit”：提交按鈕控件（用於表單提交數據的時候使用）

name屬性：同上。

value屬性：可以設定按鈕上所展示的文字，不影響提交功能。

type=“reset”：重置按鈕控件（用於表單內容重置的時候使用）

name屬性：同上。

value屬性：可以設定按鈕上所展示的文字，不影響提交功能。

<form action="#">
	用戶名：<input type="text" size="30" maxlength="20" placeholder="請輸入用戶名"><br/>
	密 &nbsp;&nbsp;碼：<input type="password" size="30" maxlength="20" placeholder="請輸入密碼"><br/>
	驗證碼：<input type="text"><input type="button" value="獲取驗證碼"><br/>
	<input type="button" value="註冊"><br/>
	<input type="checkbox">是否同意條框
</form>

2）select下拉框標籤

<select></select>下拉框標籤：用於在表單中定義一個下拉框控件。

• size屬性：規定下拉框顯示選項的數量；
例：size=“4”
• multipe屬性：規定下拉框可以同時有效選中多個選項；
例：multiple="multiple"或者multiple

<option><option>下拉框選項標籤：用於在下拉框中定義具體的選項。

<tr>
	<td>經驗&nbsp;<select size="1">
		<option>無經驗</option>
		<option>1年</option>
		<option>3年</option>
		<option>5年</option>
	</select></td>
</tr>

3）textarea文本域標籤

<textarea></textarea>：相當於一個比較大的文本框，供用戶輸入大量文字內容的時候使用。

• cols屬性：規定文本區內可見的寬度
• rows屬性：規定文本區內可見的行數
• maxlength屬性：文本輸入的最大字符數量

<textarea cols="50" rows="8" placeholder="包括cols,rows,maxlength等屬性">

4）label標記標籤

<label></label>：標記標籤本身沒有比較特殊的作用，主要用於代替標籤本身對於用戶的操作做出一定而響應。

例如單選框選中文字實現單選框的選中。

<input type="checkbox" id="send"><label for="send">確認發送</label>

3、控件的只讀/禁用

1）只讀屬性

readonly="readonly"：這個屬性的作用是隻讀，設定之後，空間的外觀不會有任何變化（主流瀏覽器中是這樣，不絕對。）但是無法針對於空間中的內容進行任何更改。

這個屬性僅針對於三個控件有效：

文本框

密碼框

文本域

2）禁用屬性

disable="disable"：禁用屬性用於標識一個控件禁止被使用，也就是不能進行有效的操作，設定這個屬性之後，空間的外觀會有所改變。在主流的瀏覽器中會變成灰色，這個時候你無法針對於當前空間進行任何形式的操作。

這個屬性針對於所有的表單控件都有效。

八、HTML速查列表

HTML 速查列表，可以打印出來備用噢~
來源於: 菜鳥教程·HTML速查列表.

九、總結

本系列博文主要用於博主本人日常的複習，既可以作爲筆記保存，又可以隨時翻看進行復盤使用。也希望在未來的某一刻可以幫得上大家~

不足之處還請各位大佬多多指教~嘻嘻