ホームページ > 記事 > ウェブフロントエンド > H5 学習の旅 - H5 リスト (8)
H5 学習の旅 - H5 リスト (8)
- 黄舟オリジナル
- 2017-02-17 14:33:331560ブラウズ
リストの基本構文
ol: 順序付きリスト
ul: 順序なしリスト
li: リスト項目
dl: リスト
dt: リスト項目
dd: リストの説明
よく使われるリスト
1順序なしリスト: タグ ul、li を使用します。 属性: disc (デフォルトの実線円)、circle (白丸)、square (正方形)
2. 順序付きリスト: タグ ol、li を使用します。 属性: A (大文字) a ( 小文字) l (大文字のローマ数字) i (小文字のローマ数字) start (開始アラビア数字を設定)
3. 混合リスト: タグを使用します ul ol li
4. カスタム リスト: タグを使用します dl dt dd! ！ ！ ！ ！ ！コード例<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>H5表格</title></head><body>
<ul type="square">
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
</ul>
<ol type="I">
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
</ol>
<ul type="square">
<li>香蕉</li>
<ol>
<li>水谷</li>
<li>水谷</li>
</ol>
<li>香蕉</li>
<ol>
<li>水谷</li>
<li>水谷</li>
</ol>
<li>香蕉</li>
<ol>
<li>水谷</li>
<li>水谷</li>
</ol>
</ul>
<dl>
<dt>hello world</dt>
<dd>can you feel me</dd>
<dt>hello world</dt>
<dd>can you feel me</dd>
<dt>hello world</dt>
<dd>can you feel me</dd>
</dl></body></html>
レンダリング
dd :リストの説明
よく使用されるリスト
1. 順序なしリスト: タグ ul、li を使用します。属性: disc (デフォルトの実線の円)、circle (空の円)、square (正方形)
2. 順序付きリスト: タグ ol 、li 属性を使用します。 A (大文字) a (小文字) l (大文字のローマ数字) i (小文字のローマ数字) start (開始アラビア数字を設定)
3. 混合リスト: タグ ul ol li
を使用します。タグを使用して dl dt dd
! ！ ！ ！ ！ ！コード例
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>H5表格</title></head><body>
<ul type="square">
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
</ul>
<ol type="I">
<li>香蕉</li>
<li>香蕉</li>
<li>香蕉</li>
</ol>
<ul type="square">
<li>香蕉</li>
<ol>
<li>水谷</li>
<li>水谷</li>
</ol>
<li>香蕉</li>
<ol>
<li>水谷</li>
<li>水谷</li>
</ol>
<li>香蕉</li>
<ol>
<li>水谷</li>
<li>水谷</li>
</ol>
</ul>
<dl>
<dt>hello world</dt>
<dd>can you feel me</dd>
<dt>hello world</dt>
<dd>can you feel me</dd>
<dt>hello world</dt>
<dd>can you feel me</dd>
</dl></body></html>レンダリング
上記は、H5 学習の旅 - H5 リスト (8) の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。