HTML 5の基本要素
一、グループ要素とは何かを知る
ページ内の要素のグループ化
二、figure、figcaption、hggroupの3種類のグループ要素の使い方と用途を把握する
1、figure要素は、画像、グラフ、写真、コードなどの独立したストリームコンテンツを定義するために使用され、一般的には個別のユニットを指す.Figure要素の内容はプライマリコンテンツに関連する必要がありますが、削除されてもドキュメントフローに影響はありません.2、figcaption要素はfigure要素グループにタイトルを追加するために使用され、1つのfigure要素内で最大1つのfigcaption要素を使用することができ、この要素はfigure要素の最初のサブ要素または最後のサブ要素の位置に置くべきである.3、hgroup要素は、複数のタイトル(メインタイトルおよびサブタイトルまたはサブタイトル)を1つのタイトルグループに構成するために使用され、通常はh 1〜h 6要素と組み合わせて使用される.通常、hgroup要素はheader要素に配置されます.hgroup要素を使用する場合は、i、ヘッダー要素が1つしかない場合はhgroup要素を使用することを推奨しないことに注意してください.ii、1つ以上のタイトルと要素が現れた場合、hgroup要素をタイトル要素として使用することを推奨する.iii、見出しに副題、section、article要素が含まれている場合は、hgroup要素と見出し関連要素をheader要素コンテナに保存することをお勧めします.
三、ページインタラクティブ要素とは何かを理解する
ユーザーのページインタラクションが可能
四、details元素、progress元素、meter元素の使い方と作用を把握する
1、details要素は、ドキュメントまたはドキュメントの一部の詳細を記述するために使用されます.summary要素は、details要素の最初のサブ要素としてdetails要素としてよく使用され、detailsのタイトルを定義します.2、progress要素は、進捗が進行中であることを示すだけで、まだどれだけの作業量が完了していないか分からない進捗バーを定義するために使用されます.progress要素の一般的な属勝値は、i.value:完了したワークロードの2つです.ii.max:全部でどれだけの仕事量がありますか.iii.valueおよびmax属性の値は0より大きく、valueの値はmax属性の値より小さいか等しい必要があります.3、meter要素は指定された範囲内の数値を表すために使用されます.ハードディスク(HDD)容量の候補者に対する投票数が合計人数に占める割合を表示し、meter要素を使用できます.
time要素
時間または日付を定義するには、24時間の時間を表すことができます.time要素はブラウザで特別な効果を示さないが、この要素は機械的に読み取り可能な方法で日付と時間を符号化する.time要素の共通属性値は2つあります.1、datetime:対応する時間または日付を定義します.2、pubdate:time要素の日付/時間がドキュメント(またはarticle要素)の発行日であることを定義します.
mark元素
mark要素の主な機能は、ユーザーの注意を引くためにテキストに一部の文字をハイライト表示することです.この要素の使い方はemやstrongと似ていますが、mark要素を使用すると、スタイルを強調表示するときに自由に柔軟になります.
cite元素
ドキュメントの参考文献の参照説明に使用する参照タグを作成できます.このタグがドキュメントで使用されると、タグ付けされたドキュメントの内容が段落の他の文字とは異なるようにページに斜体で表示されます.
グローバル属性
は、任意の要素で使用できる属性です.draggable hidden spelltcheck contenteditable
draggableプロパティ
要素がドラッグできるかどうかを定義します.true false(デフォルト)
hiddenプロパティの値がtrueの場合、要素は非表示になり、逆に表示されます.
spellcheckプロパティ
主にinput要素とtextareaテキスト入力ボックスに対して,ユーザが入力したテキスト内容のスペルと文法チェックを行う.値がtrueの場合は入力ボックスの値を検出し、逆に検出しません.
contenteditableプロパティ
要素の内容を編集できるかどうかを指定します.これは、要素がマウスのフォーカスを取得でき、その内容が読み取り専用ではないことを前提としています.
リスト要素
1.ul無秩序リスト定義:Webページで最もよく使用されるリストで、各リスト項目の間に順序レベルの区別がありません.通常は、並列構文形式です.
2.ol秩序リスト:定義:シーケンステーブルが配列順序のリストである.ページでよく見られる曲のランキング/ゲームのランキングなどは、序列表で文法のフォーマットを定義することができます.
3.dl定義リスト:定義:属または名詞を解釈および記述するための共通語図文混成構文フォーマット:
2.nav要素:定義:ナビゲーションリンクを定義するために使用され、ナビゲーションの性質を持つリンクを1つの領域にまとめることができます:構文フォーマット:
従来のナビゲーションバー、サイドバーナビゲーションバー、ページ内ナビゲーション、ページめくり操作に適用
3.article要素:定義:ドキュメント、ページアプリケーションのコンテキストに関係のない独立した部分構文フォーマットを表します.
4.aside要素:定義:現在のページまたは記事を定義するための付属情報部分の使用法:article要素に含まれる主なコンテンツとしての付属情報は、ページまたはサイトのグローバルな付属情報部分としてarticle要素の外で使用されます.一般的な形式は、サイドバー構文形式です.
5.section要素:定義:Webサイトまたはアプリケーションのページの内容をブロックする
6.footer要素:定義:ページ領域の下部を定義する
映画評論網を作る手順
ヘッダ情報はヘッダ要素で定義され、内部にはimgタグで画像が挿入されます.ナビゲーションリンクはnav要素によって定義され、内部には無秩序なリストulがネストされています.文章の内容はarticle要素によって定義され、内部はdetails要素によって区分され、そのうちアクション映画、SF映画の部分はすべて挿入されたピクチャであり、details要素の内部のsummary要素によって定義され、この2つのピクチャをクリックすると、details要素の内部の他のコンテンツがそれぞれ表示される.ページ内のスコア進捗バー効果はmeter要素によって実現されます.
ページ内の要素のグループ化
二、figure、figcaption、hggroupの3種類のグループ要素の使い方と用途を把握する
1、figure要素は、画像、グラフ、写真、コードなどの独立したストリームコンテンツを定義するために使用され、一般的には個別のユニットを指す.Figure要素の内容はプライマリコンテンツに関連する必要がありますが、削除されてもドキュメントフローに影響はありません.2、figcaption要素はfigure要素グループにタイトルを追加するために使用され、1つのfigure要素内で最大1つのfigcaption要素を使用することができ、この要素はfigure要素の最初のサブ要素または最後のサブ要素の位置に置くべきである.3、hgroup要素は、複数のタイトル(メインタイトルおよびサブタイトルまたはサブタイトル)を1つのタイトルグループに構成するために使用され、通常はh 1〜h 6要素と組み合わせて使用される.通常、hgroup要素はheader要素に配置されます.hgroup要素を使用する場合は、i、ヘッダー要素が1つしかない場合はhgroup要素を使用することを推奨しないことに注意してください.ii、1つ以上のタイトルと要素が現れた場合、hgroup要素をタイトル要素として使用することを推奨する.iii、見出しに副題、section、article要素が含まれている場合は、hgroup要素と見出し関連要素をheader要素コンテナに保存することをお勧めします.
三、ページインタラクティブ要素とは何かを理解する
ユーザーのページインタラクションが可能
四、details元素、progress元素、meter元素の使い方と作用を把握する
1、details要素は、ドキュメントまたはドキュメントの一部の詳細を記述するために使用されます.summary要素は、details要素の最初のサブ要素としてdetails要素としてよく使用され、detailsのタイトルを定義します.2、progress要素は、進捗が進行中であることを示すだけで、まだどれだけの作業量が完了していないか分からない進捗バーを定義するために使用されます.progress要素の一般的な属勝値は、i.value:完了したワークロードの2つです.ii.max:全部でどれだけの仕事量がありますか.iii.valueおよびmax属性の値は0より大きく、valueの値はmax属性の値より小さいか等しい必要があります.3、meter要素は指定された範囲内の数値を表すために使用されます.ハードディスク(HDD)容量の候補者に対する投票数が合計人数に占める割合を表示し、meter要素を使用できます.
time要素
時間または日付を定義するには、24時間の時間を表すことができます.time要素はブラウザで特別な効果を示さないが、この要素は機械的に読み取り可能な方法で日付と時間を符号化する.time要素の共通属性値は2つあります.1、datetime:対応する時間または日付を定義します.2、pubdate:time要素の日付/時間がドキュメント(またはarticle要素)の発行日であることを定義します.
mark元素
mark要素の主な機能は、ユーザーの注意を引くためにテキストに一部の文字をハイライト表示することです.この要素の使い方はemやstrongと似ていますが、mark要素を使用すると、スタイルを強調表示するときに自由に柔軟になります.
cite元素
ドキュメントの参考文献の参照説明に使用する参照タグを作成できます.このタグがドキュメントで使用されると、タグ付けされたドキュメントの内容が段落の他の文字とは異なるようにページに斜体で表示されます.
グローバル属性
は、任意の要素で使用できる属性です.draggable hidden spelltcheck contenteditable
draggableプロパティ
要素がドラッグできるかどうかを定義します.true false(デフォルト)
hiddenプロパティの値がtrueの場合、要素は非表示になり、逆に表示されます.
spellcheckプロパティ
主にinput要素とtextareaテキスト入力ボックスに対して,ユーザが入力したテキスト内容のスペルと文法チェックを行う.値がtrueの場合は入力ボックスの値を検出し、逆に検出しません.
contenteditableプロパティ
要素の内容を編集できるかどうかを指定します.これは、要素がマウスのフォーカスを取得でき、その内容が読み取り専用ではないことを前提としています.
リスト要素
1.ul無秩序リスト定義:Webページで最もよく使用されるリストで、各リスト項目の間に順序レベルの区別がありません.通常は、並列構文形式です.
`
- 1
<1i> 2
`
2.ol秩序リスト:定義:シーケンステーブルが配列順序のリストである.ページでよく見られる曲のランキング/ゲームのランキングなどは、序列表で文法のフォーマットを定義することができます.
```css
<ol>
<li> 1</li>
<1i> 2</li>
</ol>
3.dl定義リスト:定義:属または名詞を解釈および記述するための共通語図文混成構文フォーマット:
```css
- 1
- 1 1
( dt dd）
结构元素
1.header元素
定义：是一种具有引导和导航作用的元素
语法格式：
2.nav要素:定義:ナビゲーションリンクを定義するために使用され、ナビゲーションの性質を持つリンクを1つの領域にまとめることができます:構文フォーマット:
従来のナビゲーションバー、サイドバーナビゲーションバー、ページ内ナビゲーション、ページめくり操作に適用
3.article要素:定義:ドキュメント、ページアプリケーションのコンテキストに関係のない独立した部分構文フォーマットを表します.
4.aside要素:定義:現在のページまたは記事を定義するための付属情報部分の使用法:article要素に含まれる主なコンテンツとしての付属情報は、ページまたはサイトのグローバルな付属情報部分としてarticle要素の外で使用されます.一般的な形式は、サイドバー構文形式です.
5.section要素:定義:Webサイトまたはアプリケーションのページの内容をブロックする
6.footer要素:定義:ページ領域の下部を定義する
映画評論網を作る手順
ヘッダ情報はヘッダ要素で定義され、内部にはimgタグで画像が挿入されます.ナビゲーションリンクはnav要素によって定義され、内部には無秩序なリストulがネストされています.文章の内容はarticle要素によって定義され、内部はdetails要素によって区分され、そのうちアクション映画、SF映画の部分はすべて挿入されたピクチャであり、details要素の内部のsummary要素によって定義され、この2つのピクチャをクリックすると、details要素の内部の他のコンテンツがそれぞれ表示される.ページ内のスコア進捗バー効果はmeter要素によって実現されます.