<form> 表單標(biāo)簽,在html頁面創(chuàng)建一個(gè)表單,表單標(biāo)簽在瀏覽器上沒有任何顯示。如果數(shù)據(jù)需要提交到服務(wù)器,負(fù)責(zé)收集數(shù)據(jù)的標(biāo)簽必須放在表單標(biāo)簽體內(nèi)容。
action屬性:請(qǐng)求路徑,確定表單提交到服務(wù)器的地址(路徑)
method屬性:請(qǐng)求方式。常用的取值:get、post
get:默認(rèn)值
提交的數(shù)據(jù)追加在請(qǐng)求路徑上。例如:/1.html?username=alex&password=1234,數(shù)據(jù)格式k/v,追加是使用?連接,之后每一對(duì)數(shù)據(jù)使用&連接
因?yàn)檎?qǐng)求路徑長度有限,所有g(shù)et請(qǐng)求提交的數(shù)據(jù)有限。
post:
提交的數(shù)據(jù)不再請(qǐng)求路徑上追加(既不顯示在地址欄上)
提交的數(shù)據(jù)大小不顯示
<body> <!-- 表單 --> <form action="" method=""> <!-- 此處的內(nèi)容可能被提交到服務(wù)器 --> </form> <!-- 此處的內(nèi)容在<form>標(biāo)簽外部,此處數(shù)據(jù)不能提交到表單 --></body>
<input> 標(biāo)簽用于獲得用戶輸入信息,type屬性值不同,收集方式不同。最常用的標(biāo)簽。
rype屬性
text:文本框,單行的輸入字段,用戶可在其中輸入文本。默認(rèn)寬度為20個(gè)字符
password:密碼框,密碼字段。該字段中的字符以黑圓顯示。
radio:?jiǎn)芜x框,表示一組互斥選項(xiàng)按鈕中的一個(gè)。當(dāng)一個(gè)按鈕被選中,之前選中的按鈕就變?yōu)榉沁x中的。
submit:提交按鈕。提交按鈕會(huì)把表單數(shù)據(jù)發(fā)送到服務(wù)器。一般不寫name屬性,否則將"提交"兩個(gè)字提交到服務(wù)器。
因?yàn)椴煌?xiàng)目需要的字段不同,所以我沒有把所有的表單元素寫出來,以下標(biāo)簽使用也需要大家掌握。
checkbox:復(fù)選框
filee:文件上傳組件,提供"瀏覽",按下可以選擇需要上傳的文件。
hidden:隱藏字段,數(shù)據(jù)會(huì)發(fā)送給服務(wù)器,但是瀏覽器不進(jìn)行顯示。
reset:重置按鈕。將表單恢復(fù)到默認(rèn)值。
image:圖像提交按鈕,通過src給按鈕設(shè)置圖片。
button:普通按鈕,常用于與JavaScript結(jié)合使用。
name:元素名,如果需要表單數(shù)據(jù)提交到服務(wù)器,必須提供name屬性值,服務(wù)器通過屬性值獲得提交的數(shù)據(jù)。
value:設(shè)置input標(biāo)簽的默認(rèn)值。submit和reset按鈕提交數(shù)據(jù)
size:大小
checked屬性:?jiǎn)芜x框或者復(fù)選框被選中。
readonly:是否只讀
disabled:是否可用
maxlength:允許輸入的最大長度
<select> 下拉列表??捎眠M(jìn)行單選或多選。需要使用子標(biāo)簽<option>指定列表項(xiàng)
name 屬性:發(fā)送給服務(wù)器的名稱
multiple屬性:不寫默認(rèn)單選,取值為"multiple"表示多選
size屬性:多選時(shí),可見選項(xiàng)的數(shù)目。
<option> 子標(biāo)簽:下拉列表中的一個(gè)選項(xiàng)(一個(gè)條目)
selected:勾選當(dāng)前列表項(xiàng)
value:發(fā)送給服務(wù)器的選項(xiàng)值。
<textarea> 文本域。多行的文本輸入控件。
cols屬性:文本域的列數(shù)
rows屬性:文本域的行數(shù)
<button type="button|reset|submit"> 按鈕標(biāo)簽一般很少使用,提供"普通|重置|提交"功能,不同的瀏覽器默認(rèn)值不同。
div就是html一個(gè)普通標(biāo)簽,進(jìn)行區(qū)域劃分。特性:獨(dú)占一行。獨(dú)自不能實(shí)現(xiàn)復(fù)雜效果。必須結(jié)合CSS樣式進(jìn)行渲染。
div通常其是塊級(jí)元素
<div> 可定義文檔中的分區(qū)或節(jié)(division/section)。<div> 標(biāo)簽可以把文檔分割為獨(dú)立的、不同的部分。它可以用作嚴(yán)格的組織工具,并且不使用任何格式與其關(guān)聯(lián)。如果用 id 或 class 來標(biāo)記 <div>,那么該標(biāo)簽的作用會(huì)變得更加有效。
CSS通常稱為CSS樣式或?qū)盈B樣式表,主要用于設(shè)置HTML頁面中的文本內(nèi)容(字體、大小、對(duì)齊方式等)、圖片的外形(高寬、邊框樣式、邊距等)以及版面的布局等外觀顯示樣式。
CSS可以使HTML頁面更好看,CSS色系的搭配可以讓用戶更舒服,CSS DIV布局更加靈活,更容易繪制出用戶需要的結(jié)構(gòu)。
CSS(Cascading Style Sheets):指層疊樣式表
樣式:給HTML標(biāo)簽添加需要顯示的效果。
層疊:使用不同的添加方式,給同一個(gè)HTML標(biāo)簽添加樣式,最后所有的樣式都疊加到一起,共同作用于該標(biāo)簽。
使用HTML時(shí),需要遵從一定的規(guī)范。CSS亦如此,想要熟練的使用CSS對(duì)網(wǎng)頁進(jìn)行修飾,首先需要了解CSS樣式規(guī)則。具體格式如下
選擇器{屬性1:屬性值;屬性2:屬性值;..}
在上面的樣式規(guī)則中,“選擇器”用于指定CSS樣式作用的HTML對(duì)象,花括號(hào)內(nèi)是對(duì)該對(duì)象設(shè)置的具體樣式。屬性和屬性值以鍵值對(duì)方式出現(xiàn),使用英文冒號(hào)“:”分隔。多個(gè)屬性之間使用英文分號(hào)“;”分隔。例如:
<style> h2{ color: red; font-size: 100px; }</style>
初學(xué)者在書寫CSS樣式時(shí),除了要遵循CSS樣式規(guī)則,還必須注意CSS代碼結(jié)構(gòu)中的幾個(gè)特點(diǎn),具體如下:
CSS樣式“選擇器”嚴(yán)格區(qū)分大小寫,“屬性”和“屬性值”不區(qū)分大小寫。
多個(gè)屬性之間必須用英文狀態(tài)下的分號(hào)隔開,最后一個(gè)屬性后的分號(hào)可以省略,但是,為了便于增加新樣式最好保留。
如果屬性的值由多個(gè)單詞組成且之間包含空格,則必須為這個(gè)屬性值加上英文狀態(tài)下的引號(hào)。例如:
p{font-family:"Times New Roman";}
在編寫CSS代碼時(shí),為了提高代碼的可讀性,通常會(huì)加上CSS注釋,例如:
/* 這是css注釋文本,此文本不會(huì)顯示在瀏覽器窗口中 */
在CSS代碼中空格是不被解析的,花括號(hào)以及分號(hào)前后的空格可有可無。因此,可以使用空格鍵、Tab鍵、回車鍵等對(duì)樣式代碼進(jìn)行排版,即所謂的格式化CSS代碼,這樣可以提高代碼的可讀性。例如:
h1{color: red; font-size: 20px;}
和
<style> h1{ color: red; /* 定義字體大小屬性 */ font-size: 20px; /* 定義顏色屬性 */ }</style>
上述兩段代碼所呈現(xiàn)的效果是一樣的,但是,第二種書寫方式的可讀性更高。需要注意的是,屬性的值和單位之間是不允許出現(xiàn)空格的,否則瀏覽器解析時(shí)會(huì)出錯(cuò)。例如,下面這行代碼就是不正確的。
h1{ font-size:20 px;} /* 20和單位px之間有空格 */
CSS使用非常靈活,即可以嵌入在HTML文檔中,也可以是一個(gè)單獨(dú)的文件,如果是單獨(dú)的文件,則必須以.css為擴(kuò)展名。CSS和HTML的結(jié)合3種常用方式:
(1)行內(nèi)樣式
行內(nèi)樣式,是通過標(biāo)簽的style屬性來設(shè)置元素的樣式。
<!-- 方式1:行內(nèi)樣式
color : 表示字體顏色
font-size : 表示字體大小
-->
<a style="color: #f00; font-size: 30px;">小灰灰</a>
?
?行內(nèi)樣式通過標(biāo)簽的屬性來控制樣式,這樣并沒有做到結(jié)構(gòu)與表現(xiàn)(HTML展示結(jié)構(gòu)、CSS顯示效果)相分離,所有一般很少使用。學(xué)習(xí)階段有時(shí)候?yàn)榱丝焖倬幊?,偶爾使用?/p>
(2)內(nèi)部樣式
內(nèi)部樣式又稱為內(nèi)嵌式,是將CSS代碼集中卸載HTML文檔的<head>頭部標(biāo)簽體中,并且使用<style>標(biāo)簽定義。
給當(dāng)前html文件中的多個(gè)標(biāo)簽設(shè)置樣式。
在html的<head>標(biāo)簽中使用<style>標(biāo)簽來定義CSS
<!-- 方式2:內(nèi)部樣式 background-color :表示背景色--><style type="text/css"> body{ background-color: #ddd; }</style>
?
?
?
?(3)外部樣式
外部樣式又稱為鏈入式,是將所有的樣式放在一個(gè)或多個(gè)以.css為擴(kuò)展名的外部樣式表文件中,通過<link>標(biāo)簽將樣式連接到HTML文檔中。
<!-- 方式3:外部樣式 rel="stylesheet",固定值,表示樣式表 type="text/css",固定值,表示css類型 href,表示css文件位置 font-family 表示使用的字體系列,多個(gè)字體使用逗號(hào)分隔。例如:"字體1,字體2,字體3",此時(shí)優(yōu)先使用"字體1",如果"字體1"系統(tǒng)不存在,再使用"字體2",以此類推。 --><link rel="stylesheet" type="text/css" href="css/demo00.css"/>
?
?
?鏈入式最大的好處是同一個(gè)CSS樣式表可以被不同的HTML頁面鏈接使用,同時(shí)一個(gè)HTML頁面也可以通過多個(gè)<link/>標(biāo)記鏈接多個(gè)CSS樣式表。
想要將CSS樣式應(yīng)用于特定的HTML元素,首先需要找到該目標(biāo)元素。在CSS中,執(zhí)行這一任務(wù)的樣式規(guī)則不符被稱為選擇器,本小節(jié)將對(duì)CSS基礎(chǔ)選擇器進(jìn)行詳細(xì)地講解,具體如下:
標(biāo)記選擇器是指用HTML標(biāo)記名稱作為選擇器,按標(biāo)記名稱分類,為頁面中某一類標(biāo)記指定統(tǒng)一的CSS樣式。其基本語法格式如下:
標(biāo)記名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
該語法中,所有的HTML標(biāo)記名都可以作為標(biāo)記選擇器,例如body、h1、p、strong等。用標(biāo)記選擇器定義的樣式對(duì)頁面中該類型的所有標(biāo)記都有效
例如:
<head> <style type="text/css"> h1{ color: #F00; font-size: 50px; } </style> <meta charset="utf-8" /> <title>超鏈接</title> </head><body> <h1>小灰灰一號(hào)</h1> <h1>小灰灰二號(hào)</h1> <h1>小灰灰三號(hào)</h1></body>
?
?標(biāo)記選擇器最大的優(yōu)點(diǎn)是能快速為頁面中同類型的標(biāo)記統(tǒng)一樣式,同時(shí)這也是他的缺點(diǎn),不能設(shè)計(jì)差異化樣式
?id選擇器使用"#"進(jìn)行標(biāo)識(shí),后面緊跟id名,其基本語法格式如下:
#id名{ 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
該語法中,id名即為HTML元素的id屬性值,大多數(shù)HTML元素都可以定義id屬性,元素的id值是唯一的,只能對(duì)應(yīng)于文檔中某一個(gè)具體的元素。
例如:
<head> <style type="text/css"> #demo1{ color: #0f0; } </style> <meta charset="utf-8" /> <title>超鏈接</title></head><body> <h1 id="demo1">小灰灰</h1></body>
?
類選擇器使用“.”(英文點(diǎn)號(hào))進(jìn)行標(biāo)識(shí),后面緊跟類名,其基本語法格式如下:
.類名{ 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
該語法中,id名即為HTML元素的class屬性值,大多數(shù)HTML元素都可以定義class屬性。類選擇器最大的優(yōu)勢(shì)是可以為元素對(duì)象定義單獨(dú)或相同的樣式。
例如:
<head> <style type="text/css"> .myClass{ font-size: 25px; } </style> <meta charset="utf-8" /> <title>超鏈接</title> </head><body> <h1 class="myClass">小灰灰</h1></body>
?
?
?類選擇器的高級(jí)用法:給指定的標(biāo)簽設(shè)置class樣式
標(biāo)簽.類名 { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
屬性選擇器,在標(biāo)簽后面是有中括號(hào)標(biāo)記,其基本語法格式如下:
標(biāo)簽名 [標(biāo)簽屬性='標(biāo)簽屬性值'] {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}
該選擇器,是對(duì)"元素選擇器"的擴(kuò)展,對(duì)一組標(biāo)簽進(jìn)一步過濾。
例如:
<head> <style type="text/css"> input[type="text"]{ background-color: yellow; } input[type="password"]{ background-color: green; } </style> <meta charset="utf-8" /> <title>超鏈接</title> </head> <body> <form action="" method="post"> <input type="text" id="" value="" /> <input type="password" name="" /> </form> </body>
?
?
?
包含選擇器,兩個(gè)標(biāo)簽之間使用空格,給指定父標(biāo)簽的后代標(biāo)簽設(shè)置樣式,可以方便在區(qū)域內(nèi)編寫樣式。
父標(biāo)簽 后代標(biāo)簽{ 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }
該選擇器,是對(duì)"元素選擇器"的擴(kuò)展,對(duì)一個(gè)標(biāo)簽內(nèi)部所有后代標(biāo)簽進(jìn)行過濾。
<head> <style type="text/css"> #d1 div{ color: red; } </style> <meta charset="utf-8" /> <title>超鏈接</title> </head> <body> <div id="d1"> <div id="d2"> 小灰灰1 </div> <span id="s1"> 小灰灰2 </span> </div> </body>
?
?
border:設(shè)置邊框的樣式
格式:寬度 樣式 顏色
例如:style="border:1px solid #f00" ,1像素實(shí)邊紅色。
樣式取值:solid 實(shí)線,none 無邊, double 雙線 等
width、height:用于設(shè)置標(biāo)簽的寬度、高度。
<head> <style type="text/css"> div{ border: 1px solid #000; /* 1像素,實(shí)邊,黑色*/ width:200px; height:200px; } </style> <meta charset="utf-8" /> <title>超鏈接</title> </head> <body> <div id=""> 小灰灰 </div> </body>
?
?
通常默認(rèn)的排版方式,將頁面中的元素從上到下一一羅列,而實(shí)際開發(fā)中,需要左右方式進(jìn)行排版,就需要使用浮動(dòng)
選擇器{float:屬性值} 常用屬性值: left:元素向左浮動(dòng) right:元素向右浮動(dòng) none:元素不浮動(dòng)(默認(rèn)值)
由于浮動(dòng)元素不再占用原文檔流的位置,所以它會(huì)對(duì)頁面中其他元素的排版產(chǎn)生影響。如果要避免影響,需要使用clear屬性進(jìn)行清除浮動(dòng)。
選擇器{clear:屬性值;} 常用屬性值: left:不允許左側(cè)有浮動(dòng)元素(清除左側(cè)浮動(dòng)的影響) right:不允許右側(cè)有浮動(dòng)元素(清除右側(cè)浮動(dòng)的影響) both:同時(shí)清除左右兩側(cè)浮動(dòng)的影響
例如:
<head>
<meta charset="utf-8" />
<title>超鏈接</title>
</head>
<body>
<!-- 默認(rèn)上下布局 -->
<div>
<div>區(qū)域1-1</div>
<div>區(qū)域1-2</div>
</div>
<hr />
<!-- 浮動(dòng)左右布局 -->
<div>
<div style="float: left;">區(qū)域2-1</div>
<div style="float: left;">區(qū)域2-2</div>
</div>
<!-- 取消浮動(dòng),另起一行布局 -->
<div style="clear: both;"></div>
<hr />
<div>
<div style="float: left;">區(qū)域3-1</div>
<div style="float: left;">區(qū)域3-2</div>
<div style="float: left;">區(qū)域3-3</div>
</div>
</body>
?
?
HTML提供豐富的標(biāo)簽,這些標(biāo)簽被定義成了不同的類型,一般分為:塊標(biāo)簽和行內(nèi)標(biāo)簽。
塊標(biāo)簽:以區(qū)域塊方式出現(xiàn)。每個(gè)塊標(biāo)簽獨(dú)占一整行或多整行。
常見的塊元素:<h1>、<div>、<ul>等
行內(nèi)元素:不必再新一行開始,同時(shí)也不強(qiáng)迫其他元素在新的一行顯示。
常見的行內(nèi)元素:<span>、<a>等
在開發(fā)中,希望行內(nèi)元素具有塊元素的特性,需要使用display進(jìn)行轉(zhuǎn)換
選擇器{ display:屬性值} 常用的屬性值: inline:此元素將顯示為行內(nèi)元素(行內(nèi)元素默認(rèn)的display屬性值) block:此元素將顯示為塊元素(塊元素默認(rèn)的display屬性值) inline-block:將對(duì)象呈遞為內(nèi)聯(lián)對(duì)象,但是對(duì)象的內(nèi)容作為塊對(duì)象呈遞。 none:此元素將被隱藏,不顯示,也不占用頁面空間。
例如:
?
<head> <style type="text/css"> span{ border: 1px solid #000; width: 100px; height: 40px; } </style> <meta charset="utf-8" /> <title>超鏈接</title> </head> <body> <!-- 默認(rèn)顯示一行、邊框環(huán)繞,高寬沒有作用 --> <span>顯示1-1</span> <span>顯示1-2</span> <!-- 每一行顯示,高寬有作用 --> <span style="display: block;">顯示2-1</span> <span style="display: block;">顯示2-2</span> </body>
?
?2.4.4 字體:color、font-size
color:顏色,字體顏色
例如:
<head> <meta charset="utf-8" /> <title>超鏈接</title> </head> <body> <div style="height: 50px;width: 200px;border: 1px solid #000;"> <a href="">點(diǎn)擊</a> <a href="" style="text-decoration: none;">點(diǎn)擊</a> </div> <div style="height: 50px;width: 200px;border: 1px solid #000;"> <a href="" style="line-height: 50px;">點(diǎn)擊</a> <a href="" style="color: red;">點(diǎn)擊</a> </div> </body>
?
<ul style="background-color: #999;color: #FFF;"> <li>點(diǎn)擊</li> <li>點(diǎn)擊</li> <li style="background-color: #000;">點(diǎn)擊</li> <li>點(diǎn)擊</li></ul>
?
CSS框模型(Box Model)規(guī)定了元素框處理元素內(nèi)容、內(nèi)邊距、邊框和外邊距的方式。
?
例如,如果您希望所有h1元素的個(gè)邊都有10px的內(nèi)邊距,只需要這樣:
h1{ padding:10px;}
還可以按照上、右、下、左的順序分別設(shè)置各邊的內(nèi)邊距,各邊均可以使用不同的單位或百分比值:
h1 {padding:10px 0.25em 2ex 20%}
單邊內(nèi)邊距屬性
也通過使用下面四個(gè)單獨(dú)的屬性,分別設(shè)置上、右、下、左內(nèi)邊距:
padding-top
padding-right
padding-bottom
padding-left
border-top-style
border-right-style
border-bottom-style
border-left-style
margin-top
margin-right
margin-bottom
margin-left
來源:https://www.icode9.com/content-1-510101.html聯(lián)系客服