HTMLにおけるolタグとliタグの高度な応用-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTMLにおけるolタグとliタグの高度な応用

黄舟

Jun 30, 2017 pm 02:03 PM

html 応用ラベル

この記事では、HTML の順序付きリストタグ ol と li の高度な応用を主に紹介します。

Web デザインで順序付きリストのコンテンツをデザインするとき、各 ITEM の前に手動で値を追加したり、この値をプログラムで追加したりすることがよくあります。

そして、順序付きリストタグ ol と li を使用すると、序数を自分で入力する必要がなくなります。 -layer list ですが、複数のレイヤーを使用する場合、その機能は明らかです。

順序付きリストタグ ol と li の一般的なアプリケーションコードは次のとおりです:

 <ol>
<li>列表内容一</li>
<li>列表内容二</li>
<li>列表内容三</li>
<li>列表内容四</li>
<li>列表内容五</li>
</ol>

ログイン後にコピー

順序付きリストタグ ol と li の高度なアプリケーションを見てみましょう:

順序付きリストの開始値を変更します

Change開始値属性は: "start" で、以下は 10 から始まるシリアル番号を持つ順序付きリストのコード例です:

 <ol start="10">
<li>列表内容一</li>
<li>列表内容二</li>
<li>列表内容三</li>
<li>列表内容四</li>
<li>列表内容五</li>
</ol>

ログイン後にコピー

コードを実行して効果を確認してください:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS在线-示例</title>
<style type="text/css">
</style>
</head>
<body>
<ol start="10">
<li>列表内容一</li>
<li>列表内容二</li>
<li>列表内容三</li>
<li>列表内容四</li>
<li>列表内容五</li>
</ol>
</body>
</html>

ログイン後にコピー

順序付きリストのシリアル番号を設定します。 Type

数値の型を変更する属性は「type」です。 type 型には次の種類があります。

A 大文字の A、B、C。、D、E

a 小文字の a、b、c、c、e

I 大文字のローマ数字 I、II、III、IV、V

i 小文字のローマ数字 i、ii、iii、iv、v

1 アラビア数字 1、2、3、4、5

以下は、シリアル番号の種類は、大文字のシリアルテーブルのサンプルコードです:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS在线-示例</title>
<style type="text/css">
</style>
</head>
<body>
<ol type="A">
<li>列表内容一</li>
<li>列表内容二</li>
<li>列表内容三</li>
<li>列表内容四</li>
<li>列表内容五</li>
</ol>
</body>
</html>

ログイン後にコピー

以上がHTMLにおけるolタグとliタグの高度な応用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。