HTML5学習メモ(4) - リスト、ブロック、レイアウトのコード例-H5 チュートリアル-php.cn

HTML list

リストタグ

タグ	説明
	は順序付きリストを定義します。
	順序なしリストを定義します。
	リスト項目を定義します。
<dl>	define 定義リスト。
	定義定義項目。
	定義の説明。
<dir>	は廃止されました。代わりにを使用してください。
<メニュー>	は廃止されました。代わりにを使用してください。

1. 順序なしリスト

使用タグ:

属性: disc、circle、square

例:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>聊表</title></head><body>
    <!--无序列表, 列表项为li-->
    <!--disc 实心圆, circle 空心圆, square 实行正方形, 依次更改运行看下--><ul type="disc">
    <li>apple</li>
    <li>orange</li>
    <li>bananer</li>
    <li>Berry</li></ul></body></html>

ログイン後にコピー

2. はいシーケンスlist

は、タグ

を使用します

属性: A、a、I、i、start

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>列表</title></head><body><!--有序列表, 列表项为li--><!--A: 以A,B,C...排序
    a: 以a,b,c...排序
    I: 以I, II, III...排序
    i: 以i,ii,iii...排序
    start: 自己定义排序的第一个--><ol type="i">
    <li>iOS</li>
    <li>Android</li>
    <li>Java</li>
    <li>Swift</li>
    <li>Objective-C</li></ol></body></html>

ログイン後にコピー

3. ネストされたリスト(順序付きリストのネスト、順序なしリストのネストを含む)

タグ<を使用します;ul>、

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>列表</title></head><body><!----><ul type="square">
    <li>iOS</li>
        <ul>
            <li>iPhone</li>
            <li>iWatch</li>
            <li>iPod</li>
            <li>iPad</li>
        </ul>
    <li>Android</li>
        <ul>
            <li>Any Call</li>
            <li>Oppo</li>
            <li>Vivio</li>
            <li>Huawei</li>
        </ul>
    <li>Objective-C</li></ul></body></html>

ログイン後にコピー

4. リストをカスタマイズします

タグ

、

を使用します

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>自定义列表</title></head><body><!--定义自定义列表--><dl>
    <!--定义自定义项目-->
    <dt>cast:</dt>
    <!--定义自定义描述-->
        <dd>vi. 1投掷扔抛, 2丢弃, 抛弃 3把...投向, 抛射, 4分派..., 扮演角色 5铸造, 浇铸 n. 全体演员</dd>
    <dt>forecast:</dt>
        <dd>v. 预测, 预报, /dd>        <dd>n. 预测, 预报<</dd>
    <dt>insight:</dt>
     <dd>n. 洞察力, 领悟 v. 洞悉, 了解</dd></dl></body></html>

ログイン後にコピー

HTMLブロック

HTMLブロック要素ブロック要素が表示される場合、通常は改行で始まります

例:

、

インライン要素

インライン要素は通常、改行で始まりません

、、
3. HTML
要素
< p> 要素はブロック要素とも呼ばれ、主に HTML を組み合わせるためのコンテナです
4. HTML 要素
span 要素はテキストのコンテナとして使用できます
例:貼り付けて実行できます効果を見る(開発ツール IntelliJ IDEA)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>块元素</title>  <style type="text/css"> #wraper p{ color: blueviolet; } #span span{ color: indianred; } </style></head><body><h1>visual:</h1><p>视力的, 视觉的</p> <b>vision:</b><a>1视力, 2眼光,远见, 洞察力 3幻想 4设想, 念头</a> <p id="wraper"> <p>prospective</p> <a>1可能的,有望的 2未来的, 即将发生的</a></p><p id="span"> <p>respective: <span>分别的,</span> 各自的</p></p></body></html>
ログイン後にコピー
HTMLレイアウト推奨される2つの方法:
1.
要素レイアウトを使用します
例: , p は CSS コードに追加する必要はありません
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>p布局</title> <style type="text/css"> body{margin: 0px} p#container{ /*可以充满全屏*/ width: 100%; height: 950px; background-color: darkgray; } p#heading{ width: 100%; height: 10%; background-color: aqua; } p#menu{ width: 30%; height: 80%; background-color: darkorange; float: left; } p#mainbody{ width: 70%; height: 80%; background-color: brown; float: left; } p#footing{ width: 100%; height: 10%; background-color: cornflowerblue; clear: both; } </style></head><body><p id="container"> <p id="heading">头部</p> <p id="menu">内容菜单</p> <p id="mainbody">内容主体</p> <p id="footing">底部</p></p></body></html>
ログイン後にコピー
2. 要素のレイアウトを使用します
例:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>table布局</title></head><body marginheight="0px" marginwidth="0px"> <table width="100%" height="950" style="background-color: darkgray"> <tr> <td colspan="3" width="100%" height="10%" style="background-color: aqua"> 头部 </td> </tr> <tr> <td width="20%" height="80%" style="background-color: cornflowerblue"> <ul> <li>diktatet</li> <li>diktator</li> <li>diktation</li> </ul> </td> <td width="60%" height="80%" style="background-color: cadetblue">中间部分</td> <td width="20%" height="80%" style="background-color: crimson">右菜单</td> </tr> <tr> <td width="100%" height="10%" colspan="3" style="background-color: coral">底部</td> </tr></table></body></html>
ログイン後にコピー
以上がHTML5学習メモ(4) - リスト、ブロック、レイアウトのコード例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
HTML5，布局，列表

ソース：php.cn

前の記事：HTML5学習ノート(3) - HTML5のスタイル、接続、テーブルコードを詳しく解説次の記事：ローカルアプリの代替が可能になるというHTML5の予測を詳しく解説

このウェブサイトの声明

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

著者別の最新記事

独自の PHP フレームワークをゼロから構築するためのビデオ資料

2023-03-15 16:54:01

PHPMailer が QQ メールボックスを使用して電子メール送信機能を完了する方法の分析例

2023-03-15 12:26:02

PHPでIMAPでメールを受信する方法の紹介

2023-03-14 18:58:01

PHP で配列の重複排除を迅速に実装する方法の例

2023-03-14 11:30:01

HTML でのタグのすべての属性の使用の概要

1970-01-01 08:00:00

PHPの基礎知識まとめ（初心者が始めるのに必要）

2023-03-16 15:20:01

JavaScript での typeof の使用の概要

1970-01-01 08:00:00

JavaScript でのconfirm() メソッドの使用の概要

1970-01-01 08:00:00

HTML5 プレースホルダー属性の詳細な紹介

1970-01-01 08:00:00

ReactJS のフォームに単一選択、複数選択、逆選択を実装する方法

1970-01-01 08:00:00

最新の問題

Flexbox アイテムが列モードで折り返されるときにコンテナの幅が増えない私は次のように動作するネストされた Flexbox レイアウトを開発しています。最も外側のレベル (ul#main) は水平リストであり、項目が追加されると右に展開する必要がありま...

から 2023-10-17 22:05:01

0

2

176

デフォルトのレイアウトを変更せずに、MediaQueries を使用して、より低い解像度で表示されるレイアウトを変更することはできますか? 要素が期待どおりに表示されるようにデフォルトの解像度で「グリッドテンプレート列」レイアウトを使用していますが、それより低い解像度ではコンテナーの優先順位によってレンダリングされ、...

から 2023-09-16 14:17:29

0

1

521

リアルタイムマップ編集: Seatchart.js を探索するためのヒントと方法 Seatchart.js を使用して会場のレイアウトを設計しようとしていますが、Seatchart オプションでライブ編集を行うことは可能ですか?テキストボックスを編集して行数と列...

から 2023-09-16 10:26:07

0

1

218

固定列と列位置を使用したグリッド自動レイアウトの混合 CSS を使用した次の HTML があります Grid<divid="grid"><divclass="main-item"...

から 2023-09-15 16:01:55

0

1

180

タイトル変更: div 列と残りの幅を修正すべての列がブラウザウィンドウの高さ全体になる、5 列のレイアウトを作成しようとしています。中央の列を除いて、他の列は固定され、ブラウザ/ドキュメントがスクロールされたときに移動し...

から 2023-09-14 17:17:47

0

1

299

関連トピック
詳細>

html5アニメーション制作の制作方法とは何ですか？

HTMLとHTML5の違い

 HTML に CSS スタイルを埋め込む方法

 フィルコインとは何ですか？

iPhone4の脱獄

 許可が拒否された場合の解決策

 Windows 11 にアップグレードする必要がありますか?

全角スペースと半角スペースの違いは何ですか？

人気のおすすめ

h5とは何ですか

コードがわからない場合に h5 ページを作成するにはどうすればよいですか?推奨される H5 ページ制作プラットフォーム

html5の新機能とは何ですか？

h5ページ制作とは

h5 プログラムとミニプログラムの違いは何ですか?

人気のチュートリアル
詳細>

関連するチュートリアル

人気のおすすめ

最新のコース

最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース)

1403060

PHP 入門チュートリアル 1: 1 週間で PHP を学ぶ

4230850

JAVA 初心者向けビデオチュートリアル

2418282

Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル

498144

PHP ゼロベースの入門チュートリアル

833967

最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライントレーニングコース)

1403060 回の学習

JAVA 初心者向けビデオチュートリアル

2418282 回の学習

Little Turtle のゼロベースの Python 学習入門ビデオチュートリアル

498144 回の学習

Web フロントエンド開発の簡単な紹介

214170 回の学習

PSビデオチュートリアルをゼロからマスターする

858872 回の学習

[Web フロントエンド] Node.js クイックスタート

4671 回の学習

海外のWeb開発フルスタックコースの完全なコレクション

3620 回の学習

Go言語実践GraphQL

3109 回の学習

550W ファンマスターが JavaScript をゼロから段階的に学習します

559 回の学習

Python マスター Mosh、基礎知識ゼロの初心者でも 6 時間で始められる

16077 回の学習

最新のダウンロード
詳細>

ウェブエフェクト

公式サイト

サイト素材

フロントエンドテンプレート

[フォームボタン] jQuery エンタープライズメッセージフォームの連絡先コード

[プレイヤーの特殊効果] HTML5 MP3 オルゴール再生効果

[メニューナビゲーション] HTML5 クールなパーティクルアニメーションナビゲーションメニューの特殊効果

[フォームボタン] jQuery ビジュアルフォームのドラッグアンドドロップ編集コード

[プレイヤーの特殊効果] VUE.JS 模倣 Kugou 音楽プレーヤーコード

[html5特殊効果] 古典的な HTML5 プッシュボックスゲーム

[画像の特殊効果] 画像効果を追加または削減するための jQuery スクロール

[フォトアルバム効果] CSS3 個人アルバムカバーホバーズーム効果

[フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート

[フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート

[フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート

[フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート

[フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート

[フロントエンドテンプレート] オンライン電子書籍ストアモールのウェブサイトテンプレート

[フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイトテンプレートを解決します

[フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

[PNG素材] かわいい夏の要素のベクター素材 (EPS+PNG)

[PNG素材] 4 つの赤い 2023 卒業バッジベクター素材 (AI+EPS+PNG)

[バナー画像] 歌う鳥と花がいっぱいのカートデザイン春のバナーベクター素材（AI+EPS）

[PNG素材] 金色の卒業帽ベクター素材（EPS+PNG）

[PNG素材] 黒と白のスタイルの山アイコンベクター素材 (EPS+PNG)

[PNG素材] 異なる色のマントと異なるポーズを持つスーパーヒーローのシルエットベクター素材（EPS+PNG）

[バナー画像] フラットスタイルの植樹祭バナーベクター素材 (AI+EPS)

[PNG素材] 9つのコミックスタイルの爆発するチャットバブルベクター素材（EPS+PNG）

[フロントエンドテンプレート] 室内装飾クリーニングおよび修理サービス会社のウェブサイトのテンプレート

[フロントエンドテンプレート] フレッシュカラーの個人履歴書ガイドページテンプレート

[フロントエンドテンプレート] デザイナーのクリエイティブな仕事の履歴書 Web テンプレート

[フロントエンドテンプレート] 現代のエンジニアリング建設会社のウェブサイトのテンプレート

[フロントエンドテンプレート] 教育サービス機関向けのレスポンシブ HTML5 テンプレート

[フロントエンドテンプレート] オンライン電子書籍ストアモールのウェブサイトテンプレート

[フロントエンドテンプレート] IT テクノロジーがインターネット企業の Web サイトテンプレートを解決します

[フロントエンドテンプレート] パープルスタイル外国為替取引サービスウェブサイトテンプレート

私たちについて免責事項 Sitemap

PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！