HTML&CSS精選筆記_列表與超鏈接

列表與超鏈接

列表標記

無序列表ul

無序列表的各個列表項之間沒有順序級別之分，是並列的
<ul>
<li>列表項1</li>
<li>列表項2</li>
  <li>列表項3</li>
......
</ul>
每對<ul></ul>中至少應包含一對<li></li>。
無序列表中type屬性的常用值有三個，它們呈現的效果不同
disc（默認值）     ●
circle                     ○
square                  ■
注意:
不贊成使用無序列表的type屬性，一般通過CSS樣式屬性替代。
<li>與</li>之間相當於一個容器，可以容納所有元素。但是<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>標記中輸入文字的做法是不被允許的。

有序列表ol

有序列表即為有排列順序的列表，其各個列表項按照一定的順序排列定義
<ol>
    <li>列表項1</li>
    <li>列表項2</li>
    <li>列表項3</li>
......
</ol>
在有序列表中，除了type屬性之外，還可以為<ol>定義start屬性、為<li>定義value屬性，它們決定有序列表的項目符號
type  1（默認） 項目符號顯示為數字1 2 3…
a或A 項目符號顯示為英文字母a b c d…或A B C…
i或I 項目符號顯示為羅馬數字i ii iii…或I II III…
start 數字 規定項目符號的起始值
value 數字 規定項目符號的數字
注意:
各瀏覽器對有序列表的type和value屬性的解析不同。

不贊成使用<ol><li>的type、start和value屬性，可通過CSS樣式替代。

定義列表dl

定義列表常用於對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號。
<dl>
    <dt>名詞1</dt>
    <dd>名詞1解釋1</dd>
    <dd>名詞1解釋2</dd>
    ...
    <dt>名詞2</dt>
    <dd>名詞2解釋1</dd>
    <dd>名詞2解釋2</dd>

    ...

</dl>

列表的嵌套應用

在使用列表時，列表項中可能包含若干子列表項。要想在列表項中定義子列表項就需要將列表進行嵌套

CSS控制列表樣式

list-style-type屬性

用於控制無序和有序列表的項目符號，其取值有多種
列表類型 屬性值 顯示效果
無序列表（ul）
disc ●
circle ○
square ■
有序列表（ol）
decimal 阿拉伯數字1、2、3......
upper-alpha 大寫英文字母A、B、C......
lower-alpha 小寫英文字母a、b、c......
upper-roman 大寫羅馬數字I、II、III......
lower-roman 小寫羅馬數字i、ii、iii......
<ul>、<ol>公共屬性
none 不顯示任何符號


注意:
在實際網頁制作過程中，各個瀏覽器對list-style-type屬性的解析不同。因此，不推薦使用list-style-type屬性。

list-style-image屬性

list-style-image屬性的取值為圖像的url（地址）。使用list-style-image屬性可以為各個列表項設置項目圖像，使列表的樣式更加美觀。

list-style-position屬性

用於控制列表項目符號的位置，其取值如下所示：
    inside：列表項目符號位於列表文本以內。
    outside：列表項目符號位於列表文本以外（默認值）。

list-style屬性

列表樣式也是一個復合屬性，可以將列表相關的樣式都綜合定義在一個復合屬性list-style中。
list-style:列表項目符號 列表項目符號的位置 列表項目圖像;


使用復合屬性list-style時，通常按上面語法格式中的順序書寫，各個樣式之間以空格隔開，不需要的樣式可以省略。
在實際網頁制作過程中，為了更高效地控制列表項目符號，通常將list-style的屬性值定義為none，然后通過為<li>設置背景圖像的方式實現不同的列表項目符號。

超鏈接標記

創建超鏈接

只需用<a></a>標記環繞需要被鏈接的對象即可
<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>
<a>標記是一個行內標記，用於定義超鏈接，href和target為其常用屬性
href：用於指定鏈接目標的url地址，當為<a>標記應用href屬性時，它就具有了超鏈接的功能。
target：用於指定鏈接頁面的打開方式，其取值有_self和_blank兩種，其中_self為默認值，_blank為在新窗口中打開方式。
注意:
暫時沒有確定鏈接目標時，通常將<a>標記的href屬性值定義為“#”(即href="#")，表示該鏈接暫時為一個空鏈接。
不僅可以創建文本超鏈接，在網頁中各種網頁元素，如圖像、表格、音頻、視頻等都可以添加超鏈接。


創建圖像超鏈接時，在某些瀏覽器中，圖像會添加邊框效果，影響頁面的美觀。
為了不影響頁面的美觀，通常需要去掉圖像的邊框效果，使圖像正常顯示。去掉鏈接圖像的邊框很簡單，只需將圖像的邊框定義為0即可，代碼如下所示：
<a href="#"><img src="images/logo.gif" border="0" /></a>

錨點鏈接

通過創建錨點鏈接，用戶能夠快速定位到目標內容。
創建錨點鏈接分為兩步：
使用“<a href=”#id名“>鏈接文本</a>”創建鏈接文本。
使用相應的id名標注跳轉目標的位置。

鏈接偽類控制超鏈接

在CSS中，通過鏈接偽類可以實現不同的鏈接狀態。
所謂偽類並不是真正意義上的類，它的名稱是由系統定義的，通常由標記名、類名或id名加“：”構成。
超鏈接標記<a>的偽類有4種
a:link{ CSS樣式規則; } 未訪問時超鏈接的狀態
a:visited{ CSS樣式規則; } 訪問后超鏈接的狀態
a:hover{ CSS樣式規則; } 鼠標經過、懸停時超鏈接的狀態
a: active{ CSS樣式規則; } 鼠標點擊不動時超鏈接的狀態
注意:
同時使用鏈接的4種偽類時，通常按照a:link、a:visited、a:hover和a:active的順序書寫，否則定義的樣式可能不起作用。
除了文本樣式之外，鏈接偽類還常常用於控制超鏈接的背景、邊框等樣式。