整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
程序員web前端分享HTML基本結構和基本語法
HTML基本結構
HTML的基本語法
1、<常規標記>
<標記 屬性=“屬性值” 屬性=“屬性值”></標記>
標記也可叫標簽或叫元素
例如：<head></head>
2.空標記
<標記 屬性=“屬性值” />
例如：<meta charset=”utf-8”>
說明：
1.寫在<>中的第一個單詞叫做標記，標簽，元素。
2.標記和屬性用空格隔開，屬性和屬性值用等號連接，屬性值必須放在“”號內。
3.一個標記可以沒有屬性也可以有多個屬性，屬性和屬性之間不分先后順序。
4.空標記沒有結束標簽，用“/”代替。
五、HTML常用標記
1、文本標題（h1-h6）
<h1>LOGO</h1>
<h2>二級標題</h2>
<h3>三級標題H3</h3>
<h4>四級標題H4</h4>
<h5>五級標題</h5>
<h6>六級標題</h6>
注：文本標題標簽自帶加粗，有自己的文本大小，并且獨占一行，有默認間距
2、段落文本(p)
<p>段落文本內容</p>
標識一個段落(段落與段落之間有段間距)
3、空格
所占位置沒有一個確定的值,這與當前字體字號都有關系.
4、換行(br)
<br />
換行是一個空標記(強制換行)
5、水平線
<hr />空標記
6、加粗有兩個標記
A、<b>加粗內容</b>只是顯示加粗
B、<strong>強調的內容</strong>突出的文本
7、傾斜
<em>強調文本</em>
<i>傾斜文本</i>
8、 擴展
<u>文本</u>下劃線
<del>文本</del>刪除線
<s>文本</s>刪除線
<sub></sub>下標
<sup></sup>上標
9、列表(ul,ol,dl)
HTML中有三種列表分別是：無序列表，有序列表，自定義列表
*無序列表
無序列表組成：
<ul>(unordered list)
<li></li>
<li></li>
．．．．．．
</ul>
*有序列表
有序列表組成：
<ol>(ordered list)
<li></li>
<li></li>
．．．．．．
</ol>
*自定義列表
<dl>(definition list)
<dt>名詞</dt>
<dd>解釋</dd>
(definition description)
．．．．．．
</dl>
知識擴展2----有序列表的屬性
1)、type:規定列表中的列表項目的項目符號的類型
語法：<ol type="a"></ol>
1 數字順序的有序列表（默認值）（1, 2, 3, 4）。
a 字母順序的有序列表，小寫（a, b, c, d）。
A 字母順序的有序列表，大寫（A,B,C,D)
i 羅馬數字，小寫（i, ii, iii, iv）。
I 羅馬數字，大寫（I, ii, iii, iv）。
2)、start 屬性規定有序列表的開始點。
語法：<ol start="5"></ol>
10、插入圖片
<img src="目標文件路徑及全稱" alt="圖片替換文本" title="圖片標題" width="寬度" height="高度"/>
注:所要插入的圖片必須放在站點下
title的作用:圖片的標題； 在你鼠標懸停在該圖片上時顯示一個小提示，鼠標離開就沒有了，HTML的絕大多數標簽都支持title屬性，title屬性就是專門做提示信息的
alt的作用:提示文本 必寫；alt屬性是在你的圖片因為某種原因不能加載時在頁面顯示的提示信息，它會直接輸出在原本加載圖片的地方。（優化圖片的）
*相對路徑的寫法：
1)當當前文件與目標文件在同一目錄下，直接書寫目標文件文件名+擴展名；<img src=”q12.jpg”/>
2)當當前文件與目標文件所處的文件夾在同一目錄下，寫法如下：
文件夾名/目標文件全稱+擴展名；<img src=”images/q12.jpg”/>
3)當當前文件所處的文件夾和目標文件所處的文件夾在同一目錄下，寫法如下：
../目標文件所處文件夾名/目標文件文件名+擴展名；
<img src=”../images/q12.jpg”/>
11、超鏈接的應用
語法：
<a href="目標文件路徑及全稱/連接地址" title="提示文本">鏈接文本/圖片</a>
<a href="#"></a>空鏈接
屬性：target:頁面打開方式，默認屬性值_self。
屬性值：_blank 新窗口打開
<a href="#" target="_blank">新頁面打開</a>
12、數據表格的作用及組成
作用：顯示數據
表格組成
<table width="value" height="value" border="value">
<tr>
<td></td>
<td></td>
</tr>
</table>
注：一個tr表示一行;一個td表示一列(一個單元格)
<th></th>表格的列標題
*數據表格的相關屬性
1）width="表格的寬度"
2）height="表格的高度"
3）border="表格的邊框"
4）bgcolor="表格的背景色"
5）bordercolor="表格的邊框顏色"
6）cellspacing="單元格與單元格之間的間距"
7）cellpadding="單元格與內容之間的空隙"
8）水平對齊方式：align="left左對齊/center居中/right右對齊";
9) 垂直對齊方式 ：valign="top頂對齊/middle居中/bottom底對齊/baseline(基線);
10)合并單元格屬性：
colspan=“所要合并的單元格的列數"合并列;
rowspan=“所要合并單元格的行數”合并行;
13、表單的作用及組成
表單的作用：用來收集用戶的信息的;
表單組成：表單框（表單域form）
提示信息
表單控件/表單元素
1)、表單框
<form name="表單名稱（英文字母開頭的）" method（提交方式）="post/get" action="表單提交的地址"></form>
2）文本框
<input type="text" value="默認值" placeholder="提示文本" />
3)密碼框
<input type="password" placeholder="密碼"/>
4)提交按鈕
<input type="submit" value="按鈕內容" />
<input type="reset" value="按鈕內容"/>重置按鈕
5）單選框/單選按鈕
<input type="radio" name="ral" value="radiovalue"/>
<input type="radio" name="ral" checked="checked" />
單選按鈕里的name屬性必須寫，同一組單選按鈕的name屬性值必須一樣。
6）復選框
<input type="checkbox" name="like" value="checkboxvalue" />
復選按鈕里的name屬性必須寫，同一組復選按鈕的name屬性值必須一樣。
checked="checked"表示默認被選中，可簡寫成checked
disabled="disabled"表示禁用，可簡寫成disabled
enabled:可用狀態
7)下拉菜單
<select name="">
<option name="" value="表單被提交時被發送到服務器的值">菜單內容</option>
</select>
8）多行文本框（文本域）
<textarea name="textareal" cols="字符寬度" rows="行數">
</textarea>
9)跳轉按鈕
<input name="'" type="button" value=“按鈕內容” />
<button></button>
button和submit的區別是：
submit是提交按鈕起到提交信息的作用，type類型是button只起到跳轉的作用，不進行提交。
提示信息標簽(作用：將提示信息及相應的表單控件進行關聯)
<label for="user">提示信息</label>
<input type="text" id="user"/>
擴展知識點3：對于不同的輸入類型，value 屬性的用法的意義
value 屬性為 input 元素設定值。
對于不同的輸入類型，value 屬性的用法也不同：
type="button", "reset", "submit" - 定義按鈕上的顯示的文本
type="text", "password" - 定義輸入字段的初始值
type="checkbox", "radio" - 定義與輸入相關聯的值
注釋：<input type="checkbox"> 和 <input type="radio"> 中必須設置 value 他name屬性。
擴展知識點4：
<form name="表單名稱" method="post/get" action=""></form>
Form中的獲取數據的兩個方式get和post的區別？
1. get是從服務器上獲取數據，post是向服務器傳送數據。
2. get是把參數數據隊列加到提交表單的ACTION屬性所指的URL中，值和表單內各個字段一一對應，在URL中可以看到。post是通過HTTP post機制，將表單內各個字段與其內容放置在HTML HEADER內一起傳送到ACTION屬性所指的URL地址。用戶看不到這個過程。
3. 對于get方式，服務器端用Request.QueryString獲取變量的值，對于post方式，服務器端用Request.Form獲取提交的數據。
4. get傳送的數據量較小，不能大于2KB。post傳送的數據量較大，一般被默認為不受限制。
5. get安全性非常低，post安全性較高。但是執行效率卻比Post方法好。
建議：
1、get方式的安全性較Post方式要差些，包含機密信息的話，建議用Post數據提交方式；
2、在做數據查詢時，建議用Get方式；而在做數據添加、修改或刪除時，建議用Post方式；
14、div和span的用法
<div ></div>
沒有具體含義， 除了獨占一行之外沒有任何其它的默認屬性，是頁面布局中常用的標簽；
<span> </span>
文本結點標簽
可以是某一小段文本，或是某一個字。 它除了不換行外，沒有任何其它的默認屬性；
面小編為大家帶來的是解決網頁制作中的空格問題，這里詳細的介紹了解決網頁制作中的空格問題的相關知識，希望能對大家有所幫助。
Dreamweaver是一個非常簡單易用但又功能強大的網頁制作軟件。但是，它卻又一個令很多初學者很困惑的問題。那就是空格。在Dreamweaver中使用空格遠遠沒有象word中一樣方便。比如首行無法空格，句子中間空一格以上都是不行的。原因是什幺呢？這是因為在HTML語言中多于一個的空格都被忽略不計。這樣就造成了空格困難的原因。如何很好地解決Dreamweaver的空格問題呢？解決的方案有很多：1、 制作一張很小的透明圖片。嵌入到文本當中或者行首。這種方法實現起來比較麻煩。2、 使用全角空格。為什幺這種方案可行呢？因為全角空格實現起來比較簡單。雖然也是空格但是對應的HTML代碼卻不是空格代碼。而是另外的代碼，因此Dreamweaver把他當字符處理而不是空格。所以可以相安無事。但是在不支持中文字符集的瀏覽器看來就是亂碼了。3、 使用軟空格。即在要插入空格的地方按Ctrl+shift+空格。這樣的空格所有瀏覽器都能認識。但是缺點是在頁面編輯的時候無法看見插入了多少空格，只能在瀏覽器預覽的時候才能看清楚。不夠直觀。軟空格其實使用的是代碼。是不間斷空距標記。他可以生成軟空格。每按一下Ctrl+shift+空格就是增加一個代碼。代碼雖然簡單，但是它的作用也很大。在做網頁時候我們空出一行或者幾行就要靠這個代碼來幫忙。學過HTML語言的朋友都知;;標簽是用來標記一個段落的。如果光寫;;這段代碼是不是就可以生成空行呢？這是無效的。必須在;標簽中增加“；”代碼才行。; ;這樣的代碼才會有空行效果。這里該標記也是起了占據位置的作用。另外如果用Dreamweaver生成一張表格，察看源代碼的時候會發現。
、CSS簡介
1.CSS是什么
CSS，指的是Cascading Style Sheet（層疊樣式表），它是用來控制網頁外觀的一門技術。“HTML控制網頁的結構，CSS控制網頁的外觀，JavaScript控制網頁的行為”
2.CSS引入方式
外部樣式表
內部樣式表
行內樣式表
3.外部樣式表——指的是把CSS代碼和HTML代碼單獨放在不同的文件中，然后在HTML文檔中使用link標簽來引用CSS樣式表。
語法< link rel="stylesheet" type="text/css" href="文件路徑" />
說明：rel的取值是固定的，即"stylesheet"，表示引入的是一個樣式表文件（即CSS文件），type屬性的取值也是固定的，即“text/css”，表示這是標準的CSS，href屬性表示CSS文件的路徑
注意：link標簽是放在head標簽內的
4.內部樣式表——指的是把HTML代碼和CSS代碼放到同一個HTML文件中，其中，CSS代碼放在style標簽內，并且style標簽是放在head標簽內部的
語法
type=“text/css” 是必須添加的，表示這是標準的CSS
5.行內樣式表——與內部樣式表類似，也是把HTML代碼和CSS代碼放到同一個HTML文件中。不同的是內部樣式表的CSS是在“style標簽”內定義的，而行內樣式表的CSS是在“標簽的style屬性”中定義的
兩段代碼的實現效果是一樣的，都是定義三個div元素的顏色為紅色。
如果使用內部樣式表，樣式只需要寫一遍；但是如果使用行內樣式表，每個元素則必須單獨寫一遍
行內樣式表的缺點：代碼冗余
二、CSS選擇器
1.選擇器是什么——用一種方式把你想要的那個元素選中
只有把它選中了，你才可以為這個元素添加CSS樣式
2.最實用的五種選擇器
CSS選擇器的格式：
3.元素選擇器——選擇指定的相同的元素，而不會選擇其他元素，然后給相同的元素定義同一個CSS樣式
語法div { width:100px; height:100px; }
上面例子中的p元素和span元素沒有被選中
4.id選擇器——為元素設置一個id屬性，然后針對設置了這個id的元素定義CSS樣式。注意：在同一個頁面中，不允許出現兩個相同的id。
說明：對于id選擇器，id名前面必須要加上前綴#，否則該選擇器無法生效
5.class選擇器——也就是“類選擇器”，可以對相同或者不同的元素定義相同的class屬性，然后針對擁有同一個class的元素進行CSS樣式操作
語法.box { width:100px; height:100px; }
class名前面必須要加上前綴.（英文點號），否則該選擇器無法生效
上面的例子是為不同的元素定義相同的class，從而可以同時操作它們的CSS樣式
6.后代選擇器——選擇元素內部中所有的某一元素，包括子元素和其他后代元素（如孫元素）
語法h3 p {width:100px; height:100px;}
說明：父元素和后代元素必須要用空格隔開，從而表示選中某個元素內部的后代元素
7.群組選擇器——同時對幾個選擇器進行相同的操作（效率高）
語法h3,p {width:100px; height:100px;
說明：對于群組選擇器，兩個選擇器之間必須要用英文逗號（,）隔開，不然群組選擇器就無法生效
三、字體樣式
1.字體樣式
類似于Word軟件中對于字體樣式的設置，我們可以知道CSS字體樣式的屬性有以下五種：
font-family——字體類型
font-size——字體大小
font-weight——字體粗細
font-style——字體風格
color——字體顏色
2.字體類型（font-family）
語法：font-family：字體1，字體2，...，字體N；
說明：font-family可以指定多種字體。使用多種字體時，將按從左到右的順序排列，并且以英文逗號（,）隔開。瀏覽器默認的字體類型一般是“宋體”
舉例：設置一種字體
舉例：設置多種字體
為元素設置多種字體的原因是：在有些字體沒有安裝的情況下，可以使用下一個字體，優先使用左邊的字體。
3.字體大小（font-size）——采用px為單位
語法font-size：像素值；
說明：實際上，font-size屬性取值有兩種，一種是“關鍵字”，如small，medium，large等。另外一種是“像素值”，如10px、16px、21px等。不過在實際開發中，關鍵字這種方式基本不會用
4.字體粗細（font-weight）
語法font-weight：取值;
font-weight屬性取值有兩種：一種是100~900的“數值”；另外一種是“關鍵字”。
其中關鍵字取值有：normal（正常）、lighter（較細）、bold（較粗）、bolder（很粗）。對于實際開發來說，一般我們只會用到bold這一個屬性值，其他的幾乎用不上。
在實際開發中，不建議使用數值作為font-weight的屬性取值，一般使用關鍵字的bold屬性值
5.字體風格（font-style）
語法font-style：取值；
font-style屬性取值有：normal（正常）、italic（斜體）、oblique（斜體）
從預覽效果可以看出，font-style屬性值為italic或oblique時，頁面效果是一樣的
但其實它們的區別在于：italic是字體的一個屬性，但并非所有的字體都有這個屬性。因此對于有italic屬性的字體，我們使用font-style：italic來實現斜體效果；對于沒有italic屬性的字體，我們使用font-style：oblique來實現。
6.字體顏色（color）
語法color：顏色值;
color屬性取值有兩種：關鍵字 & 16進制RGB值
關鍵字 如red、green、blue等
16進制RGB值——類似于#FBF9D0形式的值
單純靠“關鍵字”，滿足不了實際開發的需求。因此引入了“16進制RGB值”
記：#000000是黑色，#FFFFFF是白色
7.CSS注釋
語法/* 注釋的內容*/
注意：
小技巧：瀏覽器解析CSS是有一定順序的，后面樣式的會覆蓋前面的樣式。
四、文本樣式
文本樣式和字體樣式的區別：字體樣式針對的是“文字本身”的型體效果，而文本樣式針對的是“整個段落”的排版效果。字體樣式注重個體，文本樣式注重整體。
文本樣式屬性
text-indent ——首行縮進
text-align ——水平對齊
text-decoration ——文本修飾
text-transform ——大小寫
line-height ——行高
letter-spacing、word-spacing ——字母間距、詞間距
1.首行縮進（text-indent）
p元素的首行是不會自動縮進的，在HTML中我們常常使用空格代碼 來實現首行縮進，但是這種方式冗余代碼很多；在CSS中，我們可以使用text-indent屬性來定義p元素的首行縮進。
語法text-indent：像素值；
說明：初學CSS，建議使用像素（px）作為單位。
中文段落首行一般需要縮進兩個字符，設置首行縮進的像素值是字體大小的兩倍即可
2.水平對齊（text-align）——控制文本在水平方向上的對齊方式
語法 text-align：取值；
text-align屬性取值有：
left——左對齊（默認值）
center——居中對齊
right——右對齊。
在實際開發中，我們只會用到center這一個，其他兩個幾乎用不上。另外，text-align屬性不僅對文本有效，對圖片（img元素）也有效
3.文本修飾（text-decoration）——定義文本的修飾效果（下劃線、中劃線、頂劃線）
語法text-decoration：取值；
text-decoration屬性取值：
none——去除所有的劃線效果（默認值）
underline——下劃線（一般用于強調文章中的重點）
line-through——中劃線（一般用于促銷）
overline——頂劃線（極少用）
超鏈接（a元素）默認樣式有下劃線，可以使用text-decoration:none去除a元素的下劃線
4.大小寫（text-transform）——針對英文而言，中文不存在大小寫之分
語法 text-transform：取值；
text-transform屬性取值
none——無轉換（默認值）
uppercase——轉換為大寫
lowercase——轉換為小寫
capitalize——將每個英文單詞首字母轉換為大寫
5.行高（line-height）——控制每行文本的高度，與“行間距”是完全不一樣的概念
語法line-height：像素值；
6.間距（letter-spacing & word-spacing）
字間距（letter-spacing）——調整兩個字之間的距離
語法letter-spacing：像素值；
注意：每個中文漢字都被當成一個“字”，而每個英文字母也當做一個“字”
詞間距（word-spacing）——定義兩個單詞之間的距離（只針對英文單詞而言）
語法word-spacing：像素值；
在實際開發中，我們很少去定義中文網頁中的字間距以及詞間距，letter-spacing和word-spacing只會用于英文網頁。這兩個我們平時幾乎用不上
五、邊框樣式
1.邊框樣式屬性
邊框寬度（border-width）：取值是一個像素值
邊框外觀（border-style）：none（無樣式）、dashed（虛線）、solid（實線）
邊框顏色（border-color）：關鍵字、16進制RGB值
想要為一個元素定義邊框樣式，必須要同時設置這三個屬性才會有效果
簡寫形式：border：2px solid red；
2.局部樣式
一個邊框元素其實有四條邊（上、下、左、右）前面我們學習的是四條邊的整體樣式，現在來學習對某一條邊進行單獨設置。
上邊框（border-top）
border-top-width: 2px;
border-top-style: solid;
border-top-color: red;
下邊框（border-bottom）
border-bottom-width: 2px;
border-buttomstyle: solid;
border-buttom-color: red;
左邊框（border-left）
border-left-width: 2px;
border-left-style: solid;
border-left-color: red;
右邊框（border-right）
border-right-width: 2px;
border-right-style: solid;
border-right-color: red;
簡寫形式：border-right：2px solid red;
去除下邊框：（以下三個是等價的）
六、列表樣式
1.列表項符號（list-style-type）
在HTML中，我們使用type屬性來定義有序列表和無序列表的列表項符號，但是我們說過，結構和樣式應該是分離的，所以在CSS中，我們將使用list-style-type屬性來定義列表項符號
語法list-style-type：取值；
說明：list-style-type屬性是針對ol或者ul元素的，而不是li元素。
list-style-type屬性取值（有序列表）
decimal——阿拉伯數字：1，2，3…（默認值）
lower-roman——小寫羅馬數字：i、ii、iii…
upper-roman——大寫羅馬數字：I、II、III…
lower-alpha——小寫英文字母：a、b、c…
upper-alpha——大寫英文字母：A、B、C…
list-style-type屬性取值（無序列表）
disc——實心圓●（默認值）
circle——空心圓○
square——正方形■
去除列表項符號
語法list-style-type：none；
2.列表項圖片（list-style-image）——使用圖片來代替列表項符號
語法list-style-image：url（圖片路徑）；
在實際開發中，我們會使用更為高級的字體圖標（iconfont）技術來實現列表項圖片
七、表格樣式
1.表格標題位置（caption-side）
語法caption-side：取值；
caption-side屬性取值：
top——標題在頂部（默認）
bottom——標題在底部
如果想要定義表格標題的位置，在table或caption這兩個元素的CSS中定義caption-side屬性
2.表格邊框合并（border-collapse）——去除表格加入邊框后單元格之間的空隙
語法border-collapse：取值；
border-collapse屬性取值：
separate——邊框分開，有空隙（默認值）
collapse——邊框合并，無空隙
border-collapse屬性也是在table元素中定義的table{border-collapse: collapse;}
3.表格邊框間距（border-spacing）
語法border-spacing：像素值；
border-spacing屬性也是在table元素中定義的table{border-spacing：8px;}
八、圖片樣式
1.圖片大小——使用width和height這兩個屬性來定義圖片的大小
語法
在實際開發中，需要使用多大的圖片，就用Photoshop制作多大的圖片。不建議使用一張大圖片，然后再借助width和weight來改變大小。
2.圖片邊框
語法border：1px solid red；
在“邊框樣式”中我們已經詳細介紹了border屬性
3.圖片對齊
水平對齊
語法text-align：取值（left、center、right）；
注意：圖片的水平對齊不是在img元素中定義的，是在父元素中進行水平對齊的
text-align屬性一般只用于兩個地方：文本水平對齊和圖片水平對齊
垂直對齊
語法vertical-align：取值；
vertical-align屬性取值
top（頂部對齊）
middle（中部對齊）
baseline（基線對齊）
bottom（底部對齊）
4.文字環繞——初識float
圖文混排，指的是文字環繞著圖片進行布局
語法img{float：取值；}
float屬性取值
left——元素向左浮動
right——元素向右浮動
九、背景樣式
1.背景顏色（background-color）
語法background-color：顏色值（關鍵字、16進制RGB值）；
兩種顏色取值
color&background-color的區別：
color屬性用于定義“文本顏色”，而background-color屬性用于定義“背景顏色”
2.背景圖片（background-image）
語法background-image：url（圖片路徑）；
說明：跟引入圖片（即image標簽）一樣，引入背景圖片也需要給出圖片路徑才可以顯示
注意：我們需要為div元素添加width和height，背景圖片才會顯示出來
3.背景圖片重復（background-repeat）
語法background-repeat：取值；
background-repeat屬性取值：
repeat——在水平方向和垂直方向同時平鋪（默認值）
repeat-x——只在水平方向（x軸）上平鋪
repeat-y——只在垂直方向（y軸）上平鋪
no-repeat——不平鋪
注意：元素的寬度和高度必須大于背景圖片的寬度和高度，才會有重復效果
4.背景圖片的位置（background-position）
語法background-position：像素值/關鍵字；
像素值——要設置水平方向和垂直方向的值（像素值）
例如background-position：12px 24px;表示背景圖片與該元素左上角的水平方向距離為12px，垂直方向距離為24px。水平距離和垂直距離這兩個數值之間要用空格隔開
關鍵字——也要同時設置水平方向和垂直方向的值（關鍵字）
語法background-position：水平距離 垂直距離；
關鍵字取值
top left——左上
top center——靠上居中
top right——右上
left center——靠左居中
center center——正中
right center——靠右居中
bottom left——左下
bottom center——靠下居中
bottom right——右下
5.背景圖片固定（background-attachment）——定義背景圖片是隨元素一起滾動還是固定不動
語法background-attachment：取值；
scroll——隨元素一起滾動（默認值）
fixed——固定不動
十、超鏈接樣式
1.超鏈接偽類
默認情況下：字體為藍色，帶有下劃線。
鼠標點擊時：字體為紅色，帶有下劃線。
鼠標點擊后：字體為紫色，帶有下劃線。
在CSS中，我們可以使用“超鏈接偽類”來定義超鏈接在鼠標點擊的不同時期的樣式。
語法
注意：定義這四個偽類，必須按上面的順序進行，否則瀏覽器無法正常顯示這四種樣式
link樣式表示的是a元素從未被訪問過。
2.深入了解超鏈接偽類
我們沒有必要定義四種狀態下的樣式，在實際開發中，我們只會用到兩種狀態：未訪問時狀態和鼠標經過狀態。而對于未訪問狀態，我們可以直接對a元素定義，沒必要使用a:link。
語法
事實上，對于超鏈接偽類來說，我們只需要記住a:hover這一個就夠了，因為在實際開發中也只會用到這一個。
3.深入了解：hover
hover偽類不只限用于a元素，hover偽類可以定義任何一個元素在鼠標經過時的樣式！
語法元素：hover{...}
4.鼠標樣式
瀏覽器鼠標樣式——cursor（11種）
語法cursor：取值；
cursor屬性取值（常用的三種）
default（默認值）——鼠標默認樣式
pointer——鼠標手狀樣式
text——鼠標文本樣式
自定義鼠標樣式
語法cursor：url（圖片地址），屬性值；
說明：這個“圖片里地址”是鼠標圖片地址，其中鼠標圖片后綴名一般都是.cur，可以使用Photoshop來制作。
十一、盒子模型
頁面中，所有的元素都可以看成一個盒子
1.盒子模型的組成部分
內容區——CSS盒子模型的中心
內邊距——內容區和邊框之間的距離
外邊距——兩個盒子之間的距離
邊框
2.寬和高（width和height）
元素的寬度和高度是針對內容區而言的。
只有塊元素才可以設置width和height，行內元素是無法設置width和height的
3.邊框（border）
簡寫形式（寬度、外觀，顏色）
border：1px solid red；
4.內邊距（padding）
內邊距分為四個方向：上、右、下、左（順時針方向）
padding-top：像素值；
padding-right：像素值；
padding-bottom：像素值；
padding-left：像素值；
padding簡寫形式
padding：像素值；表示四個方向的內邊距
padding：像素值1 像素值2；表示上下、左右邊距
padding：像素值1 像素值2 像素值3 像素值4；上、右、下、左（順時針）
5.外邊距（margin）
外邊距分為四個方向：上、右、下、左（順時針方向）
margin-top：像素值；
margin-right：像素值；
margin-bottom：像素值；
margin-left：像素值；
外邊距指的是兩個盒子之間的距離，它可能是子元素與父元素之間的距離，也可能是兄弟元素之間的距離。只有當我們加入其它元素當參考對象時，才能看到效果。
當既有父元素，也有兄弟元素時，則這個方向的margin就是相對于兄弟元素而言，如果沒有兄弟元素，則相對于父元素而言
margin簡寫形式與padding一樣
二十二、浮動布局
1.正常文檔流&脫離文檔流
正常文檔流——默認情況下的HTML文檔結構
脫離文檔流——脫離正常文檔流，使用浮動和定位去改變
2.浮動——float
float屬性取值
left——元素向左浮動
right——元素向右浮動
3.清除浮動——clear
clear屬性取值
left——清除左浮動
right——清除右浮動
both——同時清除左浮動和有浮動（常用）
二十三、定位布局
浮動布局比較靈活，但是不容易控制
定位布局精準定位頁面中的元素，但是缺乏靈活性
布局定位的四種方式：
固定定位（fixed）
相對定位（relative）
絕對定位（absolute）
靜態定位（static）——默認情況下
這四種方式都是通過position屬性來實現的
1.固定定位：fixed——指的是被固定的元素不會隨著滾動條的拖動而改變位置
語法：
position：fixed；
top：像素值；
bottom：像素值；
left：像素值；
right：像素值；
這四個屬性不一定全部都用到，一般只會用到其中兩個，參考對象是瀏覽器的四條邊
2.相對定位：relative——指的是該元素的位置是相對于它的原始位置計算而來的
語法：
position：relative；
top：像素值；
bottom：像素值；
left：像素值；
right：像素值；
這四個屬性不一定全部都用到，一般只會用到其中兩個，參考對象是該元素的原始位置
3.絕對定位：absolute（使用最廣泛）
語法：
position：absolute；
top：像素值；
bottom：像素值；
left：像素值；
right：像素值；
這四個屬性不一定全部都用到，一般只會用到其中兩個，參考對象是瀏覽器的四條邊；
一個元素變成了絕對定位元素，這個元素就完全脫離文檔流了，即這個元素浮于其他元素上面，獨立出來
總結：默認情況下，固定定位和絕對定位的位置是相對于瀏覽器而言，而相對定位的位置是相對原始位置而言。
————————————————
版權聲明：本文為CSDN博主「MOSIMIN」的原創文章，遵循CC 4.0 by-sa版權協議，轉載請附上原文出處鏈接及本聲明。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
