第十四天 網頁初步
1.網頁基本知識（標紅的需牢記）css
標籤：html、head、bodyhtml
屬性寫在標籤括號內部,形式：<a 屬性1 屬性2> </a>。如：<a href="http://www.baidu.com" target="_blank"></a>前端
1 <!DOCTYPE html> 2 <!-- 相似html這種格式,就稱爲標籤，html標籤 ：<html>fasdfasdf</html> 3 # 標籤內部的屬性--> 4 <html lang="en"> <!--# html標籤開始，lang="en"叫作標籤的屬性--> 5 <head> <!-- 頭部--head標籤包括一下主要標籤：meta、title、link、style、script--> 6 <meta charset="UTF-8"> <!--設置網頁編碼，meta是自閉合標籤，就是不須要/meta --> 7 <!--<meta http-equiv="Refresh" Content="3">，設置頁面每3秒自動刷新--> 8 <!--<meta http-equiv="Refresh" Content="3;Url=http://www.autohome.com.cn">設置頁面每3秒自動跳轉--> 9 <meta name="keywords" content="汽車,汽車之家,汽車網,汽車報價,俱樂部"/> <!-- 關鍵字，讓搜索引擎搜索用的--> 10 <meta name="description" content="汽車之家是提供信息最快最全的中國汽車網站。"/><!-- 網站描述--> 11 12 <link rel="shortcut icon" href="image/favicon.ico"> <!-- rel="shortcut icon"表示要設置圖標，href是圖標所在路徑--> 13 <title>老男孩</title> 14 15 </head> 16 <body> 17 <!--<a href="http://www.oldboyedu.com">李 （空格符）>（大於符）<（小於符）a>傑</a>--> 18 19 <div></div> 20 21 <a href="http://www.oldboyedu.com">老男孩</a> 22 </body> 23 </html> #結束
[強制] 元素 id 必須保證頁面惟一。
解釋：html5
同一個頁面中，不一樣的元素包含相同的 id，不符合 id 的屬性含義。而且使用 document.getElementById 時可能致使難以追查的問題。python
[建議] id 建議單詞全字母小寫，單詞間以 - 分隔。同項目必須保持風格一致。
[建議] id、class 命名，在避免衝突並描述清楚的前提下儘量短。
示例：linux
<!-- good --> <div id="nav"></div> <!-- bad --> <div id="navigation"></div> <!-- good --> <p class="comment"></p> <!-- bad --> <p class="com"></p> <!-- good --> <span class="author"></span> <!-- bad --> <span class="red"></span>
2.web
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Title</title> 6 </head> 7 <body> 8 <p>12asdfasdfasdfasdfa<br />sdfasdfasdfasdf3</p> <!--p:段落 br：換行符--> 9 <p>123</p> 10 11 <h1>Alex</h1> <!--h1 到h6 ：設置標題，h1最大。h系列（字體加大加粗），p系列叫塊標籤（段落與段落之間有間距），一個塊標籤佔一行--> 12 <h2>Alex</h2> 13 <h3>Alex</h3> 14 <h4>Alex</h4> 15 <h5>Alex</h5> 16 <h6>eric</h6> 17 18 <span>hello</span> <!-- span爲行內標籤或內聯標籤，span爲白板，沒有特性，行內標籤不會換行--> 19 <span>hello</span> 20 <span>hello</span> 21 <span>hello</span> 22 23 <div>1</div> <!--div標籤是塊標籤，沒有任何屬性，是白板，可是和其餘塊標籤同樣會換行。標籤之間能夠嵌套 --> 24 <div>2</div> 25 <div>3</div> 26 27 <!--<a href="http://www.oldboyedu.com">李 （空格符）>（大於符）<（小於符）a>傑</a>--> 28 </body> 29 </html>
3.正則表達式
| HTML特殊字符編碼大全：往網頁中輸入特殊字符，需在html代碼中加入以&開頭的字母組合或以&#開頭的數字。下面就是以字母或數字表示的特殊符號大全。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| HTML經常使用特殊字符：只要你認識了 HTML 標記，你便會知道特殊字符的用處。 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
4.建立一個簡單的先後臺交互
前端：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <form action="http://192.168.1.31:8888/index" method="POST"> <!--form表單標籤，提交方式有GET和POST兩種。GET：將輸入的內容放到url上給後臺，在url上能看到，POST：將輸入的內容放到body裏給後臺。
action指定後臺程序的位置，'index'是後臺程序定義的--> 9 <input type="text" name="user" /> <!--輸入框--> 10 <input type="text" name="email"/> <!--輸入框--> 11 <input type="password" name="pwd"/> <!--密碼專用輸入框--> 12 <!--{'user': '用戶輸入的用戶','email': '用戶輸入的'email, 'pwd': '用戶輸入的密碼' }給後臺提交的數據是字典形式--> 13 <input type="button" value="登陸1"/> 14 <input type="submit" value="登陸2"/> <!--submit按鈕 提交表單數據--> 15 </form> 16 <br/> 17 <form> 18 <input type="text" /> 19 <input type="password" /> 20 <input type="button" value="登陸1"/> 21 <input type="submit" value="登陸2"/> 22 </form> 23 </body> 24 </html>
後臺程序：
算法
1 import tornado.ioloop 2 import tornado.web 3 4 5 # pip3 install tornado 6 7 class MainHandler(tornado.web.RequestHandler): 8 def get(self): #前臺以get方式提交數據，執行get函數 9 print(111) 10 u = self.get_argument('user') #獲取user，跟前臺form裏定義的名字要同樣 11 e = self.get_argument('email') #獲取email，跟前臺form裏定義的名字要同樣 12 p = self.get_argument('pwd') #獲取pwd，跟前臺form裏定義的名字要同樣 13 14 if u == 'wt' and p == '1' and e == 'alex@126.com': 15 self.write("OK") # self.write會將ok直接打印在網頁上 16 else: 17 self.write("滾") 18 19 def post(self, *args, **kwargs): #前臺以POST方式提交數據，執行post函數 20 u = self.get_argument('user', None) 21 e = self.get_argument('email', None) 22 p = self.get_argument('pwd', None) 23 print(u, e, p) 24 self.write('正在重啓，請稍後') 25 26 27 application = tornado.web.Application([ 28 (r"/index", MainHandler), #這裏定義了訪問路徑爲index，因此前端訪問後臺時也要指定爲index 29 ]) 30 if __name__ == "__main__": 31 application.listen(8888) 32 tornado.ioloop.IOLoop.instance().start()
5.input屬性編程
相關用法介紹：
body標籤 - 圖標， 空格 > > < < - p標籤，段落 - br，換行 ======== 小總結 ===== 全部標籤分爲： 塊級標籤： div（白板），H系列（加大加粗），p標籤（段落和段落之間有間距） 行內標籤： span（白板） 標籤之間能夠嵌套 標籤存在的意義，css操做，js操做 ps:chorme審查元素的使用 - 定位 - 查看樣式 - h系列 - div - span - input系列 + form標籤 input系列均可以給後臺送數據，只有一下三種能夠跟後臺送數據 input type='text' - name屬性，value="趙凡" （type爲字典的key，value=爲在按鈕上顯示的字） 送給後臺的數據形式：name:value input type='password' - name屬性，value="趙凡" （value=爲在按鈕上顯示的字） input type='submit' - value='提交'（value=爲在按鈕上顯示的字） 提交按鈕，表單 input type='button' - value='登陸' （value=爲在按鈕上顯示的字）按鈕 <input type='radio' name='gender' value='1'(不一樣的框能夠弄不一樣的值，做爲字典的value)/> - 單選框 value，checked="checked"（checked表示默認選中），name屬性（name相同則互斥） input type='checkbox' - 複選框 value, checked="checked"，name屬性（批量獲取數據） input type='file' - 依賴form表單的一個屬性 enctype="multipart/form-data"，有了轉讓我的屬性，文件纔會一點一點上傳 用法：<input type='file' enctype="multipart/form-data"> input type='rest' - 重置，將輸入框中的內容清空，而且不會將數據發送給後臺，也就是網頁剛打開時的狀態 <textarea name='task'>默認值value</textarea> - name屬性 textarea能夠跟後臺送數據 送給後臺的數據形式：name:value select標籤 下拉框 select能夠跟後臺送數據 送給後臺的數據形式：name:value - name,內部option value, 提交到後臺，size，multiple
2.設置兩個div的上下邊距
<div style="margin-bottom:10px;">設下邊距爲10像素</div>;
<div style="margin-top:10px;">設上邊距爲10像素</div>;
此外，還能夠用padding(內邊距)來定義，padding-top:10px; padding-bottom:10px; 定義上（下）邊距爲10px；
此法的好處是，當有浮動存在的時候，能夠解決ie6的雙邊距問題。
3.設置兩個div的左右邊距
<div style="margin-left:10px;">設左邊距爲10像素</div>;
<div style="margin-right:10px;">設右邊距爲10像素</div>;
例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <form enctype="multipart/form-data"> <!--設置能夠上傳文件，不加enctype屬性，則不能上傳文件--> 9 <div> 10 11 <textarea name="meno" >asdfasdf</textarea> #提交給後臺的數據是：meno=asdfasdf 12 13 <select name="city" size="10" multiple="multiple"> #size框的高度，默認爲1,；multiple能夠多選，按住crtl 14 <option value="1">北京</option> #提交給後臺的數據是city=1 15 <option value="2">上海</option> 16 <option value="3" selected="selected">南京</option> #默認選中南京 17 <option value="4">成都</option> 18 </select> 19 20 21 <input type="text" name="user" /> 22 <p>請選擇性別： 單選框</p> 23 男：<input type="radio" name="gender" value="1" /> <!--有3個性別，（name相同則互斥），name是返回給後臺字典的key，value是返回給後臺字典的值--> 24 女：<input type="radio" name="gender" value="2" checked="checked"/> #提交給後臺的數據是：name=2 25 Alex：<input type="radio" name="gender" value="3"/> 26 <p>愛好 複選框</p> 27 籃球：<input type="checkbox" name="favor" value="1" /> 28 足球：<input type="checkbox" name="favor" value="2" checked="checked" /> 29 皮球：<input type="checkbox" name="favor" value="3" /> 30 檯球：<input type="checkbox" name="favor" value="4" checked="checked"/> 31 網球：<input type="checkbox" name="favor" value="5" /> 32 <p>技能 複選框</p> 33 撩妹：<input type="checkbox" name="skill" checked="checked" /> 34 寫代碼：<input type="checkbox" name="skill"/> 35 <p>上傳文件</p> 36 <input type="file" name="fname"/> 37 </div> 38 39 40 41 42 43 <input type="submit" value="提交" /> 44 <input type="reset" value="重置" /> 45 </form> 46 </body> 47 </html>
6.- a標籤,作跳轉之用，只有a標籤能夠作跳轉
- 跳轉 href='http://www.baidu.com'
- 錨 href='#某個標籤的ID' 標籤的ID在同一個網頁中不容許重複
例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <a href="http://www.baidu.com" target="_blank">百度一下</a> <!--作跳轉，超連接--> 9 <a href="#i1">第一章</a> <!--作錨點，必須以#開頭，點一下錨點，就會跳轉到相應id的div--> 10 <a href="#i2">第二章</a> 11 <a href="#i3">第三章</a> 12 <a href="#i4">第四章</a> 13 14 <div id="i1" style="height:600px;">第一章的內容</div> <!--給div指定id，id在同一個網頁裏不能重複--> 15 <div id="i2" style="height:600px;">第二章的內容</div> 16 <div id="i3" style="height:600px;">第三章的內容</div> 17 <div id="i4" style="height:600px;">第四章的內容</div> 18 </body> 19 </html>
7.圖片列表
- img
src
alt
title
- 列表
ul 點
li
ol 數字
li
dl 列下邊是詳細內容
dt列明
dd詳細內容
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <a href="http://www.oldboyedu.com"> 9 <img src="1.jpg" title="大美女" style="height: 200px;width: 200px;" alt="美女"> 10 </a> 11 <!--用a標籤將圖片連接包裹起來，點一下圖片就能夠跳轉到相應網站。圖片連接格式：img src ='圖片路徑'，title=文字，style，alt=‘美女’（當圖片加載不出來，就會顯示alt的字）--> 12 <ul> <!--列表，前邊是點--> 13 <li>asdf</li> 14 <li>asdf</li> 15 <li>asdf</li> 16 <li>asdf</li> 17 </ul> 18 19 <ol> <!--列表，前邊是有序數字--> 20 <li>asdf</li> 21 <li>asdf</li> 22 <li>asdf</li> 23 <li>asdf</li> 24 </ol> 25 26 <dl> <!--列表，dt：是列明，dt：詳細內容--> 27 <dt>ttt</dt> 28 <dd>ddd</dd> 29 <dd>ddd</dd> 30 <dd>ddd</dd> 31 </dl> 32 </body> 33 </html>
8.表格：
- 表格
table 建表
thead 建表頭
<tr> 一行
<th> sds</th> 一個表頭格子
</tr>一行
tbody 建表身體
<tr> 一行
<td> sdsA</td> 一個格子A
<td> sdsB</td> 一個格子B，格子A和格子B橫着排列
</tr>一行
colspan = '2' 合併2行
rowspan = '2' 和並2列
例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 10 <table border="1"> <!--建立表 border指定邊框寬度，0爲無邊框 --> 11 <thead> <!--建立表頭 thead 包的是表頭--> 12 <tr> <!--tr表示一行 --> 13 <th>表頭1列</th> <!--th表示一列 --> 14 <th>表頭2列</th> 15 <th>表頭3列</th> 16 <th> 17 <a href="s2.html">查看詳細</a> <!-- 加個a標籤，使表格內的內容能夠跳轉 --> 18 <a href="#">修改</a> <!-- #表示不能夠跳轉 --> 19 </th> 20 </tr> 21 </thead> 22 <tbody> <!--建立表身體 --> 23 <tr> <!-- 建立一行--> 24 <td>1</td> <!--建立一列 --> 25 <td colspan="3">2</td> <!-- colspan="3":合併3個行單元格--> 26 </tr> 27 <tr> 28 <td rowspan="2">1</td> <!--rowspan="2"：合併2個列單元格 --> 29 <td>1</td> 30 <td>2</td> 31 </tr> 32 <tr> 33 <td>1</td> 34 <td>1</td> 35 <td>1</td> 36 </tr> 37 <tr> 38 <td>1</td> 39 <td>1</td> 40 <td>1</td> 41 <td>1</td> 42 </tr> 43 </tbody> 44 </table> 45 46 </body> 47 </html>
9.用一個邊框將用戶名、密碼包裹起來
- label
用於點擊文件，使得關聯的標籤獲取光標
<label for="username">用戶名：</label>
<input id="username" type="text" name="user" />
- fieldset
legend
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 10 <fieldset> #設置一個邊框 11 <legend>登陸</legend> <!-- 在邊框上寫字--> 12 <label for="username">用戶名：</label> <!-- 將框與文字關聯起來，點擊文字，框裏就有光標 這裏for與id的值得同樣才能關聯--> 13 <input id="username" type="text" name="user" /> 14 <br /> 15 <label for="pwd">密碼：</label> 16 <input id="pwd" type="text" name="user" /> 17 </fieldset> 18 </body> 19 </html>
10.css標籤屬性
CSS
在標籤上設置style屬性：
background-color: #2459a2;
height: 48px;
...
編寫css樣式：
1. 標籤的style屬性
例子：
<div style="">
</div>
2. 寫在head裏面 style標籤中寫樣式
- id選擇區
#i1{
background-color: #2459a2;
height: 48px;
}
- class選擇器 ****** 最經常使用*************
.名稱{
...
}
在body中這樣調用屬性
<標籤 class='名稱'> </標籤>
- 標籤選擇器
div{
...
}
全部div設置上此樣式
- 層級選擇器（空格） ******
.c1 .c2 div{
...
}
- 組合選擇器（逗號） ******
#c1,.c2,div{
...
}
- 屬性選擇器 ******
對選擇到的標籤再經過屬性再進行一次篩選
.c1[n='alex']{ width:100px; height:200px; }
PS: - 優先級，標籤上的style優先，而後按編寫順序，越靠近div的樣式越優先，也就是就近原則
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 /*<!--在head-->style標籤-->內設置樣式屬性，下邊建立一個樣式命名爲‘ .c1’，其餘div就可調用該樣式-->*/ 8 .c1{ 9 background-color: #2459a2; 10 height: 10px; 11 } 12 13 /*!* #c2{ *! 相似於c1，可是在div中能夠id=‘c2’*/ 14 /*background-color: black;*/ 15 /*color: white;*/ 16 /*}*/ 17 18 span div{ /*將span下的div設置爲如下屬性 */ 19 background-color: black; 20 color: white; 21 } 22 23 /* .c1 div{ 將c1下的div設置爲如下屬性 */ 24 /*background-color: black;*/ 25 /*color: white;*/ 26 /*}*/ 27 .i1,.i2,.i3{ 28 /*將i1，i2，i3所有設置爲如下樣式，.是對應div中的class；#i1，#i2，#i3對應id*/ 29 background-color: black; 30 color: white; 31 } 32 .c3[n='alex']{ width:100px; height:200px; } /*自定義屬性選擇器，命名爲.c1，[括號內設置相應值，表示有相應值的div設置本屬性]*/ 33 </style> 34 </head> 35 <body> 36 <div class="c1">ff</div> <!-- 調用上邊的.c1樣式--> 37 <div>kkkkk</div> 38 <div class="i1">ff</div> <!-- 調用上邊的.i1樣式--> 39 <div class="i2">ff</div> 40 <div class="i3">2</div> 41 <input class="c3" type="text" n="alex"> <!--調用上邊的自定義屬性--> 42 <input class="c1" type="password"> 43 </body> 44 </html>
11.一個div能夠有多個屬性
<div class="c1 c2 c3">ff</div>
12. 引用其餘css文件的樣式
例子：
寫一個common.css，該css文件用於讓其餘文件引用
1 .c2{ 2 font-size: 58px; 3 color: black; 4 } 5 6 .c1{ 7 background-color: red; 8 color: white; 9 }
再寫一個html，來引用這個css
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="css/commons.css" /> <!--commons.css的相對路徑--> 7 </head> 8 <body> 9 <div class="c1 c2" style="color: pink">asdf</div> 10 <div class="c1 c2" style="color: pink">asdf</div> 11 </body> 12 </html>
13.字體屬性
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div style="border: 1px solid red;"> <!-- 設置邊框樣式：寬度、樣式（虛線仍是實線）、顏色--> 9 asdfasdf 10 </div> 11 <div style=" <!--設置字體屬性--> 12 height: 48px; <!--字體高度--> 13 width:80%; <!--字體寬度--> 14 border: 1px solid red; <!--邊框屬性--> 15 font-size: 16px; <!--字體大小--> 16 text-align: center;<!--字體水平居中--> 17 line-height: 48px; <!--字體上下居中--> 18 font-weight: bold; <!--字體加粗--> 19 ">asdf</div> <!--文字--> 20 </body> 21 </html>
14.讓div等塊級標籤堆疊在一行，用float
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div style="width: 20%;background-color: red;float: left">1</div> 9 <div style="width: 20%;background-color: black;float: left">2</div> <!--若是這個div的寬度大於80%，則不會和上一個堆疊在一塊兒，由於和上一個相加大於100%，就會另起一行--> 10 </body> 11 </html>
15.改變行內標籤與塊級標籤屬性 display
display
******
行內標籤：沒法設置高度，寬度，邊距(padding margin)
塊級標籤：能夠設置高度，寬度，邊距(padding margin)
display: none; -- 讓標籤消失
display: inline; 將塊標籤變成行內標籤
display: block; 將行內標籤變成塊標籤
display: inline-block; 既具備行內標籤屬性,默認本身有多少佔多少
又具備塊標籤屬性，能夠設置高度，寬度，padding margin
例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <!--<div style="background-color: red;display: inline;">asdf</div> display: inline;將塊標籤變成行內標籤--> 9 <!--<span style="background-color: red;display: block;">asdf</span> display: block;將行內標籤變成塊標籤--> 10 <span style="display:inline-block;background-color: red;height: 50px;width: 70px;">Alex</span> <!-- 讓行內標籤既具備塊標籤屬性又有行內標籤屬性--> 11 <a style="background-color: red;">Eric</a> 12 </body> 13 </html>
16.綜合示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> /*<!-- 定義一個樣式--> */ 7 .pg-header{ 8 height: 38px; 9 background-color: #dddddd; 10 line-height: 38px; 11 } 12 </style> 13 </head> 14 <body style="margin: 0"> <!--將body與屏幕上沿的縫隙去掉--> 15 <div class="pg-header"> <!--應用自定義樣式--> 16 <div style="width: 980px;margin: 0 auto;"> 17 <div style="float: left;">收藏本站</div> <!--讓子div飄起來，能夠堆疊在一行--> 18 <div style="float: right;"> 19 <a>登陸</a> 20 <a>註冊</a> 21 </div> 22 <div style="clear: both"></div> 23 </div> 24 </div> 25 <div> 26 <div style="width: 980px;margin: 0 auto;"> <!--將本div設置爲980像素，將其設置爲外邊框爲0，左右自動居中--> 27 <div style="float: left"> 28 Logo 29 </div> 30 <div style="float: right"> 31 <div style="height: 50px;width: 100px;background-color: #dddddd">購物車</div> 32 </div> 33 <div style="clear: both"></div> <!--這裏必須設置一下clear，由於上邊倆div設置爲float浮動，不然下邊的紅色div會和上邊的這倆重疊--> 34 </div> 35 </div> 36 <div style="background-color: red;"> 37 <div style="width: 980px;margin: 0 auto;"> 38 asdfsdf 39 </div> 40 </div> 41 <div style="width: 300px;border: 1px solid red;"> 42 <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> 43 <div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div> 44 <div style="clear: both;"></div> <!--當子div飄起來後，父div就管不住子div了，用clear來約束子div--> 45 </div> 46 </body> 47 </html>
html經常使用標籤的使用方法
1 html標題
<h1> to <h6>
h1到h6演示代碼
2 html水平線 <hr/>
按 Ctrl+C 複製代碼
按 Ctrl+C 複製代碼
3 html註釋<!-- comment -->
註釋並不會顯示在網頁上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h6>h6</h6><!-- hello world --> <hr/> </body> </html>
4 html段落<p>以及段落換行<br/>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>hello world</p> <p>hello world</p> <hr/> </body> </html>
當顯示頁面時，瀏覽器會移除源代碼中多餘的空格和空行。全部連續的空格或空行都會被算做一個空格。須要注意的是，HTML 代碼中的全部連續的空行（換行）也被顯示爲一個空格。
段落換行使用<br/>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>hello world</p> <p>hello <br/> world</p> <hr/> </body> </html>
5 html文本格式化
6 html超連接<a>
<a>比較重要的屬性有兩個，分別是href、target
href指定超連接地址
target指定打開方式
_blank 新頁面打開
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>hello world</p> <a href="http://www.baidu.com">百度</a> <hr/> </body> </html>
另提供了較爲全面的<a>標籤使用方法連接：http://blog.csdn.net/ao_xiaoqiang/article/details/44345565
7 html的圖像<img>
使用格式：<img src="url">
alt 定義當圖片沒法加載時，顯示什麼信息
width 定義寬度，單位能夠爲像素 也能夠爲百分比
height 定義高度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>hello world</p> <a href="http://www.baidu.com"><img src="l.jpg"/></a> <hr/> </body> </html>
8 html的表格<table>
表格由<table>來定義，每行<tr> 有許多單元格<td>。表頭可使用<th>
<table>標籤屬性：
border 定義邊框
在<table>中能夠嵌入<th> <tr> <td>等標籤
<tr> 定義行
<th> 定義表頭
colspan 定義表頭單元格能夠橫跨的列數。
rowspan 定義表頭單元格橫跨的行數
heardes 定義與表頭單元格相關聯的一個或者多個單元格。(html5新增)
<td> 定義單元格
colspan 定義單元格能夠橫跨的列數。
rowspan 定義單元格橫跨的行數
heardes 定義與單元格相關聯的一個或者多個單元格。(html5新增)
按 Ctrl+C 複製代碼
按 Ctrl+C 複製代碼
在瀏覽器中顯示以下：
另外，若某個單元格爲空，瀏覽器可能沒法顯示出這個單元格的邊框。爲了防止這種狀況，能夠在該單元格加一個空格佔位符 。
9 html列表<ul> <ol>
列表分爲
無序列表<ul>
有序列表<ol>
列表項內部可使用段落、換行符、圖片、連接以及其餘列表等等
<ul> <li>male</li> <li>female</li> </ul> <hr/> <ol> <li>male</li> <li>female</li> </ol>
瀏覽器顯示爲：
10 html表單<form>
表單是一個包含表單元素的區域。
表單元素是容許用戶在表單中（好比：文本域、下拉列表、單選框、複選框等等）輸入信息的元素
<form>中的屬性：
action：後面加url 指定當提交表單時向何處發送表單數據
method：get/post兩個值，get爲明文 post爲加密
name：指定表單的名稱
target：_blanket _self _parent _top 指定網頁打開方式
<from>標籤中較爲經常使用的標籤有<input> <select> <label> <button>
<fieldset> 標籤能夠將表單內的相關元素分組。 會在相關表單元素周圍繪製邊框。
name 規定fieldset的名稱
form 值：form_id 規定fieldset所屬的表單
<legend> 定義了 <fieldset> 元素的標題。
<input>中最爲經常使用的幾個屬性:
form 後面跟所屬form的id。規定所屬的form
required 值：required 規定必需在提交表單以前填寫輸入字段。
disabled 值： disabled disabled 屬性規定應該禁用的 <input> 元素。
type:決定輸入類型
text 文本域
radio 單選按鈕
checkbox 複選框
submit 提交按鈕
password 密碼輸入
reset 重置
color 設置拾色器 html5
number 定義用於輸入數字的字段（您能夠設置可接受數字的限制）
range 定義用於精確值不重要的輸入數字的控件（好比 slider 控件）。您也能夠設置可接受數字的限制
name:input元素的名稱
value：input元素的值
size：輸入字段的寬度
pattern 規定用於驗證 <input> 元素的值的正則表達式。pattern 屬性適用於下面的 input 類型：text、search、url、tel、email 和 password
list 值爲datalist的id 該屬性引用 <datalist> 元素，其中包含 <input> 元素的預約義選項。
autofocus 該屬性是一個 boolean 屬性，讓頁面載入後，input自動得到焦點
<datalist> html5中的新特性 標籤規定了 <input> 元素可能的選項列表。<datalist> 標籤被用來在爲 <input> 元素提供"自動完成"的特性。
用戶能看到一個下拉列表，裏邊的選項是預先定義好的，將做爲用戶的輸入數據。
與<option>標籤配合使用
<button> 定義一個點擊按鈕
form 所屬的form表單
name button名稱
type
button 該按鈕是可點擊的按鈕
reset 該按鈕是重置按鈕
submit 該按鈕是提交按鈕
<label>標籤爲 input 元素定義標註（標記）
label 元素不會向用戶呈現任何特殊效果。不過，它爲鼠標用戶改進了可用性。若是您在 label 元素內點擊文本，就會觸發此控件。
就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上
for 值爲某個元素的id 規定 label 與哪一個表單元素綁定。
form form_id
<textarea>
name 規定textarea的名稱
form form_id 規定從屬的表單
cols 規定可見列數
rows 規定可見行數
<select>使用<option>標籤訂義下拉列表的可用選項.常見的屬性：
name：指定select名稱
multiple：規定可選擇多個選項
<optgroup> 用於把相關的選項組合在一塊兒。
label 爲選項組規定描述。
<option> 常見的屬性：
value：指定送往服務器的選項值
selected：只有一個值--selected 默認選項
<keygen> 定義了表單的密鑰對生成器字段
form 所屬的表單名稱
name 名稱
keytype 使用的加密算法
rsa 默認的算法
dsa
es
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form name="biaoge" action="/return/" method="get"> 請選擇語言: <br/><br/><input type="radio" name="language" id="jtzw" value="chinese"/><label for="jtzw">簡體中文</label><br/><br/> <input type="radio" name="language" value="english" id="eng"/><label for="eng">English</label><br/><br/> 請選擇熟悉的編程語言:<br/><br/> <fieldset> <legend>編程語言</legend> <input type="checkbox" name="python" />python <input type="checkbox" name="c" />c <input type="checkbox" name="swift" />swift<br/><br/> </fieldset><br/> 請選擇地區： <select name="district"> <optgroup label="China"> <option value="shandong">山東</option> <option value="zhejiang" selected="selected">浙江</option> <option value="guangdong">廣東</option> </optgroup> <optgroup label="USA"> <option value="ny">紐約</option> <option value="lsj">洛杉磯</option> </optgroup> </select><br/><br/> 請選擇顏色:<input type="color"><br/><br/> name:<input type="text" name="name" value="slyoyo"/> password:<input type="password" name="passwd" value="hahaha"/> <input type="submit" value="login"/><br/><