H5 を使用して Web ページを作成する方法の全体的な概要

Y2J
リリース: 2017-05-23 13:33:11
オリジナル
3871 人が閲覧しました

今日の HTML 5 の新しい機能のいくつかを理解するために、本題に取り掛かり、いくつかの新しい構造要素を使用してみましょう。 HTML 5 ドキュメントを作成するために最初に行う必要があるのは、新しいドキュメント タイプを使用することです。

誰に尋ねるかによりますが、HTML 5は、よりセマンティックな Webを作成するための次の大きなステップであるか、不完全なタグとタグの寄せ集めでWebを泥沼化させる大惨事のどちらかです。

この議論の両側の問題は、自然環境で HTML 5 を使用しているサイトがほとんどないため、現在認識されている問題に対する理論的な解決策がほとんどテストされていないことです。

とはいえ、次世代 Web マークアップ ツールの利点と潜在的な落とし穴を理解するのは難しくありません。

コンテンツ

1. HTML 5 の違いは何ですか?

2. 最後に、誰でも覚えられるドキュメントの種類

1.

2.

3.

4. 新しい要素の書き方

6.

7. HTML 5が使えるようになりましたが、使いますか?

HTML 5 の違いは何ですか? まず、HTML 5 では何を表現するのでしょうか?まず、HTML 5 とは何を意味するのでしょうか? 理論的には、

キャンバス

、オフライン ストレージ、その他の API 仕様などの新しいセマンティック構造タグ、および新しいインライン セマンティック タグなど、すべてを表現します。ただし、実際の理由 (追記: ブラウザのサポートの問題) を構造タグのみに限定します。キャンバス、オフライン ストレージ、ローカル

ビデオ

または地理位置情報 API はすべて優れていますが、まだすべてのブラウザーで一貫してサポートされているわけではありません。 「しかし、待ってください。ほとんどのブラウザは新しい構造要素もサポートしていません!」とあなたは言います。それは本当ですが、ほとんどのブラウザは作成したいタグを喜んで受け入れます。 IE6 でも新しいタブを処理できますが、CSS でスタイルを設定したい場合は、

JavaScript

の助けが少し必要になります。 新しいタブのスタイルを設定するときに覚えておく必要があることの 1 つは、ほとんどのブラウザーでは、不明なタブにはデフォルトのスタイルがないということです。これらは行レベルの要素ともみなされます。それでも、HTML 5 の新しいタグのほとんどは構築できるため、それらにブロックレベル要素の

動作

を与えます。解決策は、CSS スタイルに display:block; を必ず含めることです。

今日の HTML 5 の新しい機能のいくつかを理解するために、本題に取り掛かり、いくつかの新しい構造要素を使用してみましょう。 最後に、誰でも覚えられるドキュメント タイプ

HTML 5 ドキュメントを作成するために最初に行う必要があるのは、新しいドキュメント タイプを使用することです。さて、HTML 4 または XHTML 1.x のドキュメント タイプをはっきりと覚えているなら、あなたは私たちよりもかなりのやんちゃな人です。新しいページを作成するときは常に、古いファイルを開いて、ドキュメント タイプ定義を切り取って貼り付ける必要があります。

これは本当に面倒ですが、私たちが 新しい HTML 5 ドキュメント タイプ を好む理由はここにあります。準備はできたか?彼はこちらです:

覚えるのはそれほど難しくありません。シンプルでわかりやすい。大文字と小文字を区別しません。

そのアイデアは、HTML のバージョン管理を停止し、下位互換性を容易にすることです。長期的に見て成功するかどうかは別の問題ですが、少なくとも平均的な入力時間を節約できます。

最も基本的なセマンティック構造

ページを HTML 5 ドキュメントとして定義しました。ここまでは順調ですね。さて、私たちが噂になっているこれらの新しいレーベルとは一体何なのでしょうか? 新しいタグについて詳しく説明する前に、次のような平均的な Web ページの構造について考えてください:

これはプレゼンテーションの目的には問題ありませんが、ページ要素に含まれる内容について知りたい場合はどうすればよいでしょうか?

上記の例では、すべての構造 p に ID を追加しました。これは知識のあるデザイナーの間ではよくあることです。目的は 2 つあり、1 つ目は、ID がページの特定の段落にスタイルを適用するために使用できるアンカーを提供すること、2 つ目は、ID が基本的な擬似意味構造として機能することです。優れたパーサーはタグの ID 属性 を調べてその意味を推測しようとしますが、ID 名がサイトごとに異なる場合、それは困難です。

それで、新しい構造タグが到着しました。

これらの ID が慣例になったことを認識し、HTML 5 の作成者はさらに一歩進んで、これらの要素の一部を独自のタグにしました。 HTML 5 で有効になる新しいタグの簡単な概要は次のとおりです。

ヘッダー タグは、章または Web ページ全体に関する紹介情報のコンテナとして機能するように設計されています。

タグには、ほとんどのページの上部にある典型的なロゴやキャッチフレーズから、章を紹介するキャッチフレーズや冒頭行まで、あらゆるものを含めることができます。ページ内でまだ
を使用して

nav 要素を置き換えることができます。これが ナビゲーションであることは明らかです。 要素。もちろん、何をナビゲーションとしてカウントするかについては議論があり、基本的なサイト ナビゲーションがありますが、場合によっては ページ ナビゲーション 要素も含まれる場合があります。 HTML5 の作成者である WHATWG は最近、

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート