介紹幾種常見(jiàn)的頁(yè)面元素

通過(guò)之前這些章節(jié)知識(shí)點(diǎn)的學(xué)習(xí)，同學(xué)們已經(jīng)能夠很好地理解網(wǎng)頁(yè)中元素的概念。 HTML 元素就像網(wǎng)頁(yè)的細(xì)胞，充斥著整個(gè)網(wǎng)頁(yè)中。那么為了更深入地了解網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域，還有一些我們不得不學(xué)習(xí)的網(wǎng)頁(yè)元素。這一節(jié)，老師就將帶領(lǐng)大家來(lái)學(xué)習(xí)一下 HTML 的一些常見(jiàn)核心元素。

在這一節(jié)中，我們會(huì)學(xué)習(xí)到**在頁(yè)面中插入列表，如何在頁(yè)面中插入時(shí)間，如何在頁(yè)面中插入水平線，讓頁(yè)面的結(jié)構(gòu)更全面。**通過(guò)本節(jié)的學(xué)習(xí)，大家應(yīng)該開(kāi)始形成一個(gè)意識(shí)，就是總結(jié)自己已經(jīng)見(jiàn)過(guò)的 HTML 元素，養(yǎng)成一個(gè)積累網(wǎng)頁(yè)中的元素使用的好習(xí)慣，逐漸培養(yǎng)并形成自己的網(wǎng)頁(yè)學(xué)習(xí)心得。

本節(jié)知識(shí)點(diǎn)的難度在所有章節(jié)中算是中等難度，并不是很難，只要大家跟隨老師的腳步一步一步學(xué)習(xí)，課后完成一定的熟練度練習(xí)，很容易就可以應(yīng)用的十分自如。那么接下來(lái)，就請(qǐng)跟隨老師的腳步一起來(lái)學(xué)習(xí)今天的頁(yè)面元素吧！

1. 頁(yè)面中插入列表

1.1 知識(shí)背景

如果學(xué)習(xí)過(guò)一點(diǎn) HTML 知識(shí)的同學(xué)一定會(huì)對(duì)列表不陌生，當(dāng)然，大家零基礎(chǔ)的同學(xué)也沒(méi)必要怕，因?yàn)檫@是一個(gè)既簡(jiǎn)單，又實(shí)用的元素。

列表元素有多常見(jiàn)呢？比如你看到的新聞 app 中的新聞鏈接，你看到的淘寶商城中的一些商品列表。都可能會(huì)用到了列表這個(gè)元素。用英文講，列表，就是 list 這個(gè)單詞。所以 W3C 在定義列表這個(gè) HTML 元素的時(shí)候就把它的標(biāo)簽名字定義為 li。它是一個(gè)成對(duì)出現(xiàn)的標(biāo)簽，如果你沒(méi)有看見(jiàn)它成對(duì)出現(xiàn)，那這個(gè)時(shí)候就要檢查一下，你肯定是寫(xiě)錯(cuò)了。

這個(gè)元素可以嵌套別的元素，比如段落標(biāo)簽 p 表簽，文本表簽 h 標(biāo)簽等。

1.2 列表分類

那么下面我們就來(lái)介紹一下，列表元素的分類。從使用角度上來(lái)分，大致上分為兩類標(biāo)簽：有序標(biāo)簽和無(wú)序標(biāo)簽；什么是有序和無(wú)序呢？

有序標(biāo)簽就是用 1,2,3,4 等這類數(shù)字標(biāo)號(hào)每一個(gè)列表選項(xiàng)的列表，這樣你作為網(wǎng)頁(yè)用戶就一目了然知道他們的邏輯關(guān)系或者是順序了，所以稱之為有序標(biāo)簽。

有序標(biāo)簽中，又分為用不通過(guò)種數(shù)字標(biāo)記的，比如可以用羅馬的數(shù)字來(lái)表示 1,2,3,4 等，也可以用其他的能夠標(biāo)識(shí)順序的標(biāo)簽。總之在實(shí)際使用的時(shí)候只要選用你認(rèn)為合理的，用戶看了就能夠知道他們的內(nèi)在順序或者關(guān)系的標(biāo)識(shí)方法就可以。

無(wú)序標(biāo)簽意思就是各個(gè)標(biāo)簽內(nèi)容之間并沒(méi)有直接的邏輯聯(lián)系。

1.3 在 Dreamweaver CC 2018 中插入列表

上面簡(jiǎn)單說(shuō)了下列表的概念，下面就來(lái)說(shuō)一說(shuō)列表的具體使用，尤其是在 Dreamweaver CC 2018 中的使用：

首先我們還是新建一個(gè)空白頁(yè)面，在這里，我們暫時(shí)就不做新建空白頁(yè)面的演示了，因?yàn)楦鶕?jù)之前的章節(jié)，想必大家已經(jīng)很熟悉這些內(nèi)容了。

建好你的空白頁(yè)面后，既然列表元素也是一個(gè) HTML 元素，那插入一個(gè) HTML 元素應(yīng)該怎么做？沒(méi)錯(cuò)，就是插入菜單。如下圖所示，插入菜單點(diǎn)開(kāi)后，在下拉列表的選項(xiàng)中有一個(gè)列表項(xiàng)的選項(xiàng)，我們點(diǎn)擊它，就可以發(fā)現(xiàn)，在頁(yè)面中就插入了一個(gè)列表元素。

2. 頁(yè)面中插入時(shí)間

上面學(xué)習(xí)了插入列表，這一個(gè)知識(shí)點(diǎn)中我們將一起來(lái)學(xué)習(xí)如何在頁(yè)面中插入一個(gè)時(shí)間元素。

在頁(yè)面中插入時(shí)間一是為了方便用戶掌握關(guān)鍵操作的時(shí)間，用戶既然選擇了進(jìn)入我們的網(wǎng)站，我們就需要有提供一切可能想到的需求的能力。這個(gè)時(shí)間從技術(shù)角度來(lái)說(shuō)插入時(shí)間并不難，重要的是理解什么場(chǎng)合下需要用到時(shí)間。

下面就來(lái)學(xué)習(xí)一下具體操作：

首先第一步：點(diǎn)擊右側(cè)的插入，用鼠標(biāo)滾輪向下滑動(dòng)，下面有一個(gè)日期，如下圖所示：

然后點(diǎn)擊這個(gè)日期后，會(huì)彈出一個(gè)時(shí)間格式的設(shè)置界面，在這里我們就可以選擇形形色色的時(shí)間格式，根據(jù)自己想要展示的時(shí)間格式來(lái)選擇，這里老師就以年月日這種形式的來(lái)示范，同學(xué)們課后練習(xí)的時(shí)候可以每一種時(shí)間格式都嘗試看看。

最后點(diǎn)擊確定后，你可以看到頁(yè)面中已經(jīng)插入了一個(gè)當(dāng)前的時(shí)間，就像下面的圖片所示意的那樣。

到此，我們就成功地在頁(yè)面中插入了時(shí)間。下一個(gè)知識(shí)點(diǎn)我們將會(huì)講解如何在頁(yè)面插入一條水平分割線。

3. 頁(yè)面中插入水平線

水平分割線，早期一般是用來(lái)分割網(wǎng)頁(yè)內(nèi)容用的，為了引起明顯的視覺(jué)上的分割效果，我們一般都會(huì)用一條線來(lái)分割上下兩個(gè)區(qū)域的內(nèi)容，而這個(gè)一條水平線就是我們今天要說(shuō)的分割線。它是有自己的標(biāo)簽的。下面我們就通過(guò)實(shí)際的演示來(lái)看一看水平分割線是如何在 Dreamweaver CC 2018 中操作的。

我們還是在上面的幾個(gè)知識(shí)點(diǎn)中已經(jīng)創(chuàng)作好的文檔來(lái)完成后續(xù)的講解。

在頁(yè)面中選擇插入選項(xiàng)，然后在插入列表中向下滑動(dòng)，快滑動(dòng)到最底下的時(shí)候，我們可以看到一個(gè)水平線，沒(méi)錯(cuò)，這個(gè)就是我們要插入的水平線。

點(diǎn)擊它，你就會(huì)發(fā)現(xiàn)頁(yè)面中插入了一條水平線，像下面的圖片一樣。

5. 小結(jié)

通過(guò)本節(jié)的學(xué)習(xí)，我們介紹了如何使用列表元素，了解了列表在實(shí)際應(yīng)用中的地位和意義，以及應(yīng)用列表能夠更清晰更有條理的展示結(jié)構(gòu)化信息。要知道列表的種類不僅僅是有序列表一種，更有無(wú)序列表等其他列表。更詳細(xì)的內(nèi)容需要同學(xué)們下載相應(yīng)的 W3C 規(guī)范文檔，在平時(shí)使用中做到多用多查，逐漸形成一定的選用規(guī)范。

然后我們?cè)诒竟?jié)中講述了時(shí)間相關(guān)元素的插入，也是從實(shí)際應(yīng)用背景開(kāi)始說(shuō)起，就如同我們?cè)诰W(wǎng)頁(yè)的頂端經(jīng)?？吹阶约哼M(jìn)入網(wǎng)頁(yè)的時(shí)間一樣，向用戶展示時(shí)間不僅僅是操作系統(tǒng)應(yīng)該承擔(dān)的功能。在一些網(wǎng)站關(guān)鍵交互進(jìn)行的時(shí)候，適當(dāng)且有必要給用戶展示出相關(guān)的時(shí)間點(diǎn)。

后來(lái)我們?cè)诒竟?jié)中學(xué)習(xí)了水平線相關(guān)的標(biāo)簽，了解到水平線具有規(guī)范結(jié)構(gòu)的作用。使用水平線能夠清晰明朗地對(duì)網(wǎng)頁(yè)的結(jié)構(gòu)進(jìn)行分層。雖然今天的網(wǎng)頁(yè)設(shè)計(jì)，有了一些類似的元素，但使用水平線分割網(wǎng)頁(yè)依然是不錯(cuò)的選擇！

本節(jié)知識(shí)點(diǎn)中重點(diǎn)是：掌握在頁(yè)面中插入列表的方法，以及理解列表，時(shí)間的使用意義。
本節(jié)知識(shí)點(diǎn)中難點(diǎn)是：學(xué)會(huì)合理的設(shè)置水平線，從而達(dá)到規(guī)范頁(yè)面結(jié)構(gòu)。