首頁 web前端 html教學 網頁HTML程式碼解說:有序列表與無序列表_HTML/Xhtml_網頁製作

網頁HTML程式碼解說:有序列表與無序列表_HTML/Xhtml_網頁製作

May 16, 2016 pm 04:43 PM
程式碼 元素 學習 序列 結構 網頁 講解


本節學習HTML中的列表元素,列表形式在網站設計中佔有比較大的比重,顯示資訊非常整齊直觀,以便使用者理解。在後面的CSS樣式學習中將大量使用到列表元素的高級作用。
用於組織資料的清單
學習了這麼多控制網頁顯示的HTML標籤,讀者可以初步製作純文章頁面了。本節學習HTML中的列表元素,列表形式在網站設計中佔有比較大的比重,顯示資訊非常整齊直觀,以便使用者理解。在後面的CSS樣式學習中將大量使用到列表元素的高級作用。
文本框:

图4.17  列表元素的结构
4.4.1 列表的結構組成
HTML的列表元素是一個由列表標籤封閉的結構,包含的列表項目由
  • 組成。具體結構如圖4.17所示。
    4.4.2 製作無序列表
    顧名思義,無序列表就是列表結構中的列表項沒有先後順序的列表形式。網頁應用中大部分的清單均採用無序列表,其清單標籤採用
      ,編寫方法如下:

      • 列表項目一

      • 列表項二

      • 列表項目三

      • 列表項四

      • 列表項五


      4.4.3 製作有序列表
      顧名思義,有序列表就是列表結構中的列表項目有先後順序的列表形式,從上到下可以有各種不同的序列編號,如1、2、3或a、b、c等。在D:web目錄下建立網頁文件,命名為ul_ol.htm,編寫程式碼4.17所示。
      代碼4.17 清單的設定:ul_ol.htm


      列表的設定



      網頁前台技術

      • HTML

      • CSS

      • JavaScript

      • FLASH


      網頁後台的學習

      1. ASP

      2. ASP.net

      3. PHP

      4. CGI

      5. Ruby

      6. Python





      在瀏覽器網址列輸入http://localhost/ul_ol.htm,瀏覽效果如圖4.18所示。

      圖4.18 列表的設置
    • 本網站聲明
      本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

      熱AI工具

      Undresser.AI Undress

      Undresser.AI Undress

      人工智慧驅動的應用程序,用於創建逼真的裸體照片

      AI Clothes Remover

      AI Clothes Remover

      用於從照片中去除衣服的線上人工智慧工具。

      Undress AI Tool

      Undress AI Tool

      免費脫衣圖片

      Clothoff.io

      Clothoff.io

      AI脫衣器

      Video Face Swap

      Video Face Swap

      使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

      熱工具

      記事本++7.3.1

      記事本++7.3.1

      好用且免費的程式碼編輯器

      SublimeText3漢化版

      SublimeText3漢化版

      中文版,非常好用

      禪工作室 13.0.1

      禪工作室 13.0.1

      強大的PHP整合開發環境

      Dreamweaver CS6

      Dreamweaver CS6

      視覺化網頁開發工具

      SublimeText3 Mac版

      SublimeText3 Mac版

      神級程式碼編輯軟體(SublimeText3)

      熱門話題

      Java教學
      1664
      14
      CakePHP 教程
      1423
      52
      Laravel 教程
      1317
      25
      PHP教程
      1268
      29
      C# 教程
      1247
      24
      Edge瀏覽器怎麼將網頁用捷徑傳送到桌面? Edge瀏覽器怎麼將網頁用捷徑傳送到桌面? Mar 14, 2024 pm 05:22 PM

        Edge瀏覽器怎麼將網頁用捷徑傳送到桌面?我們很多用戶為了方便直接打開訪問頁面,想要將經常使用的網頁以快捷方式的形式顯示在桌面,但是不知道應該如何操作,針對這個問題,本期小編就來和廣大用戶們分享解決方法,一起來看看今日軟體教學分享的內容。  Edge瀏覽器將網頁傳送到桌面捷徑方法:  1、開啟軟體,點選頁面中的「...」按鈕。  2、在下拉式選單選項中選擇「應用」中的「將此網站作為應用程式安裝」。  3、最後在彈出的視窗中將其

      網頁圖片載入不出來怎麼辦? 6種解決辦法 網頁圖片載入不出來怎麼辦? 6種解決辦法 Mar 15, 2024 am 10:30 AM

        有網友發現打開瀏覽器網頁,網頁上的圖片遲遲加載不出來,是怎麼回事?檢查過網路是正常的,那是哪裡出現了問題呢?下面小編就來跟大家介紹一下網頁圖片載入不出來的六種解決方法。網頁圖片載入不出來:  1、網速問題網頁顯示不出圖片有可能是因為電腦的網路速度比較慢,電腦中開啟的軟體比較多,  而我們造訪的圖片比較大,這就可能因為載入逾時,導致圖片顯示不出來,  可以將比較佔網速的軟體將關掉,可以去任務管理器查看一下。  2、造訪人數過多  網頁顯示不出圖片還有可能是因為我們造訪的網頁,在同時段造訪的

      GE通用遠端程式碼可在任何裝置上編程 GE通用遠端程式碼可在任何裝置上編程 Mar 02, 2024 pm 01:58 PM

      如果您需要遠端編程任何設備,這篇文章會為您帶來幫助。我們將分享編程任何設備的頂級GE通用遠端代碼。通用電氣的遙控器是什麼? GEUniversalRemote是一款遙控器,可用於控制多個設備,如智慧電視、LG、Vizio、索尼、藍光、DVD、DVR、Roku、AppleTV、串流媒體播放器等。 GEUniversal遙控器有各種型號,具有不同的功能和功能。 GEUniversalRemote最多可以控制四台設備。頂級通用遙控器代碼,可在任何裝置上編程GE遙控器配備一組代碼,使其能夠與不同設備配合。您可

      如何使用Copilot產生程式碼 如何使用Copilot產生程式碼 Mar 23, 2024 am 10:41 AM

      身為一名程式設計師,對於能夠簡化程式設計體驗的工具,我感到非常興奮。借助人工智慧工具的幫助,我們可以產生演示程式碼,並根據需求進行必要的修改。在VisualStudioCode中新引入的Copilot工具讓我們能夠創建具有自然語言聊天互動的AI生成程式碼。透過解釋功能,我們可以更好地理解現有程式碼的含義。如何使用Copilot產生程式碼?要開始,我們首先需要取得最新的PowerPlatformTools擴充。要實現這一點,你需要進入擴充頁面,搜尋“PowerPlatformTool”,然後點擊Install按鈕

      php怎麼在網頁打開 php怎麼在網頁打開 Mar 22, 2024 pm 03:20 PM

      在網頁中執行 PHP 程式碼需要確保 Web 伺服器支援並已正確配置 PHP。可以透過三種方式開啟 PHP: * **伺服器環境:**將 PHP 檔案放置在伺服器根目錄並透過瀏覽器存取。 * **整合開發環境:**將 PHP 檔案放置在指定 Web 根目錄並透過瀏覽器存取。 * **遠端伺服器:**透過伺服器提供的 URL 位址存取託管在遠端伺服器上的 PHP 檔案。

      一起學習word根號輸入方法 一起學習word根號輸入方法 Mar 19, 2024 pm 08:52 PM

      在word編輯文字內容時,有時會需要輸入公式符號。有的小夥子們不知道在word根號輸入的方法,小面就讓小編跟小夥伴們一起分享下word根號輸入的方法教學。希望對小夥伴們有幫助。首先,開啟電腦上的Word軟體,然後開啟要編輯的文件,並將遊標移到需要插入根號的位置,參考下方的圖片範例。 2.選擇【插入】,再選擇符號裡的【公式】。如下方圖片紅色圈的部分內容所示:3.接著選擇下方的【插入新公式】。如下方圖片紅色圈的部分內容所示:4.選擇【根式】,再選擇適當的根號。如下方圖片紅色圈的部分內容所示:

      Discuz編輯器:強大的網頁編輯工具 Discuz編輯器:強大的網頁編輯工具 Mar 09, 2024 pm 06:06 PM

      Discuz編輯器:強大的網頁編輯工具,需要具體程式碼範例隨著網路的發展,網站建立和內容編輯變得越來越重要。作為常見的網頁編輯工具,Discuz編輯器在網站建置中扮演著重要的角色。它不僅提供了豐富的功能和工具,還能夠幫助使用者更方便地編輯和發佈內容。在本文中,我們將介紹Discuz編輯器的特點和使用方法,並提供一些具體的程式碼範例,來幫助讀者更好地了解和使用

      建立並執行Linux'.a”文件 建立並執行Linux'.a”文件 Mar 20, 2024 pm 04:46 PM

      在Linux作業系統中處理檔案需要使用各種命令和技術,使開發人員能夠有效率地建立和執行檔案、程式碼、程式、腳本和其他東西。在Linux環境中,擴展名為”.a”的檔案作為靜態庫具有重要的重要性。這些程式庫在軟體開發中發揮重要作用,允許開發人員有效地管理和共享多個程式的公共功能。對於Linux環境中的有效軟體開發,了解如何建立和運行「.a」檔案至關重要。本文將介紹如何全面安裝和設定Linux「.a」文件,讓我們一起探索Linux「.a」文件的定義、用途、結構,以及建立和執行它的方法。什麼是L

      See all articles