本篇主要介紹的HTML常用標簽有：
· form 標簽
· input 標簽
· select 標簽
· textarea 標簽
· a 標簽
· img 標簽
· table 標簽
· 串列標簽
form 標簽
· 是用于為用戶輸入創建 HTML 表單的
· 表單用于向服務器傳送資料
· 表單能夠包含 input、menus、textarea、fieldset、legend 以及 label 元素
· method 屬性規定用于發送表單資料的 HTTP 方法
· enctype 屬性規定在發送表單資料之前如何對其進行編碼
· action 屬性用來規定當提交表單時向何處發送表單資料
| 屬性 | 值 | 描述 |
|---|---|---|
| method | get | 能在瀏覽器上顯示出來 |
| post | 不能在瀏覽器上顯示出來 |
以下分別為當 method 的值為 get 和 post 兩種情況下的代碼演示和運行結果圖
- method的值為get時：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--
作者：蘇酥su
時間：2020-10-02
描述：當method="get"時，能在瀏覽器上顯示出提交的表單資料
-->
<body>
<form method="get" action="" enctype="application/x-www-form-urlencoded">
賬號：<input type="text" name="username" value="admin" maxlength="10" size="30"/><br />
密碼：<input type="password" name="password" maxlength="10" size="30"/><br />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>
</body>
</html>
運行結果如下圖所示：
- method 的值為 get 時：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--
作者：蘇酥su
時間：2020-10-02
描述：當method="post"時，不能在瀏覽器上顯示出提交的表單資料
-->
<body>
<form method="post" action="" enctype="application/x-www-form-urlencoded">
賬號：<input type="text" name="username" value="admin" maxlength="10" size="30"/><br />
密碼：<input type="password" name="password" maxlength="10" size="30"/><br />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>
</body>
</html>
運行結果如下圖所示：
| 屬性 | 值 | 描述 |
|---|---|---|
| enctype | application/x-www-form-urlencoded | 在發送前編碼所有字符（如若沒有特別宣告，則默認該值） |
| multipart/form-data | 不對字符編碼，但在使用含有檔案上傳控制元件的表單時，必須使用這個值 | |
| text/plain | 將空格轉換為"+"，不對特殊字符編碼 |
以下分別是當 enctype 的值為上表三種值的情況下的代碼演示和運行結果圖
- enctype 的值為 application/x-www-form-urlencoded 時參照上方 method 屬性的演示即可，
- enctype 的值為 multipart/form-data 時：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form method="get" action="" enctype="multipart/form-data">
<input type="file" name="file"/>
<input type="submit" value="提交" />
</form>
</body>
</html>
運行結果如下圖所示：
- enctype 的值為 text/plain 時：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--
作者：蘇酥su
時間：2020-10-03
描述：將賬號和密碼的value值都定義為五個空格
-->
<body>
<form method="get" action="" enctype="text/plain">
賬號：<input type="text" name="username" value=" " size="30" maxlength="10" /><br />
密碼：<input type="password" name="password" value=" " maxlength="10" /><br />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>
</body>
</html>
運行結果如下圖所示：
input 標簽
· 用于搜集用戶的資訊
· 根據不同的 type 屬性值，輸入欄位擁有很多種形式，這里主要介紹 button、checkbox、file、hidden、password、radio、reset、submit 以及 text
· 還有name、size、maxlength、value以及readonly可以用來定義輸入框的各種屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| type | password | 密碼輸入框 |
| file | 檔案上傳 | |
| hidden | 隱藏域 | |
| button | 按鈕 | |
| radio | 不多選框 | |
| submit | 提交按鈕 | |
| reset | 重置按鈕 | |
| text | 文本輸入框 | |
| checkbox | 復選框 | |
| name | field_name | 定義input元素的名稱 |
| size | number_of_char | 定義輸入框的長度大小 |
| maxlength | number | 規定輸入框中允許輸入字符的最大數 |
| value | value | 規定input元素的默認值 |
| readonly | readonly | 規定輸入欄位為只讀，不能添加修改 |
以下分別是上表中各個屬性的具體代碼演示以及運行結果圖:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form method="get" enctype="application/x-www-form-urlencoded">
賬號：<input type="text" name="username" value="admin" size="30" maxlength="10" /><br />
密碼：<input type="password" name="password" size="30" maxlength="10" /><br />
<input type="hidden" name="token" value="這是隱藏域" />
性別<input type="radio" name="sex" value="1" checked="checked"/>男<input type="radio" name="sex" value="2" />女<br />
喜愛的語言<input type="checkbox" name="app[]" value="java" />java<input type="checkbox" name="app[]" value="c++" />c++<input type="checkbox" name="app[]" value="php" checked="checked"/>php<br />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form><br />
<form method="get" action="" enctype="multipart/form-data">
<input type="file" name="file"/>
<input type="submit" value="提交" />
</form>
</body>
</html>
運行結果如下圖所示:
select 標簽
· 是一個下拉選擇框標簽
· 其中的 option 用于定義串列的可用選項
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form method="get" enctype="application/x-www-form-urlencoded">
地區<select name="address">
<option value="shanghai">上海</option>
<option value="beijing">北京</option>
<option value="guangzhou">廣州</option>
</select><br />
<input type="submit" value="提交" />
<input type="reset" value="重置" />
</form>
</body>
</html>
運行結果如下圖所示：
textarea 標簽
· 定義多行的文本輸入控制元件，即文本域
· 文本區中可容納無限數量的文本，其中的文本的默認字體是等寬字體（通常是 Courier）
· 可以通過 cols 和 rows 屬性來規定 textarea 的尺寸
· 文本域中編輯好的字符中的空格也會顯示在運行結果中
| 屬性 | 值 | 描述 |
|---|---|---|
| cols | number | 規定文本區內可見的寬度 |
| rows | number | 規定文本區內可見的行數 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form method="get" enctype="application/x-www-form-urlencoded">
簡介<br />
<textarea cols="30" rows="10" name="info">a a a a a</textarea><br /><!--
作者：蘇酥su
時間：2020-10-02
描述：空格也會計算進去
-->
<input type="submit" value="提交" />
</form>
</body>
</html>
運行結果如下圖所示：
a 標簽
· 定義超鏈接，用于控制界面與頁面之間的跳轉的
· 最重要的屬性是 href 屬性，它指示鏈接的目標
· target 屬性在這里主要介紹 _self 和 _blank 兩種值（默認是 _self ）
| 屬性 | 值 | 描述 |
|---|---|---|
| target | _self | 用于在當前選項卡中跳轉，也就是不新建頁面跳轉 |
| _blank | 用于在新的選項卡中跳轉，也就是新建頁面跳轉 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="http://www.baidu.com" target="_self">百度</a>
<a href="http://www.soso.com" target="_blank">soso</a>
</body>
</html>
運行結果如下圖所示：
在這里也順便介紹一下錨文本
· 錨文本又稱錨文本鏈接，是鏈接的一種形式，
· 和超鏈接類似，超鏈接的代碼是錨文本，把關鍵詞做一個鏈接，指向別的網頁，這種形式的鏈接就叫作錨文本，
· 錨文本又稱錨文本鏈接，錨文本實際上是建立了文本關鍵詞與URL鏈接的關系，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a name="top"></a>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<p>aaaaaaaaaaaaaaaaaaaa</p>
<a href="#top">回傳頂部</a>
</body>
</html>
運行結果如下圖所示：點擊"回傳頂部"的鏈接就能直接跳轉到頁面的頂部
img 標簽
· 向網頁中嵌入一幅影像
· 它有兩個必需的屬性：src 屬性 和 alt 屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| src | URL | 規定顯示影像的URL |
| alt | text | 規定影像的替代文本 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="img/sususu.jpg" alt="logo" />
</body>
</html>
運行結果如下圖所示：
table 標簽
· 用來定義 HTML 表格
· tr 元素定義表格行，th 元素定義表頭，td 元素定義表格單元
· 簡單的 HTML 表格由 table 元素以及一個或多個 tr、th 或 td 元素組成
· colspan 和 rowspan 是用來合并單元格的
| 屬性 | 值 | 描述 |
|---|---|---|
| border | pixels | 規定表格邊框的寬度 |
| cellpadding | pixels | 單元邊與內容之間的空白 |
| cellspacing | pixels | 單元格之間的空白 |
| colspan | 同一行相鄰的兩個單元格合并 | |
| rowspan | 同一列相鄰的兩個單元格合并 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="1">
<tr><th>編號</th><th>姓名</th><th>年齡</th></tr>
<tr><td>1</td><td>你</td><td>10</td></tr>
<tr><td>2</td><td>我</td><td>11</td></tr>
<tr><td>3</td><td>他</td><td>12</td></tr>
<tr><td>總數</td><td colspan="2">3人</td></tr>
</table><br />
<table border="1" cellpadding="10" cellspacing="1">
<tr><th>編號</th><th>姓名</th><th>年齡</th></tr>
<tr><td>1</td><td>你</td><td>10</td></tr>
<tr><td>2</td><td>我</td><td>11</td></tr>
<tr><td>3</td><td>他</td><td rowspan="2">12</td></tr>
<tr><td>4</td><td>它</td></tr>
</table>
</body>
</html>
運行結果如下圖所示：
串列標簽
· < ul >為無序串列，< ol >為有序串列
· < li >標簽用來定義串列專案
· 無序串列有三種專案符號，分別為 square、circle、disc
· 有序串列有五種排序符號，分別為數字串列（默認）、小寫字母串列、大寫字母串列、羅馬字母串列以及小寫羅馬字母串列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul type="square">
<li><a href="#">第一課</a></li>
<li><a href="#">第二課</a></li>
<li><a href="#">第三課</a></li>
<li><a href="#">第四課</a></li>
</ul>
<ul type="circle">
<li><a href="#">第一課</a></li>
<li><a href="#">第二課</a></li>
<li><a href="#">第三課</a></li>
<li><a href="#">第四課</a></li>
</ul>
<ul type="disc">
<li><a href="#">第一課</a></li>
<li><a href="#">第二課</a></li>
<li><a href="#">第三課</a></li>
<li><a href="#">第四課</a></li>
</ul>
<ol>
<li><a href="#">第一課</a></li>
<li><a href="#">第二課</a></li>
<li><a href="#">第三課</a></li>
<li><a href="#">第四課</a></li>
</ol>
<ol type="A">
<li><a href="#">第一課</a></li>
<li><a href="#">第二課</a></li>
<li><a href="#">第三課</a></li>
<li><a href="#">第四課</a></li>
</ol>
<ol type="I">
<li><a href="#">第一課</a></li>
<li><a href="#">第二課</a></li>
<li><a href="#">第三課</a></li>
<li><a href="#">第四課</a></li>
</ol>
</body>
</html>
運行結果如下圖所示：
（若有錯誤與不足之處也希望大家幫忙指出∩ω∩）
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/160268.html
標籤：其他
上一篇：Redis分布式鎖背后的原理