HTML標籤----圖文詳解（二）
本文最初於2015-10-02發表於博客園，並在GitHub上持續更新前端的系列文章。歡迎在GitHub上關注我，一塊兒入門和進階前端。javascript
如下是正文。php
HTML標籤超詳細的圖文演示再來一波~~~css
若是尚未看過昨天的福利的，那可要抓緊嘍，傳送門：HTML標籤----圖文詳解html
本文主要內容
- 列表標籤：
<ul>、<OL>、<dl> - 表格標籤：
<table> - 框架標籤及內嵌框架
<iframe> - 表單標籤：
<form> - 多媒體標籤
- 滾動字幕標籤：
<marquee>
列表標籤
列表標籤分爲三種。前端
一、無序列表<ul>，無序列表中的每一項是<li>
英文單詞解釋以下：java
- ul：unordered list，「無序列表」的意思。
- li：list item，「列表項」的意思。
例如：git
<ul>
<li>默認1</li>
<li>默認2</li>
<li>默認3</li>
</ul>
效果：github
注意：數據庫
- li不能單獨存在，必須包裹在ul裏面；反過來講，ul的「兒子」不能是別的東西，只能有li。
- 咱們這裏再次強調，ul的做用，並非給文字增長小圓點的，而是增長無序列表的「語義」的。
屬性：瀏覽器
type="屬性值"。屬性值能夠選：disc(實心原點，默認)，square(實心方點)，circle(空心圓)。
效果以下：
不光是<ul>標籤有type屬性，<ul>裏面的<li>標籤也有type屬性（雖說這種寫法不多見）。效果以下：
注意：項目符號能夠是圖片，可是經過CSS設置
固然了，列表之間是能夠嵌套的。咱們來舉個例子：
代碼：
<ul>
<li><b>北京市</b>
<ul>
<li>海淀區</li>
<li>朝陽區</li>
<li>東城區</li>
</ul>
</li>
<li><b>廣州市</b>
<ul>
<li>天河區</li>
<li>越秀區</li>
</ul>
</li>
</ul> 效果：
ul標籤實際應用場景
場景1 —— 導航條：
場景2 —— li裏面放置的內容可能不少：
聲明：ul的兒子，只能是li。可是li是一個容器級標籤，li裏面什麼都能放。甚至能夠再放一個ul。
二、有序列表<OL>，裏面的每一項是<li>
英文單詞：Ordered List。
例如：
<ol >
<li>呵呵噠1</li>
<li>呵呵噠2</li>
<li>呵呵噠3</li>
</ol> 效果：
屬性：
type="屬性值"。屬性值能夠是：1(阿拉伯數字，默認)、a、A、i、I。結合start屬性表示從幾開始。
舉例：
<ol type="1">
<li>呵呵</li>
<li>呵呵</li>
<li>呵呵</li>
</ol>
<ol type="a">
<li>嘿嘿</li>
<li>嘿嘿</li>
<li>呵呵</li>
</ol>
<ol type="i" start="4">
<li>哈哈</li>
<li>哈哈</li>
<li>哈哈</li>
</ol>
<ol type="I" start="10">
<li>麼麼</li>
<li>麼麼</li>
<li>麼麼</li>
</ol> 效果以下：
和無序列表同樣，有序列表也是能夠嵌套的哦，這裏就不舉相似的例子了。
ol和ul就是語義不同，怎麼使用都是同樣的。
ol裏面只能有li，li必須被ol包裹。li是容器級。
ol這個東西用的很少，若是想表達順序，你們通常也用ul。舉例以下：
<ul>
<li>1. 小蘋果</li>
<li>2. 月亮之上</li>
<li>3. 最炫民族風</li>
</ul> 三、定義列表<dl>
定義列表的做用很是大。
<dl>英文單詞：definition list，沒有屬性。dl的子元素只能是dt和dd。
<dt>：definition title 列表的標題，這個標籤是必須的<dd>：definition description 列表的列表項，若是不須要它，能夠不加
備註：dt、dd只能在dl裏面；dl裏面只能有dt、dd。
舉例：
<dl>
<dt>第一條</dt>
<dd>你如果以爲你有實力和我玩，良辰不介意奉陪到底</dd>
<dd>我會讓你明白，我從不說空話</dd>
<dd>我是本地的，我有一百種方式讓你呆不下去；而你，迫不得已</dd>
<dt>第二條</dt>
<dd>良辰最喜歡對那些自認能力出衆的人出手</dd>
<dd>你能夠繼續我行我素，不過，你的日子不會很舒心</dd>
<dd>你只要記住，我叫葉良辰</dd>
<dd>不介意陪你玩玩</dd>
<dd>良辰必有重謝</dd>
</dl> 效果：
上圖能夠看出，定義列表表達的語義是兩層：
- （1）是一個列表，列出了幾個dd項目
- （2）每個詞兒都有本身的描述項。
備註：dd是描述dt的。
定義列表用法很是靈活，能夠一個dt配不少dd：
<dl>
<dt>北京</dt>
<dd>國家首都，政治文化中心</dd>
<dd>污染很嚴重，PM2.0每天報表</dd>
<dt>上海</dt>
<dd>魔都，有外灘、東方明珠塔、黃浦江</dd>
<dt>廣州</dt>
<dd>中國南大門，有珠江、小蠻腰</dd>
</dl> 還能夠拆開，讓每個dl裏面只有一個dt和dd，這樣子感受清晰一些：
<dl>
<dt>北京</dt>
<dd>國家首都，政治文化中心</dd>
<dd>污染很嚴重，PM2.0每天報表</dd>
</dl>
<dl>
<dt>上海</dt>
<dd>魔都，有外灘、東方明珠塔、黃浦江</dd>
</dl>
<dl>
<dt>廣州</dt>
<dd>中國南大門，有珠江、小蠻腰</dd>
</dl> 真實案例：（京東最下方）
上圖中的結構以下：
<dl>
<dt>購物指南</dt>
<dd>
<a href="#">購物流程</a>
<a href="#">會員介紹</a>
<a href="#">生活旅行/團購</a>
<a href="#">常見問題</a>
<a href="#">你們電</a>
<a href="#">聯繫客服</a>
</dd>
</dl>
<dl>
<dt>配送方式</dt>
<dd>
<a href="#">上門自提</a>
<a href="#">211限時達</a>
<a href="#">配送服務查詢</a>
<a href="#">配送費收取標準</a>
<a href="#">海外配送</a>
</dd>
</dl> 京東舉例：
dt、dd都是容器級標籤，想放什麼均可以。因此，如今就應該更加清晰的知道：用什麼標籤，不是根據樣子來決定，而是語義（語義本質上是結構）。
表格標籤
表格標籤用<table>表示。
一個表格<table>是由每行<tr>組成的，每行是由<td>組成的。
因此咱們要記住，一個表格是由行組成的（行是由列組成的），而不是由行和列組成的。
在之前，要想固定標籤的位置，惟一的方法就是表格。如今能夠經過CSS定位的功能來實現。可是如今在作頁面的時候，表格做用仍是有一些的。
例如，一行的單元格：
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table> 上面的表格中沒有加文字，因此在生成的網頁中什麼都看不到。
例如，3行4列的單元格：
<table>
<tr>
<td>生命壹號</td>
<td>23</td>
<td>男</td>
<td>黃岡</td>
</tr>
<tr>
<td>許嵩</td>
<td>29</td>
<td>男</td>
<td>安徽</td>
</tr>
<tr>
<td>鄧紫棋</td>
<td>23</td>
<td>女</td>
<td>香港</td>
</tr>
</table> 效果：
上圖中的表格好像沒看到邊框呀，不急，接下來看看<table>標籤的屬性。
<table>的屬性：
border：邊框。像素爲單位。style="border-collapse:collapse;"：單元格的線和表格的邊框線合併width：寬度。像素爲單位。height：高度。像素爲單位。bordercolor：表格的邊框顏色。align：表格的水平對齊方式。屬性值能夠填：left right center。
注意：這裏不是設置表格裏內容的對齊方式，若是想設置內容的對齊方式，要對單元格標籤<td>進行設置）cellpadding：單元格內容到邊的距離，像素爲單位。默認狀況下，文字是緊挨着左邊那條線的，即默認狀況下的值爲0。
注意不是單元格內容到四條邊的距離哈，而是到一條邊的距離，默認是與左邊那條線的距離。若是設置屬性dir="rtl"，那就指的是內容到右邊那條線的距離。cellspacing：單元格和單元格之間的距離（外邊距），像素爲單位。默認狀況下的值爲0bgcolor="#99cc66"：表格的背景顏色。background="路徑src/..."：背景圖片。
背景圖片的優先級大於背景顏色。bordercolorlight：表格的上、左邊框，以及單元格的右、下邊框的顏色bordercolordark：表格的右、下邊框，以及單元格的上、左的邊框的顏色
這兩個屬性的目的是爲了設置3D的效果。dir：公有屬性，單元格內容的排列方式(direction)。 能夠 取值：ltr：從左到右（left to right，默認），rtl：從右到左（right to left）
既然說dir是共有屬性，若是把這個屬性放在任意標籤中，那代表這個標籤的位置可能會從右開始排列。
單元格帶邊框的效果：
備註：表格中很細表格邊線的製做：
CSS的寫法：
style="border-collapse:collapse;"
int leixing de bianliang guocheng shi yizhon
<tr>：行
一個表格就是一行一行組成的嘛。
屬性：
dir：公有屬性，設置這一行單元格內容的排列方式。能夠取值：ltr：從左到右（left to right，默認），rtl：從右到左（right to left）bgcolor：設置這一行的單元格的背景色。
注：沒有background屬性，即：沒法設置這一行的背景圖片，若是非要設置，能夠用css實現。height：一行的高度align="center"：一行的內容水平居中顯示，取值：left、center、rightvalign="center"：一行的內容垂直居中，取值：top、middle、bottom
<td>：單元格
屬性：
align：內容的橫向對齊方式。屬性值能夠填：left right center。
若是想讓每一個單元格的內容都居中，這個屬性太麻煩了，之後用css來解決。valign：內容的縱向對齊方式。屬性值能夠填：top middle bottomwidth：絕對值或者相對值(%)height：單元格的高度bgcolor：設置這個單元格的背景色。background：設置這個單元格的背景圖片。
單元格的合併
若是要將兩個單元格合併，那確定就要刪掉一個單元格。
單元格的屬性：
colspan：橫向合併。例如colspan="2"表示當前單元格在水平方向上要佔據兩個單元格的位置。rowspan：縱向合併。例如rowspan="2"表示當前單元格在垂直方向上要佔據兩個單元格的位置。
效果舉例：（橫向合併）
效果舉例：（縱向合併）
<th>：加粗的單元格。至關於<td> + <b>
- 屬性同
<td>標籤。
<caption>：表格的標題。使用時和tr標籤並列
- 屬性：
align，表示標題相對於表格的位置。屬性取值能夠是：left、center、right、top、bottom
效果：
表格的<thead>標籤、<tbody>標籤、<tfoot>標籤
這三個標籤有與沒有的區別：
- 一、若是寫了，那麼這三個部分的代碼順序能夠任意，瀏覽器顯示的時候仍是按照thead、tbody、tfoot的順序依次來顯示內容。若是不寫thead、tbody、tfoot，那麼瀏覽器解析並顯示錶格內容的時候是從按照代碼的從上到下的順序來顯示。
- 二、當表格很是大內容很是多的時候，若是用thead、tbody、tfoot標籤的話，那麼數據能夠邊獲取邊顯示。若是不寫，則必須等表格的內容所有從服務器獲取完成才能顯示出來。
舉例：
<body>
<table border="1">
<tbody>
<tr>
<td>生命壹號</td>
<td>23</td>
<td>男</td>
<td>黃岡</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>許嵩</td>
<td>29</td>
<td>男</td>
<td>安徽</td>
</tr>
</tfoot>
<thead>
<tr>
<td>鄧紫棋</td>
<td>23</td>
<td>女</td>
<td>香港</td>
</tr>
</thead>
</table>
</body> 效果：
框架標籤
若是咱們但願在一個網頁中顯示多個頁面，那框架標籤就派上用場了。
- 注意，框架標籤不能放在
<body>標籤裏面，由於<body>標籤表明的只是一個頁面，而框架標籤表明的是多個頁面。因而：<frameset>和<body>只能二選一。- 框架的集合用
<frameset>表示，而後在<frameset>集合裏放入一個一個的框架<frame>
<frameset>：框架的集合
一個框架的集合能夠包含多個框架或框架的集合。
屬性：
rows：水平分割，將框架分爲上下部分。寫法有兩種：
一、絕對值寫法：rows="200,*"其中*表明剩餘的。這裏其實包含了兩個框架：上面的框架佔200個像素，下面的框架佔剩下的部分。
二、相對值寫法：rows="30%,*"其中*表明剩餘的。這裏其實包含了兩個框架：上面的框架佔30%，下面的框架佔70%。
注：若是你想將框架分紅不少行，在屬性值裏用逗號隔開就好了。cols：垂直分割，將框架分爲左右部分。寫法有兩種：
一、絕對值寫法：cols="200,*"其中*表明剩餘的。這裏其實包含了兩個框架：左邊的框架佔200個像素，右邊的框架佔剩下的部分。
二、相對值寫法：cols="30%,*"其中*表明剩餘的。這裏其實包含了兩個框架：左邊的框架佔30%，右邊的框架佔70%。
注：若是你想將框架分紅不少列，在屬性值裏用逗號隔開就好了。
效果：
上圖中，若是刪掉頁面right.html，顯示效果以下：
<frame>：框架
一個框架顯示一個頁面。
屬性：
scrolling="no"：是否須要滾動條。默認值是true。noresize：不能夠改變框架大小。默認狀況下，單個框架的邊界是能夠拖動的，這樣的話，框架大小就不固定了。若是用了這個屬性值，框架大小將固定。
舉例：
<frame src="top.html" noresize></frame>
bordercolor="#00FF00"：給框架的邊框定義顏色。這個屬性在框架集合<frameset>中一樣適用。
顏色這個屬性在IE瀏覽器中生效，可是在google瀏覽器中無效，不知道爲啥。frameborder="0"或frameborder="1"：隱藏或顯示邊框（框架線）。name：給框架起一個名字。
利用name這個屬性，咱們能夠在框架裏進行超鏈。
舉例：
效果：
內嵌框架
內嵌框架用<iframe>表示。<iframe>是<body>的子標記。
內嵌框架inner frame：嵌入在一個頁面上的框架(僅僅IE、新版google瀏覽器支持，可能有其餘瀏覽器也支持，暫時我不清楚)。
屬性：
src="subframe/the_second.html"：內嵌的那個頁面width=800：寬度height=「150：高度scrolling="no"：是否須要滾動條。默認值是true。name="mainFrame"：窗口名稱。公有屬性。
效果：
內嵌框架舉例：（在內嵌頁面中切換顯示不一樣的壓面）
<body>
<a href="文字頁面.html" target="myframe">默認顯示文字頁面</a><br>
<a href="圖片頁面.html" target="myframe">點擊進入圖片頁面</a><br>
<a href="表格頁面.html" target="myframe">點擊進入表格頁面</a><br>
<iframe src="文字頁面.html" width="400" height="400" name="myframe"></iframe>
<br>
嘿嘿
</body> 效果演示：
表單標籤
表單標籤用<form>表示，用於與服務器的交互。表單就是收集用戶信息的，就是讓用戶填寫的、選擇的。
屬性：
name：表單的名稱，用於JS來操做或控制表單時使用；id：表單的名稱，用於JS來操做或控制表單時使用；action：指定表單數據的處理程序，通常是PHP，如：action=「login.php」method：表單數據的提交方式，通常取值：get(默認)和post
注意：表單和表格嵌套時，是在
- 1. 02-html標籤圖文詳解（二）
- 2. HTML標籤詳解
- 3. HTML--標籤詳解
- 4. HTML常用標籤-應用場景-圖文詳解（二）
- 5. HTML：文件標籤（二） - 表格標籤
- 6. html標籤（二）
- 7. html標籤二
- 8. 二、html標籤
- 9. CSS+HTML(二)------HTML標籤（二）
- 10. HTML 標籤 遇到 詳解
- 更多相關文章...
- • *.hbm.xml映射文件詳解 - Hibernate教程
- • ARP報文格式詳解 - TCP/IP教程
- • Flink 數據傳輸及反壓詳解
- • Scala 中文亂碼解決
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 02-html標籤圖文詳解（二）
- 2. HTML標籤詳解
- 3. HTML--標籤詳解
- 4. HTML常用標籤-應用場景-圖文詳解（二）
- 5. HTML：文件標籤（二） - 表格標籤
- 6. html標籤（二）
- 7. html標籤二
- 8. 二、html標籤
- 9. CSS+HTML(二)------HTML標籤（二）
- 10. HTML 標籤 遇到 詳解