整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
文簡單介紹如何通過CSS實現常見元素的水平、垂直居中。
這種情況最簡單，只需要將行內元素包括在一個display屬性為block的父元素中，并且設置父元素text-align為居中即可
.border {
width: 400px;
line-height: 100px;
border: 1px solid red;
text-align: center;
}<div class="border">
<span>行內元素</span>
</div>對塊狀元素設置相應的外邊距即可，外邊距左、右設置為auto。
.parent {
width: 400px;
height: 100px;
border: 1px solid red;
}
.block-child {
width: 100px;
border: 2px solid black;
margin: 10px auto;
text-align: center;
}<div class="parent">
<div class="block-child">塊狀元素</div>
</div>傳統方法，在父元素設置text-align:center; 然后將需要居中的塊狀元素的display設置為inline-block
.border {
width: 400px;
line-height: 100px;
border: 1px solid red;
text-align: center;
}
.inline-block {
display: inline-block;
border: 1px solid black;
} <div class="border">
<div class="inline-block">塊狀元素1</div>
<div class="inline-block">塊狀元素2</div>
<div class="inline-block">塊狀元素3</div>
</div>使用flex布局實現，將父元素display設置為flex，同時設置子元素對齊。
.parent-flex {
width: 400px;
border: 1px solid red;
display: flex;
justify-content: center;
}<div class="parent-flex">
<div style="border: 1px solid black;">塊狀元素1</div>
<div style="border: 1px solid black;">塊狀元素2</div>
<div style="border: 1px solid black;">塊狀元素3</div>
</div>將行內元素的 line-height 屬性與其父元素的 height 屬性設置為相同值，比如都是40px。
通過設置父元素display屬性為table-cell，及其他相關屬性解決。
.parent-table-cell {
width: 400px;
height: 100px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
}<div class="parent-table-cell">
<span>行內元素1</span><br>
<span>行內元素2</span><br>
<span>行內元素3</span>
</div>結合元素的position及margin屬性，通過定位設置居中，父元素position設置為relative。
.item{
top: 50%; // 頂部位置位于父元素的50%處
margin-top: -50px; // margin-top 值為自身高度的一半
position: absolute; //position也可以是
}注意：如果規定了 !DOCTYPE，則 Internet Explorer 8 （以及更高版本）支持display屬性值 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、以及 "inherit"。
喜歡就關注支持一下吧。[呲牙][呲牙]
SS基礎教程（上）成哥為大家介紹了CSS的基礎知識及選擇器，本篇文章主要介紹CSS的常用樣式屬性及偽類等內容，下面成哥就為大家一一介紹這些內容。
CSS的基礎樣式如下表所示：
下面我們主要講解一下常用的樣式。
（1）display樣式
display屬性有四個常用的值，用來修改標簽的展示狀態：
1）display:block，將標簽設置為塊級標簽，塊級標簽獨自占據一行高度，可以自定義width 和height，每個塊級元素都從新一行開始，并且其后的元素都另起一行，常見的塊級標簽有div、h{number}、p、ul、table等；
2）display:inline，將標簽設置為行內標簽，行內標簽會在一條直線上排列，不可以自定義自定義width和height，常見的行內元素有a、span等；
3）display:inline-block，將便簽設置為行內塊級標簽（行內標簽與塊級標簽的結合），可以自定義width和height，常見原生就是行內塊級標簽的有input、img標簽；
4）display:none，隱藏標簽，使用了該設置的標簽在html頁面中不顯示。
下面我們對上述四種樣式設置進行演示具體如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. </head>
6. <body>
7. <h4>塊級標簽示例</h4>
8. <!-- 我們將行內標簽span設置為塊級標簽，最終效果設置成span效果的標簽會獨占一行，行內標簽設置高度不生效，塊級標簽設置高度生效 -->
9. <span style="background-color: #2eabff; height: 40px;">我是span1,我是行內標簽在同一行，設置高度沒生效</span>
10. <span style="background-color: #722ed1; height: 60px;">我是span2,我是行內標簽在同一行，設置高度沒生效</span>
11. <span style="display: block; background-color: #87e8de; height: 50px;">我是span3,我被設置
12. 成塊級標簽我獨占一行，設置高度生效</span>
13.
14. <h4>行內標簽示例</h4>
15. <!-- 將塊級標簽div設置成行內標簽，讓其在同行顯示, 并且對其設置高度不會生效 -->
16. <div style="display: inline; background-color: #722ed1; height: 50px;">我是div1,我被設置成行內標簽，
17. 所以和div2在同行顯示，設置高度沒生效</div>
18. <div style="display: inline; background-color: #52c41a; height: 50px;">我是div2,我被設置成行內標簽，
19. 所以和div1在同行顯示，設置高度沒生效</div>
20.
21. <h4>行內塊級標簽示例</h4>
22. <!-- 將div模塊設置成行內塊級標簽，可以讓其在同行顯示，同時還可以設置高度 -->
23. <div style="display: inline-block;background-color: #a0d911;height: 60px;">我是div3,
24. 被設置成行內塊級標簽，可同行顯示，設置高度生效</div>
25. <div style="display: inline-block;background-color: #aaaaaa;height: 50px;">我是div4,
26. 被設置成行內塊級標簽，可同行顯示，設置高度生效</div>
27.
28. <h4>display:none示例</h4>
29. <span>我下面還有內容但被設置成display:none所以看不到，可以通過游覽器頁面內容debug中看到</span>
30. <div style="display: none">我被隱藏了</div>
31. </body>
32. </html> （2）高度與寬度樣式
height與width是用于設置html標簽的寬度與高度的，其設置的單位通常有像素與百分比。如果height需要設置成百分比，那需要在其外面套一個父標簽并設置其高度才可以，因為html高度是無限制的所以直接使用是無效的。height與width屬性的其具體使用如下所示：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <style>
6. .class1{
7. width: 300px;
8. height: 60px;
9. background-color: coral;
10. }
11. .class2{
12. width: 50%;
13. height: 10%;
14. background-color: #2aabd2;
15. }
16. </style>
17. </head>
18. <body>
19. <h4>height與width設置示例</h4>
20. <div class="class1">寬300像素，高60像素</div>
21.
22. <!-- 由于class2中使用了為百分比的高度，所以必須在其外加上父標簽同時需要設置其高度 -->
23. <div style="height: 500px">
24. <div class="class2">寬50%，高10%</div>
25. </div>
26.
27. </body>
28. </html> （3）字體樣式
CSS可以對HTML的字體類型、字體大小、字體粗細及字體顏色等維度進行設置，其具體示例如下所示：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <style>
6. .class1{
7. font-family: "Microsoft YaHei";
8. }
9. .class2{
10. font-size: 15px;
11. }
12.
13. .class3{
14. font-weight: bold;
15. }
16.
17. .class4{
18. color: red;
19. }
20. </style>
21. </head>
22. <body>
23. <h4>1.字體類型示例</h4>
24. <div class="class1">我是微軟雅黑</div>
25.
26. <h4>2.字體大小示例</h4>
27. <div class="class2">大?。?5px</div>
28.
29. <h4>3.字體粗細示例</h4>
30. <div class="class3">我被加粗了</div>
31.
32. <h4>4.字體顏色示例</h4>
33. <div class="class4">我是紅色</div>
34.
35. </body>
36. </html> （4）文本樣式
CSS的文本樣式中最常用的屬性就是對文本的對齊方式進行設置，在水平方向可以設置左、中、右對齊方式，在垂直方向可以設置上、中、下對齊方式，具體示例如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <style>
6. .class1{
7. width: 300px;
8. height: 40px;
9. }
10.
11. </style>
12. </head>
13. <body>
14.
15. <h4>1.水平方向設置</h4>
16. <div class="class1" style="background-color: rosybrown;text-align: left;">左對齊</div>
17. <div class="class1" style="background-color: #2eabff;text-align: center;">居中</div>
18. <div class="class1" style="background-color: coral; text-align: right;">右對齊</div>
19.
20. <h4>2.垂直方向設置</h4>
21. <div class="class1" style="background-color: #b7eb8f;">默認文字在垂直方向是靠最上排列</div>
22. <!-- 垂直居中就是將line-height的值設置與高度一致 -->
23. <div class="class1" style="background-color: darkseagreen;line-height: 40px;">垂直居中</div>
24.
25. <h4>3.兩個方向居中</h4>
26. <div class="class1" style="background-color: darkcyan;line-height: 40px;text-align: center">兩個方向居中</div>
27.
28. </body>
29. </html> （5）內邊距與外邊距
在了解內外邊距之前我們先了解一個模型即盒子模型，盒子模型就是把 HTML 頁面中的元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。盒模型的寬度和高度和我們平常所說的物體的寬度和高度是不一樣的。CSS 定義的寬和高，指的是填充以里的內容范圍。而盒子的寬度=左外邊距+左邊框+左內邊距+內容寬度+右內邊距+右邊框+右外邊距。每個矩形都由元素的內容（content）、內邊距（padding）、邊框（border）和外邊距（margin）組成，如下所示：
在了解了盒子模型后我們分別對內邊距及外邊距內容進行講解。
1）內邊距（padding）
padding內邊距作用是為被應用的標簽創建一部分內部間距。邊距可以設置上、下、左、右方向。具體示例如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <style>
6. .class1{
7. width: 300px;
8. height: 40px;
9. }
10.
11. </style>
12. </head>
13. <body>
14.
15. <h4>1.無內邊距</h4>
16. <div style="height: 50px; width: 200px; border: 1px solid red; background-color: #b7eb8f">
17. <div>
18. CSS基礎教程。
19. </div>
20. </div>
21.
22. <h4>2.有內邊距</h4>
23. <!-- 設置一個寬200px,高50px的div，然后為其設置邊框 -->
24. <div style="height: 50px; width: 200px; border: 1px solid red; background-color: #87e8de">
25. <!-- 內邊距設置為10px,這邊的10px表示上下左右都設置成10px, 可以使用padding-(top, bottom, left, right)只設置一邊-->
26. <div style="padding: 10px;">
27. CSS基礎教程。
28. </div>
29. </div>
30.
31. </body>
32. </html> 2）外邊距（margin）
外邊距用于相鄰的標簽之間增加距離用。邊距可以設置上、下、左、右方向。具體示例如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <style>
6. .class1{
7. width: 200px;
8. height: 30px;
9. }
10.
11. </style>
12. </head>
13. <body>
14.
15. <h4>1.無外邊距</h4>
16. <div class="class1" style="background-color: #87e8de">div1</div>
17. <div class="class1" style="background-color: #46a6ff">div2</div>
18.
19. <h4>2.有外邊距</h4>
20. <div class="class1" style="margin: 10px; background-color: #87e8de">div3</div>
21. <div class="class1" style="margin: 10px; background-color: #46a6ff">div4</div>
22.
23. </body>
24. </html> （6）float浮動
float浮動用于實現多個標簽并排存放，一般用于塊級標簽，我們一般頁面的橫排目錄都會用該屬性來實現。float屬性支持將標簽設置為左浮動（float:left）與右浮動（float:right），具體示例如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. </head>
6. <body>
7. <h2>浮動示例</h2>
8. <div>
9. <div style="float:left;width: 100px;background-color: yellowgreen;">左浮動</div>
10. <div style="float: right;width: 100px;background-color: blue;">右浮動</div>
11. <!-- 在使用浮動后需要進行清除，不然就會脫離文檔流，也就不會按照html固定的順序進行排版 -->
12. <div style="clear: both;"></div>
13. </div>
14. </body>
15. </html> （7）定位（position）
position用于對屏幕上的標簽進行定位，定位有三種類型分別為絕對定位（position：absolute;）、相對定位（position：relative;）與固定定位（position：fixed;），下面我們分別進行介紹
1）絕對定位
絕對定位一般以瀏覽器左上角為基準設置位置，但如果定位標簽存在父標簽且父標簽存在定位設置則子標簽以父標簽的左上角為基準。絕對定位的具體示例如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <style>
6. .class1 {
7. width: 100px;
8. height: 100px;
9. background-color: #46a6ff;
10. position: absolute;
11. left: 60px; /*相對于瀏覽器向左偏移60像素*/
12. top: 20px; /*相對于瀏覽器向上偏移20像素*/
13. }
14. </style>
15. </head>
16. <body>
17. <div class="class1">絕對定位</div>
18. </body>
19. </html> 2）相對定位
相對定位以元素自身的位置為基準設置位置，相對定位需要占用位置空間。通常父標簽設置為相對定位，子標簽設置為絕對定位，具體示例如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <style>
6. .class1 {
7. width: 200px;
8. height: 100px;
9. /* 父標簽設置相對定位 */
10. position: relative;
11. background-color: #aaaaaa;
12. }
13. .class2 {
14. width: 80px;
15. height: 50px;
16. position: absolute;
17. /* 子標簽設置絕對定位 */
18. background-color: #46a6ff;
19. top: 20px;
20. left: 30px;
21. }
22. </style>
23. </head>
24. <body>
25. <div class="class1">
26. <div class="class2">我是子標簽</div>
27. </div>
28. </body>
29. </html> 3）固定定位
固定定位表現類似于絕對定位，兩者主要區別是絕對定位是以html的元素進行定位的，而固定定位是以游覽器窗口進行定位。具體使用示例如下
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <style>
6. .class1 {
7. width: 100px;
8. height: 100px;
9. background-color: #46a6ff;
10. position: fixed;
11. top: 100px;
12. left: 80px;
13. }
14. </style>
15. </head>
16. <body>
17. <div class="class1">固定定位</div>
18. </body>
19. </html> hover偽類作用：當鼠標放在標簽上時，可以能夠設置一些樣式。
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. <style>
6. .class1 {
7. background-color: #46a6ff;
8. }
9.
10. .class1:hover {
11. background-color: #722ed1;
12. }
13.
14. </style>
15. </head>
16. <body>
17. <h4>偽類示例</h4>
18. <div class="class1">將鼠標放在我上面，將會變色</div>
19. </body>
20. </html> 至此我們《CSS基礎教程》就講完了，如有任何問題歡迎在文章后面進行留言。最后如果喜歡本篇文章不要忘了點贊、關注與轉發哦！
-END-
@IT管理局專注計算機領域技術、大學生活、學習方法、求職招聘、職業規劃、職場感悟等類型的原創內容。期待與你相遇，和你一同成長。
文章推薦：
介
HTML 是什么？
htyper text markup language 即超文本標記語言。
超文本: 就是指頁面內可以包含圖片、鏈接，甚至音樂、程序等非文字元素。
標記語言: 標記（標簽）構成的語言。
什么是標簽:
是由一對尖括號包裹的單詞構成 例如: <html> *所有標簽中的單詞不可能以數字開頭.
標簽不區分大小寫.<html> 和 <HTML>. 推薦使用小寫.
標簽分為兩部分: 開始標簽<a> 和 結束標簽</a>. 兩個標簽之間的部分 我們叫做標簽體.
有些標簽功能比較簡單.使用一個標簽即可.這種標簽叫做自閉和標簽.例如: <br/><hr/><input/><img/>
標簽可以嵌套.但是不能交叉嵌套. <a><b></a></b>
標簽的屬性:
通常是以鍵值對形式出現的. 例如 name="nick"
屬性只能出現在開始標簽 或 自閉和標簽中.
屬性名字全部小寫. *屬性值必須使用雙引號或單引號包裹 例如 name="nick"
如果屬性值和屬性名完全一樣.直接寫屬性名即可. 例如 readonly
HTML5基本結構:
將HTML4中的DTD定義為如下結構即可，其他不變。
<!DOCTYPE HTML>
HTML5支持的兩種指定頁面使用的字符集的方式:
使用Content-Type指定字符集
<meta http-equiv="Content-Type" content="text/html ;charset=UTF-8"/>
直接使用charset指定字符集
<meta charset="UTF-8">
<head> 標簽
<title>
<title>Title</title>
<base/>
標簽為頁面上的所有鏈接規定默認地址或默認目標。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<base href="http://p_w_picpaths.cnblogs.com/cnblogs_com/suoning/845162/"/>
<base target="_blank" />
</head>
<body>
<img src="o_s.png" alt="圖片加載失敗。。。"/>
<a href="http://cnblogs.com/suoning/">nick blogs</a>
</body>
</html>
# 上面這段代碼中，<img>標簽的src屬性是一個相對路徑，因為<head>中通過base標簽設置了鏈接的默認地址，
所以img的src實際的地址是“http://p_w_picpaths.cnblogs.com/cnblogs_com/suoning/845162/o_s.png”。
同樣的，<a>中只是指定了href，并未指定target屬性，所以也會使用base中設置的target屬性的值。
<link/>
引用外部文檔，常見于引用外部樣式。重要屬性有三個：rel、href、type。
rel 規定文檔與被鏈接文檔之間的關系。
rel="dns-prefetch" 預先解析緩存文檔中使用的域名，目的是為了提高網頁訪問速度。使用場景：在一個網頁頻繁使用其他域名資源時。
rel="shortcut icon"或rel="icon" 在收藏和標題欄上用于顯示的圖標。示例：<link rel="icon" href="http://p_w_picpaths.cnblogs.com/cnblogs_com/suoning/845162/o_s.png">。注意：IE瀏覽器只支持ico格式，為了兼容IE，圖片文件采用ico格式。
rel="stylesheet" 引用外部樣式表。
rel="nofollow" 用于指示搜索引擎不要追蹤（爬蟲抓取），減少垃圾鏈接。用于<a>標簽，使用場景：網頁不被信任或是不希望唄搜索引擎錄入的網站。
href 資源的路徑（相對路徑/絕對路徑）。
type 規定被連接文檔的MIME類型，用于明確文件的打開方式。例如：.ico文件 p_w_picpath/x-icon。
<meta/>
定義關于HTML文檔的元數據。 重要的屬性有三個：http-equiv、name、content
http-equiv 把content屬性值關聯到http頭部。
Content-Type（瀏覽器接受的文檔類型，一般是text/html）
refresh（網頁刷新，以秒為單位）
expires（設定網頁到期時間，一旦過期，必須到服務器上重傳）
<meta http-equiv="Content-Type" content="text/html ;charset=UTF-8"/>
<meta http-equiv="Refresh" content="2">
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">
<meta http-equiv="expires" content="6 Jun 2016"/>
name 把content屬性關聯到一個名稱。
keywords（搜索關鍵字，用于搜索引擎抓取信息的顯示）
description（搜索到網站后顯示的網頁內容簡描述）
author（站點制作者信息）
generator（用以說明生成工具）
name也可以根據特定的功能自定義，在新浪網中有使用360認證和搜狐認證（<meta name="360-site-verification"content="63349**********"/>、<meta name="sogou_site_verification"content="BVI*******"/>）。
<meta name="keywords" content="搜索關鍵字">
<meta name="description" content="簡要描述">
<meta name="author" content="http://cnblogs.com/suoning">
<meta name="generator" content="用以說明生成工具">
content 定義與http-equiv或name屬性相關的元信息，是必要的屬性。
<body> 標簽
1、塊級標簽和內聯標簽
塊級標簽：<p><h1><table><ol><ul><form><div>
內聯標簽：<a><input><img><sub><sup><textarea><span>
block（塊）元素的特點
① 總是在新行上開始；
② 高度，行高以及外邊距和內邊距都可控制；
③ 寬度缺省是它的容器的100%，除非設定一個寬度。
④ 它可以容納內聯元素和其他塊元素
inline（內聯）元素的特點
① 和其他元素都在一行上；
② 高，行高及外邊距和內邊距不可改變；
③ 寬度就是它的文字或圖片的寬度，不可改變
④ 內聯元素只能容納文本或者其他內聯元素
對行內元素，需要注意如下
設置寬度width 無效。
設置高度height 無效，可以通過line-height來設置。
設置margin 只有左右margin有效，上下無效。
設置padding 只有左右padding有效，上下則無效。注意元素范圍是增大了，但是對元素周圍的內容是沒影響的。
2、基本標簽
<h1>~<h6> 標題標簽.
<p>: 段落標簽. 包裹的內容被換行.并且也上下內容之間有一行空白.
style="text-indent: 2em"可以設置樣式為首行縮進兩個字符。
<blockquote></blockquote>可以用來設置整個段落的縮進。
<b> <strong>: 加粗標簽.
<strike>: 為文字加上一條中線.
<u>: 文字下方加下劃線.
<em> <i>: 文字變成斜體.
<sup>和<sub>: 上角標 和 下角標.
<br>:換行.
<hr>:水平線.
<div>
塊級標簽。塊級標簽常用于布局，行級標簽常用語顯示內容。
div的顯示通常使用id或class來標識。id為唯一的標簽標識，class為標簽的類標識。
div的大小是由內容來決定的，默認情況下，高度由內容的高度決定，寬度適應屏幕。
可以容納其他元素，是一個容器。
<span>
3、特殊符號
> >
< <
空格
" 引號
© 版權符號
特殊符號 符號碼
" " ;
& & ;
< < ;
> > ;
© ;
® ;
± ± ;
× × ;
§ § ;
¢ ;
¥ ;
· · ;
&euro ;
£ ;
&trade ;
4、<a> 超鏈接標簽(錨標簽)
重要屬性有三個：href、target、name
href 超鏈接地址：可以是Web上任意資源，包括圖片，網頁，樣式，腳本文件等。href="#"時，表示被鏈接頁面就是當前頁面。
target 文檔打開時要顯示的目標位置，屬性值一般有：_blank（新窗口中打開）、_self（默認，在超鏈接所在的容器中打開）、_parent（在超鏈接的父容器中打開）、_top（整個容器中打開）、name（框架名稱）。
name 錨記名稱。作用：跳轉到文檔的某個地方。返回首頁。
# 跳轉網頁
<a href="http://cnblogs.com/suoning" target="_blank">Nick Blogs</a>
# 跳轉錨記書簽名稱
<a name="top"><h3>Top！</h3></a>
<div style="height: 800px"></div>
<a href="#top">top</a>
1.標簽最簡式
<a href="mailto:xxx@xx.com">郵件聯系</a>
2.標簽幫你填抄送地址
<a href="mailto:xxx@xx.com?cc=xxxx@xx.com">郵件聯系</a>
3.標簽幫你填暗送地址
<a href="mailto:xxx@xx.com?bcc=xxxx@xx.com">郵件聯系</a>
4.暗,抄
<a href="xxxxx@xx.com">郵件聯系</a>
5.標簽幫你填主題
<a href="mailto:xxx@xx.com?subject=這是主題">郵件聯系</a>
6.填郵件內容
<a href="mailto:xxx@xx.com?body=這是內容">郵件聯系</a>
7.多址發送
<a href="mailto:xxx@xx.com,xxxx@xx.com">郵件聯系</a>
# http://shang.qq.com/v3/widget.html
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=630571017&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:630571017:51" alt="點擊這里給我發消息" title="點擊這里給我發消息"/></a>
<a href="tencent://message/?uin=630571017" target="_blank"><img style="border:0px;" src=http://wpa.qq.com/pa?p=1:707321921:13></a>
# 更多圖片地址如下：
# http://wpa.qq.com/pa?p=1:707321921:1
# http://wpa.qq.com/pa?p=1:707321921:2
# http://wpa.qq.com/pa?p=1:707321921:3
# http://wpa.qq.com/pa?p=1:707321921:4
# http://wpa.qq.com/pa?p=1:707321921:5
# http://wpa.qq.com/pa?p=1:707321921:6
# http://wpa.qq.com/pa?p=1:707321921:7
# http://wpa.qq.com/pa?p=1:707321921:8
# http://wpa.qq.com/pa?p=1:707321921:9
# http://wpa.qq.com/pa?p=1:707321921:10
# http://wpa.qq.com/pa?p=1:707321921:11
# http://wpa.qq.com/pa?p=1:707321921:12
# http://wpa.qq.com/pa?p=1:707321921:13
5、<img> 圖形標簽
行級標簽，用來顯示圖片。
重要屬性有：src、title、alt、width、height、align。
src 圖片地址。
title 鼠標懸浮在圖片上的文字。
alt 圖片找不到時要替換的文字。如果圖片資源使用的是外網資源，則不會顯示要替換的文字。如果使用的是本網站的資源（相對路徑給出），則找不到圖片時會顯示替換的文字，并保留圖片設置的寬高結構。
align 圖片周圍文字的垂直對齊情況。常用的屬性值有：top（與圖片的頂部對齊）、middle（與圖片的中部對齊）、bottom（默認，與圖片的底部對齊）。
width 圖片的寬
height 圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)
<img src="http://p_w_picpaths.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png" alt="圖片加載失敗。。。" title="The knife girl, kiss"/>
6、列表標簽
<ul> :無序列表標簽
<li>:列表中的每一項.
<ol> :有序列表標簽
<li>:列表中的每一項.
<li>主要的屬性有：type、value兩個:
type指明項目的類型，屬性值有：A，a，I，i，1，disc（實心圓），square（實心正方形），circle（空心圓）。
value表示序號值從幾開始。
<dl> 定義列表
<dt> 列表標題
<dd> 列表項
<ur>
<li type="circle">A</li>
<li type="1">B</li>
<li type="1">C</li>
</ur>
<ol>
<li value="3">3</li>
<li>4</li>
</ol>
<dl>
<dt><i>標題</i></dt>
<dd>第一項</dd>
<dd>第二項</dd>
<dd>第三項</dd>
</dl>
7、<table> 表格標簽
<table border="1">
<thead>
<tr>
<th>序號</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr>
<th>1.</th>
<td>nick</td>
</tr>
<tr>
<th>2.</th>
<td>jenny</td>
</tr>
</tbody>
</table>
<table> 表格標簽
border:（表格邊框）
align（水平對齊方式）
bgcolor（背景顏色）
cellpadding（內邊距，單元格與內容之間的距離）
cellspacing（外邊距，單元格的間距，設置為0時，表格變為實線表格）
width（表格的寬度，可以用%或者像素，最好通過css來設置長寬）
<caption> 表格的標題
<tr> 表格的數據行，table row
<th> 表格的表頭名稱，與<td>不同在于文字采用加粗居中的形式顯示，table head cell
<td> 單元格，用來顯示表格內容，table data cell
<thead> 表格頭部，使結構更加分明
<tbody> 表格主體部分，使結構更加分明
rowspan 單元格豎跨多少行，作用在th或者td上
colspan 單元格橫跨多少列（即合并單元格），作用在th或者td上
<table>
<caption>xxxxxxxxxx</caption>
<thead>
<tr>
<th>序號</th>
<th>姓名</th>
<th>年齡</th>
<th>女神</th>
</tr>
</thead>
<tbody>
<tr>
<th>1.</th>
<td>nick</td>
<td>18</td>
<td>可可西</td>
</tr>
<tr>
<th>2.</th>
<td>jenny</td>
<td>21</td>
<td>nick!!!</td>
</tr>
</tbody>
</table>
8、<form>表單標簽
表單屬性
HTML 表單用于接收不同類型的用戶輸入，用戶提交表單時向服務器傳輸數據，從而實現用戶與Web服務器的交互。表單標簽, 要提交的所有內容都應該在該標簽中。
屬性：action、method、enctype
action 表單要提交的地址，用于處理表單的內容（一般是提交字典到后臺的一個接口，這個接口是java寫成的，提交到這個接口后后臺就知道如何處理這些數據了）。
method 提交的方法，默認是get方式提交。
get: 1.提交的鍵值對.放在地址欄中url后面. 2.安全性相對較差. 3.對提交內容的長度有限制.
post:1.提交的鍵值對不在地址欄. 2.安全性相對較高. 3.對提交內容的長度理論上無限制.
enctype 對表單數據進行編碼，默認都是要編碼的。格式為：application/x-www-form-urlencoded（表單默認的編碼格式，表單發送前對所有字符進行編碼。編碼規則：空格轉換為“+”號，特殊符號轉換為ASC HEX值）。提交普通的文本內容到服務器就可以采用這種默認的編碼方式。當你需要提交的是一個文件時，編碼就需要采用另一種格式：multipart/form-data（不對字符編碼，文件上傳時使用）。text/plain（是一種純文本編碼，空格轉換為“+”號，但是不對特殊字符進行編碼）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="https://www.baidu.com/s">
<input type="text" name="wd">
<input type="submit" value="百度一下">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="https://www.sogou.com/web">
<input type="text" name="query">
<input type="submit" value="搜狗搜索">
</form>
</body>
</html>
表單元素
<input> type 屬性：
text 文本框輸入（默認text文本框類型）。
autocomplete（自動完成輸入的內容，要求表單元素要有name屬性才有自動完成的效果，off表示自動完成不可用，on表示自動完成可用）
disabled（設置或者獲取控件的狀態，默認是false即可用，等于true時不可用，不能輸入內容）
password 密碼框。（以下屬性text和password共有）
size（指定表單元素的初始寬度。當type為text或password時，表單元素的大小以字符為單位，對于其他元素，寬度以像素為單位）
maxlength（type為text或password時，表示輸入的最大字符數），有利于防止sql的注入攻擊
readonly 只讀.
placeholder 框內預置內容(灰色)，寫上內容時才消失
radio 單選按鈕。屬性：
name（將name的值設置為相同值，才表示一組數據，才能實現單選功能）
value（必須要寫，提交到服務器的key值，實際開發過程中value一般是編號）
checked（是否被選中的狀態）
checkbox 復選框。
name（名字一定要一樣一樣的，才表示是一組數據，添加到同一value值列表提交到服務器）
value（必須要寫，提交到服務器的key值，實際開發過程中value一般是編號）
checked（是否被選中的狀態）
file 文件域，上傳文件（不同的瀏覽器表現形式不同）
submit 提交按鈕。用于提交表單。
reset 重置按鈕。清空表單的輸入，恢復到表單默認的狀態。
button 普通按鈕。一般結合javascript使用。
p_w_picpath 圖片按鈕，用來提交表單，與submit是一樣的效果。
src（圖片路徑）
hidden 隱藏字段。
value（隱藏的內容）
color 顏色標簽。value指定顏色值（采用#十六進制數表示）。
date 日期。value值指定默認的日期，格式為****-**-**（年月日）。
datetime-local 顯示本地時間，value值指定默認的時間，格式為2016-05-20T11:10:10（年月日T時分秒）。
number 數字向上或者向下滑動?？梢蕴顢底秩缓笙蛏匣蛘呦蛳逻x擇不同的值。
range 滑動標簽。min（指定最小值）、max（指定最大值）、value（指定當前默認值）。
week 每年的周數。value指定哪一年第幾周，格式為2016-W25（2016年第25周）。
<textarea> 文本域標簽。默認表現形式是可以輸入很多行文本的文本框。
name （表單提交項的key）
cols（設置文本域寬度）
rows（設置文本域高度，即行數）
<select> 下拉框標簽。使用時要結合<option>子標簽一起使用。
name:表單提交項的key
size：選項個數
multiple：多選
<option> 下拉選中的每一項
value（表單提交項的值）
selected（selected下拉選默認被選中）
<optgroup>為每一項加上分組
<label> 把元素與文本結合起來
友好設計：不只是選中復選框才能選中并打鉤，要求點擊對應的文字也能選中該復選框。
這種情況下要用到<label>標簽的for屬性（設置或獲取給定標簽對象指定到的對象，值=另一個元素的id號即可）
<label for="name">姓名</label>
<input id="name" type="text">
<fieldset> 對表單中的相關元素進行分組
<fieldset>
<legend>溫馨提示</legend>
<div align="middle">不要忘記點贊哦==</div>
</fieldset>
value: 表單提交項的值
對于不同的輸入類型，value 屬性的用法也不同：
type="button", "reset", "submit" - 定義按鈕上的顯示的文本
type="text", "password", "hidden" - 定義輸入字段的初始值
type="checkbox", "radio", "p_w_picpath" - 定義與輸入相關聯的值
框架
<frameset> 框架
用來劃分窗體，不能放在<body>中，否則沒有效果。
cols （縱向分割頁面。其數值表示方法有三種：“30%、30（或者30px）、*”；數值的個數代表分成的視窗數目且數值之間用“,”隔開?！?0%”表示該框架區域占全部瀏覽器頁面區域的30%；“30”表示該區域橫向寬度為30像素；“*”表示該區域占用余下頁面空間。例如：cols="25%,200,*" 表示將頁面分為三部分，左面部分占頁面30%，中間橫向寬度為200像素，頁面余下的作為右面部分。）
rows（橫向分割頁面。屬性和cols一樣）
frameborder（設置是否顯示框架邊框。設定值只有0、1；0 表示不要邊框，1 表示要顯示邊框）
border（框架之間的距離，一般設置為0）
bordercolor（邊框的顏色）
framespacing（設置框架與框架間的保留的空白距離）
<frameset cols="40%,*,*"> 第一個框架占整個瀏覽器窗口的40%,剩下的空間平均分配給另外兩個框架。
<frameset cols="*,*,*,*"> 瀏覽器窗口等分為四部分。
<iframe> 框架
元素會創建包含另外一個文檔的內聯框架（即行內框架）
name （設置框架名稱。此為必須設置的屬性）
src （設置此框架要顯示的網頁名稱或路徑。此為必須設置的屬性）
scrolling （設置是否要顯示滾動條。設定值為auto, yes, no）
bordercolor （設置框架的邊框顏色）
frameborder （設置是否顯示框架邊框。設定值只有0、1；0 表示不要邊框，1 表示要顯示邊框）
noresize （設置框架大小是否能手動調節）
marginwidth （設置框架邊界和其中內容之間的寬度）
marginhight （設置框架邊界和其中內容之間的高度）
width（設置框架寬度）
height （設置框架高度）
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
