HTML5 が従う必要がある 6 つの設計原則とは何ですか?-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5 が従う必要がある 6 つの設計原則とは何ですか?

青灯夜游

Sep 10, 2018 pm 05:46 PM

html5

この章では、HTML5 が従う必要がある 6 つのデザイン原則を紹介します。必要な方は参考にしていただければ幸いです。

原則 1: 不必要な複雑さを避ける

html4

<!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN" " 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

html5

<!DOCTYPE html>
<meta charset="utf-8">

原則 2: 既存のコンテンツをサポートする

次の 4 つのコードは xhtml の最初の部分にすぎません

この段落は正しいです; そして HTML5 ではすべて正しいです

<img src="/static/imghwm/default1.png"  data-src="foo"  class="lazy"   alt="bar" />  
<p class="foo">Hello world</p>

<img src="/static/imghwm/default1.png"  data-src="foo"  class="lazy"   alt="bar">  
<p class="foo">Hello world

rree

<img  src="/static/imghwm/default1.png"  data-src="foo"  class="lazy"   ALT="bar" alt="HTML5 が従う必要がある 6 つの設計原則とは何ですか?" >  
<P CLASS="foo">Hello world</P>

原則 3: 現実の問題を解決する

HTML4 では、2 つのブロックレベルの要素が同じリンクアドレスを持っている場合でも、インライン要素であるため、それらは別々に記述する必要があります。ブロックレベルの要素を含めることはできません

<img src=foo alt=bar>  
<p class=foo>Hello world</p>

そして、HTML5 では、コンテンツモデルの使用により、要素にブロックレベルの要素も含めることができます

<h2 id="a-nbsp-href-path-to-resource-Headline-nbsp-text-a"><a href="/path/to/resource">Headline text</a></h2>
<p><a href="/path/to/resource">Paragraph text.</a></p>

原則 4: 誠実で実用的であること

html5 では、セクション、記事、サイド、ナビゲーションなど、新しいコンテンツモデル、つまりコンテンツの分割を表す多数の新しい要素が追加されています。これまで人々は div を使用してページ上のコンテンツを整理してきましたが、他の同様の要素と同様に、div 自体にはセマンティクスがありません。しかし、section、article、side、nav は、実際には、このセクションが文書内の別の文書のようなものであることを明確に伝えています。これらの要素内にあるコンテンツには、独自の概要、独自のタイトル、独自のフッターを含めることができます。

原則 5: スムーズな劣化

ブラウザが認識できない型値に遭遇すると、その型の値をテキストとして解釈します

<a href="/path/to/resource">  
    <h2 id="Headline-nbsp-text">Headline text</h2>  
    <p>Paragraph text.</p>  
</a>

原則 6: エンドユーザーが最初に

一度遭遇したら矛盾が生じると、エンドユーザーが最初に来て、次に作成者、次に実装者、次に標準設定者、そして最後に理論的な完成度が決まります。

🎜🎜🎜

以上がHTML5 が従う必要がある 6 つの設計原則とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

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

H5：Web標準とテクノロジーの進化Apr 15, 2025 am 12:12 AM

Web標準とテクノロジーは、これまでにHTML4、CSS2、および単純なJavaScriptから進化し、重要な開発を受けてきました。 1）HTML5は、CanvasやWebstorageなどのAPIを導入し、Webアプリケーションの複雑さと互換性を高めます。 2）CSS3はアニメーション関数とトランジション関数を追加して、ページをより効果的にします。 3）JavaScriptは、矢印関数やクラスなど、node.jsおよびES6の最新の構文を通じて開発効率とコードの読みやすさを向上させます。これらの変更により、パフォーマンスの最適化とWebアプリケーションのベストプラクティスの開発が促進されました。

H5はHTML5の速記ですか？詳細の調査Apr 14, 2025 am 12:05 AM

H5はHTML5の略語だけでなく、より広い最新のWeb開発テクノロジーエコシステムを表しています。1。H5にはHTML5、CSS3、JavaScript、および関連するAPIおよびテクノロジーが含まれます。 2.より豊かでインタラクティブでスムーズなユーザーエクスペリエンスを提供し、複数のデバイスでシームレスに実行できます。 3. H5テクノロジースタックを使用して、レスポンシブWebページと複雑なインタラクティブ機能を作成できます。

H5およびHTML5：Web開発で一般的に使用される用語Apr 13, 2025 am 12:01 AM

H5とHTML5は、同じこと、つまりHTML5を参照します。 HTML5はHTMLの5番目のバージョンであり、セマンティックタグ、マルチメディアサポート、キャンバスとグラフィックス、オフラインストレージ、ローカルストレージなどの新しい機能をもたらし、Webページの表現力と互換性を向上させます。

H5は何を参照していますか？コンテキストの探索Apr 12, 2025 am 12:03 AM

H5ReferStoHtml5、apivotaltechnologyinwebdevelopment.1）html5introduceSnewelementsandapisforrich、dynamicwebapplications.2）Itupp ortsmultimediawithoutplugins、endancingurexperiencecrossdevices.3）semanticelementsimprovecontentstructurendseo.4）H5'srespo

H5：ツール、フレームワーク、およびベストプラクティスApr 11, 2025 am 12:11 AM

H5開発で習得する必要があるツールとフレームワークには、Vue.JS、React、Webpackが含まれます。 1.Vue.jsは、ユーザーインターフェイスの構築に適しており、コンポーネント開発をサポートします。 2.複雑なアプリケーションに適した仮想DOMを介したページレンダリングを最適化します。 3.Webpackは、モジュールのパッケージングに使用され、リソースの読み込みを最適化します。

HTML5の遺産：現在のH5の理解Apr 10, 2025 am 09:28 AM

html5hassificlytransformdedwebdeveverment byintroducingsingingelements、endincemultimediasupport、およびrequrovingperformance.1）itmadewebsitesmoreaccessibleandseo-frendlywithsemantelementslike、and.2）

H5コード：アクセシビリティとセマンティックHTMLApr 09, 2025 am 12:05 AM

H5は、セマンティック要素とARIA属性を介して、WebページのアクセシビリティとSEO効果を改善します。 1.使用などを使用して、コンテンツ構造を整理し、SEOを改善します。 2。ARIA-LabelなどのARIA属性はアクセシビリティを強化し、支援技術ユーザーはWebページをスムーズに使用できます。

H5はHTML5と同じですか？Apr 08, 2025 am 12:16 AM

「H5」と「HTML5」はほとんどの場合同じですが、特定の特定のシナリオでは異なる意味を持つ可能性があります。 1。「HTML5」は、新しいタグとAPIを含むW3C定義標準です。 2。 "H5"は通常、HTML5の略語ですが、モバイル開発では、HTML5に基づくフレームワークを参照する場合があります。これらの違いを理解することは、プロジェクトでこれらの用語を正確に使用するのに役立ちます。

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コードプロンプト機能はサポートされていません

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、