<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)系客服
