HTML 建立列表-列表標簽

立和使用列表

定義列表

<dl></dl>列表標簽定義列表;
<dt>定義列表標題;
<dd>定義列表內容;

說明:

1. dt和dd對應著的, 一個dt可以對應著多個dd;

2. dd完全是為了dt服務的, 對標題進行描述;

實例:

<dl>
<dt>標題1</dt><dd>內容11</dd><dd>內容12</dd>
<dt>標題2</dt><dd>內容21</dd><dd>內容22</dd>
</dl>

有序列表(unordered list)

<ol></ol> 列表標簽定義一個標有數字的列表;

1 默認值。數字有序列表。(1、2、3、4)

a 按字母順序排列的有序列表，小寫。(a、b、c、d)

A 按字母順序排列的有序列表，大寫。(A、B、C、D)

i 羅馬字母，小寫。(i, ii, iii, iv)

I 羅馬字母，大寫。(I, II, III, IV)

<ol>
<li>聯系人:</li>xxx
<li>聯系地址:</li>北京市豐臺區
<li>郵政編碼:</li>100036
</ol>

無序列表(ordered list)

<ul></ul> 列表標簽定義一個標有圓點的列表;

disc 默認值,實心圓。

circle 空心圓。

square 實心方塊。

<ul>
<li></li>
<li></li>
<li></li>
</ul>

目錄列表所有主流瀏覽器都支持 <dir> 標簽。。

<dir></dir>標簽定義目錄列表。

<dir>
<li>HTML</li>
<li>XHTML</li>
<li>CSS</li>
</dir>

菜單列表目前所有主流瀏覽器都不支持 <menu> 標簽。

<menu></menu>標簽可定義一個菜單列表。

<menu>
<li>html</li>
<li>xhtml</li>
</menu>

在實際工作中, 它的用途較少, 大部分我們還是用ul;

另外還可以使用:

<div align=""></div>分區標簽,用來排版大塊HTML段落,也用于格式化表

講我們要做三個實例(后附原碼)。
一個是用記事本做一張網頁。
一個是用vscode做一張網頁。
一個是做一個簡單的div+css的網頁。

一、在做網頁前，我們先了解一下什么是HTML?

它是超文本標記語言，什么是超文本，我自己理解即是文本又超越文本。
記住，HTML不是編程語言，只是一種標志語言，所以學習它比學習編程容易很多。
它唯一的表現特點就是帶<>的標簽。
瀏覽器的作用就是把一般人看不懂的HTML翻譯成直觀看得懂的網頁。

二、開始了，新建一個空白的記事本文件，輸入我們第一行html標簽，記住，所有的標點字母都要是英文輸入法下的字母和標點。

三、看見沒，標簽就是帶<>的，這就是標簽。

我們再加入兩行，雖然是兩行，但卻只是一個標簽，一個是開始，一個是結束。
你會發現帶</>的標記是標簽的結束符。

四、不得不說，head和body標簽是網頁里最重要的標簽，幾乎所有的網頁都有這兩個標簽。

head英文里是“頭”的意思，body英文里是“身體”的意思。
在網頁里，head一般放著一些外鏈文件，樣式，或是網頁標題，或是一些編碼標識等等，這些后面慢慢理解。
body里放的是網頁的內容，也就是我們打開網頁時看到的內容，幾乎都在body標簽里。
忘記了，head和body都是裝在html里的，所以在<html></html>里面。

五、我們在head里寫兩個重要的標簽。

一個是meta標簽，一個是title標簽。

你會發現meta標簽居然沒有標簽的結束符</meta>
好吧，這里解釋一下，網頁里的標簽大體有兩種，一種是有結束符的，一種是像meta一樣沒有結束符的，以后就能慢慢了解了。
標簽里可以寫一些屬性，如charset="UTF-8"，所以標簽里屬性的寫法是AAA="BBB"。
如果有人問什么是屬性，好吧，現實直觀點<貓名字="小花" 體重="5公重"></貓>

六、差不多了，現在才是真正的網頁內容，我們在body標簽里寫一句話。

七、保存記事本文件，不管是windows操作系統還是mac的OX系統，文件都要保存成utf-8編碼，不然網頁會是亂碼（因為有中文）。

八、還有一步，我們保存出來的文件是記事本文件myweb.txt，我們要把它的擴展名改成myweb.html，然后就可以雙擊打開了，瀏覽器會自動運行它的，看一下效果吧。

有些windows系統的朋友如果看不見擴展名，可以百度一下查看擴展名的方法。

來記事本來開發網頁，終究是一件很辛苦的事情。
于是世間出了很多的前端開發工具，它們能讓我們事倍功半地完成網頁開發。

在眾多選擇中，我就以微軟的vscode作為網頁開發工具吧。
打開vscode官網https://code.visualstudio.com/

九、我們打開官網，然后下載vscode，合適自己操作系統的vscode，網頁會自動檢測你的操作系統，我的是mac，所以打開官網的時候，就直接設定for mac了。

十、安裝過程就不說了，按提示吧，安裝完成后，軟件vscode應該是這么一個標志。

十一、我們運行它，新建一個空白文件，然后保存它，我這里把它保存成test1.html，注意文件名要用英文起名，擴展名要.html。

十二、我們看一下它和記事本相比，優勢在哪里。

用英文輸入一個感嘆號，然后按回車(或tab)，直接生成空白網頁的標簽。
除了多兩個meta標簽外，和我們剛才用記事本做的網頁沒什么區別。

十三、我們往網頁里寫內容吧，寫在body標簽里“這是我用vscode做的第一張網頁”。

看到那個小圓點沒，有小圓點的意思是網頁還沒有保存，我們Ctrl+s保存網頁，再運行看效果。

用vscode做網頁，我們已經完成了，接下來我們做一個div的例子。

十四、首先，我們先了解一下什么是div?

div標簽，我喜歡叫它盒子，它主要的作用就是布局網頁。
天啊，什么是布局網頁，看下圖吧，這些綠色的矩形就是盒子，它讓網頁的各個模塊部分都能按求整齊的分布在網頁上，這就是布局。
它規劃了一個網頁的排版，這就是布局。
很久很久以前，網頁布局用的是table標簽。
然后才發展到了用div。
當然現在H5用的布局方式更細了。
H5用<nav> <header> <footer> <article> <section>。
但仍然不能磨滅學習div布局的重要性，因為它們的方法是一樣的，名字不一樣而已。

十五、我們用vscode創建另一張網頁test2.html。

十六、我們在body里面加入div標簽，這就是盒子，在盒子里寫字吧。

vscode中，輸入div會有提示，回車后自動鍵入<div></div>

十七、為什么只有一行字，說好的盒子呢，其實盒子已然存在，只是它沒有寬沒有高沒有背景色，于是你看不見它，但不代表它不存在，我們給它加樣式，就能看見它了。

給div加個樣式。
讓它的寬是200像素，高是100像素，它有著紅色的背景。
讓它距離網頁頂部是50像素，距離網頁左邊是300像素。
注意我們的style樣式標簽是寫在head里面的。
至于什么是樣式，更多疑惑，我們先放著，后面會慢慢解釋。

十八、總結。

十九、下一講主要講樣式CSS和DIV的故事，實例講解，讓大家對標簽和樣式有更多了解。

網站建設中掌握基于CSS的網頁布局方式，是實現web標準的基礎。網站建設在主頁制作時采用CSS技術，可以有效地對頁面的布局、字體、顏色、背景和其他效果實現更加精確地控制。只要對相應的代碼做一些簡單的修改，就可以改變網頁的外觀和格式。網站建設時采用CSS布局有以下優點。

大大縮減頁面代碼，提高頁面瀏覽速度，縮減帶寬成本
結構清晰，容易被搜索引擎搜索到。
縮短改版時間，只要簡單地修改幾個CSS文件，就可以重新設計一個擁有成百上千頁面的站點。
強大的字體控制和排版能力。
CSS非常容易編寫，可以想html代碼一樣輕松編寫CSS。
提供易用性，使用CSS可以結構化HTML，如<p>標記只用來控制段落，heading標記只用來控制標題，table標記只用來表現格式化的數據等。
表現和內容相分離，將設計部分分離出來放在一個獨立樣式文件中。
更方便搜索引擎的搜索，使用只有包含結構化內容的HTML代替嵌套的標記，搜索引擎將更有效的搜索到內容。
Table布局靈活性不大，只能遵循table、tr、td的格式，而DIV可以有各種格式。
在table布局中，垃圾代碼會有很多，一些修飾的樣式和布局的代碼混合在一起，很不直觀。而DIV更能體現樣式和結構相分離，結構的重構性強。
在幾乎所有的瀏覽器上都可以使用。
以前一些必須通過圖片轉換實現的功能，現在只要用CSS就可以輕松實現，從而更快地下載頁面。
使頁面的字體變得更漂亮，更容易編排，是頁面真正賞心悅目。
可以輕松地控制頁面的布局。
可以將許多網頁的風格格式同時更新，不用再一頁一頁地更新了。可以將站點上所有的網頁風格都使用一個CSS文件進行控制，只要修改這個CSS文件中相應的內容，那么整個站點的所有頁面都會隨之發生變動。

成都蜀風科技打造與企業品牌相匹配的網站及微信開發，對每一個網站建設和微信開發項目，都以策略先行，再將創意與技術完美結合。為企業打造出與企業品牌氣質相匹配的網絡品牌形象。我們始終保持行業領先開發水平，不斷掌握領先的網絡技術。

在線咨詢

上一篇：一鍵生成通用高亮代碼塊到剪貼板，可粘貼到在線編輯器
下一篇：2分鐘了解 HTML 的基本結構和語法規則

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商