Web前端開發(fā) 課件 第3章 HTML列表

第3章HTML列表主講教師：朱鐵櫻《Web前端開發(fā)》3.1超鏈接的基本使用<a>標簽定義超鏈接，用于從一張頁面鏈接到另一張頁面。<a>元素最重要的屬性是href屬性，它指示鏈接的目標。超鏈接的其它屬性title屬性：表示鼠標懸停在超鏈接上時顯示的文本內(nèi)容target屬性：表示是否在新窗口打開超鏈接_self：

默認。在相同的窗口中打開被鏈接文檔_blank：表示在新窗口中打開被鏈接文檔3.2錨點在W3C標準字“Anchor”一詞即為錨點，其解釋為：資源中的某個區(qū)域，可以是零個、一個或多個鏈接的目標或源。錨點可以引用整個資源，或特定部分，或者資源的特定表現(xiàn)形式。錨點是一種超鏈接，它可以是頁面內(nèi)部的超鏈接。假如我們有一個網(wǎng)頁很長很長，而且里面的內(nèi)容，可以分為N個部分。這樣的話，我們就可以在網(wǎng)頁的頂部設(shè)置一些錨點，這樣便可以方便瀏覽者點擊相應(yīng)的錨點，到達本頁內(nèi)相應(yīng)的位置，而不必在一個很長的網(wǎng)頁里自行尋找。(例如：現(xiàn)在很多網(wǎng)站都使用的”回到頂部”按鈕)頁面內(nèi)部的錨點如果一個a標簽有name屬性或者id屬性，那么它是頁面的一個錨點?？梢宰屢粋€超鏈接指向頁面中的錨點。錨點經(jīng)常被用來快速定位到頁面中的某一位置。<pid="top">頂部</p><h3>錨點的用法</h3><h3>錨點的用法</h3><h3>錨點的用法</h3>...<h3>錨點的用法</h3><h3>錨點的用法</h3><h3>錨點的用法</h3><ahref="#top">點我跳轉(zhuǎn)到頂部</a>跨頁面的錨點可以使用錨點實現(xiàn)從一個頁面跳轉(zhuǎn)到另一個頁面的某個位置，而不是從頁面頂部開始瀏覽。<ahref="anchors.html#bottom">跳轉(zhuǎn)到anchors頁面的底部</a><h3>錨點的用法</h3><h3>錨點的用法</h3><h3>錨點的用法</h3>...<h3>錨點的用法</h3><h3>錨點的用法</h3><h3>錨點的用法</h3><pid="bottom">底部</p>3.3圖片與超鏈接結(jié)合使用在HTML頁面上建立三個超鏈接，要求：點擊第一個超鏈接可以跳轉(zhuǎn)至百度主頁，鼠標懸停時顯示”百度主頁“，并在新窗口中打開百度主頁。點擊第二個超鏈接可以跳轉(zhuǎn)至當前頁面的某一位置。點擊第三個超鏈接可以跳轉(zhuǎn)至另一頁面的某一位置。<ahref="http:///"><imgsrc="img/baidu.jpg"></a>圖片與超鏈接結(jié)合使用定義無序列表的基本語法格式<ul><li>列表項1</li><li>列表項2</li><li>列表項3</li>……</ul><ul>標簽用于定義無序列表<li>標簽用于描述具體的列表項每個<ul>標簽中至少應(yīng)包含一個<li>標簽無序列表是網(wǎng)頁中最常用的列表，之所以稱為無序列表，是因為其各個列表項之間沒有順序級別之分，通常是并列的。3.4無序列表標簽<ul>標簽和<li>標簽都擁有type屬性，用于指定列表項目符號。列表項目符號是列表項前顯示符號。當為type屬性設(shè)置不同的屬性值，可以呈現(xiàn)不同的符號。type屬性值顯示效果disc（默認值）●circle○square■3.4無序列表標簽注意：1.HTML5不再支持<ul>標簽的type屬性，通常使用CSS樣式設(shè)置。2.<ul>標簽中需要嵌套<li>標簽，不建議在<ul>標簽中直接輸入文本內(nèi)容。3.4無序列表標簽有序列表是指有排列順序的列表，其各個列表項按照一定的順序排列。例如，網(wǎng)頁中常見的歌曲排行榜、游戲排行榜等都可以通過有序列表來定義。3.5有序列表標簽定義有序列表的基本語法格式<ol><li>列表項1</li><li>列表項2</li><li>列表項3</li>……</ol><ol>標簽用于定義有序列表<li>標簽為具體的列表項每個<ol>標簽中至少應(yīng)包含一個<li>標簽3.5有序列表標簽在有序列表中，除了type屬性之外，還可以為<ol>標簽定義start屬性、為<li>標簽定義value屬性。屬性屬性值/屬性值類型描述type1（默認）項目符號顯示為數(shù)字1、2、3……a或A項目符號顯示為英文字母a、b、c……或A、B、C……i或I項目符號顯示為羅馬數(shù)字i、ii、iii……或I、II、III……start數(shù)字規(guī)定全部列表項的初始值value數(shù)字規(guī)定當前列表項的初始值reversedreversed（可以省略）規(guī)定列表順序為降序3.5有序列表標簽案例演示3.5有序列表標簽定義列表常用于對名詞進行解釋和描述，與無序列表和有序列表不同，定義列表的列表項前沒有任何項目符號。<dl><dt>名詞1</dt><dd>名詞1解釋1</dd><dd>名詞1解釋2</dd>……<dt>名詞2</dt><dd>名詞2解釋1</dd><dd>名詞2解釋2</dd>……</dl><dl>標簽用于指定定義列表<dd>標簽用于對名詞進行解釋和描述一個<dt>標簽可以對應(yīng)多個<dd>標簽<dt>標簽用于指定名詞3.6定義列表標簽在網(wǎng)頁設(shè)計中，定義列表常用于實現(xiàn)圖文混排效果。其中，<dt>標簽中插入圖片，<dd>標簽中放入對圖片解釋說明的文字。注意：1.<dl>、<dt>、<dd>三個標簽之間不允許出現(xiàn)其他標簽。2.<dl>標簽必須與<dt>標簽相鄰。3.6定義列表標簽商品分類子分類在網(wǎng)上購物商城中瀏覽商品時，經(jīng)常會看到商品被分為若干類別，這些商品類別通常還包含若干的子類。同樣，在使用列表時，列表項中也有可能包含若干子列表項，要想在列表項中定義子列表項就需要將列表進行嵌套。列表的嵌套應(yīng)用

<ul><li>列表項1</li><li>列表項2</li><li>

<ol> <li>列表項1</li