ホームページ >ウェブフロントエンド >htmlチュートリアル >【HTML】汎用HTML5基本テンプレート（翻訳）_html/css_WEB-ITnose
【HTML】汎用HTML5基本テンプレート（翻訳）_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:18:261478ブラウズ
原文。
HTML5 を学習し、新しいテクノロジーをスキルのリストに追加すると、簡単な HTML5 プロジェクトを開始するために使用できる独自のテンプレートを作成したくなる場合があります。これをお勧めします。HTML5 開発用にオンラインで入手可能なテンプレート リソースの 1 つを使用することを検討してください。
ただし、このプロジェクトでは、独自のコードを構築し、各部分を説明するというゼロからのスタートとなります。もちろん、さまざまなプロジェクトにすべての新しい要素やテクノロジーを組み込むことはできません。そのため、プロジェクトと一致しないいくつかの新機能についても説明する必要があります。このようにして、HTML5 および CSS3 の Web サイトと Web アプリケーションを構築する方法を決定するための幅広いオプションに慣れることができるため、この記事をクイック リファレンス技術書として使用できます。
簡単に始めましょう。これが簡単な HTML5 ページです:
<!doctypehtml> <htmllang="en"><head> <metacharset="utf-8"> <title>TheHTML5Herald</title> <metaname="description" content="The HTML5 Herald"> <metaname="author" content="SitePoint"> <linkrel="stylesheet" href="css/styles.css?v=1.0"> <!--[if lt IE 9]> <scriptsrc="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--></head> <body> <scriptsrc="js/scripts.js"></script></body></html>
この基本的なテンプレートを手に入れて、マークアップの重要なコンポーネントのいくつかと、それらが HTML5 以前の言語の違いにどのように関連しているかを見てみましょう。
Doctype
まず、ドキュメント タイプ宣言、つまりドキュメント タイプがあります。これは、ブラウザ (または他のパーサー) に、どの種類のファイルを見ているのかを伝える簡単な方法です。 HTML ファイルの場合、これは HTML の特定のバージョンとスタイルを意味します。ドキュメント タイプは常に HTML ファイルの最初の項目として、ファイルの先頭に配置する必要があります。何年も前、文書型宣言は醜く、覚えにくく、混乱を招くものでした。たとえば、XHTML 1.0 では Strict:
<!DOCTYPEhtmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
HTML5 ではこれらの判読できない文字列が廃止され、必要なのはこれだけです:
<!DOCTYPEhtmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
シンプルかつ要点を絞ったものです。この文書タイプには、大文字、小文字、またはその混合を使用できます。このステートメントには数字「5」が欠落していることがわかります。現在の Web のバージョンは「HTML5」と呼ばれていますが、これは以前の HTML 標準の進化にすぎず、将来的には仕様も今日と同様に進化するでしょう。
通常、ブラウザは Web サイト上のすべてのコンテンツをサポートする必要があるため、特定のドキュメントのドキュメント タイプについて、どの機能をサポートする必要があるかをブラウザに伝える情報は提供されません。言い換えれば、ドキュメント タイプ自体は、ページが HTML5 に準拠する必要があることを示しているわけではありません。ブラウザによって異なります。実際、これら 2 つの古い doctype 宣言を使用してページ内で HTML5 要素を使用すると、ページは新しい doctype 宣言を使用した場合と同じように表示されます。
HTML 要素
HTML ドキュメントの次は html 要素です。これは HTML5 で大きく変更されていません。この例では、ドキュメント言語が英語であることを指定するために、lang 属性と en 属性値を含めています。 XHTML の基本構文では、xmlns 属性を含める必要があります。 XML5 では、これは必要なくなり、ドキュメントの検証や実行に lang 属性さえも必要なくなりました。
これは、終了タグ ` を含むこれまでのテンプレートです:
<!doctypehtml>
Head 要素
次のセクションは、ページの 93f0f5c25f18dab9d176bd4f6de5d30e セクションです。 head の要素の最初の行は、ドキュメントの文字エンコーディングを定義するために使用されます。これは、XHTML および HTML4 以降のもう 1 つの簡素化された要素であり、オプションの機能ですが、推奨されます。以前は、次のように記述したかもしれません:
<!doctypehtml><htmllang="en"> </html>
HTML5 では、7a9ca5604b886c8d4da862be0d16c6bb标记并不需要你声明 type属性。如果你曾经写过 XHTML，你可能会记得你的 script标签是这样写的：
<scriptsrc="js/scripts.js" type="text/javascript"></script>
因为 JavaScirpt 在 Web 实际开发中是唯一的脚本语言，所以尽管你没有明确声明使用但所有的浏览器都假设你使用 JavaScript 作为脚本语言，因此 type属性在 HTML5 文档中是不需要的：
<scriptsrc="js/scripts.js"></script>
当要嵌套 JavaScript 的时候我们把 script元素放到页面底部作为最优方法。这与页面加载速度有关；当浏览器遇到一个脚本的时候，它会先解析这个脚本并暂停下载和渲染其他剩余页面内容。因此在页面顶部（在其他内容之前）放置大型脚本的时候会导致页面加载缓慢。这就是为什么大多数脚本都应该放在页面底部，这样他们只会在加载完页面之后才会被解析。
ただし、場合によっては (「HTML5 shiv」の使用など)、ブラウザーがページをレンダリングする前にこれらのスクリプトを有効にする必要があるため、これらのスクリプトをドキュメントの先頭に配置する必要があります。