ホームページ ウェブフロントエンド H5 チュートリアル HTML5標準学習~文書構造を詳しく解説

HTML5標準学習~文書構造を詳しく解説

Mar 27, 2017 pm 03:34 PM

HTML の構造について言えば、多くの人はそれを明確に説明できます。一般的に、その答えは次のようになります。

DOCTYPE、つまり head 要素と body 要素が含まれる html。

もちろんこれが間違っているとは言えませんが、HTMLソースファイルに最低限何を含める必要があるかと問われれば、正確に答えられる人は少ないのではないかと思います。

最初にこの質問に答えましょう。最も単純な HTML5 ソース コード ファイルに必要な内容は次のとおりです。

<!DOCTYPE html>
ログイン後にコピー

はい、それだけです。ただし、場合によっては 1 文字がそれ以上であることも、1 文字がそれ以下であることもありません。その他の内容は変更できません。

それでは、最も単純なソース コード ファイルに doctype 宣言が必要となるルールは何でしょうか?標準によれば、HTML ドキュメントは次のコンテンツ (厳密に順序どおり) で構成されます:

  1. BOM タグ。この BOM タグは U+FEFF である必要があります。

  2. 0-n スペースまたはコメント。

  3. DOCTYPE ステートメント。

  4. 0-n スペースまたはコメント。

  5. HTML要素。

  6. 0-n スペースまたはコメント。

HTML4 とはいくつかの違いがあります。HTML4 の最も単純なソース コード ファイルは次のとおりです:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                      "http://www.w3.org/TR/html4/loose.dtd">
<title>这里是标题</title>
ログイン後にコピー

2 つの違いは明らかです:

  • HTML5 は DOCTYPE をより単純な <! に変更します。 DOCTYPE html>、これはすでによく知られています。 &lt;!DOCTYPE html&gt;,这个已经众所周知了。

  • 在HTML4中多了一个<title>标签。

这里的重点就是<title>标签了,关于这个标签,在HTML4.01标准中是这么说的:

Every HTML document must have a TITLE element in the HEAD section.

也即是说,HTML4要求<title>标签是必须存在的。

而在HTML5的标准中,又是这么说的:

There must be no more than one title element per document.

HTML5中只设定了<title>标签数量的上限,却没有指明下限,也就是说,没有<title>的文档已经被视为一个合法的文档了。

对于DOCTYPE,HTML4中设定了6种DOCTYPE,HTML5中将DOCTYPE分为3种,这个在以后的章节中再具体说明。

再回过来看一下文档组成,除去这样并没有多大意义的元素之外,组成的列表中还说明有一个HTML元素,但是最简的源码中却没有这东西。这是因为在HTML的规范中,一直存在“隐式标签”这样的概念,关于隐式标签,大致可以这么解释:

一部分元素,当满足特定的前提条件时,其开始标签或结束标签可以在源码中省略。在这种情况下,被省略的标签称为“隐式标签”。

需要注意的是,此处的省略指的是在源码中省略,而在最终成型的DOM树中,这个标签是存在的,因此才称为隐式标签。因此上面最简的源码结构,在生成DOM树后,其真正的结构是这样的:

&lt;!DOCTYPE html&gt;
<html>
    
    
ログイン後にコピー

最后,再总结一下XHTML中的一些规范:

  • 因为是XML,所以为了表示这是一个HTML文档,必须有一个命名空间,其值为www.w3.org/1999/xhtml

  • 因为是XML,所以MIME type不能是text/html了,text/xmlapplication/xmlapplication/xml+html都是比较好的选择。

  • 因为是XML,必须有根元素,根元素为<html>,即<html>

  • HTML4 には追加の <title> タグがあります。

  • ここで重要な点は <title> タグについて、HTML4.01 標準では次のように規定されています。

  • すべての HTML ドキュメントには HEAD セクションに TITLE 要素が必要です。

つまり、HTML4 では、<title> タグが存在する必要があります。


そして HTML5 標準では、次のように規定されています:

🎜🎜 ドキュメントごとに複数のタイトル要素が存在してはなりません。🎜🎜🎜 HTML5 では、<title> のみが設定されます。タグの数は指定されていません。つまり、<title> のない文書は合法的な文書とみなされます。 🎜🎜DOCTYPEについては、HTML4では6種類のDOCTYPEが設定されていますが、HTML5ではDOCTYPEが3種類に分かれています。これについては後章で詳しく説明します。 🎜🎜 ドキュメントの構成に戻って見てみましょう。あまり意味のない要素以外にも、構成されたリストには HTML 要素があることが示されていますが、最も単純なソース コードにはそのような要素はありません。これは、HTML 仕様には常に「暗黙的タグ」という概念が存在するためです。暗黙的タグについては、次のように大まかに説明できます。 🎜🎜🎜一部の要素は、特定の前提条件が満たされると、その開始タグまたは終了タグになります。ソースコードでは省略可能。この場合、省略されたタグを「暗黙タグ」と呼びます。 🎜🎜🎜ここでの省略はソースコード内での省略を指しますが、最終的なDOMツリーではこのタグが存在するため隠し式と呼ばれることに注意してください。鬼ごっこ。したがって、上記の最も単純なソース コード構造は、DOM ツリーを生成した後、実際の構造は次のようになります: 🎜rrreee🎜最後に、XHTML の仕様の一部を要約しましょう: 🎜🎜🎜🎜これは XML🎜 なので、これが HTML ドキュメントであることを示すためには、名前空間 🎜、その値は www.w3.org/1999/xhtml です。 🎜🎜🎜🎜XML であるため、MIME タイプを text/htmltext/xmlapplication/xml にすることはできません。 application/xml+html は両方ともより良い選択肢です。 🎜🎜🎜🎜XML であるため、ルート要素が必要です。ルート要素は <html>、つまり、<html> の開始タグと終了タグです。 code>は省略できません。 🎜🎜🎜🎜XML であるため、すべての要素に開始タグがある限り、終了タグや自己終了タグを持つことはできません。 🎜🎜🎜🎜XML であるため、すべての要素は大文字と小文字を厳密に準拠する必要があり、要素名は小文字である必要があります。 🎜🎜🎜🎜XMLなので文書がより厳密になり、XMLなので読みやすさや標準化もかなり進みました。しかし、最終的には、HTML の許容性と XML の標準化の間で最適なバランスを常に見つける必要があります。盲目的に極端さを追求するのは常に間違いです。 🎜🎜🎜🎜

以上がHTML5標準学習~文書構造を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

See all articles