導語:
上一章我們說到了html標籤裏的格式化手法,今天我們繼續其他標籤
引用（Quotation）
quote 美音 /kwot/
<q>
定義短的引用,瀏覽器會爲 <q> 元素添加雙引號:
<p>WWF 的目標是：<q>構建人與自然和諧共存的世界。</q></p><blockquote>
定義被引用的節,用於長引用。被<blockquote> 元素引用的節會進行縮進處理:
<p>以下內容引用自 WWF 的網站：</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年來，WWF 一直致力於保護自然界的未來。
世界領先的環保組織，WWF 工作於 100 個國家，
並得到美國一百二十萬會員及全球近五百萬會員的支持。
</blockquote><abbr>
定義縮寫或首字母縮略語:
當鼠標移動到被標記的縮寫詞的時候,會顯示被縮寫的文本
<p><abbr title="World Health Organization">WHO</abbr> 成立於 1948 年。</p>效果如下:
![CrazyWing：Python自動化運維開發實戰 二十一、html標籤用法平推式]()
<dfn>
定義縮寫。
<p><dfn title="World Health Organization">WHO</dfn> 成立於 1948 年。</p>效果如下:
效果根abbr非常類似,直接使用使用 <abbr> 代替。
<address>
定義文檔或文章的聯繫信息（作者/擁有者）。
此元素以斜體顯示,大多數瀏覽器會在此元素前後添加折行。
<address>
Written by Donald Duck.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address><cite>
定義著作的標題
瀏覽器會以斜體顯示 <cite> 元素。
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p><bdo>
定義雙流向覆蓋（bi-directional override）,也就是上下左右做反向顯示文本
<bdo dir="rtl">This text will be written from right to left</bdo>效果如下:
HTML 計算機代碼格式
通常，HTML 使用可變的字母尺寸，以及可變的字母間距,在顯示計算機代碼時，並不需要如此。
<kbd>, <samp>, 以及 <code> 元素全都支持固定的字母尺寸和間距。
<kbd>
定義鍵盤輸入：
<p>To open a file, select:</p>
<p><kbd>File | Open...</kbd></p>
<samp>
定義計算機輸出
<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>
<code>
定義編程代碼,但是不保留多餘的空格和折行：
<code>
var person = {
firstName:"Bill",
lastName:"Gates",
age:50,
eyeColor:"blue"
}
</code>
<pre>
如需解決上面<code>的問題，必須在 <pre> 元素中包圍代碼：
<code>
<pre>
var person = {
firstName:"Bill",
lastName:"Gates",
age:50,
eyeColor:"blue"
}
</pre>
</code>
<var>
定義數學變量：
<p><var>E = m c<sup>2</sup></var></p>HTML中的樣式
wing提示:本節只是簡單演示樣式,在腦子裏有一個樣式的大概印象,如果想深入學習樣式需要專門花時間在CSS上.
所有的格式化代碼均可移出 HTML 文檔，然後移入一個獨立的樣式表。
當瀏覽器讀到這個樣式表，它就會按照這個樣式表來對文檔進行格式化。
一句話:所謂樣式就是事先統一定義每個標籤所使用的文本格式化方式
插入樣式表的三種姿勢：
內部樣式表
當單個文件需要特別樣式時，就可以使用內部樣式表。在 head 部分通過 <style> 標籤定義內部樣式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>例:使用添加到 <head> 部分的樣式信息對 HTML 進行格式化。
<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>
<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>內聯樣式
當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。 使用內聯樣式的方法是在相關的標籤中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。
比如:改變段落的顏色和左外邊距
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>例:使用樣式屬性做一個沒有下劃線的鏈接
<a href="http://fklinux.blog.51cto.com" style="text-decoration:none">
這是一個鏈接！
</a>外部樣式表
當樣式需要被應用到很多頁面時使用外部樣式表，就可通過更改一個文件來改變整個站點的外觀。
每個頁面使用 <link> 標籤鏈接到樣式表。
<link> 標籤在（文檔的）頭部：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>瀏覽器會從文件 mystyle.css 中讀到樣式表，並根據它來格式文檔。
文件不能包含任何的 html 標籤,以 .css 擴展名進行保存。
比如：
# vim mystyle.css
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/girl1.gif");}屬性值與單位之間不能有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ，它僅在 IE 6 中有效，但是在 Mozilla/Firefox 或 Netscape 中卻無法正常工作。
<link>標籤的rel屬性:
規定當前文檔與被鏈接文檔之間的關係。
值:stylesheet
文檔的外部樣式表。
只有 rel 屬性的 "stylesheet" 值得到了所有瀏覽器的支持。其他值只得到了部分地支持。HTML 表格
<table> 標籤定義表格:
每個表格均有若干行,由 <tr> 標籤定義.
每行被分割爲若干單元格,由 <td> 標籤定義.
字母 td 指表格數據(table data)，即數據單元格的內容.
數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等.
border屬性:
指定表格邊框寬度,用於<table>.
cellpadding屬性:
中文翻譯爲:補白
用於指定<td>內表格內容到邊框間的間距,也就是單元格邊距.在<table>內使用.
cellspacing屬性:
中文翻譯爲:單元格間距
用於指定表格邊框和邊框之間的間距.也就是單元格間距.在<table>內使用.
bgcolor屬性:
指定表格背景顏色.在<table>內使用.也可用於<th>和<td>給單元格添加背景色.
background屬性:
指定表格背景圖片,注意會覆蓋背景色.在<table>內使用.也可用於<th>和<td>給單元格添加背景圖片.
align屬性:
用於指定內容在單元格中的位置,在<td>內使用.
<caption>標籤:
用於指定一個表格的標題.
<th>標籤:
指定表頭內容(類似於數據庫表中的字段名稱),瀏覽器會把表頭顯示爲粗體居中的文本.
no-breaking space
空格,用於佔位.由於沒有內容的表格邊框不顯示,用空格佔位來解決.
colspan屬性:
用於跨行或者跨列,在<th>或<td>內使用 <body>
<table border="1" cellpadding="10" cellspacing="10" bgcolor="red" background="images/girl2.gif">
<caption>表格標題</caption>
<tr>
<th>table head1</th>
<th>table head2</th>
<th colspan="2">電話</th>
</tr>
<tr>
<td align="left">1</td>
<td align="right">2</td>
<td> </td> <!--用空格佔位-->
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<th>姓名</th> <!--垂直表頭-->
<td>7</td>
</tr>
<!--表格內容可以是其他元素,比如下面的段落和無序列表,也可以是另一個表格-->
<tr>
<td>
<p>this is a para</p>
<p>this is anothor para</p>
</td>
<td>
<ul>
<li>this is a list</li>
<li>this is a list</li>
</ul>
</td>
</tr>
</table>
</body>frame屬性
框架屬性,控制圍繞表格的邊框。
註釋：frame 屬性無法在 Internet Explorer 中正確地顯示。
<table frame="box">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>效果:
<table frame="above">
效果:<table frame="below">
效果:<table frame="hsides">
效果:<table frame="vsides">
效果:
HTML 支持有序、無序和定義列表
HTML無序列表
無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。
無序列表使用 <ul> 標籤
<ul>
<li>Coffee</li> <!--列表項-->
<li>Milk</li>
</ul>顯示如下：
• Coffee
• Milk標籤<li>的全稱是 : List Item列表項目
標籤<ul>的全稱是: Unordered List 不排序列表
HTML有序列表
有序列表項目使用數字進行標記。
有序列表始於 <ol> 標籤。每個列表項始於 <li> 標籤。
列表項使用數字來標記。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>顯示如下：
1.Coffee
2.Milk標籤<ol>的全稱是: Ordered List 排序列表
HTML 自定義列表
自定義列表不僅僅是一列項目，而是項目及其註釋的組合。
自定義列表以 <dl> 標籤開始。
每個自定義列表項以 <dt> 開始。
每個自定義列表項的定義以 <dd> 開始。
例1:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>效果如下：
Coffee
- black hot drink
Milk - white cold drink
例2:
<dl>
<dt>計算機</dt>
<dd>用來計算的儀器 ... ...</dd>
<dt>顯示器</dt>
<dd>以視覺方式顯示信息的裝置 ... ...</dd>
</dl>效果如下:
計算機
用來計算的儀器 ... ...
顯示器
以視覺方式顯示信息的裝置 ... ...<ul>標籤的type屬性
不同類型的無序列表
<ul type="disc"> 效果如下:
• 蘋果
• 香蕉
• 檸檬
• 桔子
<ul type="circle">效果如下:
°蘋果
°香蕉
°檸檬
°桔子
<ul type="square">效果如下:
☐ 蘋果
☐ 香蕉
☐ 檸檬
☐ 桔子
square [skweə(r)] 方格 不同類型的有序列表
數字列表：
<ol>
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>
字母列表：
<ol type="A">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>
小寫字母列表：
<ol type="a">
羅馬字母列表：
<ol type="I">
小寫羅馬字母列表：
<ol type="i">嵌套列表
例1:
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>紅茶</li>
<li>綠茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>例2:
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>紅茶</li>
<li>綠茶
<ul>
<li>中國茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>