ホームページ > 記事 > ウェブフロントエンド > html5_html/css_WEB-ITnose に従う 6 つの設計原則
html5_html/css_WEB-ITnose に従う 6 つの設計原則
- WBOYオリジナル
- 2016-06-24 11:19:451258ブラウズ
前に言った事
実際、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 では、コンテンツ モデルの使用により、 , 3499910bf9dac5ae3c52d5ede7383485 要素にはブロック レベルの要素も含めることができます
<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: エンドユーザーの優先順位