站長資訊網(wǎng)本篇文章給大家?guī)砹岁P(guān)于html中特殊符號、表格和表單的相關(guān)知識，希望對大家有幫助。
特殊符號
（1）什么是特殊符號？
??特殊符號就是網(wǎng)頁上一些比較特殊的符號。
（2）為什么需要特殊符號？
??因為有時候我們需要特殊符號，比如：把html代碼顯示在網(wǎng)頁上。（你可以試試直接打是啥效果哦！）
??注意：如果打印空格，不管你輸入了多少個空格，最后在網(wǎng)頁上只顯示一個！
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>特殊字符</title> </head> <body> <!--特殊符號以&開頭,以;結(jié)尾--> <span>這個是 空格</span> <span>這是一個中文字的 寬度（字符寬）</span> <span>這是個大于號></span> <span>這是個小于號<</span> <span>這是一個雙引號："</span> <span>這是個特殊符號，輸出是?。©</span> <span>這是個特殊符號，輸出為&。&</span> </body> </html>
表格
（1）什么是表格?
??比如Excel表格之類的。
（2）表格如今用來干啥？
??一般用于后臺展示數(shù)據(jù)。
（3）表格初識
??分為：表頭，表身和表腳。
需要注意的是：
??table：是表格標(biāo)簽
??tr： 是行標(biāo)簽
??td： 是列表簽
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <table border="1"> <!--border是設(shè)置邊框，屬性值為粗細(xì)--> <caption>學(xué)生信息表</caption> <!--表格標(biāo)題--> <tr> <th>學(xué)號</th> <!--表頭 （在tr行標(biāo)簽中用th） 默認(rèn)字體加粗--> <th>姓名</th> </tr> <tr> <td colspan="2">1</td> <!--colspan是合并列--> <td rowspan="2">2</td> <!--rowspan是合并行--> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> </body> </html>
實現(xiàn)效果：
表單
1.是什么&什么作用&哪些應(yīng)用
（1）表單是什么？
??表單是搜集用戶數(shù)據(jù)信息的各種表單元素的集合區(qū)域。（還記得請求方式GET和POST不！！！）
（2）表單的作用？
??①用于收取用戶數(shù)據(jù)，并向后臺發(fā)送；
??②前后端交互的方式之一。
（3）表單的應(yīng)用？
??登錄注冊，搜索，文件上傳等。
2.表單(form)的屬性：
- action： 提交時候的地址，默認(rèn)使用當(dāng)前頁面。指向服務(wù)器的某個程序。
- method： 提交時候的方法，默認(rèn)使用get
- entype： 目前使用默認(rèn)即可
3.表單常用的標(biāo)簽：
- Input標(biāo)簽：表單中使用頻率最高的標(biāo)簽，沒有之一！
- textarea標(biāo)簽：文本域，一般用于多行文本；
- select標(biāo)簽：下拉框，一般用于選項。
(1）input標(biāo)簽：
1.input標(biāo)簽的常用屬性：
| 知識點補給站： id主要用于樣式或者js。不能用中文或者數(shù)字。主要用于表達唯一性！（在日后的頁面解析能用id匹配就用id匹配的原因就在于其的唯一性！） |
- ①name屬性：表單提交項的鍵，與id不同，name屬性是和服務(wù)器通信時使用的名字（要求input標(biāo)簽都必須有），而id屬性是瀏覽器端使用的名字，該屬性主要方便客戶編程而在css和js中使用；
- ②value屬性：表單提交項的值，單選多選下拉框必須設(shè)置value屬性，這樣后臺才能獲得你選中的到底是哪個或哪幾個選項；
?實戰(zhàn)一——代碼說明type屬性值為image的情況：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action=""> <!--type屬性值為image時是一個圖片形式的提交按鈕。 --> <!--src屬性放圖片地址；alt屬性使圖片變?yōu)榭牲c擊的，跟提交按鈕作用一樣,同時圖片發(fā)生錯誤時顯示alt的屬性值--> <input type="image" src="girl.jpg" alt="submit"> </form> </body> </html>
- ③placeholder：提高用戶體驗度；
- ④readonly：只讀；（比如你無法對你的QQ號進行操作）
- ⑤disabled：禁用；（比如你在使用pycharm時有些選項是灰白色的無法使用）
?實戰(zhàn)二——代碼說明readonly屬性和disabled屬性的作用：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action=""> 用戶名：<input type="text" name="user" readonly><br> 賬 號：<input type="password" name="pdw" disabled> </form> </body> </html>
??效果截圖：用戶名是只讀的，所以無法在text文本框里輸入值；賬號是禁用的，直接變成灰色了。
2.input標(biāo)簽常用的type屬性值講解
?text 文本框
?password 密碼框
?radio 單選框
?checkbox 復(fù)選框
?file 文件選擇
hidden 隱藏域 hidden是用戶看不見的東西，給管理員（寫網(wǎng)頁的）操作保存信息的！
?submit 提交
?reset 重置
（2）select下拉框
- option ：下拉選項（下拉框的基本標(biāo)簽）：有多少個option就有多少個下拉選項；
- selected ：下拉狀態(tài)：表示選中某個下拉選項；
- size ：下拉框顯示：表示下拉框，顯示多少個，默認(rèn)為一個；
- name ：下拉框的名字：表示下拉框向后臺提交數(shù)據(jù)的時候所傳的名字。
?實戰(zhàn)——多級下拉框?qū)崿F(xiàn)：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action=""> 地址：<select name="address" id="address" size="1"> <!--屬性size是顯示幾個下拉框--> <optgroup label="湖南省"> <!--在標(biāo)簽optgroup里對下拉框進行分組--> <option value="CS">長沙市</option> <!--標(biāo)簽option是下拉選項--> <option value="ZZ">株洲市</option> <option value="LD">婁底市</option> </optgroup> <optgroup label="湖北省"> <option value="WH" selected>武漢市</option> <!--selected屬性代表下拉框默認(rèn)選擇--> </optgroup> </select> </form> </body> </html>
?效果截圖：
4.關(guān)于form表單總結(jié)：
（1）一圖總結(jié)form表單標(biāo)簽包含的元素：
??表單標(biāo)簽form包含的元素一圖總結(jié)：
（2）綜合實戰(zhàn)例子使用：
?上代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表單</title> </head> <body> <!--表單的標(biāo)簽 form+Tab--> <form action="" method=""> <!--action需要提交到的路徑 method里get有長度限制，不是很安全,會把你的信息顯示；post沒長度限制，且安全--> 姓名：<input type="text" placeholder="請輸入姓名"><br> 密碼：<input type="password" placeholder="請輸入密碼"><br> <!--如果type屬性值是password則在網(wǎng)頁里輸入的時候不顯示--> <!--當(dāng)網(wǎng)頁刷新時，加checked的這個選項是默認(rèn)選中的選項，注意這個標(biāo)簽屬性checked就是屬性名和屬性值一樣--> 性別：<input type="radio"name="sex" value="male" checked>男 <!--name屬性里面的值相同的代表他們是同一類，只能選其一。實現(xiàn)單選！！！--> <input type="radio" name="sex" value="female">女 <!--加value是傳數(shù)據(jù)時傳的相應(yīng)的值--> <br> <input type="submit" value="登錄"> <!--提交按鈕,默認(rèn)是提交兩個字，可以通過改value來改--> <input type="reset"> <!--重置按鈕，所有信息恢復(fù)默認(rèn)--> <input type="button" value="這是個普通按鈕"> <!-- 普通按鈕 要配合js使用--> </form> </body>
?實現(xiàn)效果：
4.拓展騷操作：
（1）表單中另外一些常用的標(biāo)簽：
-
①legend：設(shè)置分組表單的標(biāo)題
-
②label：提高用戶體驗度
??單選框只有點圓圈才能選中。label實現(xiàn)點相應(yīng)的字也能選中，但使用之前按鈕要取id，因為label的實現(xiàn)是根據(jù)id一一匹配的。
-
③fieldset標(biāo)簽：給表單設(shè)置分組
??直接實戰(zhàn)說明效果：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action=""> <fieldset> <!--對表單進行分組，用標(biāo)簽fieldset--> <legend>這是這個分組的名字！</legend> <!--對分組設(shè)置名字用標(biāo)簽legend--> 用戶名：<input type="text" placeholder="請輸入用戶名" name="user"><br> 密 碼：<input type="password" placeholder="請輸入密碼" name="pwd"><br> </fieldset> </form> </body> </html>
??實現(xiàn)效果：
（2）拓展一些簡單使用小標(biāo)簽：
①斜體標(biāo)簽：
i em 起強調(diào)作用（文本內(nèi)容需要強調(diào)的部分）
②加粗標(biāo)簽：
b strong 起強調(diào)作用（文本內(nèi)容需要強調(diào)的部分）
③在網(wǎng)頁中插入視頻的標(biāo)簽：
video （src屬性值為視頻地址，可以是本地可以是網(wǎng)址 controls屬性開啟對視頻的控制操作 width，height屬性設(shè)置視頻大小）
④在網(wǎng)頁中加入音樂標(biāo)簽：
audio (src屬性值為音頻地址 controls屬性打開對音頻的控制操作）
注意：不管寫了幾個（單獨一個標(biāo)簽放一首那樣寫），都可同時播放音頻。 但是如果像下面這樣寫，只會播放第一個地址正確的音頻！！！
⑤類似于字幕：
marquee
相關(guān)屬性及屬性值：
-
滾動方向direction(包括4個值:up、 down、 left和 right 默認(rèn)是left)；
-
滾動方式behavior（scroll:循環(huán)滾動，默認(rèn)效果； slide:只滾動一次就停止； alternate:來回交替進行滾動）；
-
滾動速度scrollamount（滾動速度是設(shè)置每次滾動時移動的長度，以像素為單位）；
-
滾動延遲scrolldelay（設(shè)置滾動的時間間隔，單位是毫秒）；
-
滾動循環(huán)loop（默認(rèn)值是-1，滾動會不斷的循環(huán)下去）；
-
設(shè)定活動字幕的背景顏色bgcolor，背景顏色可用RGB、16進制值的格式或顏色名稱來設(shè)定；
-
width和height設(shè)置活動字幕的寬度和高度。
換行標(biāo)簽：
br
分割線標(biāo)簽（兩個常用屬性：size屬性——指定水平線的粗細(xì)；color屬性——指定分割線的顏色！）
hr
推薦教程：《html視頻教程》
