検索
ホームページウェブフロントエンドH5 チュートリアルHTML5 の構造とセマンティクス (2): Structure_html5 チュートリアルのスキル


たとえ整形式の HTML ページであっても、構造が不足しているために処理が難しい場合があります。セクションがどのように分割されているかを確認するには、見出しのレベルを分析する必要があります。サイドバー、フッター、ヘッダー、ナビゲーション バー、メイン コンテンツ領域、および個々の記事はすべて、共通の div 要素で表されます。 HTML 5 では、特にこれらの一般的な構造を識別するために、いくつかの新しい要素が追加されています。
· セクション: これは本の章またはセクションであり、実際には HTML 4 で独自のタイトルを持つものであれば何でも
· ヘッダー: head 要素とは別にページに表示されるヘッダー。同じ
· footer: フッター; 電子メールに署名を表示できます
· nav: 他のページへのリンクのセット
· Article: ブログ、雑誌、記事まとめなどの記事。
上部にヘッダー、下部にフッター、いくつかの記事、ナビゲーション領域、サイドバーがある典型的なブログのホームページについて考えてみましょう。典型的なブログ ページのコード 1 を参照してください。


Mokka mit Schlag







"/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
サセックス郡に春が来る (そして去っていく)



昨日、私はブルックリンバードクラブに参加して、ニュージャージー州西部への
毎年恒例の旅行、特に比較的最近発見されたホットスポットであるハイパー
腐植土
から始まりました。午前7時30分に現場に到着したときは、気持ちの良い冬の朝でした。
午前10時頃には春になり、


には初夏になりました。



"/blog/birding/2007/04/23/but-does-it-count-for-your-life -list/"> でも、それはあなたの人生リストに含まれますか?


これで href="http: //www.wired.com/science/discoveries/news/ 2007/04/cone_sf">インターネット経由の野鳥観察
。私はまだテストできていません (20 ユーザー
どうやら限界のようです) しかし、これは確かにクールです。
個人的には、これが実際にフィールドに出ている
に少しでも置き換えられるとは想像できません。
一方、私は常に
双眼鏡を安定して持つことができなくなったり、公園に行くことができなくなった先輩野鳥観察者たちに会うのはとても
悲しいことです。
少なくとも 1 人は、これが何らかの興味を持っているのではないかと想像できます。年老いた野鳥観察者は、
あまり外に出られなくなって以来、テレビで大活躍しましたが、これは間違いなく
それを上回ります。











インデントが正しくても、これらのネストされた div は依然として非常に混乱しているように感じられます。 HTML 5 では、これらの要素をセマンティック要素に置き換えることができます。HTML5 で書かれた典型的なブログ ページについては、コード 2 を参照してください。


Mokka mit Schlag



Mokka mit Schlag





"/blog/birding/2007/04 /23/spring-comes-and-goes-in-sussex-county/">
サセックス郡に春が来る (そして去っていく)


昨日、私はブルックリン バード クラブに参加しましたニュージャージー州西部への
毎年恒例の旅行、特に比較的最近発見されたホットスポットであるハイパー
腐植土への旅行
は、私たちが現場
に7時半に到着したときから始まりました。午前10時
頃から春に進み、




"/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
でも、それはあなたの人生リストに含まれますか?


href="http://www.wired.com/science/discoveries/news/
2007/04/cone_sf">インターネット経由で野鳥観察ができるようです。私
はまだテストできていませんが (どうやら 20 ユーザー
制限があるようです)、これは確かに素晴らしいです。
個人的には、これが実際にリリースされる
に代わるとは想像できません。
その一方で、双眼鏡をしっかり持つことができなくなったり、公園に行くことができなくなった先輩野鳥観察者たちに会うのは
いつもとても悲しいことです。
少なくとも一人の年配の野鳥観察者がテレビで大活躍したのに、
もうあまり外出できなくなってしまったのは間違いなく
です。






著作権 2007 Elliotte Rusty Harold




これで div は必要なくなりました。 class 属性を自分で設定する必要はなくなり、各部分の意味は標準の要素名から推測できます。これは、オーディオ ブラウザ、モバイル ブラウザ、その他の非標準ブラウザにとって特に重要です。
(続く)
声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
H5コードの構成要素:キー要素とその目的H5コードの構成要素:キー要素とその目的Apr 23, 2025 am 12:09 AM

HTML5の重要な要素には、最新のWebページの構築に使用される、、,,,,などが含まれます。 1.ヘッドコンテンツを定義します。2。リンクをナビゲートするために使用されます。3。独立した記事のコンテンツを表します。4。ページコンテンツを整理します。5。サイドバーコンテンツを表示します。

HTML5およびH5:一般的な使用法の理解HTML5およびH5:一般的な使用法の理解Apr 22, 2025 am 12:01 AM

HTML5とHTML5の略語であるHTML5とH5の間に違いはありません。 1.HTML5はHTMLの5番目のバージョンであり、Webページのマルチメディア関数とインタラクティブ機能を強化します。 2.H5は、HTML5ベースのモバイルWebページまたはアプリケーションを参照するためによく使用され、さまざまなモバイルデバイスに適しています。

HTML5:現代のウェブのビルディングブロック(H5)HTML5:現代のウェブのビルディングブロック(H5)Apr 21, 2025 am 12:05 AM

HTML5は、W3Cによって標準化されたHyperText Markup言語の最新バージョンです。 HTML5は、新しいセマンティックタグ、マルチメディアサポート、フォームの強化、Web構造の改善、ユーザーエクスペリエンス、SEO効果を導入します。 HTML5は、Webページ構造をより明確にし、SEO効果をより良くするために、、、、、、などの新しいセマンティックタグを導入します。 HTML5はマルチメディア要素をサポートしており、サードパーティのプラグインは不要で、ユーザーエクスペリエンスと読み込み速度が向上します。 HTML5はフォーム関数を強化し、ユーザーエクスペリエンスを向上させ、フォーム検証効率を向上させるなどの新しい入力タイプを導入します。

H5コード:クリーンで効率的なHTML5の書き込みH5コード:クリーンで効率的なHTML5の書き込みApr 20, 2025 am 12:06 AM

クリーンで効率的なHTML5コードを書き込む方法は?答えは、タグのセマンティック、構造化されたコード、パフォーマンスの最適化、一般的な間違いを回避することにより、一般的な間違いを避けることです。 1.コードの読みやすさとSEO効果を改善するには、セマンティックタグなどを使用します。 2。適切なインデントとコメントを使用して、コードを構造化して読みやすいままにします。 3.不必要なタグを減らし、CDNを使用してコードを圧縮することにより、パフォーマンスを最適化します。 4.タグが閉じていないなどの一般的な間違いを避け、コードの有効性を確認してください。

H5:ウェブ上のユーザーエクスペリエンスをどのように強化するかH5:ウェブ上のユーザーエクスペリエンスをどのように強化するかApr 19, 2025 am 12:08 AM

H5は、マルチメディアサポート、オフラインストレージ、パフォーマンスの最適化により、Webユーザーエクスペリエンスを向上させます。 1)マルチメディアサポート:H5と要素は、開発を簡素化し、ユーザーエクスペリエンスを向上させます。 2)オフラインストレージ:WebStorageとIndexEdDBは、エクスペリエンスを改善するためにオフラインで使用できるようにします。 3)パフォーマンスの最適化:ウェブワーカーと要素は、パフォーマンスを最適化して帯域幅の消費を削減します。

H5コードの分解:タグ、要素、属性H5コードの分解:タグ、要素、属性Apr 18, 2025 am 12:06 AM

HTML5コードは、タグ、要素、属性で構成されています。1。タグはコンテンツタイプを定義し、などの角度ブラケットに囲まれています。 2。要素は、startタグ、内容、および内容などのエンドタグで構成されています。 3。属性は、開始タグのキー値のペアを定義し、ような関数を強化します。これらは、Web構造を構築するための基本ユニットです。

H5コードの理解:HTML5の基礎H5コードの理解:HTML5の基礎Apr 17, 2025 am 12:08 AM

HTML5は、最新のWebページを構築するための重要なテクノロジーであり、多くの新しい要素と機能を提供します。 1。HTML5は、Webページの構造とSEOを強化するなどのセマンティック要素を導入します。 2。プラグインなしのマルチメディア要素と埋め込みメディアをサポートします。 3.フォームは、新しい入力タイプと検証プロパティを強化し、検証プロセスを簡素化します。 4.オフラインおよびローカルストレージ機能を提供して、Webページのパフォーマンスとユーザーエクスペリエンスを向上させます。

H5コード:Web開発者向けのベストプラクティスH5コード:Web開発者向けのベストプラクティスApr 16, 2025 am 12:14 AM

H5コードのベストプラクティスには以下が含まれます。1。正しいDoctype宣言と文字エンコーディングを使用します。 2。セマンティックタグを使用します。 3。HTTPリクエストを削減します。 4.非同期負荷を使用します。 5。画像を最適化します。これらのプラクティスは、Webページの効率、保守性、ユーザーエクスペリエンスを向上させることができます。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

AtomエディタMac版ダウンロード

AtomエディタMac版ダウンロード

最も人気のあるオープンソースエディター

SecLists

SecLists

SecLists は、セキュリティ テスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティ テスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティ テストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジング ペイロード、機密データ パターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテスト マシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)