ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5 学習メモの簡潔版 (1): HTML5 の概要と構文

HTML5 学習メモの簡潔版 (1): HTML5 の概要と構文

黄舟
黄舟オリジナル
2017-01-21 16:28:421338ブラウズ

HTML5 の概要

HTML5 は、HTML4 の後の次世代の HTML 標準仕様であり、いくつかの新しい要素と属性 (c787b9a589a3ece771e842a6176cf8e9 ウェブサイト ナビゲーション ブロックや c37f8231a37e88427e62669260f0074d など) を提供します。新しいタグは、検索エンジンとセマンティック分析にとって有益であり、小さな画面のデバイスや視覚障害のある人がそれらを使用するのにさらに役立ちます。 ; 要約すると、次の主な機能があります:

HTML4 の一部の古い要素タグと属性タグをキャンセルします

CSS で置き換えられた 240cb830ca84ebaabbd07850110b414d や bacbf9e1ad7f40415ce1670e31edfee3 などの純粋に表示効果のためのタグを含みます。 HTML5 は、ドキュメント構造を改善するためのいくつかの機能を含む、XHTML2 からのいくつかの提案を吸収しています。たとえば、新しい HTML タグのヘッダー、フッター、ダイアログ、サイド、図などを使用することで、コンテンツ作成者はより意味的にドキュメントを作成できるようになります。通常、これらの関数を実装する場合は div を使用します。

コンテンツと表示の分離

b タグと i タグは引き続き保持されますが、その意味は以前とは異なります。これらのタグの意味は、テキストの一部を識別することだけであり、テキストに太字や斜体のスタイルを設定することではありません。 u、font、center、および Strike のタグは完全に削除されました。

いくつかの新しいフォーム入力オブジェクトを追加しました

日付、URL、電子メールアドレス、その他のオブジェクトを含む、非ラテン文字のサポートが追加されました。 HTML5 では、コンテンツに機械可読タグで注釈を付ける方法であるマイクロデータも導入されており、セマンティック Web の処理が容易になります。全体として、これらの構造関連の改善により、コンテンツ作成者は、検索エンジンや画面読み取りソフトウェアなどにとってより使いやすい、よりクリーンで管理しやすい Web ページを作成できるようになります。

より合理的な新しいタグ

マルチメディア オブジェクトはすべてオブジェクトまたは埋め込みタグにバインドされなくなりますが、ビデオにはビデオ タグがあり、オーディオにはオーディオ タグが含まれます。

ローカル ストレージ

この機能はローカル SQL データベースを埋め込み、対話型の検索、キャッシュ、インデックス作成機能を高速化します。同時に、オフラインの Web プログラムもこれによって大きな恩恵を受けることになります。プラグインを必要としない豊富なアニメーション。

Canvas オブジェクト

を使用すると、ベクター グラフィックスをブラウザー上に直接描画できるようになります。これは、ユーザーが Flash や Silverlight から離れて、ブラウザー内でグラフィックスやアニメーションを直接表示できることを意味します。

新しい API 拡張機能

新しい API 拡張機能が HTMLDocument インターフェイスと HTMLElement インターフェイスに提供されています。

HTML5 は Flash と Silverlight を置き換えます

構文

1 ドキュメント メディア タイプ

HTML5 で定義された HTML 構文のほとんどは HTML4 および XHTML1 と互換性がありますが、一部は互換性がありません。ほとんどの HTML ドキュメントは text/html メディア タイプとして保存されます。

HTML5 では、HTML 構文の詳細な解析ルール (エラー処理を含む) が定義されており、ユーザーはテキスト/HTML メディア タイプとして保存するためにこれらのルールに従う必要があります。以下は、HTML 構文仕様に準拠する例です。

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
  </body>
</html>

HTML5 は、信頼できないコンテンツをホストできるように、HTML 構文の text/html サンドボックス メディア タイプも定義します。

HTML5 で使用できるその他の構文は、XHTML1 と互換性のある XML です。 XML 構文を使用する場合は、ドキュメントを XML メディア タイプとして保存し、XML 仕様に従ってネームスペースを http://www.w3.org/1999/xhtml に設定する必要があります。

以下のサンプルドキュメントは、HTML5 の XML 構文仕様に準拠しています。XML ドキュメントは、application/xhtml+xml や application/xml などの XML メディア タイプとして保存する必要があることに注意してください。

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
  </body>
</html>

2 文字エンコーディング

HTML5的HTML语法里,有三种形式可以声明字符串的encoding类型:

在传输级别(transport level)上,在HTTP实例的header里设置Content-Type。

在文件的开头设置一个Unicode的Byte Order Mark(BOM),该字符为文件的encoding方式提供了一个签名。

在文档的前1024个byte之前的内容里,使用带有charset属性的meta元素来声明encoding方式。例如:0d94b2dad07259293dd606022eaa23d8表明该文档是UTF-8格式的。它是替换原有的8d29369bdb665a142cf8029391b2aae6语法声明,尽管原有的语法依然可用,但在HTML5里不推荐使用。

对于HTML5里的XML语法,依然和以前的XML语法声明式一样的。

3 DOCTYPE

HTML5的HTML语法要求文档必须声明DOCTYPE以确保浏览器可以在标准模式下展示页面。这个DOCTYPE没有其它的目的,并且在XML里是可选项,因为XML媒体格式的文档一直就是在标准模式下处理的。

DOCTYPE的声明方式是8b05045a5be5764f313ed5b9168a17e6,不区分大小写。HTML的早期版本声明的DOCTYPE需要很长是因为HTML语言是建立在SGML的基础上,所以需要关联引用一个相对应的DTD。HTML5和之前的版本不一样了,仅仅需要声明DOCTYPE就可以告诉文档启用的是HTML5语法标准了,浏览器会为8b05045a5be5764f313ed5b9168a17e6做剩余的工作的。

4 MathML和SVG

HTML5的HTML语法允许在文档里使用MathML(数学标记语言)和SVG(可伸缩矢量图)元素。例如,一个非常简单的HTML页面包含一个svg元素画出的圆:

<!doctype html>
<title>SVG in text/html</title>
<p>
 A green circle:
 <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>
</p>

更多复杂的组合标记也是支持的,比如使用svg的foreignObject元素你可以嵌套MathML, HTML,或者自身嵌套。

5 其它

HTML5已经原生支持IRI了,尽管这些IRI只能在UTF-8和UTF-16的文档里使用。

lang属性如果设置的不合法,将会更新为空字符串,以告诉浏览器是一个未知的语言,作用和XML里的xml:lang一样。

以上就是HTML5学习笔记简明版(1):HTML5介绍与语法 的内容,更多相关内容请关注PHP中文网(www.php.cn)!


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