day042前端之HTML
生活随笔
收集整理的這篇文章主要介紹了
day042前端之HTML
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
本節(jié)內(nèi)容：
1、HTML的介紹
2、HTML文檔結(jié)構(gòu)
3、HTML常用標(biāo)簽
一、HTML的介紹
1、web服務(wù)的本質(zhì)
web實(shí)際上就是一個(gè)socket服務(wù)端，
流程：
瀏覽器發(fā)請(qǐng)求 --> HTTP協(xié)議 --> 服務(wù)端接收請(qǐng)求 --> 服務(wù)端返回響應(yīng)
--> 服務(wù)端把HTML文件內(nèi)容發(fā)給瀏覽器 --> 瀏覽器渲染頁(yè)面
服務(wù)端
import socketsk = socket.socket() sk.bind(("127.0.0.1", 8080)) sk.listen(5) while True: conn, addr = sk.accept() data = conn.recv(8096) conn.send(b"HTTP/1.1 200 OK\r\n\r\n") conn.send(b"<h1>Hello world!</h1>") conn.close() 2、HTML是什么？
1.超文本標(biāo)記語(yǔ)言（Hypertext Markup Language, HTML）是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)記語(yǔ)言。2.本質(zhì)上是瀏覽器可識(shí)別的規(guī)則，我們按照規(guī)則寫(xiě)網(wǎng)頁(yè)，瀏覽器根據(jù)規(guī)則渲染我們的網(wǎng)頁(yè)。
對(duì)于不同的瀏覽器，對(duì)同一個(gè)標(biāo)簽可能會(huì)有不同的解釋。（兼容性問(wèn)題）3.網(wǎng)頁(yè)文件的擴(kuò)展名：.html或.htm
3、HTML不是什么？
HTML是一種標(biāo)記語(yǔ)言（markup language），它不是一種編程語(yǔ)言。HTML使用標(biāo)簽來(lái)描述網(wǎng)頁(yè)。
不像python編程語(yǔ)言一樣，有邏輯什么的，這個(gè)標(biāo)記語(yǔ)言是沒(méi)有邏輯的
二、HTML文檔結(jié)構(gòu)
1、最基本的HTML文檔：
<!DOCTYPE html>
<html lang="zh-CN"> #這個(gè)language表示語(yǔ)言，zh-CN是中文的意思，就是說(shuō)，你整個(gè)文檔的內(nèi)容以中文為主，如果以英文為主，就寫(xiě)成lang='en'<head><meta charset="UTF-8"><title>css樣式優(yōu)先級(jí)</title>
</head>
<body></body>
</html>
1.<!DOCTYPE html>聲明為HTML5文檔。2、<html></html>是文檔的開(kāi)始標(biāo)記和結(jié)束的標(biāo)記。
是HTML頁(yè)面的根元素，在它們之間是文檔的頭部（head）和主體（body）。3.<head>、</head>定義了HTML文檔的開(kāi)頭部分。
它們之間的內(nèi)容不會(huì)在瀏覽器的文檔窗口顯示。
包含了文檔的元（meta）數(shù)據(jù)，配置信息等，是給瀏覽器看的，你看到的是在body標(biāo)簽里面寫(xiě)的。4.<title>、</title>定義了網(wǎng)頁(yè)標(biāo)題，在瀏覽器標(biāo)題欄顯示。
（修改一下title中的內(nèi)容，然后看一下瀏覽器，你就會(huì)發(fā)現(xiàn)title是什么了，就是瀏覽器上面的小標(biāo)題）5.<body>、</body>之間的文本是可見(jiàn)的網(wǎng)頁(yè)主體內(nèi)容。
注意：對(duì)于中文網(wǎng)頁(yè)需要使用?聲明編碼，否則會(huì)出現(xiàn)亂碼。
有些瀏覽器會(huì)設(shè)置 GBK 為默認(rèn)編碼，則你需要設(shè)置為?。
pycharm中創(chuàng)建一個(gè)html文件，你就會(huì)發(fā)現(xiàn)，整個(gè)結(jié)構(gòu)都給你直接生成好了，
因?yàn)椴还苁裁礊g覽器，這個(gè)文檔結(jié)構(gòu)都是這樣的。
pycharm可以直接點(diǎn)擊瀏覽器，打開(kāi)寫(xiě)好的HTML文件，
你會(huì)發(fā)現(xiàn)地址欄是種file:///這也是一個(gè)協(xié)議，瀏覽器打開(kāi)自己本地文件的協(xié)議。
2、HTML標(biāo)簽格式，嚴(yán)格封閉
HTML標(biāo)簽通常是成對(duì)出現(xiàn)的，比如：<div>和</div>，第一個(gè)標(biāo)簽是開(kāi)始，第二個(gè)標(biāo)簽是結(jié)束。結(jié)束標(biāo)簽會(huì)有斜線。HTML標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵字如：<div>、<html>等，也有一部分標(biāo)簽是單獨(dú)呈現(xiàn)的，比如：<br/>、<hr/>、<img src="1.jpg" />等。標(biāo)簽里面可以有若干屬性，也可以不帶屬性。
3、標(biāo)簽的語(yǔ)法
第一種寫(xiě)法：（成對(duì)出現(xiàn)的）
<標(biāo)簽名 屬性1=“屬性值1” 屬性2=“屬性值2”……>內(nèi)容部分</標(biāo)簽名>第二種寫(xiě)法：（單獨(dú)呈現(xiàn)的）
<標(biāo)簽名 屬性1=“屬性值1” 屬性2=“屬性值2”…… />有些屬性是沒(méi)有特殊的效果的，而有些屬性是有效果的，
比如 <h1 s='name'>xxx<h1/>，其中s='name'是沒(méi)什么效果的，
而<a src='http://www.baidu.com'>xxx</a>，你會(huì)看到一些效果，可以點(diǎn)擊，有下劃線，有顏色。
4、幾個(gè)很重要的屬性
1、id
定義標(biāo)簽的唯一ID，HTML文檔樹(shù)中唯一，id不能重復(fù)
寫(xiě)在標(biāo)簽里面，不是被標(biāo)簽包圍，<span id="1"></span>
用來(lái)區(qū)分頁(yè)面上的標(biāo)簽，我們就可以通過(guò)id來(lái)快速查找到這個(gè)標(biāo)簽2、class
為html元素定義一個(gè)類名（class="類名"）,<div class="c1"></div>
或者多個(gè)類名（class="類名1 類名2 ···"）
(CSS樣式類名) 詳見(jiàn)下一篇css3、style
成對(duì)的被<head>M</head>,夾住
規(guī)定元素的行內(nèi)樣式（css樣式）如何注釋：
<!--注釋內(nèi)容-->
#找到一行內(nèi)容ctrl+/就能注釋，注釋的內(nèi)容不會(huì)在網(wǎng)頁(yè)上顯示出來(lái)
5、 標(biāo)簽
<!DOCTYPE> 聲明必須是 HTML 文檔的第一行，位于 <html> 標(biāo)簽之前。<!DOCTYPE> 聲明不是 HTML 標(biāo)簽；
它是指示 web 瀏覽器關(guān)于頁(yè)面使用哪個(gè) HTML 版本進(jìn)行編寫(xiě)的指令。
三、HTML常用標(biāo)簽
1、head內(nèi)常用標(biāo)簽
2、Meta標(biāo)簽（head里的內(nèi)容,了解）
Meta標(biāo)簽介紹： #作為了解內(nèi)容<meta>元素可提供有關(guān)頁(yè)面的元信息（meta-information）,針對(duì)搜索引擎和更新頻度的描述和關(guān)鍵詞。
<meta>標(biāo)簽位于文檔的頭部，不包含任何內(nèi)容。
<meta>提供的信息是用戶不可見(jiàn)的。
1、meta標(biāo)簽共有兩個(gè)屬性，（了解）
分別是http-equiv屬性
和name 屬性
不同的屬性又有不同的參數(shù)值，這些不同的參數(shù)值就實(shí)現(xiàn)了不同的網(wǎng)頁(yè)功能。
2.http-equiv屬性：（了解）
相當(dāng)于http的文件頭作用，它可以向?yàn)g覽器傳回一些有用的信息，以幫助正確地顯示網(wǎng)頁(yè)內(nèi)容，
與之對(duì)應(yīng)的屬性值為content，content中的內(nèi)容其實(shí)就是各個(gè)參數(shù)的變量值。
<!--2秒后跳轉(zhuǎn)到對(duì)應(yīng)的網(wǎng)址，注意引號(hào)-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com"> #如果把URL和后面的內(nèi)容去掉，就是2秒鐘刷新一次，這些內(nèi)容了解一下就行 <!--指定文檔的編碼類型--> <meta http-equiv="content-Type" charset=UTF8"> <!--告訴IE以最高級(jí)模式渲染文檔--> <meta http-equiv="x-ua-compatible" content="IE=edge"> #edge是微軟的一個(gè)全新的瀏覽器,其實(shí)就是告訴IE瀏覽器，你按照最高標(biāo)準(zhǔn)來(lái)渲染我的頁(yè)面，了解一下就可以啦 2、name屬性:
主要用于描述網(wǎng)頁(yè)，與之對(duì)應(yīng)的屬性值為content，
content中的內(nèi)容主要是便于搜索引擎機(jī)器人查找信息和分類信息用的。
<meta name="keywords" content="meta總結(jié),html meta,meta屬性,meta跳轉(zhuǎn)"> # 關(guān)鍵字，也就是別人是可以通過(guò)這些關(guān)鍵字搜索到我的這個(gè)文章的， # 搜索引擎就是能夠這個(gè)content內(nèi)容來(lái)幫別人搜索到你的這個(gè)文檔的 #SEO就是做這個(gè)的，就是怎么讓你們公司的網(wǎng)站在別人搜索的時(shí)候能夠靠前顯示， # 不算那個(gè)花錢的，百度是充值的，你沖個(gè)20w，別人可能一天就給你點(diǎn)擊完了，特別的貴 <meta name="description" content="xxxxxpythonxxx學(xué)習(xí)"> #是對(duì)這個(gè)文檔的描述，在百度一些內(nèi)容的頁(yè)面上，f12打開(kāi)看看 下面這個(gè)紅框里面就是描述信息：
4、瀏覽器內(nèi)核：
「瀏覽器內(nèi)核」也就是瀏覽器所采用的「渲染引擎」，
渲染引擎決定了瀏覽器如何顯示網(wǎng)頁(yè)的內(nèi)容以及頁(yè)面的格式信息。
渲染引擎是兼容性問(wèn)題出現(xiàn)的根本原因。
3、body內(nèi)常用標(biāo)簽（HTML中的重點(diǎn)）
1、基本標(biāo)簽（塊級(jí)標(biāo)簽和內(nèi)聯(lián)標(biāo)簽）
基本標(biāo)簽
不加標(biāo)簽的純文字也是可以在body中寫(xiě)的
<b>加粗</b>
<i>斜體</i>
<u>下劃線</u>
<s>刪除</s><p>段落標(biāo)簽</p> #獨(dú)占一個(gè)段落<h1>標(biāo)題1</h1>
<h2>標(biāo)題2</h2>
<h3>標(biāo)題3</h3>
<h4>標(biāo)題4</h4>
<h5>標(biāo)題5</h5>
<h6>標(biāo)題6</h6><!--換行-->
<br><!--水平線--><hr> #就是單獨(dú)個(gè)一個(gè)水平線
每次加上一些內(nèi)容，別忘了刷新一下頁(yè)面，才能看到新添加的效果或者內(nèi)容，
其實(shí)上面這些標(biāo)簽很少用
4、特殊字符（了解）
（還有好多其他的，可以直接百度搜HTML特殊符號(hào)對(duì)照表）
5、div標(biāo)簽和span標(biāo)簽（常用）
這兩個(gè)標(biāo)簽沒(méi)有特別的樣式，可以隨意的通過(guò)css來(lái)設(shè)計(jì)樣式；div標(biāo)簽用來(lái)定義一個(gè)塊級(jí)元素，并無(wú)實(shí)際的意義。主要通過(guò)CSS樣式為其賦予不同的表現(xiàn)。
span標(biāo)簽用來(lái)定義內(nèi)聯(lián)(行內(nèi))元素，并無(wú)實(shí)際的意義。主要通過(guò)CSS樣式為其賦予不同的表現(xiàn)。
1、塊級(jí)元素與行內(nèi)元素的區(qū)別：
所謂塊元素，是以另起一行開(kāi)始渲染的元素，行內(nèi)元素則不需另起一行。
如果單獨(dú)在網(wǎng)頁(yè)中插入這兩個(gè)元素，不會(huì)對(duì)頁(yè)面產(chǎn)生任何的影響。這兩個(gè)元素是專門為定義CSS樣式而生的。剛才學(xué)的標(biāo)簽：塊級(jí)標(biāo)簽：p、h1--h6、hr、div內(nèi)聯(lián)標(biāo)簽：b、i、u、s
2、關(guān)于標(biāo)簽嵌套：
關(guān)于標(biāo)簽嵌套：通常塊級(jí)元素可以包含內(nèi)聯(lián)元素或某些塊級(jí)元素，
但內(nèi)聯(lián)元素不能包含塊級(jí)元素，它只能包含其它內(nèi)聯(lián)元素。
div是可以包含div的p標(biāo)簽比較特殊，不能包含塊級(jí)標(biāo)簽，p標(biāo)簽也不能包含p標(biāo)簽。
可以試一下p標(biāo)簽套p標(biāo)簽，f12你會(huì)發(fā)現(xiàn)三個(gè)p標(biāo)簽
5、img標(biāo)簽（常用）
<img src="圖片的路徑" alt="圖片未加載成功時(shí)的提示" title="鼠標(biāo)懸浮時(shí)提示信息"width="寬" height="高(寬高兩個(gè)屬性只用一個(gè)會(huì)自動(dòng)等比縮放)">src的路徑又分為兩種：網(wǎng)上的一個(gè)圖片路徑和本地的一個(gè)圖片路徑
6、a標(biāo)簽–超鏈接標(biāo)簽（常用）
所謂的超鏈接是指從一個(gè)網(wǎng)頁(yè)指向一個(gè)目標(biāo)的連接關(guān)系，這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁(yè)，
也可以是相同網(wǎng)頁(yè)上的不同位置，還可以是一個(gè)圖片，一個(gè)電子郵件地址，
一個(gè)文件，甚至是一個(gè)應(yīng)用程序。
什么是URL
什么是URL？
URL是統(tǒng)一資源定位器(Uniform Resource Locator)的縮寫(xiě)，也被稱為網(wǎng)頁(yè)地址，
是因特網(wǎng)上標(biāo)準(zhǔn)的資源的地址。URL舉例
http://www.sohu.com/stu/intro.html http://222.172.123.33/stu/intro.html URL地址由4部分組成 第1部分：為協(xié)議：http://、ftp://等 第2部分：為站點(diǎn)地址：可以是域名或IP地址 第3部分：為頁(yè)面在站點(diǎn)中的目錄：stu 第4部分：為頁(yè)面名稱，例如 index.html 各部分之間用“/”符號(hào)隔開(kāi)。 <a href="http://www.oldboyedu.com" target="_blank" >點(diǎn)我</a> 1、該地址可以有幾種類型：
href屬性指定目標(biāo)網(wǎng)頁(yè)地址。
1、絕對(duì)URL - 指向另一個(gè)站點(diǎn)（比如 href="http://www.jd.com）2、相對(duì)URL - 指當(dāng)前站點(diǎn)中確切的路徑（href="index.htm"） #學(xué)django的時(shí)候會(huì)用的比較多3、錨URL - 指向頁(yè)面中的錨（href="#top"），博客的目錄經(jīng)常用到，（回到頂部）
還可以跳轉(zhuǎn)到 name屬性為p1的a標(biāo)簽上，<a name='top'>xxx</a>4、_blank表示在新標(biāo)簽頁(yè)中打開(kāi)目標(biāo)網(wǎng)頁(yè)5、_self表示在當(dāng)前標(biāo)簽頁(yè)中打開(kāi)目標(biāo)網(wǎng)頁(yè)
7、列表
1、無(wú)序列表
<ul type="disc"> <li>第一項(xiàng)</li> <li>第二項(xiàng)</li> </ul> types屬性：
disc（實(shí)心圓點(diǎn)，默認(rèn)值）
circle（空心圓圈）
square（實(shí)心方塊）
none（無(wú)樣式）
2、有序列表
<ol type="1" start="2"> <li>第一項(xiàng)</li> <li>第二項(xiàng)</li> </ol> type屬性： start是從數(shù)字幾開(kāi)始
1 數(shù)字列表，默認(rèn)值
A 大寫(xiě)字母
a 小寫(xiě)字母
Ⅰ大寫(xiě)羅馬
ⅰ小寫(xiě)羅馬
3、標(biāo)題列表（就像大綱一樣，有一個(gè)層級(jí)效果）
<dl><dt>標(biāo)題1</dt> <dd>內(nèi)容1</dd> <dt>標(biāo)題2</dt> <dd>內(nèi)容1</dd> <dd>內(nèi)容2</dd> </dl> 8、表格
表格是一個(gè)二維數(shù)據(jù)空間，一個(gè)表格由若干行組成，一個(gè)行又有若干單元格組成，
單元格里可以包含文字、列表、圖案、表單、數(shù)字符號(hào)、預(yù)置文本和其它的表格等內(nèi)容。表格最重要的目的是顯示表格類數(shù)據(jù)。
表格類數(shù)據(jù)是指最適合組織為表格格式（即按行和列組織）的數(shù)據(jù)。
表格的基本結(jié)構(gòu)：
<table border='1'><thead> #標(biāo)題部分<tr> #一行<th>序號(hào)</th> #一個(gè)單元格<th>姓名</th><th>愛(ài)好</th></tr></thead><tbody> #內(nèi)容部分<tr> #一行<td>1</td> #一個(gè)單元格<td>Egon</td><td>杠娘</td></tr><tr><td>2</td><td>Yuan</td><td>日天</td></tr></tbody>
</table>
1、屬性:
border: 表格邊框.
cellpadding: 內(nèi)邊距 （內(nèi)邊框和內(nèi)容的距離）
cellspacing: 外邊距.（內(nèi)外邊框的距離）
width: 像素 百分比.（最好通過(guò)css來(lái)設(shè)置長(zhǎng)寬）
rowspan: 單元格豎跨多少行
colspan: 單元格橫跨多少列（即合并單元格）
其實(shí)標(biāo)簽又可以分為兩類：1、展示給用戶看的 2、獲取用戶輸入內(nèi)容的標(biāo)簽，
下面要學(xué)的標(biāo)簽是捕獲用戶輸入的標(biāo)簽。基本上HTML中常用的就這些標(biāo)簽
9、form（最后再學(xué)這個(gè)標(biāo)簽，先去學(xué)input標(biāo)簽）
功能：表單用于向服務(wù)器傳輸數(shù)據(jù)，從而實(shí)現(xiàn)用戶與Web服務(wù)器的交互表單能夠包含input系列標(biāo)簽，比如文本字段、復(fù)選框、單選框、提交按鈕等等。表單還可以包含textarea、select、fieldset和 label標(biāo)簽。
1、表單屬性
屬性 描述
accept-charset 規(guī)定在被提交表單中使用的字符集（默認(rèn)：頁(yè)面字符集）。action 規(guī)定向何處提交表單的地址（URL）（提交頁(yè)面）。autocomplete 規(guī)定瀏覽器應(yīng)該自動(dòng)完成表單（默認(rèn)：開(kāi)啟）。enctype 規(guī)定被提交數(shù)據(jù)的編碼（默認(rèn)：url-encoded）。method 規(guī)定在提交表單時(shí)所用的 HTTP 方法（默認(rèn)：GET）。name 規(guī)定識(shí)別表單的名稱（對(duì)于 DOM 使用：document.forms.name）。novalidate 規(guī)定瀏覽器不驗(yàn)證表單。target 規(guī)定 action 屬性中地址的目標(biāo)（默認(rèn)：_self）。
2、表單元素
HTML表單是HTML元素中較為復(fù)雜的部分，
表單往往和腳本、動(dòng)態(tài)頁(yè)面、數(shù)據(jù)處理等功能相結(jié)合，因此它是制作動(dòng)態(tài)網(wǎng)站很重要的內(nèi)容。訪問(wèn)者在瀏覽有表單的網(wǎng)頁(yè)時(shí)，可填寫(xiě)必需的信息，然后按某個(gè)按鈕提交。
這些信息通過(guò)Internet傳送到服務(wù)器上。 服務(wù)器上專門的程序?qū)@些數(shù)據(jù)進(jìn)行處理，如果有錯(cuò)誤會(huì)返回錯(cuò)誤信息，并要求糾正錯(cuò)誤。
當(dāng)數(shù)據(jù)完整無(wú)誤后，服務(wù)器反饋一個(gè)輸入完成的信息。
3、如何將瀏覽器用戶輸入的內(nèi)容發(fā)送到服務(wù)端
1、input中type=submit的那個(gè)按鈕，
點(diǎn)擊提交按鈕，input中type=submit的那個(gè)按鈕，然后就會(huì)將form表單中所有用戶輸入的內(nèi)容或者選擇的內(nèi)容（{name屬性:值，}）
都發(fā)給服務(wù)端（以我們自己寫(xiě)的那個(gè)socket舉例，打印一下接收的內(nèi)容），但是所有的輸入標(biāo)簽必須有一個(gè)叫做name的屬性。
2、讓用戶選擇的，必須指定一個(gè)value值，
要不然后端接收不到內(nèi)容，用戶自己填寫(xiě)的標(biāo)簽，不需要指定value值
3、我們用post封裝提交寫(xiě)信息，到一個(gè)消息體里面，
但是這樣并不好，因?yàn)閡rl中顯示了你的信息，并且如果內(nèi)容很多的話，
你的地址欄不能夠輸入那么長(zhǎng)的內(nèi)容，為什么會(huì)默認(rèn)拼接到url里面呢，
因?yàn)閒orm表單默認(rèn)是get請(qǐng)求提交內(nèi)容，我們可以改為post，
來(lái)看看：post會(huì)把所有你提交的信息封裝到一個(gè)消息體里面，
在瀏覽器上就看不到了，
對(duì)于小白來(lái)說(shuō)，看著安全一些。然后我們后端通過(guò)提交過(guò)來(lái)的數(shù)據(jù)，來(lái)做某些事情，該驗(yàn)證的驗(yàn)證，該保存的保存
4、記住form表單里面有兩個(gè)屬性
action控制往哪里提交數(shù)據(jù)、
method控制用什么方式提交。
5、還有一個(gè)文件input
因?yàn)槲覀儎偛耪f(shuō)，數(shù)據(jù)是通過(guò)組成一個(gè)字典發(fā)給后端的，
但是文件怎么做鍵值對(duì)啊，做不了，
所以需要通過(guò)二進(jìn)制流的形式一點(diǎn)一點(diǎn)的傳送給后端，就是這個(gè)multipart搞的事情，
有個(gè)了解就行了，別糾結(jié)，到了django我們?cè)诩?xì)說(shuō)。
6、注意：
form表單提交數(shù)據(jù)的時(shí)候，必須有個(gè)submit按鈕
django的示例
from django.conf.urls import url
from django.shortcuts import HttpResponsedef upload(request):print("request.GET:", request.GET)print("request.POST:", request.POST)if request.FILES:filename = request.FILES["file"].namewith open(filename, 'wb') as f:for chunk in request.FILES['file'].chunks():f.write(chunk)return HttpResponse('上傳成功')return HttpResponse("收到了！")urlpatterns = [url(r'^upload/', upload),
]
10、input(都去練一下)
<input> 元素會(huì)根據(jù)不同的 type 屬性，變化為多種形態(tài)。
1、屬性說(shuō)明:
name： 表單提交時(shí)的“鍵”，注意和id的區(qū)別value： 表單提交時(shí)對(duì)應(yīng)項(xiàng)的值
type="button", "reset", "submit"時(shí)，為按鈕上顯示的文本年內(nèi)容
type="text","password","hidden"時(shí)，為輸入框的初始值
type="checkbox", "radio", "file"，為輸入相關(guān)聯(lián)的值checked： radio和checkbox默認(rèn)被選中的項(xiàng)
readonly： text和password設(shè)置只讀
disabled： 所有input均適用
11、select標(biāo)簽
<form action="" method="post"> <select name="city" id="city"> <option value="1">北京</option> <option selected="selected" value="2">上海</option> #默認(rèn)選中，當(dāng)屬性和值相同時(shí)，可以簡(jiǎn)寫(xiě)一個(gè)selected就行了 <option value="3">廣州</option> <option value="4">深圳</option> </select> </form> 1、屬性說(shuō)明
multiple：布爾屬性，設(shè)置后為多選下拉框，否則默認(rèn)單選
disabled：禁用
selected：默認(rèn)選中該項(xiàng)
value：定義提交時(shí)的選項(xiàng)值
12、label標(biāo)簽
定義：<label> 標(biāo)簽為 input 元素定義標(biāo)注（標(biāo)記）。
如果不用這個(gè)label給input標(biāo)簽一個(gè)標(biāo)記，input會(huì)變黃，不影響使用，
只是提示你，別忘了給用戶一些提示，也就是這個(gè)label標(biāo)簽。說(shuō)明：
1、label 元素不會(huì)向用戶呈現(xiàn)任何特殊效果。
但是點(diǎn)擊label標(biāo)簽里面的文本，那么和他關(guān)聯(lián)的input標(biāo)簽就獲得了光標(biāo)，讓你輸入內(nèi)容2、<label> 標(biāo)簽的 for 屬性值應(yīng)當(dāng)與相關(guān)元素的 id 屬性值相同。
<form action=""> <label for="username">用戶名</label> #for和input的id屬性一樣，就關(guān)聯(lián)在一起了 <input type="text" id="username" name="username"> </form> 13、textarea多行文本
<textarea name="memo" id="memo" cols="30" rows="10"> 默認(rèn)內(nèi)容 </textarea> 1、屬性說(shuō)明：
name：名稱
rows：行數(shù) #相當(dāng)于文本框高度設(shè)置
cols：列數(shù) #相當(dāng)于文本框長(zhǎng)度設(shè)置
disabled：禁用轉(zhuǎn)載于:https://www.cnblogs.com/yipianshuying/p/10126006.html
總結(jié)
以上是生活随笔為你收集整理的day042前端之HTML的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： OWASP TOP10(2017)
- 下一篇： ansible安装