首頁 web前端 html教學 html中的ol標籤如何去掉標號呢? 標籤的使用方法總結

html中的ol標籤如何去掉標號呢? 標籤的使用方法總結

Aug 31, 2018 pm 01:35 PM
html ol type

本篇文章介紹了html的ol標籤是怎麼去掉序號標號的,這裡還有程式碼的詳細解釋,還有介紹了關於html ol有序列表標籤如何更改序號,下文介紹了三種序號,大家也可以自己去想填怎樣的序號。現在就來看看這篇文章吧

一、我們先來看看html中的ol標籤是如何去掉標號的呢:

##我們都知道html的ol標籤是個有序列表的標籤,通常都是以1、2、3、4這樣一直持續下去的,有時候你又不想它就這樣一直下去,想把這些數字換成別的,例如換成你自己序號啊A、I、i之類的,還比如你不要這些符號了,想把前面的序號給去掉,前面我們先說說如何去掉序號。 (想看更多就來PHP中文網,

關於HTML程式設計的課程)

#讓我們先看個完整的程式碼實例吧

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
</head>
<body>
<ol>
  <li>php中文网</li>
  <li>百度</li>
  <li>腾讯</li>
</ol>
</body>
</html>
登入後複製

這是一個基本的ol標籤的程式碼,效果如下圖顯示:

html中的ol標籤如何去掉標號呢? <ol>標籤的使用方法總結

我們很明顯的能看到,這ol標籤的序號預設都是123開始的,都是以小寫數字做為預設的序號的,那我們要做的就是要把序號去掉。

現在給大家看一個已經去掉ol標籤序號的程式碼實例:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style type="text/css">
ol{
list-style:none;
}
</style>
</head>
<body>
<ol>
  <li>php中文网</li>
  <li>百度</li>
  <li>腾讯</li>
</ol>
</body>
</html>
跟上面也差
登入後複製

不多,這裡比上面多加了一點層疊樣式表css樣式,這個樣式,你現在還不需要去理解,這個以後會講到,現在要做的就是把這個css樣式的程式碼記住了,這個樣式作用就是把當前網頁內的所有ol標籤內的序號都給取消了,效果如圖:


html中的ol標籤如何去掉標號呢? <ol>標籤的使用方法總結

上面已經沒有序號了,很顯然我們的實驗成功了,雖然用了css樣式,但這只是最簡單的樣式實例。用這個方法去掉標籤是最簡單、最常用的方法。

二、現在我們來看看如何更改ol標籤中的序號:

這裡我們不需要css樣式了,只是最基本的html的標籤中的屬性而已。

現在我們介紹這個ol標籤中的type屬性:type屬性定義了ol列表中的序號類型。

接下來我們以「A」、「I」、「i」三種來實驗一下:

下面是這個的程式碼:

<body>
<ol type="A">
  <li>php中文网</li>
  <li>百度</li>
  <li>腾讯</li>
</ol>
</body>
登入後複製

效果如下圖所示:

html中的ol標籤如何去掉標號呢? <ol>標籤的使用方法總結

這個屬性規定了ol標籤的序號改為以「A」開頭的列表形式了,所以顯示出來就是這樣的。

當這個type屬性值等於"a"時也一樣,從小寫的a開始,abc之類的。

當這個type屬性值等於「I」時也一樣,來看看效果:

html中的ol標籤如何去掉標號呢? <ol>標籤的使用方法總結

當這個type屬性值等於「i」時和等於「I」也差不多。

關於html ol標籤用法的個人總結:

現在我們基本上可以想到用ol標籤去做各種清單了,想要什麼序號就改成什麼序號,你的列表你說了算。 ol有序列表定義的是它能把任何能無限延長的序號都能用上,如果序號都一樣的話就和無序列表沒區別了。所以還是好好使用有序列表吧。 (想學更多就來:

PHP中文網學HTML課程

【小編推薦】

html中的head標籤在哪裡找? head標籤的作用總結

html5中的meta標籤的三個要素是什麼? meta標籤的使用總結
#

以上是html中的ol標籤如何去掉標號呢? 標籤的使用方法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡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)

HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 表格邊框指南。在這裡,我們以 HTML 中的表格邊框為例,討論定義表格邊框的多種方法。

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距指南。在這裡,我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局指南。在這裡,我們詳細討論 HTML 表格佈局的值以及範例和輸出。

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符指南。在這裡,我們討論 HTML 輸入佔位符的範例以及程式碼和輸出。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在這裡我們也分別討論了 HTML 有序列表和類型的介紹以及它們的範例

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

HTML 中的文字移動指南。在這裡我們討論一下marquee標籤如何使用語法和實作範例。

See all articles