大家好，我是ChrisChenJL·宸叡，一個立志奔向Java的自由少年，
博主萌新一枚，理解淺顯，不足之處望各位大佬多多指教，謝謝大家 ?(･?･)?
Web前端之HTML
- 一、HTML簡介
- 二、主流瀏覽器
- 三、HTML小零碎
- 1、注解
- 2、特殊字符
- 3、預格式化標簽
- 4、路徑
- 1）絕對路徑
- 2）相對路徑
- 四、HTML標簽
- 1、標簽的種類
- 1）單標簽
- 2）雙標簽
- 2、HTML基本標簽
- 1）標題字標簽
- 2）換行標簽
- 3）段落標簽
- 4）水平線標簽
- 5）居中標簽
- 6）滾動標簽
- 3、HTML超鏈接
- 1）跳轉鏈接（頁面跳轉）
- 2）錨鏈接
- 3）功能性鏈接（用途相對較少）
- 4、HTML影像
- 1）3種影像格式
- 2）定義一個影像
- 5、HTML文本格式化
- 1）字體加粗
- 2）字體強調
- 3）下劃線
- 4）字體傾斜
- 5）小號字體
- 6）下標字
- 7）上標字
- 8）洗掉字體
- 五、HTML串列
- 1、有序串列
- 2、無序串列
- 3、自定義串列
- 六、HTML表格
- 1、表格標簽
- 2、表格行標簽
- 3、表格單元格標簽
- 4、列標題單元格標簽
- 5、TABLE中的合并單元格
- 七、HTML表單
- 1、表單的定義
- 2、表單控制元件
- 1）input輸入標簽
- 2）select下拉框標簽
- 3）textarea文本域標簽
- 4）label標記標簽
- 3、控制元件的只讀/禁用
- 1）只讀屬性
- 2）禁用屬性
- 八、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源代碼 | 顯示結果 | 說明 |
|---|---|---|
| <； | < | 小于號或顯示標記 |
| >； | > | 大于號或顯示標記 |
| &； | & | 可用于顯示其他特殊字符 |
| "； | " | 引號 |
| ®； | ? | 已注冊 |
| ©； | ? | 著作權 |
| &trade； | ? | 商標 |
| &ensp； | 半個空白位置 | |
| &emsp； | 一個空白位置 | |
|  ； | 一個不斷行的空白位置 |
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:chrischenjl@163.com">給我發郵件</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/>
密 碼：<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>經驗 <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速查串列.
九、總結
本系列博文主要用于博主本人日常的復習，既可以作為筆記保存，又可以隨時翻看進行復盤使用，也希望在未來的某一刻可以幫得上大家~
不足之處還請各位大佬多多指教~嘻嘻
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/247672.html
標籤：其他
下一篇：JDK升級帶來的問題