Web前端之HTML
大家好，我是ChrisChenJL·宸叡，一個立志奔向Java的自由少年。
博主萌新一枚，理解淺顯，不足之處望各位大佬多多指教，謝謝大家 ᕦ(･ㅂ･)ᕤ
一、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:[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/>
密 碼：<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速查列表.
九、總結
本系列博文主要用於博主本人日常的複習，既可以作為筆記儲存，又可以隨時翻看進行復盤使用。也希望在未來的某一刻可以幫得上大家~
不足之處還請各位大佬多多指教~嘻嘻
- Highcharts使用HTML表中的資料建立互動式圖表教程
- bzoj1529: [POI2005]ska Piggy banks（並查集）
- 深入剖析Java中的斷言assert
- Nacos 1.4.1 之前存在鑑權漏洞，建議修復到最新版
- 記憶體操作函式:memcpy函式，memove函式
- 微軟開源 Python 自動化神器 Playwright
- Web前端之HTML
- java class檔案安全加密工具
- 5G QoS和DNN以及網路切片技術
- 有獎問答獲獎名單出爐，快來看看有沒有你！
- IDEA Groovy指令碼一鍵生成實體類，用法舒服，高效！
- 微信api呼叫限制，45009 reach max api daily quota limit 解決方法
- OpenStack Placement元件
- 【Linux伺服器開發系列】手寫使用者態協議棧，udpipeth資料包的封裝，零拷貝的實現，柔性陣列
- requestAnimationFrame詳解
- k8s叢集多容器Pod和資源共享
- 梯度提升樹（GBDT）詳解之二：分類舉例
- Automatic Model Evaluation - 知乎
- Linux下IPMI iBMC遠端管理配置查詢及密碼重置
- 京東/淘寶的手機銷售榜（前4名 -- 手機品牌 --手機型號*3 --手機解析度 -- 手機作業系統 --安卓版本號）（android / IOS）