HTML5之列表的使用

嘍大家好，我是作者“未來”，本期分享的內容是Web前端系列課程，本系列總共29個階段，堅持學習3個月蛻變為Web前端高手哦！

志同道合的小伙伴跟我一起學習交流哦！

?第一階段 01 HTML5

06列表

把制成表以表顯示容器里面裝載著文字或圖表的一種形式，叫列表。

列表最大的特點就是整齊、整潔、有序

1 無序列表ul（重點）

無序列表的各個列表項之間沒有順序級別之分，是并列的。其基本語法格式如下：

顯示效果：

· 列表項1

· 列表項2

· 列表項3

2 無序列表注意事項

1.<和l<><>

3.無序列表會帶有自己樣式屬性，放下那個樣式，一會讓CSS來！

3 有序列表ol（了解）

有序列表即為有排列順序的列表，其各個列表項按照一定的順序排列定義，有序列表的基本語法格式如下：

顯示效果：

1. 中國

2. 美國

5 自定義列表（理解）

定義列表常用于對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何項目符號。其基本語法如下：

顯示效果：

四大名著

水滸傳

西游記

三國演義

紅樓夢

瀏覽器

谷歌

火狐

6 課程總結

看不懂的小伙伴不要氣餒，后續的分享中將持續解釋，只要你跟著我分享的課程從頭到尾去學習，每篇文章看三遍，一個月后，回過頭來看之前的文章就會感覺簡單極了。

本章已結束，下篇文章將分享《06列表》小伙伴們不要錯過喲！

.列表標簽 ul，ol, dl(掌握)

1.1ul無序列表標簽

基本結構:

<ul>

</ul>

注意：

1.ul標簽和li標簽是組合使用。

2.li標簽里面可以添加任何內容，或者嵌套標簽也可以

3.無序列表會自動生成一個小圓點，一般在實際應用中會去掉。

1.2有序列表ol

語法：定義子項順序的。一般有編號（數字或字母或希臘字母）

<ol>

</ol>

注意：

有序列表type屬性的幾個值：

A表示顯示的編號是大寫字母

a表示編號是小寫字母

I表示編號是羅馬數字

i表示編號是小寫羅馬數字

默認情況下顯示的是數字

實例：

</ol>

</ol>

</ol>

</ol>

</ol>

2.3定義列表dl

什么是定義列表

dl標簽定義了定義列表，通常用于名稱的解釋或者概念的定義。每個子項分為2個部分，一部分負責定義，另一部分負責解釋

<dl>

<dt>計算機資料</dt>

<dd>JavaScript</dd>

<dd>NodeJS入門到精通</dd>

<dd>PhP語法入門到精通</dd>

</dl>

<!--

dl:定義了一個定義列表

dt:術語部分

dd:對術語或項目進行解釋的部分

-->

2. 表格table

2.1表格的使用

（1）table標簽

（2）表格行、列的合并

<table>：定義表格

<tr>:定義表格的行

<td>：定義表格的列

<th> ：定義表格表頭單元格

<thead>:定義表格中表頭的內容

<tbody>:定義表格中的主體內容

<tfoot>:定義表格中的腳注

<caption>:定義表格標題

<!--

cellspacing:單元格與單元格之間的距離

cellpadding：內容與單元格之間的距離

border：單元格邊框寬度

bgcolor:設置背景色

-->

</table>

家好，我是新媒之聲廣告工作室的大白，今天給大家帶來的是HTML5簡單教學第一章（第二節）。

今天給大家帶來的東西比較多；

br 換行標簽實屬單標簽，br換行標簽就如同我們編輯文本是點擊的回車鍵，讓它換到下一行。

HTML5 標簽用來對文檔中的文本進行換行的處理，請參考下面的這個例子：

以下代碼標記一個換行：

使用 br 元素 在文本中 換行。

所有主流瀏覽器都支持 標簽。

標簽定義及使用說明

標簽插入一個簡單的換行符。

標簽是一個空標簽，意味著它沒有結束標簽。

提示：由于 標簽是空標簽，因此，不允許有“ ...”這樣的寫法！

提示和注釋

提示：在寫地址信息或者寫詩詞時 標簽非常有用。

注釋： 請使用 標簽來輸入空行，而不是分割段落。

HTML 4.01 與 HTML5之間的差異無。

HTML 與 XHTML 之間的差異

在 HTML 中， 標簽沒有結束標簽。

在 XHTML 中， 標簽必須被正確地關閉，比如這樣： 。

nobr 不換行是屬于雙標簽，nobr就是強制不換到下一行，在做編輯時文字或是塊遇到瀏覽器的邊會自動換到下一行使用不換行標簽就強制它不讓換行，這是瀏覽器底部就會出現航向滾動條。

p 段落標簽也是屬于雙標簽，p標簽是文字標簽，故名思議就是用于寫文字段落的標簽，p標簽是屬于塊標簽，就是獨自占據一行，在下節課會介紹到塊標簽與行標簽。

HTML5 標簽用于定義一個段落。

目前大多數瀏覽器支持 標簽。

標簽定義及使用說明

標簽定義段落。

元素會自動在其前后創建一些空白。瀏覽器會自動添加這些空間，您也可以在樣式表中規定。

提示：在本站的HTML5編程實戰中，你可以練習使用標簽！

在HTML 4.01 與 HTML5中的差異

HTML 4.01中標簽的 align 屬性已經廢棄，HTML5不支持該屬性。

p 段落,align屬性:left|center|right，是標簽屬性，屬性有事css樣式，css樣式又可以通俗的理解為房子的裝修，html通俗可以理解為房子的框架，div又可以通俗的理解為房子的填充磚塊之類的。

所有主流瀏覽器都支持 align 屬性。

定義和用法

HTML5 不支持 align 屬性。請使用 CSS 代替。

在 HTML 4.01 中， 的 align 屬性已廢棄。

align 屬性規定段落中文本的對齊方式。

兼容性注釋

在 HTML 4.01 中， 的 align 屬性已廢棄，請使用 CSS 代替。

CSS 語法：

CSS 實例：在段落中右對齊文本

在我們的 CSS 教程中，您可以找到更多有關 text-align 屬性的細節。

語法

屬性值

值	描述
left	左對齊文本。
right	右對齊文本。
center	居中對齊文本。
justify	對行進行伸展，這樣每行都可以有相等的寬度（就像在報紙和雜志中）。

center 居中是屬于雙標簽，雙標簽就是成對出現的標簽，center居中標簽的意思就是讓它位于瀏覽器的中心位置，就好比是wps的文字居中一個道理，不過居中標簽是可以讓它體內所有的標簽都可以居中。

HTML <center> 標簽 - HTML 5 不支持

<center> 標簽控制文本的居中顯示，不能在 HTML5 中使用。

所有主流瀏覽器都支持 <center> 標簽。

標簽定義及使用說明

HTML5 不支持 <center> 標簽。請用 CSS 代替。

在 HTML 4.01 中，<center> 元素已廢棄。

<center> 對其所包括的文本進行水平居中。

提示和注釋

提示：請使用 CSS 樣式來居中文本！在 CSS 教程中您能了解到更多關于居中文本的細節。

HTML 4.01 與 HTML5之間的差異

HTML5 不支持 <center> 標簽。請用 CSS 代替。

pre 按源代碼顯示是屬于雙標簽不是很常用的標簽，它的意思就是讓標簽直接不解析讓瀏覽器表現出來，一般用于展示源代碼。

HTML <pre> 標簽

<pre> 標簽可以保留您需要的文本格式，比如不會取消換行和空格，并且所示文本是等寬的。

目前大多數瀏覽器支持 <pre> 標簽。

標簽定義及使用說明

<pre> 標簽可定義預格式化的文本。

被包圍在 <pre> 標簽元素中的文本通常會保留空格和換行符。而文本也會呈現為等寬字體。

注意：<pre> 元素是塊級元素，但是只能包含文本或行內元素，任何塊級元素（常見為可以導致段落斷開的標簽：例如<title>、 和<address> 標簽）都不能位于 <pre> 元素中。

提示和注釋

提示: <pre> 標簽的一個常見應用就是用來表示計算機的源代碼。

提示：<pre> 標簽與 <code> 標簽結合起來使用，可以獲得更加精確的語義。

在HTML 4.01 與 HTML5中的差異

在 HTML 4.01 中，"width" 屬性已廢棄，不可使用。 HTML5 不支持"width"屬性。

屬性

屬性	值	描述
width	number	HTML5 不支持該屬性。HTML 4.01 已廢棄該屬性。定義每行的最大字符數（通常是 40、80 或 132）。

全局屬性

<pre> 標簽支持全局屬性，查看完整屬性表 HTML全局屬性。

ul 無序列表屬于雙標簽，一般配合li標簽使用，無序列表屬和wps中表現是一樣的不過無序列表中不只可以寫文字和數字也可以寫div之類的標簽有的網頁導航就是用ul無序列表標簽寫出來的。

HTML <ul> 標簽

<ul> 標簽表示HTML頁面中項目的無序列表，一般會以項目符號列表呈現

所有主流瀏覽器都支持 <ul> 標簽。

標簽定義及使用說明

<ul> 標簽定義無序列表。

將 <ul> 標簽與 <li> 標簽一起使用，創建無序列表。

提示和注釋

提示：使用 CSS 為列表定義樣式。

提示：使用 <ol> 標簽創建有序列表。

HTML 4.01 與 HTML5之間的差異

在 HTML 4.01 中，"compact" 和 "type" 屬性已廢棄。HTML5 則不支持著兩個屬性。

屬性

屬性	值	描述
compact	compact	HTML5 不支持。HTML 4.01 已廢棄。規定列表呈現的效果比正常情況更小巧。
type	disc square circle	HTML5 不支持。HTML 4.01 已廢棄。規定列表的項目符號的類型。

值

描述

compact

HTML5 不支持。HTML 4.01 已廢棄。規定列表呈現的效果比正常情況更小巧。

type

disc

square

circle

HTML5 不支持。HTML 4.01 已廢棄。規定列表的項目符號的類型。

ol 有序列表標簽和ul無序列表標簽是一個道理，也是配合li標簽使用唯一區別就是一個前面帶點一個前面帶阿拉伯數字。

HTML <ol> 標簽

<ol> 標簽在 HTML 中表示有序列表，是 ordered lists 的縮寫。您可以自定義有序列表的初始序號

目前大多數瀏覽器支持 <ol> 標簽。

標簽定義及使用說明

<ol> 標簽定義了一個有序列表. 列表排序以數字來顯示。

使用<li> 標簽來定義列表選項。

提示和注釋

提示： 如果需要無序列表，請使用 <ul> 標簽。

提示：使用 CSS 來定義列表樣式。

HTML 4.01 與 HTML5中的差異

在 HTML 4.01 中"start" 和 "type" 屬性已經廢棄，HTML5不支持該屬性。

"reversed" 屬性是 HTML5 中的新屬性。

在HTML 4.01中"compact" 屬性已經廢棄,在 HTML5中不支持該屬性。

屬性

New：HTML5 新屬性。

屬性	值	描述
compact	compact	HTML5中不支持，不贊成使用。請使用樣式取代它。規定列表呈現的效果比正常情況更小巧。
reversedNew	reversed	指定列表倒序(9,8,7...)
start	number	HTML5不支持，不贊成使用。請使用樣式取代它。規定列表中的起始點。
type	1 A a I i	規定列表的類型。不贊成使用。請使用樣式代替。

dl 自定義列表 dt 自定義標題 dd 自定義列表內容這三個標簽我放在一起講因為這三個標簽是配合在一起的用法和ul標簽ol標簽差不多，就不再過多的敘述了，一般用到的不是很多。

所有主流瀏覽器都支持 <dl> 標簽。

標簽定義及使用說明

<dl> 標簽定義一個描述列表。

<dl> 標簽與 <dt> （定義項目/名字）和 <dd> （描述每一個項目/名字）一起使用。

HTML 4.01 與 HTML5之間的差異

在 HTML 4.01 中，<dl> 標簽定義一個定義列表。

在 HTML5 中，<dl> 標簽定義一個描述列表。

HTML <dt> 標簽

<dt> 標簽只能夠作為 <dl> 標簽的一個子元素出現，常常后跟一個 <dd> 標簽。

所有主流瀏覽器都支持 <dt> 標簽。

標簽定義及使用說明

<dt> 標簽定義一個描述列表的項目/名字。
<dt> 標簽與 <dl> （定義一個描述列表）和 <dd> （描述每一個項目/名字）一起使用。
一行中的多個 <dt> 標簽表示由緊鄰的下一個 <dd> 元素定義的多個術語。

HTML 4.01 與 HTML5之間的差異

在 HTML 4.01 中，<dt> 標簽定義一個定義列表的條目。

在 HTML5 中，<dt> 標簽定義一個描述列表的項目/名字。

hr 導航線這節課最后一個標簽是單標簽，所謂的導航線不過就是一條橫線用來分割。

HTML <hr> 標簽

<hr> 標簽表示段落級元素之間的主題劃分。

所有主流瀏覽器都支持<hr> 標簽。

標簽定義及使用說明

<hr>標簽定義HTML頁面中的主題變化（比如話題的轉移），并顯示為一條水平線。元素被用來分隔HTML頁面中的內容（或者定義一個變化）。

HTML 4.01與HTML5之間的差異

在HTML5中，<hr> 定義內容中的主題變化，并顯示為一條水平線。

在HTML 4.01中，<hr> 標簽僅僅顯示為一條水平線。

在HTML 4.01中，的所有布局屬性都已廢棄。在HTML5中不再支持這些屬性。請使用CSS來為<HR> 元素定義樣式。

HTML與XHTML之間的差異

在HTML中，<hr> 標簽沒有結束標簽。

在XHTML中，<hr> 標簽必須被正確地關閉，比如<hr /> 。

屬性

屬性	值	描述
align	left center right	HTML5 不支持。HTML 4.01 已廢棄。規定 <hr> 元素的對齊方式
noshade	noshade	HTML5 不支持。HTML 4.01 已廢棄。規定 <hr> 元素的顏色呈現為純色。
size	pixels	HTML5 不支持。HTML 4.01 已廢棄。規定 <hr> 元素的高度。
width	pixels %	HTML5 不支持。HTML 4.01 已廢棄。規定 <hr> 元素的寬度。

謝謝大家的觀看，如果需要今天課程的源代碼和ppt可以私信給我，我會免費發給你，最好使能夠關注小編一下。

在線咨詢

上一篇：html頭部的標簽有哪些？
下一篇：使用 MDwiki 將 Markdown 發布成 HTML

您的項目需求

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

整合營銷服務商

HTML5之列表的使用

?第一階段 01 HTML5

06列表

.列表標簽 ul，ol, dl(掌握)

2. 表格table

您的項目需求

.列表標簽 ul，ol, dl(掌握)