HTML(二):列表+表格

来源:http://www.cnblogs.com/nervdy/archive/2016/07/31/5723937.html
-Advertisement-
Play Games

1.無序列表 HTML <ul> 元素代表多項的無序列表,即無數值排序項的集合,且它們在列表中的順序是沒有意義的。通常情況下,無序列表項的頭部可以是幾種形式,如一個點,一個圓形或方形。通過設置<ul>元素的type屬性來改變無序列表頭部的形式。 無序列表和有序列表都使用<li>標簽來定義單列。 2. ...


1.無序列表

HTML <ul> 元素代表多項的無序列表,即無數值排序項的集合,且它們在列表中的順序是沒有意義的。通常情況下,無序列表項的頭部可以是幾種形式,如一個點,一個圓形或方形。通過設置<ul>元素的type屬性來改變無序列表頭部的形式。

  • 無序列表和有序列表都使用<li>標簽來定義單列。
1 <ul type="disc">
2     <li>實心圓</li>
3 </ul>
4 <ul type="circle">
5     <li>空心圓</li>
6 </ul>
7 <ul type="square">
8     <li>方形</li>
9 </ul>

2.有序列表

HTML <ol> 元素表示多個有序列表項。通常情況下,有序列表中顯示在項前面的編號(a preceding numbering),可以是任何形式的,如數字,字母或羅馬數字甚至簡單的點。<ol>同樣可以通過設置type屬性來改變頭部序號標記的形式。同時可以設置start屬性來指定排序的起點數值。

  • <ol>元素不光可以通過type屬性改變標記形式,還可以通過CSS的list-style-type屬性進行更多樣的設置,list-style-type可設置的值非常之多,不過並不常用。
 1 <ol start="5">
 2     <li>預設形式,設置start為5</li>
 3     <li>預設形式,設置start為5</li>
 4 </ol>
 5 <ol type="a">
 6     <li>設置type為小寫英文字母</li>
 7     <li>設置type為小寫英文字母</li>
 8 </ol>
 9 <ol type="A">
10     <li>設置type為大寫英文字母</li>
11     <li>設置type為大寫英文字母</li>
12 </ol>
13 <ol type="I">
14     <li>設置type為羅馬數字</li>
15     <li>設置type為羅馬數字</li>
16 </ol>

以下為list-style-type的部分可取值:

3.定義列表

HTML <dl> 元素是一個包含術語定義以及描述的列表,通常用於展示辭彙表或者元數據 (鍵-值對列表)。

1 <dl>
2 <dt>Coffee</dt>
3 <dd>- black hot drink</dd>
4 <dt>Milk</dt>
5 <dd>- white cold drink</dd>
6 </dl>

4.表格

表格由 <table> 標簽來定義。每個表格均有若幹行(由 <tr> 標簽定義),每行被分割為若幹單元格(由 <td> 標簽定義)。標簽 td 指表格數據(table data),即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。同時標簽<th>可以定義表頭。

<table>標簽可設置的各個屬性:

參考:w3school <table> 標簽

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • SVG是什麼 SVG是什麼 SVG 指可伸縮矢量圖形 (Scalable Vector Graphics) SVG 用來定義WEB上使用的矢量圖 SVG 使用 XML 格式定義圖形 SVG 圖像在縮放時其圖形質量不會有所損失 SVG 是W3C推薦的 SVG 與諸如 DOM和 XSL 之類的W3C標準 ...
  • ES6新特性之 函數參數的預設值寫法 和 箭頭函數。 1、函數參數的預設值 ES5中不能直接為函數的參數指定預設值,只能通過以下的變通方式: 從上面的代碼可以看出存在一個問題,當傳入的參數為0或者false時,會直接取到後面的值,而不是傳入的這個參數值。 那怎麼解決呢?對於上圖的代碼,可以通過判斷是 ...
  • 一、前言 昨天我們瞭解了Js的很重要的一個概念叫做函數,函數就是對於冗餘和垃圾代碼的一種封裝機制。簡單的講就是為了能讓程式更好更快的執行我們將一些重覆性的代碼提取,封裝成一個有名字的小盒子,等到我們需要的時候我們可以直接將盒子拿出來使用。 二、引入 無論是在前端還是後臺語言中函數都是一個個成功程式的 ...
  • 在javascript中,this指代的對象時常會變化,這會造成程式,混亂,一般做法就是先將this保存在一個變數中,就不怕她變了,我們先看一個小例子 JQuery提供了proxy方法,它可以綁定代理一個對象,this變了,我不怕不怕啦,that當this,我不怕不怕不怕啦,proxy有了你出現,對 ...
  • 本人是一名.net程式員..... 你一個.net coder 看什麼jQuery 源碼啊? 原因嗎,很簡單。技多不壓身嗎(麻蛋,前端工作好高...羡慕)。 我一直都很喜歡JavaScript,廢話不多說了,直接切入正題。 最近看了好幾篇jQuery 源碼的文章,對於jQuery的無new構建 很是 ...
  • JS對象的比較 由於JS是解釋執行的語言,那麼代碼中出現函數與對象如果重覆執行,會創建多個副本 在開發中會引入各種框架和庫,自定義的成員越多,出現命名衝突的幾率越大 在開發中會有多個構造函數,,每一個構造函數有很多方法,就會變得不容易維護 原型相關的概念 關於面向對象的概念 類 class 在js中 ...
  • HTML簡介 HyperText Markup Language:超文本標記語言 HyperText:超文本(文本 + 圖片 + 視頻 + 音頻 + 鏈接) Markup Language:標記語言 網站的三大元素 圖片,超鏈接,文字 HTML基本結構 標準網頁的HTML標簽 1.HTML文檔聲明: ...
  • 1、表單驗證<form></form> (1).非空驗證(去空格) (2).對比驗證(跟一個值對比) (3).範圍驗證(根據一個範圍進行判斷) (4).固定格式驗證:電話號碼,身份證號,郵箱,信用卡號等的驗證;需要用到正則表達式來進行驗證。 (5).其它驗證 2、正則表達式 用符號來描述書寫規則:/ ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...