介紹幾種常見的頁面元素

通過之前這些章節知識點的學習，同學們已經能夠很好地理解網頁中元素的概念。 HTML 元素就像網頁的細胞，充斥著整個網頁中。那么為了更深入地了解網頁設計領域，還有一些我們不得不學習的網頁元素。這一節，老師就將帶領大家來學習一下 HTML 的一些常見核心元素。

在這一節中，我們會學習到**在頁面中插入列表，如何在頁面中插入時間，如何在頁面中插入水平線，讓頁面的結構更全面。**通過本節的學習，大家應該開始形成一個意識，就是總結自己已經見過的 HTML 元素，養成一個積累網頁中的元素使用的好習慣，逐漸培養并形成自己的網頁學習心得。

本節知識點的難度在所有章節中算是中等難度，并不是很難，只要大家跟隨老師的腳步一步一步學習，課后完成一定的熟練度練習，很容易就可以應用的十分自如。那么接下來，就請跟隨老師的腳步一起來學習今天的頁面元素吧！

1. 頁面中插入列表

1.1 知識背景

如果學習過一點 HTML 知識的同學一定會對列表不陌生，當然，大家零基礎的同學也沒必要怕，因為這是一個既簡單，又實用的元素。

列表元素有多常見呢？比如你看到的新聞 app 中的新聞鏈接，你看到的淘寶商城中的一些商品列表。都可能會用到了列表這個元素。用英文講，列表，就是 list 這個單詞。所以 W3C 在定義列表這個 HTML 元素的時候就把它的標簽名字定義為 li。它是一個成對出現的標簽，如果你沒有看見它成對出現，那這個時候就要檢查一下，你肯定是寫錯了。

這個元素可以嵌套別的元素，比如段落標簽 p 表簽，文本表簽 h 標簽等。

1.2 列表分類

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

有序標簽就是用 1,2,3,4 等這類數字標號每一個列表選項的列表，這樣你作為網頁用戶就一目了然知道他們的邏輯關系或者是順序了，所以稱之為有序標簽。

有序標簽中，又分為用不通過種數字標記的，比如可以用羅馬的數字來表示 1,2,3,4 等，也可以用其他的能夠標識順序的標簽?？傊趯嶋H使用的時候只要選用你認為合理的，用戶看了就能夠知道他們的內在順序或者關系的標識方法就可以。

無序標簽意思就是各個標簽內容之間并沒有直接的邏輯聯系。

1.3 在 Dreamweaver CC 2018 中插入列表

上面簡單說了下列表的概念，下面就來說一說列表的具體使用，尤其是在 Dreamweaver CC 2018 中的使用：

首先我們還是新建一個空白頁面，在這里，我們暫時就不做新建空白頁面的演示了，因為根據之前的章節，想必大家已經很熟悉這些內容了。

建好你的空白頁面后，既然列表元素也是一個 HTML 元素，那插入一個 HTML 元素應該怎么做？沒錯，就是插入菜單。如下圖所示，插入菜單點開后，在下拉列表的選項中有一個列表項的選項，我們點擊它，就可以發現，在頁面中就插入了一個列表元素。

2. 頁面中插入時間

上面學習了插入列表，這一個知識點中我們將一起來學習如何在頁面中插入一個時間元素。

在頁面中插入時間一是為了方便用戶掌握關鍵操作的時間，用戶既然選擇了進入我們的網站，我們就需要有提供一切可能想到的需求的能力。這個時間從技術角度來說插入時間并不難，重要的是理解什么場合下需要用到時間。

下面就來學習一下具體操作：

首先第一步：點擊右側的插入，用鼠標滾輪向下滑動，下面有一個日期，如下圖所示：

然后點擊這個日期后，會彈出一個時間格式的設置界面，在這里我們就可以選擇形形色色的時間格式，根據自己想要展示的時間格式來選擇，這里老師就以年月日這種形式的來示范，同學們課后練習的時候可以每一種時間格式都嘗試看看。

最后點擊確定后，你可以看到頁面中已經插入了一個當前的時間，就像下面的圖片所示意的那樣。

到此，我們就成功地在頁面中插入了時間。下一個知識點我們將會講解如何在頁面插入一條水平分割線。

3. 頁面中插入水平線

水平分割線，早期一般是用來分割網頁內容用的，為了引起明顯的視覺上的分割效果，我們一般都會用一條線來分割上下兩個區域的內容，而這個一條水平線就是我們今天要說的分割線。它是有自己的標簽的。下面我們就通過實際的演示來看一看水平分割線是如何在 Dreamweaver CC 2018 中操作的。

我們還是在上面的幾個知識點中已經創作好的文檔來完成后續的講解。

在頁面中選擇插入選項，然后在插入列表中向下滑動，快滑動到最底下的時候，我們可以看到一個水平線，沒錯，這個就是我們要插入的水平線。

點擊它，你就會發現頁面中插入了一條水平線，像下面的圖片一樣。

5. 小結

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

然后我們在本節中講述了時間相關元素的插入，也是從實際應用背景開始說起，就如同我們在網頁的頂端經?？吹阶约哼M入網頁的時間一樣，向用戶展示時間不僅僅是操作系統應該承擔的功能。在一些網站關鍵交互進行的時候，適當且有必要給用戶展示出相關的時間點。

后來我們在本節中學習了水平線相關的標簽，了解到水平線具有規范結構的作用。使用水平線能夠清晰明朗地對網頁的結構進行分層。雖然今天的網頁設計，有了一些類似的元素，但使用水平線分割網頁依然是不錯的選擇！

本節知識點中重點是：掌握在頁面中插入列表的方法，以及理解列表，時間的使用意義。
本節知識點中難點是：學會合理的設置水平線，從而達到規范頁面結構。