html5_html/css_WEB-ITnose に従う 6 つの設計原則-htmlチュートリアル-php.cn

html5_html/css_WEB-ITnose に従う 6 つの設計原則

WBOY

リリース： 2016-06-24 11:19:45

オリジナル

1259 人が閲覧しました

前に言った事

実際、html5 は w3c によって直接策定されたものではなく、w3c の方向性は html5 ではなく xhtml2 です。 xhtml2 が現実と乖離しており、実用化できないと、w3c ワーキンググループは研究の方向性を html5 に切り替えました。なぜ xhtml2 は実現しなかったのでしょうか?これは、有名な Burstahl の法則である、送信するときは保守的であり、受信するときはオープンであるという設計原則に違反するためです。 html5 の設計プロセスでは一連の原則が採用され、html5 の急速な推進が可能になりました。この記事では、html5 に従う 6 つの設計原則を紹介します

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

html4

<!DOCTYPE html PUBLIC "-//W3C/DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

ログイン後にコピー

html5

<!DOCTYPE html>

ログイン後にコピー

html4

rree

html5

rree

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

次の 4 つのコードについて、xhtml では最初のコードのみが正しいですが、html5 ではすべて正しいです

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

ログイン後にコピー

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

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

<meta charset="utf-8">

ログイン後にコピー

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

<img src="foo" alt="bar" /><p class="foo">Hello world</p> <img src="foo" alt="bar"><p class="foo">Hello world <IMG SRC="foo" ALT="bar"><P CLASS="foo">Hello world</P> <img src=foo alt=bar><p class=foo>Hello world</p>

ログイン後にコピー

原則 4: 真実を伝え、実際的であること

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

原則 5: スムーズな劣化

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

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

ログイン後にコピー

原則 6: エンドユーザーの優先順位

遭遇した、最初にエンドユーザーが来て、次に作成者、次に実装者、次に標準設定者、そして最後に理論的な完成度が続きます。