HTML 5 の設計原則の紹介-H5 チュートリアル-php.cn

HTML 5 の設計原則の紹介

王林

リリース： 2021-02-01 14:14:57

転載

2749 人が閲覧しました

HTML 5 の設計原則の紹介

はじめに:

HTML5 は、Web コンテンツを構築するための言語記述方法です。 HTML5 はインターネットの次世代標準であり、インターネットコンテンツを構築および表示するための言語方式です。インターネットの中核技術の 1 つと考えられています。 HTML は 1990 年に作成され、HTML4 は 1997 年にインターネット標準となり、インターネットアプリケーションの開発に広く使用されています。

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

不必要な複雑さを避ける

html4

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

ログイン後にコピー

html5

<!DOCTYPE html>

ログイン後にコピー

html4

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

ログイン後にコピー

に続く 5 つの設計原則を紹介します。

既存のコンテンツのサポート

次の 4 つのコードは、xhtml では最初の段落のみが正しいですが、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>

ログイン後にコピー

(学習ビデオの共有: html ビデオチュートリアル)

現実の問題を解決する

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

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

ログイン後にコピー

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

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

ログイン後にコピー

コンテンツモデル

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

スムーズな劣化

ブラウザは、認識できない type 値を検出すると、type の値を text として解釈します

input type="number"
input type="search"
input type="range"
input type="email"
input type="date"
input type="url"

ログイン後にコピー

関連する推奨事項: html5 チュートリアル

以上がHTML 5 の設計原則の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。