学习html5
23页面结构标签
24 252014年10月29日，万维网联盟宣布，经过几乎8年的艰辛努力，HTML5标准规范终于最终制定完成了，并已公开发布。
3031 而HTML5的草稿版本在13年就已经放出。作为一个有追求的程序猿这次想赶一次潮流学习一下HTML5，并作一次笔记以便日后温故。
32
ホームページ > 記事 > ウェブフロントエンド > HTML5のページ構造を学ぶ(1)_html/css_WEB-ITnose
HTML5のページ構造を学ぶ(1)_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:49:111191ブラウズ
起源
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 標準とは何かを見てみましょう。
いずれかの標準を許可するように HTML テキストを編集する必要があります。そうしないとブラウザが解析します。問題が発生しました。
HTML テキストには通常コンテンツが含まれており、CSS で変更してブラウザーに素晴らしい効果を表示できます。
CSSとは何ですか?
CSS はカスケード スタイルシートです。 Web ページの作成時にカスケード スタイル シート テクノロジを使用すると、ページのレイアウト、フォント、色、背景、その他の効果をより正確に制御できるようになります。
実際、これはデザイン上のアイデア、つまりコンテンツと装飾の分離の結果です。このようにして、異なる変更を使用して、同じコンテンツに対して異なるプレゼンテーション効果を実現できます。 HTML と同様に、CSS にも標準があります。各標準では、表示するコンテンツを正しく変更するためにブラウザーのサポートが必要です。最新はCSS3です。一般に、ブラウザは CSS を変更せずに HTML ファイルを解析する場合、デフォルトのスタイル変更を使用します。
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 ですでにサポートされています。
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 5hello html5 6 7 89 12 20飞车兔
10
1121 22 34 35 3627 这篇文章主要用来介绍html5的页面结构和结构标签28 29 33
ページの効果は以下の通りです
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。