エントリーレベルのHTML、CSS_HTMLページの要素と属性
こんにちは、ケンです
統合されたコンテンツの今日のレビューから始めましょう-HTMLページの要素と属性
このブログは、HTMLに不慣れで、久しぶりにレビューしたい友達に一時的に適しています。
昨年の夏、集中治療室に私の祖父
と後で上で救出
私は病院に2週間滞在した
だけの人がそう壊れやすい可能性が知っている
彼は非常にも古き良きに満足されていることを、今
、真の
あなたを愛し、あなたに人を愛する人ということかもしれませんあなたの帰郷の日をあまり見ないでください
また努力することを忘れないでください
フロントはドアレベルのHTML、CSS_HTMLベースに接続されてい
ます
基本エントリのこの部分には技術的な内容はなく、
例を積み上げて練習するだけです。
2.1_リスト要素
2.1.1_ul要素（順序なし）
例：
コードは次のとおりです。
実行後：
2.1.2_ol要素（順序付き）
例：
コードは次のとおりです。
実行後：
2.1.3_dl要素
例：
コードは次のとおりです。
実行後：
2.1.4_リスト要素のネスト
例：
コードは次のとおりです。
実行後：
ケース：類推によって他のネストされた構造を導入します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<dl>
<dt>看</dt>
<dd>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</dd>
<dt>这</dt>
<dd>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</dd>
<dt>里</dt>
<dd>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</dd>
</dl>
</body>
</html>
動作結果：
2.2_構造要素
2.2.1_header要素
ヘッダー要素は通常、タイトルとしてWebサイトページの先頭に配置されます。これには、Webサイトのロゴ写真、検索フォーム、およびその他のコンテンツを含めることができます。
ガイダンスとナビゲーションの役割があります。
例：
コードは次のとおりです。
実行後：
2.2.2_nav要素
nav要素は、ナビゲーションリンクを定義するために使用されます
例：
コードは次のとおりです。
実行後：
1234の任意のリンクをクリックします。
上記のコードでは、ナビゲーション構造は、nav要素内に順序付きリストolをネストすることによって構築されています。一般に、HTMLページには、ページ全体またはページのさまざまな部分のナビゲーションとして複数のナビゲーション要素を含めることができます。具体的には、nav要素は次の状況で使用できます。
●従来のナビゲーションバー：現在、主流のWebサイトにはさまざまなレベルのナビゲーションバーがあり、その機能はWebサイトの他のメインページにジャンプすることです。
●サイドバーナビゲーション：現在、主流のブログサイトとeコマースサイトにはサイドバーナビゲーションがあります。目的は、現在の記事または現在の製品ページを他の記事または他の製品ページにジャンプすることです。
●ページはめ込みナビゲーション：その機能は、このページの主要コンポーネント間をジャンプすることです。
●ページめくり操作：ページめくり操作は、ウェブページのコンテンツ部分を切り替えます。「アップページ」または「次のページ」をクリックして切り替えるか、実際のページ番号をクリックしてページにジャンプできます。
上記の点に加えて、nav要素は他の重要で基本的なナビゲーションリンクグループでも使用できます。
2.2.3_article要素
article要素は、コンテキストに関係のないドキュメント、ページ、またはアプリケーションの独立した部分を表します。この要素は、投稿、ニュース、またはユーザーコメントを定義するためによく使用されます。
2.2.4_aside要素
aside要素は、現在のページまたは記事の補助情報部分を定義するために使用されます。現在のページまたはメインコンテンツ、サイドバー、広告、ナビゲーションバー、およびメインコンテンツとは異なるその他の同様の部分への参照を含めることができます。
aside要素の主な用途は2つあります。
- メインコンテンツとしてarticle要素に含まれる補助情報。
- 記事要素の外部で、ページまたはサイトのグローバルな補助情報部分として使用されます。最も一般的な用途はサイドバーで、コンテンツは友情リンク、広告ユニットなどになります。
2.2.5_section要素
section要素は、Webサイトまたはアプリケーションのページ上のコンテンツをブロックするために使用されます。section要素は通常、コンテンツとタイトルで構成されます。
セクション要素を使用する場合は、次の点に注意してください。
- divの特性であるページコンテナのスタイルを設定するためにsection要素を使用しないでください。セクション要素は通常のコンテナ要素ではありません。コンテナをスタイルで直接定義する必要がある場合、またはスクリプトを使用して定義する必要がある場合は、divをお勧めします。
- article要素、aside要素、またはnav要素の使用に適している場合は、section要素を使用しないでください。
- タイトルのないコンテンツブロックにはセクション要素定義を使用しないでください
2.2.6_footer要素
フッター要素は、ページまたは領域の下部を定義するために使用され、通常はページの下部に配置されるすべてのコンテンツを含めることができます。
ページには複数のフッター要素を含めることができ、フッター要素を記事要素またはセクション要素に追加することもできます。
2.3_グループ化要素
2.3.1_figure要素とfigurecaption要素
figure要素は、独立したコンテンツ（画像、アイコン、写真、コードなど）を定義するために使用されます。
figcaption要素は、figure要素グループにキャプションを追加するために使用されます
figure要素には最大で1つのfigurecaption要素を含めることができ、この要素は、figure要素の最初または最後の子要素の位置に配置する必要があります。
例：
コードは次のとおりです。
実行後：
2.3.2_hgroup要素
hgroup要素は、複数のタイトル（メインタイトルとサブタイトルまたはサブタイトル）をタイトルグループに結合するために使用され、通常はh1〜h6要素と組み合わせて使用されます。
通常、hgroup要素をheader要素に配置します。
例：
コードは次のとおりです。
実行後：
2.4_Pageインタラクティブ要素
2.4.1_details要素とsummary要素
details要素は、ドキュメントまたはドキュメントの一部の
詳細を説明するために使用されます。details要素は、summary要素と組み合わせて使用されることがよくあります。通常、detailsは、タイトルを定義するために使用されます。
例：
実行後のコードは次のとおりです。
2.4.2_progress要素
progress要素は、タスクの完了度を示すために使用されます。
値：実行された作業の
最大量：合計でどれだけの作業がありますか
例：コードは次のとおりです。
実行後：
2.4.3_meter要素
メーター要素は、指定された範囲内の値を表すために使用されます。
| 属性 | 説明 |
|---|---|
| 高い | メトリックの値が高い値として定義されるポイントを定義します |
| 低 | メトリックの値が低い値として定義されるポイントを定義します |
| 最大 | 最大値を定義します。デフォルト値は1です。 |
| 分 | 最小値を定義します。デフォルト値は0です。 |
| 最適 | どの種類のメトリックが最適な値であるかを定義します。値がhigh属性よりも高い場合は、値が高いほど良いことを意味します。値がlow属性の値よりも低い場合は、値が低いほど良いことを意味します |
| 値 | メトリックの値を定義します |
例：
コードは次のとおりです。
実行後：
結果のプログレスバーにマウスポインタを置くと、「99ポイント」が表示されます
2.5_テキストレベルのセマンティック要素
2.5.1_time要素
time要素は、24時間制の特定の時間を表すことができる時刻または日付を定義するために使用されます。time要素はブラウザに特殊効果を表示しませんが、要素は日付と時刻を機械で読み取り可能な方法でエンコードできるため、ユーザーは誕生日のリマインダーやその他のイベントをカレンダーに追加でき、検索エンジンもよりスマートに生成できますの検索結果。
datatime：対応する時刻または日付を定義するために使用されます。
pubdate：time要素の日付/時刻を定義するために使用されるのは、ドキュメント（またはarticle要素）の公開日です。値は通常「pubdate」です。
実行結果：
実行結果：
2.5.2_mark要素
mark要素の主な機能は、テキスト内の特定の文字を強調表示することです。
emストロングに似ていますが、比較するとカジュアルで柔軟性があります
例：
コードは次のとおりです。
実行後：
2.5.3_cite要素
cite要素はリファレンスマークを作成できます。マークが使用されると、マークされているドキュメントのコンテンツがページに斜体で表示されます。
例：
コードは次のとおりです。
実行後：
2.6_グローバル属性
2.6.1_draggable属性
ドラッグ可能な属性は、要素をドラッグできるかどうかを定義するために使用されます。
属性には、trueとfalseの2つの値があります。デフォルトはfalseです。
属性がtrueの場合、ドラッグできます。その逆も可能です。
例：
コードは次のとおりです。
実行後：
注：この例でWebページにもたらされる効果はドラッグできません。ドラッグ機能を実現したい場合は、JavaScriptと組み合わせて使用する必要があります。
2.6.2_hidden属性
この属性には、trueとfalse（デフォルト値）の2つの値もあります。属性がtrueの場合、要素は非表示になります。
例：
コードは次のとおりです。
![！[ここに画像の説明を挿入]（https://img-blog.csdnimg.cn/2020091218421214.png?x-oss-proce](https://img-blog.csdnimg.cn/20201209110139309.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tlbmtlbl8=,size_16,color_FFFFFF,t_70)
実行後：
2.6.3_spellcheck属性
スペルチェック属性は、主に入力要素とテキスト領域のテキスト入力ボックスを対象としており、ユーザーが入力したテキストのスペルと文法をチェックします。
この属性には、falseとtrue（デフォルト値）の2つの値もあります。
値がtrueの場合、入力ボックスの値がチェックされ、その逆も同様です。
例：
コードは次のとおりです。
実行後：
2.6.4_contenteditable属性
contenteditable属性は、要素のコンテンツを編集できるかどうかを指定しますが、要素にはマウスフォーカスが必要であり、そのコンテンツは読み取り専用ではないことが前提です。
この属性には、falseとtrueの2つの値があり、true
は編集可能、falseは編集不可を意味します
例：
コードは次のとおりです。
実行後：
一見単純そうに見えることの多く
は、真剣に受け止めないと常にさまざまな間違いを犯し
ます。ゆっくりと自分がそれほど強くないことに気付くでしょう。
最もひどいことは、自分の能力が限られていることに気付くことではありません
。不十分、私は急いでいくつかに落ちることをいとわなかった
こんにちは、ケンです。
読んでくれてありがとう