HTML-列表標(biāo)簽(雙標(biāo)簽) 208

表標(biāo)簽有3種:1)dl,dd與dt(定義列表) 2)ol與li(有序列表) 3)ul與li(無序列表)前兩者一般不怎么用,網(wǎng)頁中運(yùn)用最多的是第三種

1)<dl><dd>與<dt>

<!DOCTYPE html>
<html>
<head>
    <title>列表</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
    <dl>
        <dt>河北</dt>
        <dd>石家莊</dd>
        <dd>秦皇島</dd>
        <dt>河南</dt>
        <dd>鄭州</dd>
        <dd>新鄉(xiāng)</dd>
    </dl>
</body>
</html>

2)<ol>與<li>和<ul>與<li>

它們兩個(gè)都有一個(gè)type屬性,用來設(shè)置序列的顯示樣式(在li前面顯示),type的取值有:1(數(shù)字序號)A,a(大小寫字母)I,i(大小寫羅馬數(shù)字)disc(實(shí)心原點(diǎn))circle(空心圓圈)square(實(shí)心方塊)

顯示效果

有序與無序列表的區(qū)別就是type的默認(rèn)值不同而已

<!DOCTYPE html>
<html>
<head>
    <title>列表</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
    <dl>
        <dt>河北</dt>
        <dd>石家莊</dd>
        <dd>秦皇島</dd>
        <dt>河南</dt>
        <dd>鄭州</dd>
        <dd>新鄉(xiāng)</dd>
    </dl>
    ============================================================
    <ol type="A">
        <li>北京</li>
        <li>上海</li>
        <li>廣州</li>
        <li>深圳</li>
    </ol>
    =============================================================
    <ul type="circle">
        <li>北京</li>
        <li>上海</li>
        <li>廣州</li>
        <li>深圳</li>
    </ul>
</body>
</html>

注意:設(shè)置屬性時(shí)考慮瀏覽器的兼容性

經(jīng)過測試ol與ul列表在IE瀏覽器(IE10)下type的這幾個(gè)取值都有相應(yīng)的效果;在谷歌瀏覽器下ol列表只對type值為1、a、A、i、I有效果;ul列表只對type值為disc、circle、square有效果;其他的如蘋果,火狐等瀏覽器自己測試(同一瀏覽器的不同版本不再測試)

谷歌在顯示效果

2.1使用嵌套的ul或ol來模擬二級菜單,以后會通過js,css或者Asp.net實(shí)現(xiàn)動態(tài)的菜單

二級菜單

果想開發(fā)一個(gè)網(wǎng)站，除了要精通后端開發(fā)語言（如：php）外，還要精通HTML代碼。那么，什么是HTML呢？HTML是一種超文本標(biāo)記語言，它包含有眾多的標(biāo)簽，我們可以通過這些標(biāo)簽，把不同的internet資源（如：文字、圖片、視頻、音頻、表單等等）整合在一個(gè)統(tǒng)一的文檔中，這就形成了我們可以看得見的網(wǎng)頁。那么，HTML都有哪些常用的標(biāo)簽?zāi)兀?/p>

一、文檔類型聲明。

html5文檔類型聲明：<!doctype html>

html4文檔類型聲明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

二、html主標(biāo)簽。

這個(gè)標(biāo)簽是html最外層的標(biāo)簽，所有其它的HTML標(biāo)簽都要放在這個(gè)標(biāo)簽的內(nèi)部。

<html>

</html>

三、雙標(biāo)簽和單標(biāo)簽。

在HTML標(biāo)簽中，有的標(biāo)簽是成雙成對的，如：<html></html>（如下圖）；而有的標(biāo)簽是單個(gè)的，如：<hr>橫線標(biāo)簽。

四、head頭部標(biāo)簽。

head頭部有以下幾種常用標(biāo)簽：

meta：主要提供有關(guān)頁面的元信息。

link：用來定義文檔與外部資源的關(guān)系，最常用的是調(diào)用CSS樣式文件。

title：頁面標(biāo)題的標(biāo)簽。

script：用來調(diào)用JS文件或JS代碼。當(dāng)然，script標(biāo)簽也可以在body主體中使用。

五、body主體標(biāo)簽。

1、塊級標(biāo)簽。

塊級標(biāo)簽的特性是：獨(dú)自占有一行；標(biāo)簽的高與寬、邊距可以修改；沒有設(shè)置寬與高時(shí)，默認(rèn)繼承父標(biāo)簽。例如：

<div>div1</div>
<div>div2</div>
<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>

前端頁面顯示的效果如下圖：

常用的塊級標(biāo)簽有：div、h1、h2、h3、h4、h5、h6、hr、menu、ul、ol、li、dl、dt、dd、table、p、form 。

2、內(nèi)聯(lián)標(biāo)簽。

內(nèi)聯(lián)標(biāo)簽與塊級標(biāo)簽不同，它不能獨(dú)自占有一行，會與其它內(nèi)聯(lián)標(biāo)簽在同一樣展示；內(nèi)聯(lián)標(biāo)簽的高與寬、上下邊距是不能修改的，它里面的文字或圖片有多高，它就是多高。例如如下代碼：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<span>span1</span>
<span>span2</span>

CSS樣式代碼跟塊級標(biāo)簽的例子是一樣的，而顯示的效果就不一樣了，寬與高、上下邊距沒有效果。如下圖：

常用的內(nèi)聯(lián)標(biāo)簽有：span、a、b、strong、i、em 。

3、內(nèi)聯(lián)塊級標(biāo)簽。

內(nèi)聯(lián)塊級標(biāo)簽，既有一些內(nèi)聯(lián)標(biāo)簽的特性，也有一些塊級標(biāo)簽的特點(diǎn)：它不能獨(dú)自占有一行，但是可以修改它的寬度和高度。例如下面這段代碼：

<style>
.aa1{ border:1px solid #000; width:150px; height:100px; margin:30px; }
.aa2{ border:1px solid #000; width:150px; height:100px; margin:30px; }
</style>
<img src="w5.jpg" alt="">
<img src="w5.jpg" alt="">

CSS樣式代碼跟塊級標(biāo)簽的那個(gè)例子仍然是一樣的，圖片的寬和高、上下邊距修改成功，而2個(gè)圖片不能獨(dú)自占有一行，而是在同一行。如下圖：

常用的內(nèi)聯(lián)塊級標(biāo)簽有：img、input、textarea。

4、區(qū)域標(biāo)簽。

所謂區(qū)域標(biāo)簽，就是主要用來劃分布局頁面區(qū)域的。如：頭部、主體內(nèi)容、側(cè)邊欄、底部。這樣劃分的好處是：讓頁面布局更加清晰明了。

常用的區(qū)域標(biāo)簽有：header（頭部）、footer（底部）、nav（導(dǎo)航）、aside（側(cè)邊欄）、section（主體）、article（獨(dú)立內(nèi)容）。

5、表單標(biāo)簽。

這個(gè)表單標(biāo)簽我們也是會經(jīng)常用到的，如：登錄網(wǎng)站的時(shí)候、提交數(shù)據(jù)的時(shí)候。如下圖的評論表單：

?表單常用的標(biāo)簽有：form、input、select、option、textarea 。

以上就是我們開發(fā)網(wǎng)頁時(shí)，會常用到的HTML標(biāo)簽。當(dāng)然，HTML標(biāo)簽遠(yuǎn)不止這些，尤其是html5出來后，新增了許多的新標(biāo)簽。但是，有些標(biāo)簽在我們開發(fā)中很少用到，所以，這里就沒有做相應(yīng)的介紹。

、標(biāo)簽的分類：雙標(biāo)簽和單標(biāo)簽

雙標(biāo)簽：就是成對出現(xiàn)的，類似于這種 <html> </html>

單標(biāo)簽：就是可以單個(gè)使用的，類似于 <br> 換行標(biāo)簽或 <hr>水平線標(biāo)簽。

二、標(biāo)簽屬性的作用：

標(biāo)簽的屬性是用來定義文字或字符的顏色、寬高、粗細(xì)、大小、等，這個(gè)是標(biāo)簽屬性的作用。

三、標(biāo)簽屬性的特性：

1、每一個(gè)標(biāo)簽都有自己的屬性，單標(biāo)簽和雙標(biāo)簽都有。

2、一個(gè)標(biāo)簽可以有多個(gè)屬性。

3、每個(gè)屬性都有對應(yīng)的值，值要用單或雙引號引起來。

4、多個(gè)屬性之間使用空格隔開。

5、屬性沒有順序之分。

6、字體屬性值，必須是系統(tǒng)可以識別的字體，一般為系統(tǒng)自帶字體。

7、HTML5 中 font 屬性已經(jīng)棄用。

源代碼：↓

<!DOCTYPE html>

<head>

<title>中央氣象局</title>

</head>

<body>

</body>