HTML之列表

TerryCai 發布于2019-04-23 13:13 / 2637人閱讀

摘要：列表有三種類型有序列表列表項使用數字來標記無序列表列表項使用粗體圓點典型的小黑圓圈進行標記。自定義列表自定義列表以標簽開始。

列表有三種類型：

有序列表：列表項使用數字來標記

無序列表：列表項使用粗體圓點（典型的小黑圓圈）進行標記。

自定義列表：自定義列表以

開始。每個自定義列表項的定義以

開始。

一、有序列表格式：

<ol>
      <li>第一個列表項li>
      <li>第二個列表項li>
      <li>第三個列表項li>
ol>

運行結果：

第一個列表項
第二個列表項
第三個列表項

不同類型的有序列表：

1.編號列表：

<ol>
   <li>第一列表項li>
   <li>第二列表項li>
   <li>第三列表項li>
   <li>第四列表項li>
ol>
<ol start="50">
   <li>第五十列表項li>
   <li>第五十一列表項li>
   <li>第五十二列表項li>
   <li>第五十三列表項li>
ol>

運行結果：

第一列表項
第二列表項
第三列表項
第四列表項

第五十列表項
第五十一列表項
第五十二列表項
第五十三列表項

2.字母列表：

<ol type="A">
   <li>第A列表項li>
   <li>第B列表項li>
   <li>第C列表項li>
   <li>第D列表項li>
ol>
 <ol type="a">
    <li>第a列表項li>
    <li>第b列表項li>
    <li>第c列表項li>
    <li>第d列表項li>
 ol>

運行結果：

第A列表項
第B列表項
第C列表項
第D列表項

第a列表項
第b列表項
第c列表項
第d列表項

3.羅馬數字列表：

<ol type="I">
 <li>Applesli>
 <li>Bananasli>
 <li>Lemonsli>
 <li>Orangesli>
ol>  
 <ol type="i">
  <li>Applesli>
  <li>Bananasli>
  <li>Lemonsli>
  <li>Orangesli>
 ol>

運行結果：

Apples
Bananas
Lemons
Oranges

Apples
Bananas
Lemons
Oranges

二、無序列表格式：

<ul>
  <li>無序列表項1li>
  <li>無序列表項2li>
  <li>無序列表項3li>
  <li>無序列表項4li>
ul>

運行結果：

無序列表項1
無序列表項2
無序列表項3
無序列表項4

不同類型的無序列表：

1.圓點列表：

<ul style="list-style-type:disc">
  <li>無序列表項1li>
  <li>無序列表項2li>
  <li>無序列表項3li>
  <li>無序列表項4li>
ul>

運行結果：

無序列表項1
無序列表項2
無序列表項3
無序列表項4

2.圓圈列表：

<ul style="list-style-type:circle">
  <li>無序列表項1li>
  <li>無序列表項2li>
  <li>無序列表項3li>
  <li>無序列表項4li>
ul>

運行結果：圓點變成圓圈

  ?無序列表項1

  ?無序列表項2

  ?無序列表項3

  ?無序列表項4

3.正方形列表：

<ul style="list-style-type:square">
  <li>無序列表項1li>
  <li>無序列表項2li>
  <li>無序列表項3li>
  <li>無序列表項4li>
ul>

運行結果：圓點變成方形

  ?無序列表項1

  ?無序列表項2

  ?無序列表項3

  ?無序列表項4

三、自定義列表：

<dl>
  <dt>Coffeedt>
  <dd>- black hot drinkdd>
  <dt>Milkdt>
  <dd>- white cold drinkdd>
dl>

運行結果：

Coffee
- black hot drink
Milk
- white cold drink

四、嵌套列表：

<ul>
  <li>Coffeeli>
  <li>Tea
    <ul>
      <li>Black teali>
      <li>Green tea
        <ul>
          <li>Chinali>
          <li>Africali>
        ul>
      li>
    ul>
  li>
  <li>Milkli>
ul>

運行結果：

?Coffee

?Tea
    
      ?Black tea

      ?Green tea
        
          ?China

          ?Africa

?Milk

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1599.html

HTML+CSS復習之HTML基礎篇

摘要：規定元素的上下文菜單。上下文菜單在用戶點擊元素時顯示。規定元素仍未或不再相關。規定是否對元素進行拼寫和語法檢查。規定元素的行內樣式。一些說明寫在前面：HTML和CSS，當你了解所有規則后，你應該多寫頁面并記錄你出現的問題，這才是學習HTML和CSS的最佳方法這是我學習一段時間之后，再次回顧HTML，希望大家也對HTML有不一樣的認識我把HTML標簽分成兩大類，重要的和不重要的，...

genefy 2019-08-29 12:35 評論0 收藏0
HTML+CSS復習之HTML基礎篇

摘要：規定元素的上下文菜單。上下文菜單在用戶點擊元素時顯示。規定元素仍未或不再相關。規定是否對元素進行拼寫和語法檢查。規定元素的行內樣式。一些說明寫在前面：HTML和CSS，當你了解所有規則后，你應該多寫頁面并記錄你出現的問題，這才是學習HTML和CSS的最佳方法這是我學習一段時間之后，再次回顧HTML，希望大家也對HTML有不一樣的認識我把HTML標簽分成兩大類，重要的和不重要的，...

MrZONT 2019-08-01 16:51 評論0 收藏0
HTML之表單

摘要：表單元素是允許用戶在表單中輸入內容比如文本域下拉列表單選框復選框等等。文本域文本域通過標簽來設定，當用戶要在表單中鍵入字母數字等內容時，就會用到文本域。表單：表單是一個包含表單元素的區域。表單元素是允許用戶在表單中輸入內容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復選框(checkboxes)等等。表單使用表單標簽來設置: . inpu...

bang590 2019-04-23 13:12 評論0 收藏0
CSS學習筆記(十) 界面組件之表單

摘要：概述表單與其他頁面元素的作用不同。屬性用于指定服務器上用來處理表單數據的文件的。所謂控件，是對表單中用來收集數據的各種表單組件的通稱，包括文本框復選框單選按鈕等輸入類型。 1.概述表單與其他頁面元素的作用不同。其他元素是把服務器發過來的內容顯示給用戶，而表單則是把用戶的信息發送給服務器。 form 元素有兩個必要的屬性：action 和 method。action 屬性用于指定...

andot 2019-08-28 18:05 評論0 收藏0