[はじめに] この記事は alimama の ued によるデザインコンセプトに関する記事で、主に私が現在閲覧している HTML5 を始めるためのデザイン原則について話しています。 HTML5とCSS3の時代が到来しました。2011年の新しいタオバオホームページはすべてHTML5を採用しました
この記事は、alimamaのデザインコンセプトについての記事です。主に私が始めたHTML5の導入について話しています。デザインの原則については、今すぐ閲覧して、必要な友人が参照してください。
HTML5 と CSS3 の時代が到来しました。2011 年の新しいタオバオのホームページはすべて HTML5 を使用しています。変化を受け入れる唯一の方法は、変化を受け入れることです。この記事の翻訳は非常に優れており、再読して多くのことを理解していると感じました。特にフロントエンドの開発者にはぜひ読んでみてください。
html4、xhtml1.0、xhtml2.0、html5 の関係を理解しただけでなく、HTML5 が登場した理由も理解しました。同時に、プロジェクトでの HTML5 の適用を強化しました。
------------------------------------------------ --------------------------------
アシモフの有名なロボット三原則:
ロボットは人間に危害を加えてはいけない、さもなくば傍観してはならないそして人間が危害を受けるのを見てください。
第一法則に違反しない限り、ロボットは人間の命令に従わなければなりません。
ロボットは、第 1 法と第 2 法に違反しない限り、自分自身を守らなければなりません。
------------------------------------------------ --------------------------------
xhtml1.0とhtml4.0の共通点:
の内容2 つの仕様は同じです。
語彙は同じです。
すべての属性も同じです。
XHTML 1.0 では XML 構文を使用する必要があります。 (厳密なエンコーディング スタイル)
//すべての属性は小文字を使用する必要があります;
//すべての要素も小文字を使用する必要があります;
//すべての属性値は引用符で囲む必要があります;
//終了タグを使用することも忘れないでください, img と br には必ず自己終了タグを使用してください。
XHTML 1.1 と xhtml1.0 の間の唯一の変更点:
ドキュメントを XML ドキュメントとしてマークする
//XML エラー処理モデル: パーサーがエラーを検出すると、解析を停止します。
//XML を理解できないブラウザの場合、ユーザーはこの Web ページを直接見ることができません。
XHTML 2 の機能 (この仕様は完全ではありません):
引き続き XML エラー処理モデルを使用するため、ドキュメントが XML ドキュメント タイプとして送信されることを確認する必要があります。
開発者およびブラウザ ベンダーは、既存のバージョンの HTML との下位互換性を意図的に持たなくなります。決して支持しないでください。
本当に広く使用されている設計原則:
送信するときは控えめに、受信するときはオープンに。
//専門家として、文書を送信するときは、保守的であるよう努め、ベストプラクティスを使用し、文書の形式が適切であることを確認するよう努めます。
//しかし、ブラウザの観点から見ると、ブラウザはあらゆるドキュメントを受け入れる必要があります。
------------------------------------------------ --------------------------------
1. 2004 年に、Web Hypertext Applications Technology Working Group が設立されました。 Application Technology Working Group、WHATWG) は W3C から完全に分離されました。
2. W3C は、WHATWG の作業結果に基づいて作業を継続するために、2007 年に HTML5 ワーキング グループを設立しました。
------------------------------------------------ --------------------------------
| コードをコピー | |
| //HTML 4.01:
|
|
| コードをコピー | |
|
|
| コードは以下の通りです | コードをコピー |
|
<script></script> Hello world
Hello world Hello world < ;img src =foo alt=bar> Hello world | |
注: HTML5 は、既存のさまざまな緩やかな記述方法をサポートしています。
JavaScript では、各ステートメントの末尾にセミコロンを追加できますが、JavaScript が自動的にセミコロンを挿入するため、必須ではありません。JSlint は確かに優れたツールであり、JavaScript コーディング スタイルを標準化および統一し、非常に便利です。チームプロジェクトで。
------------------------------------------------ --------------------------------
HTML5 デザイン原則 3: 現実の問題を解決する
コンテンツ全体 (含む) を提供するさらにブロックレベルの要素) リンクを追加します
| コードは次のとおりです | コードをコピーします |
|
//HTML 4.01 XHTML 1.0: //HTML5 : 段落テキスト。 | |
注: この書き方は実際には長い間ブラウザに存在していましたが、以前はこのように書くことは違法でした。現在では標準が変更され、このように書くことができるようになりました。
------------------------------------------------ --------------------------------
HTML5 デザイン原則 4: 真実の追求と実用主義
新しいセマンティック要素にはヘッダー ( header)、フッター、セクション、記事...
| コードは次のとおりです | コードをコピー |
|
//HTML 4.01 XHTML 1.0: 。 .. ... ... ... | |
//HTML5 :
...
注: 新しい要素のセクション、記事、サイド、ナビゲーションは、新しいコンテンツ モデル、つまり HTML における前例のないコンテンツ モデル、つまりコンテンツの分割を表します。
新しい要素をクラスの置き換えとして使用すると、これらの要素はページ内で 1 回だけでなく複数回使用でき、ネストできるため、より価値があります。
最も一般的なセクションは、コンテンツに最も関連するセクションであると言えます。そして記事は特別な種類のセクションです。脇には特別なセクションがあります。最後に、ナビも特別なセクションです。
/
| コードは次のとおりです | コードをコピー |
|
/HTML 4.01 XHTML 1.0: ...& lt ;p class="メタ">...
. .. //HTML5: | |
注: HTML5 では、section、article、side、nav のいずれを使用しても、新しいコンテンツ ブロックを作成する必要があります。 、その他何でも このブロックのタイトルがページ全体でどのレベルにランクされるかを気にすることなく、どの要素でも H1 を使用できます。H2 と H3 は問題ありません。
------------------------------------------------ --------------------------------
HTML5 設計原則 5: スムーズな劣化
プログレッシブ エンハンスメントのもう一方の側面はスムーズな劣化です。
type 属性を使用してフォームを拡張します:
| コードは次のとおりです | コードをコピーします |
| input type="number" input type="search" input type="range" input type="email" input type="date" input type="url" | |
注:
既存のブラウザはこれらの新しい型の値を理解できませんが、理解できない型の値が表示されると、の値はテキストとして解釈されます。
HTML5 では、テキスト ボックスにテキストを事前に配置するために使用されるプレースホルダーなどの新しい属性も入力要素に追加されます。実装するために JavaScript は必要なく、完璧です。
------------------------------------------------ --------------------------------
HTML5 ビデオから Flash ビデオ (ビデオ要素):
| コードは次のとおりです | コードをコピー |
注: HTML5 かどうかに関係なく、両方を考慮する必要があります。または Flash:
ブラウザが video 要素と H264 をサポートしている場合は、言うことはありません。最初のビデオを使用してください。
ブラウザがビデオ要素と Ogg をサポートしている場合は、2 番目のビデオを使用します。
ブラウザがビデオ要素をサポートしていない場合は、Flash ビデオを試してください。
ブラウザがビデオ要素やFlashをサポートしていない場合は、ダウンロードリンクも提供します。
もう 1 つの設計原則であるメトカーフの法則に従います:
以上がhtml5 を始めるための設計原則の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
