python-day49--前端 html
一、列表標簽
1.有序列表 <ol>?????? (order list )
在瀏覽器中顯示包括:padding , 有序排列
??? <li>:列表中的每一項.
2.無序列表 <ul>?????? (unorder list )
在瀏覽器中顯示包括:padding , 實心圓, 有序排列(無序列表指的并不是列表內容是無序的)
無序列表 [type屬性:disc(實心圓點)(默認)、circle(空心圓圈)、square(實心方塊)]
<li>:列表中的每一項.
3.定義列表
在瀏覽器中顯示包括:無padding , 有序排列
<dt> 列表標題
<dd> 列表項(數據)
<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表單(輸入框)
功能:表單用于向服務器傳輸數據,從而實現用戶與Web服務器的交互
表單能夠包含input系列標簽,比如文本字段、復選框、單選框、提交按鈕等等。
表單還可以包含textarea、select、fieldset和 label標簽。
表單屬性
? ? ?action: 表單提交到哪.一般指向服務器端一個程序,程序接收到表單提交過來的數據(即表單元素值)作相應處理,比如https://www.sogou.com/web
? ? ?method: 表單的提交方式 post/get默認取值就是get
?
請求server端方式:
get請求:數據放在url后面,用?隔開,用& 連接
post請求:數據放在內部打包請求數據的部分
表單元素
基本概念:
HTML表單是HTML元素中較為復雜的部分,表單往往和腳本、動態頁面、數據處理等功能相結合,因此它是制作動態網站很重要的內容。
表單一般用來收集用戶的輸入信息
表單工作原理:
訪問者在瀏覽有表單的網頁時,可填寫必需的信息,然后按某個按鈕提交。這些信息通過Internet傳送到服務器上。?
服務器上專門的程序對這些數據進行處理,如果有錯誤會返回錯誤信息,并要求糾正錯誤。當數據完整無誤后,服務器反饋一個輸入完成的信息
<input> 系列標簽
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 默認選擇 男</form> </body>問題是可以選兩個,怎么解決?
因為男和女他們是一組數據 ,只能選一個,故:
<p>性別:<input type="radio" name="gender">男<input type="radio" name="gender">女 </p>解決原因是:性別只會傳一個鍵值對,不會傳兩個,所以加上name 屬性后就只能選一個
引出表單的兩個屬性:
表單在提交數據中 會用鍵值對的方式來提交,所以向server端發送內容就必須有name和value
name :作為發送到server端的數據的鍵,
value:作為發送到server端的數據的值
表單屬性name: 表單提交項的鍵.注意和id屬性的區別:name屬性是和服務器通信時使用的名稱;而id屬性是瀏覽器端使用的名稱,該屬性主要是為了方便客戶端編程,而在css和javascript中使用的value: 表單提交項的值.對于不同的輸入類型,value 屬性的用法也不同:type="button", "reset", "submit" - 定義按鈕上的顯示的文本type="text", "password", "hidden" - 定義輸入字段的初始值type="checkbox", "radio", "image" - 定義與輸入相關聯的值checked: radio 和 checkbox 默認被選中readonly: 只讀. text 和 passworddisabled: 對所用input都好使.所以以上代碼要這樣寫:
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>愛好:<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 默認選則 唱歌
5.file 提交文件
form表單需要加上屬性enctype="multipart/form-data"
上傳文件注意兩點:
1 請求方式必須是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>愛好:<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>愛好:<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>當點擊重置按鈕時,會恢復初始的狀態
7.button??? 空按鈕 什么功能都沒有
<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>愛好:<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>愛好:<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>當點擊提交按鈕時 會提交數據并恢復初始的狀態
9. hidden?? 隱藏不顯示?? 但是它內部的name 和value 會在點擊提交按鈕時 一起提交給過去
<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>愛好:<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> 系列標簽??? 文本域(可用做個人簡介)
<select>標簽
?
<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:選項個數 ,multiple = multiple="multiple" 可實現多選<option value="hebei">河北</option><option value="henan">河南</option><option value="hunan">湖南</option><option value="hubei">湖北</option><option value="hainan" selected>海南</option> #selected 默認選擇<option value="haibei" selected>海北</option></select></body><label>標簽
<body> <form action=""><label for="c1">姓名:</label><input type="text" name="username" id="c1"> #創建id 用與關聯</form> </body>三、<div>和<span> 標簽?? -- 都沒有任何的樣式,為CSS而生
<div></div> : <div>只是一個塊級元素,并無實際的意義。主要通過CSS樣式為其賦予不同的表現.
<span></span>: <span>表示了內聯行(行內元素),并無實際的意義,主要通過CSS樣式為其賦予不同的表現.
塊級元素與行內元素的區別
所謂塊元素,是以另起一行開始渲染的元素,行內元素則不需另起一行。如果單獨在網頁中插入這兩個元素,不會對頁面產生任何的影響。
這兩個元素是專門為定義CSS樣式而生的。
?
?
四、html 必須要掌握的知識點
?
轉載于:https://www.cnblogs.com/liuwei0824/p/7552639.html
總結
以上是生活随笔為你收集整理的python-day49--前端 html的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Window上,启动Tomcat服务之后
- 下一篇: jQuery-easyui和valida