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