HTML5のページ構造を学ぶ(1)_html/css_WEB-ITnose-htmlチュートリアル-php.cn

起源

2014 年 10 月 29 日、World Wide Web コンソーシアムは、ほぼ 8 年間の努力を経て、HTML5 標準仕様が最終的に完成し、公開されたと発表しました。

HTML5 のドラフト版は 2013 年にリリースされました。プログラマー志望者として、今回はトレンドをキャッチアップして HTML5 について学び、将来の復習のためにメモしておきたいと思います。

基本

「紳士は自分のルーツにこだわり、その原則に従うべきです。」

HTTP とは何ですか?

ハイパーテキスト転送プロトコル (HTTP、ハイパーテキスト転送プロトコル) は、インターネット上で最も広く使用されているネットワークプロトコルです。 TCPをベースにしたプロトコルです。

この定義は少し曖昧ですが、実際、ソケットを書いたことのない多くのプログラマーにとって、この定義を真に理解するのは困難です。実際、この定義の鍵は TCP に基づいており、TCP で送信されるのはバイナリストリームです。通常、このストリームから開始タグ、終了タグ、ヘッダー、ボディなどを取得できます。 HTTP は TCP をベースにしており、一般的に次のようなものがあります。以下の図は、Google Chrome を使用して取得した HTTP リクエストのヘッダー情報です。

写真からわかるように、ヘッダー情報にはリクエストアドレス、リクエストメソッド、リクエストヘッダーなどが含まれます。 http プロトコルのリクエストヘッダーについてさらに詳しく知りたい場合は、この記事「HTTP リクエストヘッダーの詳細な説明」を参照してください。

その体は何ですか？本文はHTMLテキストです。

HTMLとは何ですか?

HTMLはハイパーテキストマークアップ言語と呼ばれ、標準的なユニバーサルマークアップ言語の1つであり、主にインターネットで使用されています。プログラマが毎日書くページは、それが JSP であれ php であれ、最終的には完全な HTML テキストに組み立てられ、ブラウザに渡され、HTML 標準に従ってテキストが解析され、ページ上に素晴らしいコンテンツが表示されます。

それでは、HTML 標準とは何かを見てみましょう。

ハイパーテキストマークアップ言語 (最初のバージョン)?? 1993 年 6 月に Internet Engineering Task Force (IETF) のワーキングドラフトとして発行されました (標準ではありません):

HTML 2.0?? 1995 年 11 月に RFC 1866 として発行されました。 2000 年 6 月のリリース以降廃止されたと宣言されました

HTML 3.2?? 1997 年 1 月 14 日、W3C 勧告

HTML 4.0?? 1997 年 12 月 18 日、W3C 勧告

HTML 4.01 (マイナーな改良)??推奨標準

HTML 5?? 2014 年 10 月 28 日、W3C 推奨標準

いずれかの標準を許可するように HTML テキストを編集する必要があります。そうしないとブラウザが解析します。問題が発生しました。

HTML テキストには通常コンテンツが含まれており、CSS で変更してブラウザーに素晴らしい効果を表示できます。

CSSとは何ですか?

CSS はカスケードスタイルシートです。 Web ページの作成時にカスケードスタイルシートテクノロジを使用すると、ページのレイアウト、フォント、色、背景、その他の効果をより正確に制御できるようになります。

実際、これはデザイン上のアイデア、つまりコンテンツと装飾の分離の結果です。このようにして、異なる変更を使用して、同じコンテンツに対して異なるプレゼンテーション効果を実現できます。 HTML と同様に、CSS にも標準があります。各標準では、表示するコンテンツを正しく変更するためにブラウザーのサポートが必要です。最新はCSS3です。一般に、ブラウザは CSS を変更せずに HTML ファイルを解析する場合、デフォルトのスタイル変更を使用します。

CSS 1--1996 年 12 月 17 日、W3C 推奨標準

CSS 2--1999 年 1 月 11 日、W3C 推奨標準

CSS 3--2001 年 5 月 21 日

CSS に加えて、次のことができます。 HTML テキストを変更するだけでなく、HTML や CSS を動的に変更できるページスクリプト言語もあります。一般的なスクリプト言語には JavaScript が含まれます。

JavaScriptとは何ですか?

JavaScript はリテラルのスクリプト言語であり、型のサポートが組み込まれた、動的に型付けされた弱い型付けのプロトタイプベースの言語です。そのインタプリタは JavaScript エンジンと呼ばれ、ブラウザの一部であり、クライアント側のスクリプト言語で広く使用されています。これは、HTML Web ページに動的機能を追加するために HTML (標準ユニバーサルマークアップ言語に基づくアプリケーション) で最初に使用されました。。 JavaScript によって実装されたフレームワークである Node.js は、すでにサーバー側プログラミングのサポートを開始しています。 JavaScript は、以前の HTML と同様、ブラウザーのサポートを必要とし、そうでない場合は実行されません。現在、ブラウザーは依然として JavaScript バージョン 1.5 を広くサポートしています。最新の JavaScript はバージョン 1.8.5 で、Firefox 4、IE9、Opera11 ですでにサポートされています。

JavaScript 1.0 1996年3月

JavaScript 1.1 1996年8月

JavaScript 1.2 1997年6月

JavaScript 1.3 1998年10月

JavaScript 1.4

JavaScript 1.5 2000年11月

JavaScript 1.6 2005 年 11 月

JavaScript 1.7 2006 年 10 月

JavaScript 1.8 June 2008

JavaScript 1.8.1

JavaScript 1.8.2 June 22, 2009

JavaScript 1.8.5 July 27, 2010

HTML5 ページ構造についてここまで書いてきたので、いよいよコードの入力を開始します。

DOCTYPE宣言

DOCTYPEはドキュメントタイプの略称です。主に、使用している XHTML または HTML のバージョンを示すために使用されます。ブラウザは、DOCTYPE で定義された DTD (Document Type Definition) に従ってページコードを解釈します。 HTML4は一般的にこのように書かれます

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

ログイン後にコピー

は、現在のページが html4 の移行ページであることを示します。移行スタイルの主な目的は、カスケードスタイルシート (CSS) をサポートしていないブラウザと互換性を持たせることです。厳密な DOCTYPE 宣言とフレーム化された DOCTYPE 宣言についても同様です。

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">

ログイン後にコピー

プレゼンテーション層を乱雑にせずにクリーンなマークアップが必要な場合は、この厳密な宣言を使用します。このタイプはカスケードスタイルシート (CSS) で使用する必要があり、一部の古いブラウザでは必要な効果をレンダリングできない可能性があるため、このタイプは通常は使用されません。

1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

ログイン後にコピー

Frame タイプは主に、frameset タグなどを使用してページをさまざまな領域に分割するために使用されます。このステートメントは IE ブラウザでより適切にサポートされます。 Java言語によって生成されるjavaDoc内のindex.htmlファイルは、このステートメントです。

html4 の DOCTYPE と比較すると、html5 の DOCTYPE は非常に単純です。以下は html5 の DOCTYPE 宣言です。

1 <!DOCTYPE html>

ログイン後にコピー

単純すぎて、5 すらなく、HTML では 6 を生成できないように感じます。

文字エンコーディングの宣言

以前のhtml4はこうでした

1 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

ログイン後にコピー

今のhtml5はこうです

1 <meta charset="UTF-8">

ログイン後にコピー

レイアウトに使うタグ

以前のhtml4では一般的にページコンテンツを整理する div レイアウトを作成します。 HTML5では、レイアウトに特化したタグがいくつか追加されています。

section は div を完全に置き換えて、領域を表すために使用できます。

article は、記事とコメントをマークするために使用されます。

aside は補足を示すために使用されます。

ヘッダーは、ページの先頭をマークするために使用されます。たとえば、ロゴ情報がこの列にあります。

フッターは、たとえば、著作権に関する記述がこの列にあることを示すために使用されます。

hgroup は通常、タイトルグループをマークするためにヘッダーの後に使用されます。これは、記事のメインタイトルとサブタイトルが全体としてマークされることを意味します。

nav は、ウェブサイトのナビゲーションバーをマークするために使用されます。

もちろん、div は HTML5 でもサポートされていますが、新しい構造タグを使用すると、検索エンジンにとってより使いやすくなります。さらに、ページ開発者はタグの役割を簡単に理解できます。これらのタグを使用した完全な例を見てみましょう。

 1 <!DOCTYPE html> 2  3  4  5 hello html5 6  7  8      9         飞车兔
10         
11     
12     13         首页|14         随笔|15         新随笔|16         联系|17         订阅|18         管理19     
20     21         22             学习html5
23             页面结构标签
24         25         27             这篇文章主要用来介绍html5的页面结构和结构标签28         29             2014年10月29日，万维网联盟宣布，经过几乎8年的艰辛努力，HTML5标准规范终于最终制定完成了，并已公开发布。
30             31                 而HTML5的草稿版本在13年就已经放出。作为一个有追求的程序猿这次想赶一次潮流学习一下HTML5，并作一次笔记以便日后温故。
32         
33     
34      ©2015-飞车兔工作室版权所有
35 36

ログイン後にコピー

ページの効果は以下の通りです