第二天html標(biāo)簽列表鏈接圖片

課程提要(很重要！)列表標(biāo)簽<ul><li>…</li></ul>、<ol><li>…</li></ol>、<dl>列表 <dt>…</dt>列表標(biāo)題 <dd>…</dd>列表內(nèi)容 <dd>…</dd>列表內(nèi)容 </dl>超鏈接標(biāo)簽<a></a>圖片標(biāo)簽<img/>課后練習(xí)（第3課）

HTML標(biāo)簽列表標(biāo)簽<ul>、<ol>、<dl>整行標(biāo)簽、雙標(biāo)簽（第3課）

HTML標(biāo)簽▲作用：顯示列表（一系列有關(guān)聯(lián)性的項目內(nèi)容）▲語義：○ul——unorderedlist（無序列表）○ol——orderedlist（有序列表）○li——listitem（列表項目）▲英文單詞含義注釋：

○

list：列表

○

ordered：有順序的

○

unordered：無順序的

○item：項目、條目▲標(biāo)簽特征：有屬性的雙標(biāo)簽注意： 1、列表如果要嵌套其他標(biāo)簽或者任何內(nèi)容，必須放在li或者dd里面列表標(biāo)簽：列表標(biāo)簽使用實例（第3課）

HTML標(biāo)簽新建<ul><li>空演示文稿</li><li>從默認(rèn)模板新建</li><li>本地上的模板</li><li>根據(jù)設(shè)計模板</li><li>Online模板</li></ul>新建<ol><li>空演示文稿</li><li>從默認(rèn)模板新建</li><li>本地上的模板</li><li>根據(jù)設(shè)計模板</li><li>Online模板</li></ol><dl> <dt>新建</dt> <dd>空白演示文檔</dd> <dd>空白演示文檔</dd> <dd>空白演示文檔</dd> <dd>空白演示文檔</dd> <dd>空白演示文檔</dd></dl>列表標(biāo)簽：有序列表標(biāo)簽<ol>（第3課）

HTML標(biāo)簽▲屬性type的取值范圍：

○1：序號為阿拉伯?dāng)?shù)字1，2，3，4（默認(rèn)）

○

a：序號為a,b,c,d

○A：序號為A,B,C,D

○i：序號為小寫希臘字母序號i,ii,iii

○I：序號為大寫希臘字母序號I,II,III▲此標(biāo)簽其實和ul差不多，可以互相轉(zhuǎn)換，在后面學(xué)會css后，二者沒有任何區(qū)別。<oltype="i"><li>Windows平臺</li><li>Apache服務(wù)器</li><li>Mysql數(shù)據(jù)庫</li><li>PHP語言</li></ol>列表標(biāo)簽：無序列表標(biāo)簽<ul>（第3課）

HTML標(biāo)簽▲屬性type的取值范圍：

○

disc：實心圓（默認(rèn)）

○

circle：空心圓

○

square：實心方塊▲此標(biāo)簽非常重要！幾乎每個網(wǎng)站涉及到列表都會用到，例如京東、淘寶等等。<ultype="circle"><li>Windows平臺</li><li>Apache服務(wù)器</li><li>Mysql數(shù)據(jù)庫</li></ul>注：有序列表和無序列表的type屬性都有一個值：none，但是IE不兼容。解決辦法：<style>ul,ol,li{list-style:none;}</style>列表標(biāo)簽：ul,ol,dl的嵌套應(yīng)用（第3課）

HTML標(biāo)簽<dl><dt>合肥網(wǎng)頁設(shè)計</dt><dd>ps課程

<ul> <li> ps基礎(chǔ)

<ol> <li>初識ps</li><li>ps選區(qū)工具</li><li>ps畫筆工具</li><li>ps路徑工具</li><li>ps七大蒙版</li></ol></li><li> ps臨摹

<ol> <li>維納斯</li> <li>維納斯</li> <li>郎酒</li> <li>化妝品</li> <li>維納斯</li></ol></li><li>ps半原創(chuàng)</li><li>ps原創(chuàng)</li></ul></dd><dd>html課程</dd><dd>css課程</dd></dl>注意：ul,ol,dl里面嵌套其他內(nèi)容，內(nèi)容必須放在li或者dt或者dd里面課后作業(yè)（第3課）

HTML標(biāo)簽超鏈接標(biāo)簽<a></a>內(nèi)嵌標(biāo)簽，雙標(biāo)簽

（第3課）

HTML標(biāo)簽▲語義：anchor（錨點、鏈接的意思）

<ahref="">百度</a> <ahref="">圖片地址</a>○href的組成寫的就是地址，也叫url○相對與絕對地址○頁內(nèi)錨鏈接○超鏈接打開的目標(biāo)窗口URL詳解：統(tǒng)一資源定位符超鏈接標(biāo)簽：href超鏈接的組成（第3課）

HTML標(biāo)簽▲基本格式：

<ahref="">多元速</a>○特殊的href——#○頁內(nèi)鏈接<ahref="#">本頁</a>

注意#和###區(qū)別<ahref="#">本頁</a>URL:統(tǒng)一資源定位符，詳解見下一頁超鏈接標(biāo)簽：href超鏈接的組成（第3課）

HTML標(biāo)簽

從上面的URL可以看出，一個完整的URL包括以下幾部分：

1.協(xié)議部分：該URL的協(xié)議部分為“http：”，這代表網(wǎng)頁使用的是HTTP協(xié)議。在Internet中可以使用多種協(xié)議，如HTTP(超文本傳輸協(xié)議)，F(xiàn)TP等等。本例中使用的是HTTP協(xié)議。在“HTTP”后面的“//”為分隔符2.域名部分：該URL的域名部分為“www.”。一個URL中，也可以使用IP地址作為域名使用3.端口部分：跟在域名后面的是端口，域名和端口之間使用“:”作為分隔符。端口不是一個URL必須的部分，如果省略端口部分，將采用默認(rèn)80端口4.虛擬目錄部分：從域名后的第一個“/”開始到最后一個“/”為止，是虛擬目錄部分。虛擬目錄也不是一個URL必須的部分。本例中的虛擬目錄是“/news/”5.文件名部分：從域名后的最后一個“/”開始到“？”為止，是文件名部分，如果沒有“?”,則是從域名后的最后一個“/”開始到“#”為止，是文件部分，如果沒有“？”和“#”，那么從域名后的最后一個“/”開始到結(jié)束，都是文件名部分。本例中的文件名是“index.php”。文件名部分也不是一個URL必須的部分，如果省略該部分，則使用默認(rèn)的文件名，如index，default等等6.參數(shù)部分：從“？”開始到“#”為止之間的部分為參數(shù)部分，又稱搜索部分、查詢部分。本例中的參數(shù)部分為“boardID=5&ID=24618&page=1”。參數(shù)可以允許有多個參數(shù)，參數(shù)與參數(shù)之間用“&”作為分隔符。7.錨部分：從“#”開始到最后，都是錨部分。本例中的錨部分是“name”。錨部分也不是一個URL必須的部分超鏈接標(biāo)簽：相對與絕對地址（第3課）

HTML標(biāo)簽▲相對地址：○<ahref="./contact">聯(lián)系我們</a>○相對于當(dāng)前目錄的連接，在項目整體移動時，不需要再做更改，推薦使用○./、空都表示當(dāng)前目錄,當(dāng)前目錄也可以不寫，../表示上一級目錄▲絕對地址：○<ahref="file:///D:/Administrator/index.html">首頁</a>○<ahref=“">首頁</a>○完整的連接，在項目整體移動主機(jī)時，需要更新內(nèi)容，不推薦使用超鏈接標(biāo)簽：超鏈接打開的目標(biāo)窗口（第3課）

HTML標(biāo)簽▲target屬性：target=“_self”：原窗口打開（不寫target，效果和_self一樣）target="_blank"：新窗口打開▲實例：原窗口打開鏈接<ahref="">原窗口打開</a><ahref="http:///"target="_self">原窗口打開</a>▲實例：新窗口打開連接<a/target="_blank">新窗口打開</a>超鏈接標(biāo)簽其他屬性（第3課）

HTML標(biāo)簽▲titlea連接的描述，非常有利于seo，鼠標(biāo)浮上去有提示效果空連接<ahref=“#”>空連接</a>點擊之后，地址加#號，跳轉(zhuǎn)到頂部<ahref=“###”>空連接</a>點擊之后，地址加三個#號，不跳轉(zhuǎn)<ahref=“javascript:;”>空連接</a>點擊之后，不跳轉(zhuǎn)，不加#號超鏈接標(biāo)簽：頁內(nèi)錨鏈接（第3課）

HTML標(biāo)簽▲作用：用來快速在文檔中進(jìn)行位置定位的方法（特殊的鏈接：頁面內(nèi)部的連接）▲形象的比喻——書簽▲錨點鏈接的使用步驟：

1.設(shè)置錨點，做記號(要跳轉(zhuǎn)到的地方)：

<aid=“php”></a>也可以寫成<aname=“php”></a>建議使用id

2.鏈接錨點：

<ahref="#php">本頁面的錨點跳轉(zhuǎn)</a><ahref="other.html#php">其他頁面的錨點跳轉(zhuǎn)</a>超鏈接標(biāo)簽：課堂練習(xí)（第3課）課堂練習(xí)▲按下列要求完成<a>標(biāo)簽頁面的編寫1.鏈接到baidu首頁，在新窗口打開，鏈接的標(biāo)題設(shè)為"百度首頁"2.鏈接到google首頁，在本窗口打開，鏈接的標(biāo)題設(shè)為"谷歌首頁"3.新建A、B兩個html文件，在B頁面中設(shè)置鏈接到A頁面底部（文件末尾）的跨頁書簽錨鏈接圖像標(biāo)簽<img/>單標(biāo)簽內(nèi)嵌標(biāo)簽（第3課）

HTML標(biāo)簽<imgsrc="spring.jpg"><imgsrc="spring.jpg"/>標(biāo)準(zhǔn)寫法，推薦（1）圖片的屬性（2）圖片鏈接既不是塊狀標(biāo)簽，也不是行內(nèi)標(biāo)簽行內(nèi)塊狀標(biāo)簽可以設(shè)置寬高，同時不會占用一整行圖像標(biāo)簽：圖片屬性（第3課）

HTML標(biāo)簽用于在頁面中引入圖片：<imgsrc="URL">屬性名屬性值說明srcurl圖片路徑alt字符串圖片注釋,圖片不顯示的時候顯示width像素/百分比圖片寬度height像素/百分比圖片高度border數(shù)字圖片邊框（圖片鏈接時也用到）title提示，和a連接一樣alignleft、right、middle、top、bottomLeft、right指圖片水平位置，后面三個是和文字垂直的對其注意：1、標(biāo)簽的屬性寬高為像素的時候，可以不加單位px，但是css必須要加 2、百分比，表示以當(dāng)前窗口大小為衡量尺寸的，隨著窗口大小改變而改變圖像標(biāo)簽：用圖片作為超鏈接內(nèi)容（第3課）

HTML標(biāo)簽<ahref=""><imgsrc="spring.jpg"width="100"height="200"></a>注意：在IE6下，圖片作為超鏈接的內(nèi)容時，默認(rèn)會自動給圖片加上border邊框▲無邊框的圖片鏈接：<ahre