天為大家?guī)砹薍TML中的表格與列表、塊及類與ID的基礎(chǔ)知識(shí)，首先為大家介紹的是HTML中的表格與列表。

一、HTML中的表格與列表：

相信大家都知道在office、Excel等辦公軟件中如何制作表格，那大家知道如何在網(wǎng)頁上制作表格呢？同時(shí)網(wǎng)頁上面的注冊(cè)和登陸表又是怎么制作出來的呢？今天將會(huì)為大家詳細(xì)講解。

1、表格：

①　了解<table>標(biāo)簽

在網(wǎng)頁上的表格制作是用<table>標(biāo)簽來定義的。

②　table中的<tr>和<td>標(biāo)簽

l 每個(gè)表格有若干行，即用<tr>標(biāo)簽來定義。

l 每行被分割為若干單元格，即用<td>標(biāo)簽來定義。

運(yùn)行結(jié)果：

③　在<table>元素中添加border屬性就可以顯示邊框，示例：

運(yùn)行結(jié)果：

④　表單的表格用<th>標(biāo)簽表示，示例：

運(yùn)行結(jié)果：

2、列表

列表分為無序列表、有序列表和定義列表

①　無序列表

l 無序列表是一個(gè)項(xiàng)目的列表，此列表項(xiàng)目使用粗體圓點(diǎn)進(jìn)行標(biāo)記。

l 無序列表始于<ul>標(biāo)簽，每個(gè)列表始于<li>，示例：

運(yùn)行結(jié)果：

l 在<ul>標(biāo)簽中使用type屬性可以改變列表前面的符號(hào)，示例：

運(yùn)行結(jié)果：

②　有序列表

l 與無序列表不同的是，有序列表使用的是<ol>標(biāo)簽，示例：

運(yùn)行結(jié)果：

在<ol>標(biāo)簽中添加type屬性，可以改變列表前面的符號(hào)，示例：

運(yùn)行結(jié)果：

③　定義列表

l 定義列表就是自定義列表，是項(xiàng)目及其注釋的組合。

l 自定義列表以<dl>標(biāo)簽開始，每個(gè)自定義列表項(xiàng)以<dt>開始，每個(gè)自定義列表項(xiàng)的定義以<dd>開始，示例：

運(yùn)行結(jié)果：

二、HTML中的塊：

1、大多數(shù)HTML元素被定義為塊級(jí)元素或內(nèi)聯(lián)元素

①　塊級(jí)元素在瀏覽器顯示時(shí)，通常以新行來開始（和結(jié)束），例如：<h1>、<p>、<ul>、<table>等。

②　內(nèi)聯(lián)元素在顯示時(shí)通常不會(huì)以新行開始，例如：<b>、<td>、<a>、<img>等。

2、HTML中的<div>元素

HTML<div>元素是塊級(jí)元素，是可以組合其他HTML元素的容器，簡單來說<div>元素一般被用在HTML布局上面，示例：

運(yùn)行結(jié)果：

3、HTML中的<span>元素

HTML<span>元素是內(nèi)聯(lián)元素可用作文本的容器，當(dāng)與css一同使用時(shí)，<span>元素可用于為部分文本設(shè)置樣式屬性，示例：

運(yùn)行結(jié)果：

三、HTML中的CLASS和ID:

在上面的示例中我們有看到id標(biāo)簽，在學(xué)習(xí)過程中很多人搞不懂class類和id標(biāo)簽的區(qū)別，現(xiàn)在開始教大家如何區(qū)分class類和id標(biāo)簽。

CLASS:

1、Class就我們口中所說的類

2、在css中引用時(shí)以“.”開頭，并且可以被多個(gè)元素調(diào)用，例如：

3、在使用中，可以先設(shè)置出一個(gè)樣式，然后被多個(gè)元素引用。

ID:

1、id是一種標(biāo)簽

2、在css中引用時(shí)以“#”開頭，只能定義一個(gè)元素，例如：

3、在使用時(shí)，只能先確定一個(gè)元素，然后才能設(shè)置其樣式，無法被其它元素引用，是唯一的標(biāo)簽。

希望大家能夠從這篇文章學(xué)習(xí)到HTML的部分知識(shí)~

篇文章推薦有想法學(xué)習(xí)前端，已經(jīng)上路琢磨web前端的朋友們。

之前很多朋友跟我說，自學(xué)編程的時(shí)候，總是摸不清頭腦，一大推問題需要解決，種種書籍需要去啃，字符、單詞都需要去記。就感覺要費(fèi)上很多時(shí)間，居然擔(dān)憂青春飯是否能吃到？

實(shí)際上，是實(shí)戰(zhàn)過少項(xiàng)目，或者沒有自己做過。凡事都是從0到1的過程，從1到100就非常簡單了

小編為各位想加入程序猿大軍，加入前端的朋友們整理了30個(gè)實(shí)戰(zhàn)項(xiàng)目列表，有非常詳細(xì)的教程。選擇幾個(gè)進(jìn)行學(xué)習(xí)，或者發(fā)揮自己的想象去完成自己的項(xiàng)目

還有屬于小編收集精選的整套自學(xué)視頻，獲取方式在文末

歡迎大家裝載+分享。給需要學(xué)習(xí)的朋友們

項(xiàng)目列表：

1.【HTML5 canvas龍卷風(fēng)動(dòng)畫制作】

2.【CSS3 七夕表白頁面特效】

3.【CSS 20行代碼見證七色花動(dòng)畫】

4.【HTML5 敲出一個(gè)牛逼的雪景】

5.【CSS3特效拉窗簾】

6.【HTML5游戲項(xiàng)目】

7.【英雄聯(lián)盟官網(wǎng)特效】

8.【web動(dòng)畫形成原理-滾動(dòng)】

9.【天貓官網(wǎng)必用技術(shù)——懶加載】

10.【CSS3炫酷的輪播特效】

11.【css實(shí)現(xiàn)點(diǎn)擊圖片切換】

12.【CSS3大型企業(yè)官網(wǎng)】

13【W(wǎng)EB煙霧夢(mèng)幻特效】

14.【解析渲染原理-解析渲染原理】

15.【實(shí)現(xiàn)3d炫酷相冊(cè)】

16.【純html css 打造女神輪播圖】

17.【植物大戰(zhàn)僵尸網(wǎng)頁版】：

18.【陰陽師游戲角色動(dòng)態(tài)展示卡】：

19.【絕地求生官網(wǎng)頁面制作】：

20.【canvas噴泉效果】

21.【video音頻效果】

22.【鬼畜奔跑吧小綿羊】

23.【網(wǎng)頁精靈寵物】

24.【RequireJS來制圖】

25.【網(wǎng)頁制作貪吃蛇】

26.【vue動(dòng)畫】

27.【vue音樂播放器】

28.【React電影項(xiàng)目】

29.【H5實(shí)現(xiàn)一個(gè)微信小游戲】

30.【web安全技術(shù)】

文末

資料視頻教程領(lǐng)取方式：

關(guān)注小編后私信【1】可以得到我整理的這些前端資料了（私信方法：點(diǎn)擊我頭像進(jìn)我主頁有個(gè)上面有個(gè)私信按鈕）

轉(zhuǎn)發(fā)+關(guān)注并私信小編“1”即可拿走哦！

網(wǎng)絡(luò)上，有序列表可以使您的 HTML 頁面更有組織、簡潔且易于閱讀。在本文中，我將向您展示如何在 HTML 中創(chuàng)建高質(zhì)量、有趣的有序列表。您將學(xué)習(xí)如何在平凡的列表中帶來鮮為人知的＂Wow＂效果。讓我們開始吧！

一、HTML 中的 ordered list 基礎(chǔ)

HTML 中的有序列表（ordered list）使用 <ol> 元素創(chuàng)建，并且對(duì)于每個(gè)列表項(xiàng)使用 <li> 元素。下面是一段有序列表的基本示例：

html

<ol>
<li>項(xiàng)目 1</li>
<li>項(xiàng)目 2</li>
</ol>

在上面的示例中，您可以看到列表由 <ol> 元素包圍，每個(gè)列表項(xiàng)使用 <li> 元素表示。

二、美化有序列表

要讓您的有序列表更具吸引力，您可以通過使用 CSS 進(jìn)行累積 з?熄culation。以下是一些建議：

1. 自定義列表部分的風(fēng)格： affair CAN I USE CSS 屬性供您選擇，例如顏色、背景圖片、邊框、邊距和填充。此外，可以使用盒子陰影為列表添加淺顯的三維效果。
2. 更新列表標(biāo)記： 更先Progressive Enhancement，在文本內(nèi)容之前使用數(shù)字列表標(biāo)記，可以讓列表更立體。您可以使用 CSS Counter 功能自動(dòng)結(jié)合標(biāo)記和內(nèi)容。

css