python-day49--前端 html
一、列表標(biāo)簽
1.有序列表 <ol>?????? （order list ）
在瀏覽器中顯示包括：padding ， 有序排列
??? <li>:列表中的每一項(xiàng).
2.無(wú)序列表 <ul>?????? （unorder list ）
在瀏覽器中顯示包括：padding ， 實(shí)心圓， 有序排列（無(wú)序列表指的并不是列表內(nèi)容是無(wú)序的）
無(wú)序列表 [type屬性：disc(實(shí)心圓點(diǎn))(默認(rèn))、circle(空心圓圈)、square(實(shí)心方塊)]
<li>:列表中的每一項(xiàng).
3.定義列表
在瀏覽器中顯示包括：無(wú)padding ， 有序排列
<dt> 列表標(biāo)題
<dd> 列表項(xiàng)（數(shù)據(jù)）
<body> <!--unorder list--> <ul><li>222</li><li>111</li><li>333</li> </ul><!--order list--> <ol><li>222</li><li>222</li><li>222</li> </ol><!--define list--> <dl><!--define title--><dt>河北省</dt><!--define data--><dd>石家莊</dd><dd>天津</dd> </dl> </body>二、form表單（輸入框）
功能：表單用于向服務(wù)器傳輸數(shù)據(jù)，從而實(shí)現(xiàn)用戶與Web服務(wù)器的交互
表單能夠包含input系列標(biāo)簽，比如文本字段、復(fù)選框、單選框、提交按鈕等等。
表單還可以包含textarea、select、fieldset和 label標(biāo)簽。
表單屬性
? ? ?action: 表單提交到哪.一般指向服務(wù)器端一個(gè)程序,程序接收到表單提交過(guò)來(lái)的數(shù)據(jù)（即表單元素值）作相應(yīng)處理，比如https://www.sogou.com/web
? ? ?method: 表單的提交方式 post/get默認(rèn)取值就是get
?
請(qǐng)求server端方式：
get請(qǐng)求：數(shù)據(jù)放在url后面，用？隔開(kāi)，用& 連接
post請(qǐng)求：數(shù)據(jù)放在內(nèi)部打包請(qǐng)求數(shù)據(jù)的部分
表單元素
基本概念：
HTML表單是HTML元素中較為復(fù)雜的部分，表單往往和腳本、動(dòng)態(tài)頁(yè)面、數(shù)據(jù)處理等功能相結(jié)合，因此它是制作動(dòng)態(tài)網(wǎng)站很重要的內(nèi)容。
表單一般用來(lái)收集用戶的輸入信息
表單工作原理：
訪問(wèn)者在瀏覽有表單的網(wǎng)頁(yè)時(shí)，可填寫(xiě)必需的信息，然后按某個(gè)按鈕提交。這些信息通過(guò)Internet傳送到服務(wù)器上。?
服務(wù)器上專門(mén)的程序?qū)@些數(shù)據(jù)進(jìn)行處理，如果有錯(cuò)誤會(huì)返回錯(cuò)誤信息，并要求糾正錯(cuò)誤。當(dāng)數(shù)據(jù)完整無(wú)誤后，服務(wù)器反饋一個(gè)輸入完成的信息
<input> 系列標(biāo)簽
1.type="text"? 文本輸入框
<body> <form action="" method="post"><p>姓名：<input type="text"/></p><p>密碼：<input type="text"/></p></form> </body>2.type="password"?? 密碼輸入框
<body> <form action="" method="post"><p>姓名：<input type="text"/></p><p>密碼：<input type="password"/></p></form> </body>3.type="radio"??? 單選框
<body> <form action="" method="post"><p>姓名：<input type="text"/></p><p>密碼：<input type="password"/></p><p>性別：<input type="radio" checked/>男<input type="radio"/>女</p> #checked 默認(rèn)選擇 男</form> </body>問(wèn)題是可以選兩個(gè)，怎么解決？
因?yàn)槟泻团麄兪且唤M數(shù)據(jù) ，只能選一個(gè)，故：
<p>性別：<input type="radio" name="gender">男<input type="radio" name="gender">女 </p>解決原因是：性別只會(huì)傳一個(gè)鍵值對(duì)，不會(huì)傳兩個(gè)，所以加上name 屬性后就只能選一個(gè)
引出表單的兩個(gè)屬性：
表單在提交數(shù)據(jù)中 會(huì)用鍵值對(duì)的方式來(lái)提交，所以向server端發(fā)送內(nèi)容就必須有name和value
name ：作為發(fā)送到server端的數(shù)據(jù)的鍵，
value：作為發(fā)送到server端的數(shù)據(jù)的值
表單屬性name: 表單提交項(xiàng)的鍵.注意和id屬性的區(qū)別：name屬性是和服務(wù)器通信時(shí)使用的名稱；而id屬性是瀏覽器端使用的名稱，該屬性主要是為了方便客戶端編程，而在css和javascript中使用的value: 表單提交項(xiàng)的值.對(duì)于不同的輸入類型，value 屬性的用法也不同：type="button", "reset", "submit" - 定義按鈕上的顯示的文本type="text", "password", "hidden" - 定義輸入字段的初始值type="checkbox", "radio", "image" - 定義與輸入相關(guān)聯(lián)的值checked: radio 和 checkbox 默認(rèn)被選中readonly: 只讀. text 和 passworddisabled: 對(duì)所用input都好使.所以以上代碼要這樣寫(xiě)：
4.type="checkbox"?? 多選框
<form action="" method="post"><p>姓名：<input type="text"/></p><p>密碼：<input type="password"/></p><p>性別：<input type="radio" name="gender" value="male" checked>男<input type="radio" name="gender" value="female">女 </p><p>愛(ài)好：<input type="checkbox" name='hobby' value="song" checked/>唱歌<input type="checkbox" name='hobby' value="swim"/>游泳<input type="checkbox" name='hobby' value="Str-Dance"/>街舞</p> </form>#checked 默認(rèn)選則 唱歌
5.file 提交文件
form表單需要加上屬性enctype="multipart/form-data"
上傳文件注意兩點(diǎn)：
1 請(qǐng)求方式必須是post
2 enctype="multipart/form-data"
<body> <form action=""><p>姓名：<input type="text"/></p><p>密碼：<input type="password"/></p><p>性別：<input type="radio" name="gender" value="male" checked>男<input type="radio" name="gender" value="female">女 </p><p>愛(ài)好：<input type="checkbox" name='hobby' value="song"/>唱歌<input type="checkbox" name='hobby' value="swim"/>游泳<input type="checkbox" name='hobby' value="Str-Dance"/>街舞</p><p>頭像：<input type="file" name="file_obj"/></p></form> </body>6.reset 重置按鈕
<body> <form action=""><p>姓名：<input type="text"/></p><p>密碼：<input type="password"/></p><p>性別：<input type="radio" name="gender" value="male" checked>男<input type="radio" name="gender" value="female">女 </p><p>愛(ài)好：<input type="checkbox" name='hobby' value="song"/>唱歌<input type="checkbox" name='hobby' value="swim"/>游泳<input type="checkbox" name='hobby' value="Str-Dance"/>街舞</p><p>頭像：<input type="file" name="file_obj"/></p><p><input type="reset"/></p> </form>當(dāng)點(diǎn)擊重置按鈕時(shí)，會(huì)恢復(fù)初始的狀態(tài)
7.button??? 空按鈕 什么功能都沒(méi)有
<form action=""><p>姓名：<input type="text"/></p><p>密碼：<input type="password"/></p><p>性別：<input type="radio" name="gender" value="male" checked>男<input type="radio" name="gender" value="female">女 </p><p>愛(ài)好：<input type="checkbox" name='hobby' value="song"/>唱歌<input type="checkbox" name='hobby' value="swim"/>游泳<input type="checkbox" name='hobby' value="Str-Dance"/>街舞</p><p>頭像：<input type="file" name="file_obj"/></p><p><input type="reset"/></p><p><input type="button"/></p><p><input type="button" value="按鈕"/></p> </form>8.submit?? 提交按鈕
<form action=""><p>姓名：<input type="text"/></p><p>密碼：<input type="password"/></p><p>性別：<input type="radio" name="gender" value="male" checked>男<input type="radio" name="gender" value="female">女 </p><p>愛(ài)好：<input type="checkbox" name='hobby' value="song"/>唱歌<input type="checkbox" name='hobby' value="swim"/>游泳<input type="checkbox" name='hobby' value="Str-Dance"/>街舞</p><p>頭像：<input type="file" name="file_obj"/></p><p><input type="reset"/></p><p><input type="button"/></p><p><input type="button" value="按鈕"/></p><p><input type="submit"/></p></form> </body>當(dāng)點(diǎn)擊提交按鈕時(shí) 會(huì)提交數(shù)據(jù)并恢復(fù)初始的狀態(tài)
9. hidden?? 隱藏不顯示?? 但是它內(nèi)部的name 和value 會(huì)在點(diǎn)擊提交按鈕時(shí) 一起提交給過(guò)去
<form action=""><p>姓名：<input type="text"/></p><p>密碼：<input type="password"/></p><p>性別：<input type="radio" name="gender" value="male" checked>男<input type="radio" name="gender" value="female">女 </p><p>愛(ài)好：<input type="checkbox" name='hobby' value="song"/>唱歌<input type="checkbox" name='hobby' value="swim"/>游泳<input type="checkbox" name='hobby' value="Str-Dance"/>街舞</p><p>頭像：<input type="file" name="file_obj"/></p><p><input type="reset"/></p><p><input type="button"/></p><p><input type="button" value="按鈕"/></p><p><input type="submit"/></p><p><input type="hidden" name="asdasd" value="asdfasd"></p> </form><textarea> 系列標(biāo)簽??? 文本域（可用做個(gè)人簡(jiǎn)介）
<select>標(biāo)簽
?
<body><select name="province" id=""><option value="hebei">河北</option><option value="henan">河南</option><option value="hunan">湖南</option><option value="hubei">湖北</option><option value="hainan">海南</option><option value="haibei">海北</option></select></body>?
?
<body><select name="province" size='3' id="" multiple> #size：選項(xiàng)個(gè)數(shù) ,multiple = multiple="multiple" 可實(shí)現(xiàn)多選<option value="hebei">河北</option><option value="henan">河南</option><option value="hunan">湖南</option><option value="hubei">湖北</option><option value="hainan" selected>海南</option> #selected 默認(rèn)選擇<option value="haibei" selected>海北</option></select></body><label>標(biāo)簽
<body> <form action=""><label for="c1">姓名：</label><input type="text" name="username" id="c1"> #創(chuàng)建id 用與關(guān)聯(lián)</form> </body>三、<div>和<span> 標(biāo)簽?? -- 都沒(méi)有任何的樣式，為CSS而生
<div></div> ： <div>只是一個(gè)塊級(jí)元素，并無(wú)實(shí)際的意義。主要通過(guò)CSS樣式為其賦予不同的表現(xiàn).
<span></span>： <span>表示了內(nèi)聯(lián)行(行內(nèi)元素),并無(wú)實(shí)際的意義,主要通過(guò)CSS樣式為其賦予不同的表現(xiàn).
塊級(jí)元素與行內(nèi)元素的區(qū)別
所謂塊元素，是以另起一行開(kāi)始渲染的元素，行內(nèi)元素則不需另起一行。如果單獨(dú)在網(wǎng)頁(yè)中插入這兩個(gè)元素，不會(huì)對(duì)頁(yè)面產(chǎn)生任何的影響。
這兩個(gè)元素是專門(mén)為定義CSS樣式而生的。
?
?
四、html 必須要掌握的知識(shí)點(diǎn)
?
轉(zhuǎn)載于:https://www.cnblogs.com/liuwei0824/p/7552639.html
總結(jié)
以上是生活随笔為你收集整理的python-day49--前端 html的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Window上，启动Tomcat服务之后
- 下一篇： python3.6使用chardet模块