整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
個網頁前端是由HTML DOM與嵌套組合形成視圖結加上 CSS 樣式的修飾形成視圖，由JavaScript 接受用戶的交互請求，以事件機制來響應用戶交互操作而形成的。CSS是前臺頁面形式最重要的部分，它負責控制DOM元素的頁面布局和顏色、大小的屬性。
在CSS中有一著名的盒子模型理論，可以用它來控制DOM的位置。基于div+css技術的“盒子模型”的出現大大代替了傳統的table表格嵌套。
雖然其十分好用，但是對于很多新手來說，卻很難搞清楚它幾個屬性和內容之間的聯系個區別。
所有頁面的元素都可以看做一個盒子，占據著一定的頁面空間。一般來說這些被占據的空間往往會比單純的內容要大。因此，可以通過盒子的邊框和距離等參數來控制內容的位置。
Div+CSS 盒子模型
說明：
1、Margin：中文叫外邊距，主要作用是控制邊框外（Border以外）的區域，外邊距是透明的。
2、Border：中文叫邊框，是圍繞在內邊距（Padding）和內容外的邊框。注意，它不是透明的。
3、Padding：中文叫內邊距，控制內容周圍的區域，內邊距是透明的。
4、Content：內容，盒子的內容，顯示文本和圖像。
5、在Css文件中設置的Div的Css.width和Css. height就是內容的寬和高。
6、盒子實際尺寸有可能大于內容尺寸：
盒子模型的總寬度等于content（寬）+padding（左右）+border（左右）+margin（左右）;
盒子模型的總高度等于content（高）+padding（上下）+border（上下）+margin（上下）;
接下來通過實例演示的方式來一一講解Margin、Border、Padding的作用和區別。
頁面如圖所示：
原始樣式
代碼：
HTML:
<body>
<div class="TsetUpper"></div>
<div class="TsetMiddle"></div>
<div class="TsetDown"></div>
</body>
CSS:
.TsetUpper{
width: 400px;
height: 200px;
background-color: black;
position: relative;
margin: auto;
text-align: center;
}
.TsetMiddle{
width: 600px;
height: 200px;
background-color: red;
position: relative;
margin: auto;
}
.TsetDown{
width: 400px;
height: 200px;
background-color: black;
position: relative;
margin: auto;
text-align: center;
}元素邊框：我們可以在CSS邊框屬性中設置元素邊框的樣式和顏色。
按如下代碼設置Div(TsetMiddle)的Border（邊框）：
border-style:solid;
border-width: 10px;
border-color: aqua;刷新頁面如下圖：此時TsetMiddle這個盒子的總寬度已經變成200+30+30了，而且可以設置其底色和線條樣式。
Border
margin 控制周圍的元素區域。margin 沒有背景顏色，是完全透明的。通過margin可以控制元素與四周元素的空隙距離；
按如下代碼設置Div(TsetMiddle)的margin（外邊距）：
margin: 30px auto;刷新頁面如下圖：此時TsetMiddle這個盒子的總寬度已經變成200+30（Border）+30（Margin）+30（Border）+30（Margin）了。
Margin
Padding：當元素的 padding（填充）內邊距被清除時，所釋放的區域將會受到元素背景顏色的填充。
按如下代碼設置Div(TsetMiddle)的margin（外邊距）：
padding: 30px;刷新頁面如下圖：此時TsetMiddle這個盒子的總寬度已經變成200+30（Padding）+30（Border）+30（Margin）+30（Padding）+30（Border）+30（Margin）了。
Padding
1、各屬性的值可以用px為單位，也可以用em，百分比等。
2、可以利用盒子的各種屬性，調整其內容在父容器中的位置。
. block(區塊)
block面板主要是設置對象文本的文字間距、對齊方式、上標、下標、排列方式、首行縮進等。
(1)word-spacing：設置單詞之間的間距。可以設置負值。
默認值:normal
(2)letter-spacing：設置字符之間的間距。可以指定負值。因為中文也是字符, 這個參數可以設置文字間的間距。
默認值:normal
(3)vertical-align：指定元素的垂直對齊方式。針對<td>表格設置垂直對齊方法,但是對<div>設置無效,可以將display屬性設置為table-cell值;
可以指定sub(下標)、super(上標)、top(與頂端對齊)、middle(居中)、bottom(與底端對齊)等。適用于行內塊元素 img、input、td等
baseline 默認。元素放置在父元素的基線上。
sub 垂直對齊文本的下標。
super 垂直對齊文本的上標
top 把元素的頂端與行中最高元素的頂端對齊
text-top 把元素的頂端與父元素字體的頂端對齊
middle 把此元素放置在父元素的中部。
bottom 把元素的頂端與行中最低的元素的頂端對齊。
text-bottom 把元素的底端與父元素字體的底端對齊。
% 使用 "line-height" 屬性的百分比值來排列此元素。允許使用負值。
inherit 規定應該從父元素繼承 vertical-align 屬性的值。
默認值: baseline
(4)text-align：設置文本的排列方式(適用于行內元素和行內塊元素, 如 a、span、input、img、label等元素)。left(左對齊)、right(右對齊)、center(居中)、justify(兩端對齊)。也可用于<hr/>下劃線對齊方式
默認值： 如果 direction 屬性是 ltr, 則默認值是 left；如果 direction 是 rtl，則為 right。(關于CSS direction 屬性看下面的內容介紹)
text-align 和margin auto 區別
text-align 可以讓塊級元素里面的文字內容居中對齊.
文字內容 == (圖片 input 行內元素 行內塊元素)
但是對于里面的塊級元素無效
讓一個塊級元素居中對齊 ： margin:0 auto;
(5)text-indent：設置文本第一行的縮進值。負值用于將文本第一行向外拉, 主要給<p>設置首行。
要在每段前空兩格,可設置為2em，因為em是當前字體尺寸，2em就是兩個字的大小。
默認值： not specified(沒有規定的)
p{font-size:12px;text-indent:2em;}上述代碼就是可以實現段落首行縮進24px(也就是兩個字體大小的距離)。
(6)white-space：設置如何處理元素內的空白符。有三個選項可選：
normal 會將空白符全部壓縮；
pre 則會如同處理pre標簽內的文本一樣處理這些空白符,也就是說，所有的空白符，包括空格，標簽，回車，等都會得以保留；
nowrap 指定文本只有遇到br標簽時才換行。
默認值: normal
(7)display: none 此元素不會被顯示。
block 此元素將顯示為塊級元素，此元素前后會帶有換行符。
inline 默認值。此元素會被顯示為內聯元素，元素前后沒有換行符。
inline-block 行內塊元素。(CSS2.1 新增的值)
list-item 此元素會作為列表顯示。
run-in 此元素會根據上下文作為塊級元素或內聯元素顯示。
compact CSS 中有值 compact，不過由于缺乏廣泛支持，已經從 CSS2.1 中刪除。
marker CSS 中有值 marker，不過由于缺乏廣泛支持，已經從 CSS2.1 中刪除。
table 此元素會作為塊級表格來顯示(類似 <table>)，表格前后帶有換行符。
inline-table 此元素會作為內聯表格來顯示(類似 <table>)，表格前后沒有換行符。
table-row-group 此元素會作為一個或多個行的分組來顯示(類似 <tbody>)。
table-header-group 此元素會作為一個或多個行的分組來顯示(類似 <thead>)。
table-footer-group 此元素會作為一個或多個行的分組來顯示(類似 <tfoot>)。
table-row 此元素會作為一個表格行顯示(類似 <tr>)。
table-column-group 此元素會作為一個或多個列的分組來顯示(類似 <colgroup>)。
table-column 此元素會作為一個單元格列顯示(類似 <col>)
table-cell 此元素會作為一個表格單元格顯示(類似 <td> 和 <th>)
table-caption 此元素會作為一個表格標題顯示(類似 <caption>)
inherit 規定應該從父元素繼承 display 屬性的值。
默認值： inline
常用的屬性:
display:none; //隱藏
display:block //顯示(將行內元素轉換為塊元素)
dispaly:inline //將塊元素轉換行內元素
dispaly:inline-block //將塊元素轉換為行內塊元素
display:table-cell; //此元素會作為一個表格單元格顯示(類似 <td> 和 <th>) 用于多行文本、塊元素垂直居中以上轉換涉及行內塊元素(img、input)轉換;
經過大量的測試證明：屬性display是不能用于轉換行內塊元素(img、input)
同義詞: 內聯元素(行內元素)
4. box(方框或盒子) 主要針對圖片、表格、層、段落(p)、標題(h1-h6)等
box面板主要設置對象的邊界、間距、高度、寬度、和漂浮方式等。
(1)width：定義元素的寬。
默認值:auto
(2)height：定義元素的高。
默認值:auto
以上width、height屬性如果是針對div標簽設置css樣式，則與定位設置窗口width、height屬性一致(Dreamweaver會自動填充數據)
在父元素和子元素都設置了高度和寬度的情況下：
如果子元素的寬度超出了它的父元素的寬度, 則會父元素不會限制其顯示寬度;
如果子元素的高度超出了它的父元素的高度, 則會父元素不會限制其顯示高度;
(3)float：定義元素的漂浮方式。left 表示對象浮在左邊、right表示對象浮在右邊、none 表示對象不浮動。
默認值:none
一個span標簽不需要轉成塊級元素, 就能夠設置寬度、高度了。所以能夠證明一件事兒, 就是所有標簽已經不區分行內、塊了。
也就是說, 一旦一個元素浮動了, 那么, 將能夠并排了, 并且能夠設置寬高了。無論它原來是個div還是個span。
span{
float: left;
width: 200px;
height: 200px;
background-color: orange;
}
(4)clear：不允許元素的漂浮，相對于前一個<div>設置浮動時，下一個有清除設置的元素就會移到它的下面。
left表示不允許左邊有浮動對象 right表示不允許右邊有浮動對象
none 表示允許兩邊都可以有浮動對象 both 不允許有浮動對象。
默認值:none
浮動的主要作用是將塊元素排在同一行(span也可以設置浮動);
浮動元素它會向左或者向右進行浮動, 所謂浮動可以理解"飄";
浮動元素向它遇到父元素的邊框就停止浮動;
浮動元素的層級會比普通元素要高, 并且它不會再占用原有的高度;
浮動元素只會影響后面的元素, 不會影響前面的元素：
浮動元素的后面的元素(可能是一個也可能是多個元素受到影響)也會繼承浮動元素的特性, 它也會浮動了要解決這個問題有兩辦法;
第一個：需要清除浮動
第二個：給父元素設置一個高度(子元素都設置了height高度條件下), 不建議使用
清除浮動后它不會影響到它后面的元素, 父元素會將所有的浮動元素包圍者
當然浮動元素對后面的元素的影響可以做首字母方法, 圖文混排(文字環繞圖片)等特效；
(5)padding：定義元素內容與其邊框的空距(如果元素沒有邊框就是指頁邊的空白)。
可以分別設置分別設置上、右、下、左內邊距。
padding-top
padding-right
padding-bottom
padding-left
p {padding:20px} 設置設置上、右、下、左內邊距都為20px
p {margin: 20px 30px 30px 20px;} 設置padding-top padding-right padding-bottom padding-left分別為20px 30px 30px 20px
默認值：0。
要懂得, 用小屬性層疊大屬性：
padding: 20px;
padding-left: 30px;
注意：大屬性要寫在前面, 小屬性寫在后面;
比如：
div{
width: 200px;
height: 200px;
padding-left: 10px;
padding-right: 20px;
padding:40px 50px 60px;
padding-bottom: 30px;
border: 1px solid #000;
}padding-left:10px和padding-right:20px沒用, 因為后面的padding大屬性, 層疊覆蓋了。
(6)margin：定義元素的邊框與其他元素之間的距離(如果沒有邊框就是指內容之間的距離)。
可以分別設置上邊界、右邊界、下邊界、左邊界的值。
margin-top
margin-right
margin-bottom
margin-left
p {margin:20px}
p {margin:10px 0px 15px 5px;}
默認值：0
marign：上邊界值 右邊界值 下邊界值 左邊界值
margin屬性值必須按照上面順序進行排列,以空格分開。如果僅輸入一個值,則4個邊界值會同時設置為此值。
如果僅輸入兩個的值,則缺少的值會以對邊的設置值進行替代。例如：
div{margin:5px 10px 15px 20px} /*上=5px,右=10px,下=15px,左=20px*/
div{margin:5px} /*上=5px,右=5px,下=5px,左=5px*/
div{margin:5px 10px} /*上=5px,右=10px,下=5px,左=10px*/
div{margin:5px 10px 15px} /*上=5px,右=10px,下=15px,左=10px*/
5. border(邊框) 針對段落(p標簽)、圖片、表格、標題(h1-h6)、form、input等(幾乎所有的元素都可以設置邊框)
border面板可以設置對象邊框的寬度、顏色及樣式。
(1)border-width：設置元素邊的寬度。可以分別設定top(上邊寬)、right(右邊寬)、bottom(下邊寬)、left(左邊寬)的值。
border-top-width border-right-width border-bottom-width border-left-width
thin 定義細的邊框。
medium 默認。定義中等的邊框。
thick 定義粗的邊框。
length 允許您自定義邊框的寬度。
inherit 規定應該從父元素繼承邊框寬度。
默認值: medium
(2)border-color：設置邊框的顏色。你可以分別對每條邊設置顏色。
注意：我們可以通過設置不同的顏色做出亮邊和暗邊的效果，這樣元素看起來是立體的。
border-top-color border-right-color border-bottom-color border-left-color
默認值: not specified(未規定的)
(3)border-style：設置邊框樣式。
border-top-style border-right-style border-bottom-style border-left-style
可以設置為none(無邊框)、dotted(點線)、dashed(虛線)、solid(實線)、double(雙線)、
groove(凹槽,3D凹線)、ridge(凸槽,3D凸線)、inset(凹邊,3D嵌入線)、outset(凸邊,3D浮出線)等邊框樣式。
默認值:none(無邊框)
推薦：表單輸入框：inset(凹邊) 按鈕：outset(凸邊)
兼容性問題
比如, border:10px ridge red; 在chrome和firefox、IE中有細微差別：
如果公司里面的設計師, 處女座的, 追求極高的頁面還原度, 那么不能使用css來制作邊框。
就要用到圖片, 就要切圖了。所以, 比較穩定的就幾個：solid、dashed、dotted, 其他的邊框樣式盡量不要用。
border可以沒有： border: none;
某一條邊沒有： border-left: none;
也可以調整左邊邊框的寬度為0px： border-left-width: 0px;
注意：border-bottom-style：可以修改a鏈接的"下劃線"的風格
border-bottom-width：可以修改a鏈接的"下劃線"的寬度(粗細)
border-bottom-color：可以修改a鏈接的"下劃線"的顏色
人在51RGB網學習HTML+CSS基礎課程，記錄一些文字，方便自己回憶，也希望對大家有所幫助
基礎框架
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>標題標簽</title>
</head>
<body>
<h1>了不起的蓋茨比</h1>
<p>《了不起的蓋茨比》為那個奢靡年代的縮影。蓋茨比懷揣著對"美國夢"的期翼，投身到那個年代的燈紅酒綠之中，卻在名利場中看盡世態炎涼，以及浮華背后一切終將逝去的空虛悵惘。1925年《了不起的蓋茨比》問世。
</p>
</body>
</html>
什么是代碼注釋？代碼注釋的作用是幫助程序員標注代碼的用途，過一段時間后再看你所編寫的代碼，就能很快想起這段代碼的用途。代碼注釋不僅方便程序員自己回憶起以前代碼的用途，還可以幫助其他程序員很快的讀懂你的程序的功能，方便多人合作開發網頁代碼。
語法：
文檔的頭部描述了文檔的各種屬性和信息，包括文檔的標題等。絕大多數文檔頭部包含的數據都不會真正作為內容顯示給讀者。
<head> <title>...</title> <meta> <link> <style>...</style> <script>...</script></head>
<title>標簽
在<title>和<title>標簽之間的文字內容是網頁的標題信息，它會出現在瀏覽器的標題欄中。網頁的title標簽用于告訴用戶和搜索引擎這個網頁的主要內容是什么，搜索引擎可以通過網頁標題，迅速的判斷出網頁的主題。每個網頁的內容都是不同的，每個網頁都應該有一個獨一無二的title。
例如：
<head> <title>helloworld</title></head>
<title>標簽的內容“hello world”會在瀏覽器中的標題欄上顯示出來，如下圖所示
在網頁上要展示出來的頁面內容一定要放在body標簽中。如下圖是一個新聞文章的網頁。
如果想在網頁上顯示文章，這時就需要<p>標簽了，把文章的段落放到<p>標簽中。
語法：<p>段落文本</p>
注意一段文字一個<p>標簽，如在一篇新聞文章中有3段文字，就要把這3個段落分別放到3個<p>標簽中。如下圖所示。
文章的段落用<p>標簽，那么文章的標題用什么標簽呢？在本節我們將使用<hx>標簽來制作文章的標題。標題標簽一共有6個，h1、h2、h3、h4、h5、h6分別為一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。并且依據重要性遞減。<h1>是最高的等級。
語法：<hx>標題文本</hx> x:1-6
注意：因為h1標簽在網頁中比較重要，所以一般h1標簽被用在網站名稱上。騰訊網站就是這樣做的。如：<h1>騰訊網</h1>
h1-h6標簽的默認樣式：
標簽代碼：
在瀏覽器中顯示的樣式：
有了段落又有了標題，現在如果想在一段話中特別強調某幾個文字，這時候就可以用到<em>或<strong>標簽但兩者在強調的語氣上有區別:
<em>表示強調，在瀏覽器中<em>默認用斜體表示
<strong>表示更強烈的強調，在瀏覽器中<strong>用粗體表示。
兩個標簽相比，目前國內前端程序員更喜歡使用<strong>表示強調。
在瀏覽器中默認樣式是有區別的：
瀏覽器中的樣子，如下圖。
語法：
<em>需要強調的文本</em>
<strong>需要強調的文本</strong>
栗子：
在網上商城中，某產品的打折后的價格是需要強調的。如下圖。
代碼實現:
語法：<span>文本</span>
我們對<em>、<strong>、<span>這三個標簽進行一下總結：
<em>和<strong>標簽是為了強調一段話中的關鍵字時使用，它們的語義是強調。
<span>標簽是沒有語義的，它的作用就是為了設置單獨的樣式用的。
如果現在我們想把上一小節的第一段話“美國夢”三個字設置成blue（藍色），但注意不是為了強調“美國夢”，而只是想為它設置和其它文字不同的樣式（并不想讓屏幕閱讀器對“美國夢”這三個字加重音讀出），所以這樣情況下就可以用到<span>標簽了。如下面例子：
<p>1922年的春天，一個想要成名名叫<em>尼克?卡拉威</em>（托比?馬奎爾TobeyMaguire飾）的作家， 離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士樂流行，走私為王，<strong>股票</strong>飛漲的時代。 為了追尋他的<span>美國夢</span>，他搬入紐約附近一海灣居住。</p>
我們如果想設置“美國夢”三個字設置成blue（藍色），只需要在<style>標簽中加入：
span{color:blue; }css部分，以后會聊，你能大概明白span就是能干單獨設置樣式的活，就ok了
想在你的html中加一段引用嗎？比如在你的網頁的文章里想引用某個作家的一句詩，這樣會使你的文章更加出彩，那么<q>標簽是你所需要的。
語法：<q>引用文本</q>
<p>最初知道莊子，是從一首詩<q>莊生曉夢迷蝴蝶。望帝春心托杜鵑
</q>開始的。雖然當時不知道是什么意思，只是覺得詩句挺特別。
后來才明白這個典故出自是莊子的《逍遙游》，《逍遙游》代表了莊子思想的最高境界，是對世俗社會的功名利祿及自己的舍棄。
</p>
講解:
在上面的例子中，“莊生曉夢迷蝴蝶。望帝春心托杜鵑。” 這是一句詩歌，出自晚唐詩人李商隱的《錦瑟》 。因為不是作者自己的文字，所以需要使用實現引用。
注意要引用的文本不用加雙引號，瀏覽器會對q標簽自動添加雙引號。
下圖是代碼顯示結果：
注意這里用標簽的真正關鍵點不是它的默認樣式雙引號（如果這樣我們不如自己在鍵盤上輸入雙引號就行了），而是它的語義：引用別人的話。
<blockquote>的作用也是引用別人的文本。但它是對長文本的引用，如在文章中引入大段某知名作家的文字，這時需要這個標簽。
等等，上一節<q>標簽不是也是對文本的引用嗎？不要忘記<q>標簽是對簡短文本的引用，比如說引用一句話就用到<q>標簽。
如想在我的文章中引用李白《關山月》中的詩句，因為引用文本比較長，所以使用
<blockquote>。
語法：<blockquote>引用文本</blockquote>
如下面例子：
<blockquote> 明月出天山，蒼茫云海間。長風幾萬里，吹度玉門關。漢下白登道，胡窺青海灣。由來征戰地，不見有人還。戍客望邊色，思歸多苦顏。高樓當此夜，嘆息未應閑。 </blockquote>
瀏覽器對<blockquote>標簽的解析是縮進樣式。如下圖所示：
例子，我們想讓一首詩顯示得更美觀些，如顯示下面效果：
怎么可以讓每一句詩詞后面加入一個折行呢？那就可以用到<br />標簽了，在需要加回車換行的地方加入<br />，<br />標簽作用相當于word文檔中的回車。
代碼改為：
<h2>《詠桂》</h2> <p>暗淡輕黃體性柔，<br/>情疏跡遠只香留。<br/>何須淺碧深紅色，<br/>自是花中第一流。
詩文在瀏覽器中顯示為：
在html代碼中輸入空格、回車都是沒有作用的。要想輸入空格，必須寫入。不要忘了那個分號
在html代碼中輸入空格是不起作用的，如下代碼。
在瀏覽中顯示，還是沒有空格效果。
輸入空格的正確方法：
在瀏覽器中的顯示出來的空格效果。如下圖所示。
在信息展示時，有時會需要加一些用于分隔的橫線，這樣會使文章看起來整齊些。如下圖所示：
語法：
html4.01版本<hr>
xhtml1.0版本<hr />注意：
<hr />標簽和<br />標簽一樣也是一個空標簽，所以只有一個開始標簽，沒有結束標簽。
<hr />標簽的在瀏覽器中的默認樣式線條比較粗，顏色為灰色，可能有些人覺得這種樣式不美觀，沒有關系，這些外在樣式在我們以后學習了css樣式表之后，都可以對其修改。
大家注意，現在一般使用 xhtml1.0 的版本（其它標簽也是），這種版本比較規范。
一般網頁中會有一些網站的聯系地址信息需要在網頁中展示出來，這些聯系地址信息如公司的地址就可以<address>標簽。也可以定義一個地址（比如電子郵件地址）、簽名或者文檔的作者身份。栗子：
<address>本文的作者：<ahref="mailto:zhaoliangsyn@163.com">zhaolion</a></address>
在介紹語言技術的網站中，避免不了在網頁中顯示一些計算機專業的編程代碼，當代碼為一行代碼時，你就可以使用<code>標簽了，如下面例子：
<code>var i = a + b;</code>
注意：在文章中一般如果要插入多行代碼時不能使用<code>標簽了。如果是多行代碼，可以使用<pre>標簽。
在上節中介紹加入一行代碼的標簽為<code>，但是在大多數情況下是需要加入大段代碼的，如下圖：
怎么辦？不會是每一代碼都加入一個<code>標簽吧，沒有這么復雜，這時候就可以使用<pre>標簽。
語法：<pre>語言代碼段</pre>
<pre>標簽的主要作用:預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。如下代碼：
<pre> varmessage="歡迎"; for(vari=1;i<=10;i++) { alert(message); } </pre>在瀏覽器中的顯示結果為：
在上面的例子中可以看到代碼中的空格，換行符都保留下來。如果用以前的方法，回車需要輸入<br>簽，空格需要輸入
注意：<pre>標簽不只是為顯示計算機的源代碼時用的，在你需要在網頁中預顯示格式時都可以使用它，只是<pre>標簽的一個常見應用就是用來展示計算機的源代碼。
在瀏覽網頁時，你會發現網頁上有很多信息的列表，如新聞列表、圖片列表，如下圖所示。
這些列表就可以使用ul-li標簽來完成。ul-li是沒有前后順序的信息列表。
語法：
<ul> <li>信息</li> <li>信息</li> ......</ul>
舉例：
<ul> <li>精彩少年</li> <li>美麗突然出現</li> <li>觸動心靈的旋律</li></ul>
ul-li在網頁中顯示的默認樣式一般為：每項li前都自帶一個圓點，如下圖所示：
如果想在網頁中展示有前后順序的信息列表，怎么辦呢？如，當當網上的書籍熱賣排行榜，如下圖所示。這類信息展示就可以使用<ol>標簽來制作有序列表來展示。
語法：
<ol> <li>信息</li> <li>信息</li> ......</ol>
舉例：
下面是一個熱點課程下載排行榜：
<ol> <li>前端開發面試心法</li> <li>零基礎學習html</li> <li>JavaScript全攻略</li></ol>
<ol>在網頁中顯示的默認樣式一般為：每項<li>前都自帶一個序號，序號默認從1開始，如下圖所示：
在網頁制作過程過中，可以把一些獨立的邏輯部分劃分出來，放在一個<div>標簽中，這個<div>標簽的作用就相當于一個容器。
語法：<div>…</div>
確定邏輯部分：
什么是邏輯部分？它是頁面上相互關聯的一組元素。如網頁中的獨立的欄目版塊，就是一個典型的邏輯部分。如下圖所示：圖中用紅色邊框標出的部分就是一個邏輯部分，就可以使用<div>標簽作為容器。
在上一小節中，我們把一些標簽放進<div>里，劃分出一個獨立的邏輯部分。為了使邏輯更加清晰，我們可以為這一個獨立的邏輯部分設置一個名稱，用id屬性來為<div>提供唯一的名稱，這個就像我們每個人都有一個身份證號，這個身份證號是唯一標識我們的身份的，也是必須唯一的。
如下兩圖進行比較，如果設計師把兩個圖給你，哪個圖你看上去能更快的理解呢？是不是右邊的那幅圖呢。
語法：<div id="版塊名稱">…</div>
有時候我們需要在網頁上展示一些數據，如某公司想在網頁上展示公司的庫存清單。如下表：
想在網頁上展示上述表格效果可以使用以下代碼：
創建表格的四個元素：table、tbody、tr、th、td
<table>…</table>：整個表格以<table>標記開始、</table>標記結束。
<tbody>…</tbody>：當表格內容非常多時，表格會下載一點顯示一點，但如果加上<tbody>標簽后，這個表格就要等表格內容全部下載完才會顯示。
<tr>…</tr>：表格的一行，所以有幾對tr 表格就有幾行。
<td>…</td>：表格的一個單元格，一行中包含幾對<td>...</td>，說明一行中就有幾列。
<th>…</th>：表格的頭部的一個單元格，表格表頭。
表格中列的個數，取決于一行中數據單元格的個數。
上述代碼在瀏覽器中顯示的默認的樣式為：
總結：
table表格在沒有添加css樣式之前，在瀏覽器中顯示是沒有表格線的
表頭，也就是th標簽中的文本默認為粗體并且居中顯示
Table 表格在沒有添加 css 樣式之前，是沒有邊框的。這樣不便于我們后期合并單元格知識點的講解，所以在這一節中我們為表格添加一些樣式，為它添加邊框。代碼中加入：
<styletype="text/css">tabletrtd,th{border:1pxsolid#000;}</style>上述代碼是用 css 樣式代碼，為th，td單元格添加粗細為一個像素的黑色邊框。
結果窗口顯示出結果樣式：
表格還是需要添加一些標簽進行優化，可以添加標題和摘要。代碼如下
摘要摘要的內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內容。
語法：<table summary="表格簡介文本">
標題用以描述表格內容，標題的顯示位置：表格上方。語法：
<table> <caption>標題文本</caption> <tr> <td>…</td> <td>…</td> …</tr>…</table>
使用<a>標簽可實現超鏈接，它在網頁制作中可以說是無處不在，只要有鏈接的地方，就會有這個標簽。
語法 ：<a href="目標網址" title="鼠標滑過顯示的文本">鏈接顯示的文本</a>
例如：<a title="點擊進入我的博客">click here!</a>
上面例子作用是單擊click here!文字，網頁鏈接到http://www.zhaolion.com這個網頁。
title屬性的作用，鼠標滑過鏈接文字時會顯示這個屬性的文本內容。這個屬性在實際網頁開發中作用很大，主要方便搜索引擎了解鏈接地址的內容（語義化更友好)
提醒
還有一個有趣的現象不知道小伙伴們發現了沒有，只要為文本加入a標簽后，文字的顏色就會自動變為藍色（被點擊過的文本顏色為紫色），顏色很難看吧，不過沒有關系后面我們學習了css樣子就可以設置過來（a{color:#000}),后面會詳細講解。
<a>標簽在默認情況下，鏈接的網頁是在當前瀏覽器窗口中打開，有時我們需要在新的瀏覽器窗口中打開。只需要添加一個屬性target="_blank"
如下代碼：
<a href="目標網址" target="_blank">click here!</a>
<a>標簽還有一個作用是可以鏈接Email地址，使用mailto能讓訪問者便捷向網站管理者發送電子郵件。我們還可以利用mailto做許多其它事情。下面一一進行講解，請看詳細圖示：
提醒:如果mailto后面同時有多個參數的話，第一個參數必須以“?”開頭，后面的參數每一個都以“&”分隔。
下面是一個完整的實例: 在瀏覽器中顯示的一個發送按鈕
點擊鏈接會打開電子郵件應用，并自動填寫收件人等設置好的信息，如下圖：
在網頁的制作中為使網頁炫麗美觀，肯定是缺少不了圖片，可以使用<img>標簽來插入圖片。語法：[站外圖片上傳中……(48)]
舉例：<img src = "myimage.gif" alt = "My Image" title = "My Image" />
講解：
src：標識圖像的位置；
alt：指定圖像的描述性文本，當圖像不可見時（下載不成功時），可看到該屬性指定的文本；
title：提供在圖像可見時對圖像的描述(鼠標滑過圖片時顯示的文本)；
圖像可以是GIF，PNG，JPEG格式的圖像文件。
網站怎樣與用戶進行交互？答案是使用HTML表單(form)。表單是可以把瀏覽者輸入的數據傳送到服務器端，這樣服務器端程序就可以處理表單傳過來的數據。
語法：<form method="傳送方式" action="服務器文件">
講解：
<form>：<form>標簽是成對出現的，以<form>開始，以</form>結束。
action ：瀏覽者輸入的數據被傳送到的地方,比如一個PHP頁面(save.php)。
method ： 數據傳送的方式（get/post）。
<formmethod="post"action="save.php"> <labelfor="username">用戶名:</label> <inputtype="text"name="username"/> <labelfor="pass">密碼:</label> <inputtype="password"name="pass"/> </form>
注意
所有表單控件（文本框、文本域、按鈕、單選框、復選框等）都必須放在<form></form>標簽之間（否則用戶輸入的信息可提交不到服務器上哦！）。
method:post/get的區別這一部分內容屬于后端程序員考慮的問題。感興趣的小伙伴可以問谷哥
當用戶要在表單中鍵入字母、數字等內容時，就會用到文本輸入框。文本框也可以轉化為密碼輸入框。
語法：
<form> <inputtype="text/password"name="名稱"value="文本"/></form>
type：
當type="text"時，輸入框為文本輸入框;
當type="password"時, 輸入框為密碼輸入框。
name：為文本框命名，以備后臺程序ASP 、PHP使用。
value：為文本輸入框設置默認值。(一般起到提示作用)
舉例：
<form> 姓名：<inputtype="text"name="myName"> <br/> 密碼：<inputtype="password"name="pass"></form>
在瀏覽器中顯示的結果：
當用戶需要在表單中輸入大段文字時，需要用到文本輸入域。
語法：<textarea rows="行數" cols="列數">文本</textarea>
<textarea>標簽是成對出現的，以<textarea>開始，以</textarea>結束。
cols ：多行輸入域的列數。
rows ：多行輸入域的行數。
在<textarea></textarea>標簽之間可以輸入默認值。
舉例：
<formmethod="post"action="save.php"> <label>聯系我們</label> <textareacols="50"rows="10">在這里輸入內容...</textarea></form>
在瀏覽器中顯示結果：
在使用表單設計調查表時，為了減少用戶的操作，使用選擇框是一個好主意，html中有兩種選擇框，即單選框和復選框，兩者的區別是單選框中的選項用戶只能選擇一項，而復選框中用戶可以任意選擇多項，甚至全選。請看下面的例子:語法：<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
type:
當 type="radio" 時，控件為單選框
當 type="checkbox" 時，控件為復選框
value：提交數據到服務器的值（后臺程序PHP使用）
name：為控件命名，以備后臺程序 ASP、PHP 使用
checked：當設置 checked="checked" 時，該選項被默認選中
如下面代碼：
在瀏覽器中顯示的結果：
注意:同一組的單選按鈕，name 取值一定要一致，比如上面例子為同一個名稱“radioLove”，這樣同一組的單選按鈕才可以起到單選的作用。
下拉列表在網頁中也常會用到，它可以有效的節省網頁空間。既可以單選、又可以多選。如下代碼：
講解：
value：
selected="selected"：設置selected="selected"屬性，則該選項就被默認選中。
下拉列表也可以進行多選操作，在<select>標簽中設置multiple="multiple"屬性，就可以實現多選功能，在 widows 操作系統下，進行多選時按下Ctrl鍵同時進行單擊（在 Mac下使用 Command +單擊），可以選擇多個選項。如下代碼：
在瀏覽器中顯示的結果：
在表單中有兩種按鈕可以使用，分別為：提交按鈕、重置。這一小節講解提交按鈕：當用戶需要提交表單信息到服務器時，需要用到提交按鈕。語法：<input type="submit" value="提交">
type：只有當type值設置為submit時，按鈕才有提交作用
value：按鈕上顯示的文字
舉例：
在瀏覽器中顯示的結果：
當用戶需要重置表單信息到初始時的狀態時，比如用戶輸入“用戶名”后，發現書寫有誤，可以使用重置按鈕使輸入框恢復到初始狀態。只需要把type設置為"reset"就可以。語法：<input type="reset" value="重置">
type：只有當type值設置為reset時，按鈕才有重置作用
value：按鈕上顯示的文字
舉例：
在瀏覽器中顯示的結果：
輸入賬號
單擊重置按鈕
小伙伴們，你們在前面學習表單各種控件的時候，有沒有發現一個標簽--label，這一小節就來揭曉它的作用。
label標簽不會向用戶呈現任何特殊效果，它的作用是為鼠標用戶改進了可用性。如果你在 label 標簽內點擊文本，就會觸發此控件。就是說，當用戶單擊選中該label標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上（就自動選中和該label標簽相關連的表單控件上）。
語法：<label for="控件id名稱">
注意標簽的 for 屬性中的值應當與相關控件的 id 屬性值一定要相同。這樣你會在點慢跑標簽，即使沒有點checkbox 也能選中
例子：
<form> <a>你對什么運動感興趣：</a><br/> <labelfor="1">慢跑</label><inputtype="checkbox"name="manpao"id="1"><br/> <labelfor="2">登山</label><inputtype="checkbox"name="dengshan"id="2"><br/> <labelfor="3">籃球</label><inputtype="checkbox"name="lanqiu"id="3"><br/></form>
限時!！免費送Dreamweaver、js等前端教程
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
