<!doctypehtml><htmllang="en"> </html>
【HTML】汎用HTML5基本テンプレート（翻訳）_html/css_WEB-ITnose
原文。
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 要素
次のセクションは、ページの
セクションです。 head の要素の最初の行は、ドキュメントの文字エンコーディングを定義するために使用されます。これは、XHTML および HTML4 以降のもう 1 つの簡素化された要素であり、オプションの機能ですが、推奨されます。以前は、次のように記述したかもしれません: <!doctypehtml><htmllang="en"> </html>
ログイン後にコピー
<!doctypehtml><htmllang="en"> </html>
HTML5 では、 タグを使用して文字エンコーディング宣言の長さを最小限に抑えることができます:
<metahttp-equiv="Content-Type" content="text/html; charset=utf-8">
ほとんどの場合、utf- が使用されます。使用するドキュメント値として。文字エンコーディングの詳細な分析はこのテキストの範囲を超えているため、興味がないかもしれません。さらに詳しく知りたい場合は、W3C または WHATWG でこのトピックについて読むことができます。
注: エンコーディング宣言
すべてのブラウザが文字エンコーディング タイプを正しく読み取ることができるようにするには、完全な文字エンコーディング宣言全体を 512 個の基本文字を使用してドキュメント内のどこかに記述する必要があります。また、コンテンツの基本要素 (この例の title 要素など) の前にも表示する必要があります。
このトピックについてもっと詳しく書くこともできますが、眠らずに起きていてほしいと思います。したがって、いくつかの詳細は省略しました。現在のところ。私たちのコンテンツはこの単純なステートメントを受け入れ、ドキュメントの残りの部分を続けます:
<metacharset="utf-8">
上記の行では、HTML5 と以前の構文の間にほとんど違いはありません。ページ タイトル (head セクションの唯一の必須要素) は前と同様に宣言されており、この例のメタ タグは、配置方法を示すためのオプションにすぎません。メタ要素は好きなだけ入力できます。
这一部分关键的标记是样式表，用 link元素来表示。对于 link元素只有 href和 rel属性是必需的。而 type属性（在以前的 HTML 中很常见）不仅不再是必须的，而且也不再需要用来表示样式表的内容类型。
Leveling the Playing Field
接下来我们要介绍的元素需要先了解一些背景信息。HTML5 包含许多新的元素，比如 article和 section，将会在以后介绍到。你可能会想这对于旧的浏览器来说可能会造成无法识别元素的问题，但你错了。这是因为大多数的浏览器并不在意你用什么标签。如果你有一个 HTML 文档使用了 recipe标签（甚至 ziggy标签），且你的 CSS 中的某些样式和这个标签相关联了，但是几乎每一个浏览器都会把这当成正常的样式，并且会严格遵守你的样式。
当然，这样一个假设的文档可能会造成无法验证并造成可访问性的问题，但在几乎所有的浏览器中它都能正确呈现，唯一的例外是旧版本的 IE 浏览器。在版本 9 之前，IE 会阻止样式表中的未识别元素。这些神秘的元素会被渲染为“未知元素”，所以你无法改变它们的表现或行为。这不仅包括了我们假想的元素，也包含了开发那个版本浏览器之前未被定义的元素。这意味着 HTML5 中的新元素也无法被识别。
好消息是，在写这篇文章的时候，大多数人已经使用了 IE9 或以上的版本，其中很少人是 IE9，所以对于绝大数开发者来说这不再是问题；但是，如果你的访问者仍然使用 IE8 或之前的版本，你必须采取行动确保你的设计不会崩溃。
幸运的是有一个解决方案：一个由 John Resig 开发的 JavaScript 模板。灵感来自于 Sjoerd Visscher 提出的一个想法，这个模板可以使 HTML5 中的元素兼容旧版本的 IE。
在我们的文档中已经使用 script标签把这个“HTML5 shiv”模板引入，并把 script标签放入了条件语句中。实现条件是只有在 IE9 或之前的浏览器版本才会触发。这些语句提供 浏览器访问特定的样式或脚本的能力。接下来的条件语句告诉浏览器必和标签仅仅只有在用户使用 IE9 之前的浏览器访问时才会显示。
<!--[if lt IE 9]><scriptsrc="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
应该注意的是如果你使用的 JavaScript 库是用 HTML5 新特性或者新 Apis 的话，可能会提示已经存在 HTML5 脚本；这种情况下，你可以移除你脚本的引用。一个例子是 Modernizr，一个 JavaScript 库使用了最新的 HTML 和 CSS 特性。Modernizr 已经提供给你是否允许在 IE 旧版本中使用 HTML5 元素的选项，所以 shiv 会是多余的。我们可以在 Modernizr 的附录 A 中查看。
注意：不是每个人都可以从”HTML5 Shiv“中获益。
当然，还有许多用户无法从“HTML5 Shiv”中获益：那些出于某些原因禁用 JavaScript 并且使用 IE8 或之前版本的用户。作为一个网页开发者，我们应该做到网站中的全部内容应该可以被用户完全访问，甚至在没有 JavaScript 的情况下。但情况可能没有那么糟糕。许多调查表明，那些禁用 JavaScript 的用户数量比例十分低，特别是在那些使用 IE8 或之前版本的用户群体中。
在一份 2013 年 10 月份发表的一份调查中，英国国家数据服务发现那些禁用 JavaScript 或者无法使用的用户比例不到 1.1%。而在 另外一份雅虎开发者网络的调查显示（发表于 2010 年 10 月），全球用户中禁用 JavaScript 的比例在大约接近 1%。
其它历史
现在接下来看我们的初始模板，通常在 html标记后接着的就是 body元素。同时也在 script元素中引用 JavaScritp 脚本。
就像前面提到的 link标记，
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7548
15
1382
52
83
11
22
90
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
