認識HTML列表元素

2021-01-11 米粒教育

在網頁設計中，經常會遇到有序列表和無序列表。有序列表的列表項以數字為序號，列表項按順序排列；無序列表的列表項以加粗的黑點開始。列表項無序排列。

有序列表

有序列表屬於「塊元素」，每個列表項單獨佔一行，也可以使用浮動屬性將有序列表變為「行元素」。有序列表使用標籤ol來表示，每個列表項使用li標籤。例如下面的HTML文檔展示了有序列表的使用。

下圖是瀏覽器顯示效果，從瀏覽器顯示效果可以看出，喜歡看的三部電影以列表方式按順序展示，序號為數字1、2、3。ol起始標籤是有序列表的開始，ol結束標籤是有序列表的結束，在ol起始標籤和結束標籤內放置多個li標籤，li標籤表示每個列表項，在li起始標籤和結束標籤內放置列表項的內容。

ol有序標籤默認展示方式是「塊元素」，如果希望ol有序列表以「行元素」方式展示，可以在li標籤內添加浮動屬性。例如下面的HTML文檔讓有序列表以「行元素」方式展示。

下圖是瀏覽器顯示效果，從瀏覽器顯示效果可以看出，有序列表以「行元素」方式展示內容，列表項在一行顯示，如果一行顯示不下，會自動將顯示不下的列表項放置到下一行顯示。li標籤添加了左浮動和寬度屬性，設置寬度屬性是為了讓每個列表項有一個固定寬度，以便能夠滿足列表項內容要求的寬度。若不設置寬度屬性，列表項的內容會擠在一起。

無序列表

無序列表與有序列表用法基本相同。不同的是無序列表的列表項沒有順序，每個列表項前面的符號也不是數字，而是加粗的黑點，利用CSS屬性可以改變列表項前面的符號。無序列表使用標籤ul來表示，每個列表項也使用li標籤。例如下面的HTML文檔展示了無序列表的使用。

無序列表的HTML文檔代碼和前面有序列表的HTML文檔代碼基本相同，僅是把ol標籤換成了ul標籤。瀏覽器顯示效果如下圖所示。

使用無序列表實現流式布局

流式布局是將多個div容器元素順序水平排放，當一行放置不下時，會自動把div容器元素放置到下一行。組合使用無序列表和div元素可以實現網頁的流式布局。例如下面的HTML文檔展示了使用無序列表和div元素實現網頁的流式布局。

瀏覽器顯示效果如下圖所示。在無序列表li標籤內放置了容器div元素，在div元素內部可以放置其它HTML元素，每個列表項都遵循div元素的樣式要求。所有列表項都按行順序排版，一行放滿後自動放置到下一行。li標籤內的margin-left和margin-top屬性用於設置每個列表項頂部與左側的間隔距離，list-style-type屬性可以設置列表項前面的項符號是否顯示，設置為none不顯示列表項前面的項符號。

相關焦點

  • HTML文檔的元素分析之一
    第二節 HTML文檔的元素分析之一大家好，我們這講開始HTML的講解，為了認識這種特殊的語言，我們要先看看這種語言中的各種元素個代表什麼意義。上節中在講這種語言的特徵時講過，標籤是用來描述網頁的。瀏覽器讀取HTML文檔，識別標籤，並按標籤要求以網頁進行顯示文本。大部分標籤都是成隊出現的。
  • HTML實戰篇:html仿百度新聞版塊製作
    本篇文章主要給大家介紹一下使用html+css來模仿製作百度新聞的版塊。我們來分析一下下邊的這張百度新聞圖片，來簡單的思考下我們要如何製作這個頁面。大體觀察該頁面我們可以看出本頁面包含有以下幾個元素，頭部的一個標題，底下分為3個模塊，有2個新聞列表頁和一個圖片文件。接下來我們簡單說一下製作所用到的核心知識。
  • 零基礎學程,給列表添加/刪除元素Python第八課
    這就是我們要重新認識的第一個數據類型——列表；我們從4方面來認知列表。1.1什麼是列表首先， 我們來看一下列表（list）的代碼格式圖中的['芳芳'，'圓圓'，'飛飛']就是一個列表。1.2從列表中提取單個元素這就涉及到了列表中的一個新知識點：下標。列表中的各個元素，好比軍隊的方陣一樣，是有序排列的，每一個元素都有自己的位置標號，這個位置標號就叫做下標從上圖中看出，列表中的元素從左往右進行排列， 它們對應的下標從0，1，2開始逐漸遞增。
  • HTML圖像元素
    HTML img標籤是一個空標籤，僅包含屬性，HTML圖像元素中沒有結束標籤。 src和alt是HTML img標籤的重要屬性，HTML圖像標籤有以下4個屬性。 1、Src屬性 它是描述圖像源或路徑的必要屬性，它告知瀏覽器在伺服器上的什麼地方尋找圖像。
  • python入門第四課:列表的排序、元素遍歷
    本教程使用的課本是《Python編程：從入門到實踐》，作者：[美] Eric Matthes本節介紹列表的操作，包括列表的排序、元素遍歷等操作。Sort()方法會永久改變列表的排列順序，還有個函數sorted()只臨時改變列表順序，大家也可以測試一下。有時候需要從列表最後一個元素倒著列印，可以用reverse()方法，會永久改變列表的順序。如果需要知道列表有多少個元素，可以用len()方法。
  • 解讀html的表格元素-60天挑戰計劃(第四天)
    首先要講的是html中的table元素。html的table元素的定義是表示通過二維數據表展示的信息，在CSS創建之前，html的table元素常用於頁面的布局，但是這種用法在html4之後就被拋棄了，並且根據table元素的語義，也不應該被用於html頁面布局，更多的是使用css中的類似"display: table; "樣式進行適當的應用。
  • 帶你徹底掌握Python列表元素添加與刪除技能
    也就是說在列表的任何位置都可以增加元素。但這個特點會導致列表元素的大量移動，降低程序效率。所以，如非特別必要，最好在列表尾部增加元素即可。append()方法該方法就是在列表的尾部增加元素，一次只可以增加一個元素，是效率最高的方法，推薦儘量使用該方法。
  • python入門第三課:列表元素的訪問、增加、刪除與修改
    2、列表是有順序的，上面列表中『蘋果』是第一個，序號用0表示，'香蕉'的序號是1，'橘子'的序號是2，'葡萄'的序號是3，1990的序號是4，以此類推。3、列表中的元素沒有任何關係，元素可以重複出現。下面介紹列表的基本操作：一、訪問列表元素可以通過列表的元素序號（或叫索引）來訪問列表，比如我們需要訪問列表fruits = ['蘋果','香蕉','橘子','葡萄'
  • 如何將數據從Pandas DataFrame寫入HTML文件?
    讀取HTML我們可以使用read_html（）函數讀取HTML文件的表。此函數將HTML文件的表作為Pandas DataFrames讀取。它可以從文件或URL中讀取。從文件中讀取HTML數據本文中，我們將使用一組輸入數據。一個包含程式語言及其創建年份的表。另一個表中有土地面積及其成本（美元）。
  • 雲計算開發實例:Python3 計算列表元素之和
    如何使用Python3計算列表元素之和？首先定義一個數字列表，並計算列表元素之和。另外還可以使用使用 while() 循環和遞歸的方式來實現。
  • HTML入門基礎
    DOCTYPE html><html><head>   <meta charset="UTF-8">   <title>標題</title></head><body> </body>
  • 16.快速掌握Python列表類:Python列表類函數歸納總結
    一種更巧妙的辦法是，用上一篇學過的知識，在列表 l1 頭尾補上一個0。這樣，在新列表中，只看第2個元素到倒數第2個元素，所有元素的判斷邏輯是一致的。 l2 = [0] + l1 + [0]滿足條件的位置種上樹苗後，會影響後面的位置。比如下面的列表，位置3先滿足條件，位置4就不再滿足條件了。
  • python入門第五課:數字列表的操作、列表切片與複製、元組的遍歷
    range(1,11):squares.append(value**2) #把每個元素添加到列表的尾部print(squares) #列印最終的列表內容可以利用常用的統計函數min()、max()、sum()進行列表統計，見下面的代碼：
  • 詳解Python列表及其運算
    3、列表元素的更新更新列表元素可以採用訪問列表元素的方法，在賦值運算符（=）左邊使用訪問運算符可以更新單個數據項或多個數據項，也可以用append方法順序添加新的元素到列表，也可以使用insert方法在指定的位置插入一個元素到列表
  • Python列表和元組
    定義列表和函數```l = [1, 2, 'hello', 'world'] # 列表中同時含有 int 和 string 類型的元素l[1, 2, 'hello', 'world']tup= ('jason', 22) # 元組中同時含有 int 和 string 類型的元素tup('jason', 22)```對於列表來說，由於其是動態的，我們只需簡單地在列表末尾，加入對於元組來說，
  • python數據類型總結——列表
    多個元素的集合也是一種常見的表達方式。python用列表或元組來幫助我們。python列表一系列元素組成一個集合，可能通過索引，對每個元素進行訪問。這種數據類型統稱為序列。在python中，字符串就是一種序列。列表，也是序列的一種。可以用中括號來聲明列表。
  • html中span標籤的詳細介紹
    本篇將介紹html中span標籤的詳細用法，有興趣的朋友可以了解一下！「span」作為英文單詞有「範圍」的意思，那它作為html中的標籤又充當什麼樣的角色呢？接下來我們一起來看看html中span標籤的定義及用法吧！
  • Python數據類型之列表list
    # 列表是python中最基本的數據結構，它是一個有序序列，序列中的每個元素都分配一個數字（位置，索引）# 1、我們可以使用 方括號，中括號[]來創建列表# 2、我們可以直接將序列放在list（seq）
  • 11個python列表方法全面解析!
    >ls.extend(lt) #返回值為空，將列表lt的元素添加到列表ls末尾。語法：ls.insert(index, object)index —— 元素object插入列表ls的位置。objece —— 將要添加的元素。可以是列表，元組，字典，集合，字符串等。
  • Python之list列表數據類型講解
    前言在python中，list列表數據類型其實就是一個容器，可以放置大量元素的集合。同時，list列表也有很多特點和使用場景，本文主要講解list列表的函數方法。python常用方法1、append添加元素append()函數是將要添加的元素追加到列表的末尾。