html + CSS_html/css_WEB-ITnose-htmlチュートリアル-php.cn

Html

1 htmlの基本タグ

1.1 HTMLファイル構造

無題ドキュメント

1.1.1 DOCTYPE

定義と使用法

宣言は次のようにする必要があります。 HTML ドキュメントの最初の行, タグの前。

宣言は HTML タグではなく、ページをどのバージョンで記述するかについて Web ブラウザーに指示するものです。

HTML 4.01 は SGML に基づいているため、HTML 4.01 では宣言は DTD を参照します。 DTD は、ブラウザーがコンテンツを正しく表示できるようにマークアップ言語のルールを指定します。

(標準汎用マークアップ言語

(SGML、標準汎用マークアップ言語)

)

ヒント: ブラウザーがドキュメントタイプを認識できるように、HTML ドキュメントに常に宣言を追加してください。 HTML要素とドキュメントタイプ(Doctype)

HTML 4.01

"http://www.w3.org/TR/html4/loose.dtd">

この DTD は HTML 4.01 Transitional と同等ですが、フレームセットコンテンツを許可します。

"http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

この DTD には、プレゼンテーション要素や非推奨の要素 (フォントなど) を含む、すべての HTML 要素と属性が含まれています。フレームセットは許可されません。

"http://www.w3.org/TR/html4/loose.dtd">

この DTD は XHTML 1.0 Transitional と同等ですが、フレームセットコンテンツを許可します。

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

HTML 5

各要素が出現するドキュメントタイプをリストした HTML 要素の表を参照してください。

ヒントとメモ

注: は終了タグを宣言していません。

ヒント: 宣言では大文字と小文字が区別されません。

ヒント: W3C のバリデーターを使用して、有効な HTML/XHTML ドキュメントを作成したかどうかを確認してください。

XHTML 1.1

この DTD は XHTML 1.0 Strict と同等ですが、追加のモデル (東アジア言語の Ruby サポートの提供など) が可能です。

XHTML1。 0はHTML4.01の改訂版とされるHTML4.0を再編したもので、XHTML1.0としてリリースされています。

1. すべてのラベル要素名は小文字です

2. ペアになっていない空のタグはすべて />、

で終わる必要があります

3. ターゲットは許可されませんただし、XHTML1.0 は許可されていないため、target="new)

4. すべての属性には値が必要です。XHTML1.0 では、すべての属性に値が必要であると規定されています。そうでない場合は、それを繰り返す必要があります。属性

5. すべての < および & 特殊記号を表すにはエンコーディングを使用します

7. 二重引用符または一重引用符は省略できません

9. 画像タグに alt="description" を追加します

10. 正しいタグ順序

11. XHTML 1.0 ファイルカテゴリ宣言の正しい書き方

W3C標準テストURL http://validator.w3.org/

Webページ自動テストURL http://validator.w3.org/check?uri=referer

「16.ファイルタイプ宣言」とテスト時に指定ファイルエンコーディング

1.1.2 meta

検索エンジンの説明やキーワード、更新頻度など、ページのメタ情報に関する情報を提供します。

タグはドキュメントの先頭にあり、コンテンツは含まれません。タグのプロパティは、ドキュメントに関連付けられた名前と値のペアを定義します。

ヒントとメモ:

注: タグは常に head 要素内にあります。

注: メタデータは常に名前と値のペアで渡されます。

属性

価値

厳密

移行型遷移タイプ

フレームセット

この DTD にはすべての HTML 要素が含まれていますおよび属性。ただし、表示要素や非推奨の要素 (フォントなど) は除きます。フレームセットは許可されません。

この DTD には次の内容が含まれていますプレゼンテーション要素や非推奨要素 (フォントなど) を含む、すべての HTML 要素と属性。フレームセットは許可されません。

この DTD には、すべての HTML 要素と属性が含まれていますが、プレゼンテーション要素や非推奨の要素 (フォントなど) は含まれません。フレームセットは許可されません。マークアップは整形式の XML で記述する必要があります。

http-equivexpires説明

説明

content-type

refresh

set-cookie

content 属性を HTTP ヘッダーに関連付けます。 content 属性は名前に関連付けられます。

名前

著者

キーワード

ジェネレーター

改訂

その他

content 属性は名前に関連付けられます。

1.1.3 xmlns

xmlns は、XML 名前空間である xml 名前空間の略称で、文書内に 1 つ以上の代替名前空間を定義できます。この属性は、ドキュメント内の任意の要素の開始タグに配置できます。この属性の値は URL に似ており、属性が配置されている要素内のすべてのコンテンツに対してブラウザが使用する名前空間を定義します。

なぜこの xmlns が必要なのでしょうか? たとえば、xhtml では、異なる DTD ファイルを使用することができます。この場合、同じロゴが含まれる可能性があります。ロゴの競合の問題については、xmlns を使用すると、異なるファイル内の同じマークを区別できます。たとえば、a.dtd と b.dtd の両方にテーブルが含まれている場合、xhtml ファイルに両方の dtd ファイルが含まれている場合は、If ロゴを使用します。テーブルが削除されると、ロゴの競合の問題が発生します。ロゴの競合の問題を解決するには、次のように xmlns を使用します:

この方法では、次のことができますどの dtd ファイルが使用されているかをフラグで区別します。

定義によれば、名前空間を識別するために使用されるネットワークアドレスは、XML パーサーによって呼び出されません。このネットワークアドレスの機能は必要ありません。スペースの一意の名前を付けるだけなので、このネットワークアドレスは仮想にすることもできます。それでは、ブラウザの場合、どの dtd ファイル a:table... にシンボルを含めるべきかを知るにはどうすればよいでしょうか? xmlns 値は、各 XML dtd ファイルで指定する必要があります。dtd ファイルの xmlns 値が xhtml の値と等しい場合、一致するとみなされます。

1.1.4 html

ルートノード

1.1.5 head

ヘッドノード

1.1.6 body

Webページのテーマ部分

1.2 ブロックレベルのタグ

: 存在することを指します一般的なブロックレベルの要素は改行で区切られます (段落の終わりの後の新しい行の開始など)。 h1>

gt;

1.2.2 p

1.2.3 hr

1. 2.4 オルリー

1.2.5 ul li

1.2 .6 dl dt dd

1.2.7 table

& lt;td> < ;/td>

gt;& nbsp;

8から

< ;form action="form_action.asp"method="get">

名:

プロパティ

価値

説明

action

url

フォーム送信時の移動先を指定します。フォームデータを送信します。

;

enctype?multipart/form-data?text/plainmethodSubmission Methodフォーム名ターゲット_blank_parent

	(EncodeType)	?application/x-www-form-urlencoded
	送信フォームに記載以前のデータのエンコード方法
get/post	name
		_自分
アクション URL を開く場所を指定します。

値	説明
application/x-www-form-urlencoded	送信前にすべての文字をエンコードする (デフォルト)
multipart/form-data	文字をエンコードしません。ファイルアップロードコントロールを含むフォームを使用する場合は、この値を使用する必要があります。
text/plain	特殊文字をエンコードしません。

GET メソッド GET メソッドを使用して取得されたデータの後に、デフォルトでキャッシュされないのはこのためです。最大変数値: 適用機会:

プロパティ

GETメソッド

POSTメソッド

履歴:

通常、データは GET メソッドを使用して送信されますURL の一部はブラウザによって保存されます

POST メソッドを使用して送信されたデータは URL の一部ではなく、ブラウザによって保存されることはありません。

ブックマーク:

GET メソッドはブラウザによってブックマークとして保存される場合があります

POST メソッドは保存されません

ロールバックして再送信:

GET メソッドを使用するページは、ユーザーに通知せずにロールバックして再実行できます

POST メソッドは、ユーザーに再送信するように通知します

フォームエンコーディングタイプ:

GETSubmit データのみをサポートします

POST は application/x-www-form-urlencoded と multipart/form-data をサポートします

application/x -www -form-urlencoded

パラメータ:

GETパラメータは通常URLに従うため、サポートされるデータサイズは通常2Kで、一部のサーバーは最大64Kをサポートできます。これが、多くの Web ページが 64K を超えるとクラッシュする本当の理由です。サーバー制限のため。

パラメータを送信します。理論上、サイズに制限はありません。

攻撃対象:

GET メソッドによって送信されたデータは、ハッカーによって簡単に攻撃され、スクリプト誘拐が実装されます。

POST メソッドは GET メソッドに比べてハッキングされにくい

データ型の制限:

GET メソッドによって送信されるデータはテキストデータのみです

POSTメソッドのルール無制限、バイナリファイルも利用可能です。

セキュリティ:

データが URL の一部として表示されるため、GET メソッドは POST メソッドよりも安全性が低くなります。そしてブラウザによるアクセス履歴として保存されます。

POST メソッドの安全性は GET メソッドよりも高くなります。パラメータデータは、URL の一部としてブラウザによるアクセス履歴記録に保存できないためです。

フォームデータの長さ:

フォームデータは URL の一部であるため、通常、URL の長さは制限されています。

POST メソッドに制限はありません。

利用可能状況:

GET メソッドは通常、パスワードや機密情報の送信には使用されません。しかし、ログインの実装に GET を使用している Web サイトがまだたくさんあることがわかりました。たとえば、XXXX コミュニティは、ログインメソッドを jquery 補完 JavaScript スクリプトに組み込み、GET リクエストを使用してそれを完了します。

POST メソッドは、パスワードやその他の機密情報を送信するために使用できます。

可視性:

GET メソッドは誰にでも表示されます

POST メソッドの変数は URL に表示されません

キャッシュ:

Cache-Control または Expires 属性値が応答ヘッダーに設定されていない限り。

GET は最大値 7607 文字をサポートします

POST メソッドは最大値 8MB をサポートします

GET が最も一般的に使用される機会は、GET メソッドを通じて Web ページを取得することです。また、ほとんどのブラウザのダウンロードでは、主にサーバーにデータを送信するために GET メソッドが使用されます。

1.2.9 div

1.3 行レベルのタグ

は、他のブロックレベルの要素の存在を参照し、ラップせずに接続された要素の間に直接表示されます。

2 つの属性

高さ px %

幅

1.3.2 スパン

あるテキスト。他のテキスト。

1.3.3 br

1.3.4 a

ハイパーリンク

_blank

_new

_parent

_self

_top

framename

ルールはどこですか

アンカーリンク

メール

1.3.5 input

type

+ファイルアップロードフォームデータを送信

+ 通常ボタン

function

例

text

単一行テキスト入力

パスワード

パスワード

ラジオ

単一選択

男性

女性

checkbox

多肢選択

book

< input type="reset" value="Reset" />

file

submit

ボタン

1.3.6 textarea

 文本内容 

1.3.7 select

1.4 w3c标准

1.4.1 内容和表现分离

1.4.2 内容结构要求语义化

1.4.3 遵循xhtml1.0的规范

1.5 a标签

参阅: a

1.6 注释特殊符号

空格：

大于(>)：>

小于(<）: <

引号（”）："

版权号() ：©

1.7 表单

参阅: from

2 表格

2.1 表格基础

参阅: table

2.2 跨行

跨行使用的是rowspan

2.3 夸列

跨行使用的是colspan

2.4 表格布局

表格布局一般用于数据展示页

和表单页面

3 框架

什么是框架?

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。

框架用途?

在同一个浏览器窗口显示多个页面

可以实现复用

实现典型的目录结构

框架分为哪两种类型

3.1 frameset

特点

结构清晰

两种

列

行

< ;noframes>お使いのブラウザはフレームを処理できません。

プロパティ

プロパティ	値	説明
frameborder	0,1	フレームの周囲に枠線を表示するかどうかを指定します。
name	name	フレームワークの名前を指定します。
noresize	noresize	フレームのサイズを変更できないことを指定します。
scrolling	yes no auto	フレーム内にスクロールバーを表示するかどうかを指定します。

3.2 IFrame

frameborder="border"scrolling="no" />

プロパティframeborder高さ%幅%srcscrollingno

値

説明

0 ,1

フレームの周囲に枠線を表示するかどうかを指定します。

ピクセル

高さ

ピクセル

幅

URL

Path

yes

auto

フレーム内にスクロールバーを表示します。

3.3 a

参照: a

4 CSS スタイルシート

CSS の使用

CSSは使用されません

4.1 CSSとは

CSSはカスケードスタイルですテーブル (カスケードスタイルシート)

4.2 CSS を使用する理由

1. チーム開発に有益なコンテンツとスタイルの分離を実現するため

2. 正確な制御を実現するため。ページの

4. 検索エンジンにさらに適合

4.3 css バージョン

css

CSS3 は CSS2.0 テクノロジーのアップグレードバージョンであり、CSS3 言語開発はモジュール化に向けて開発されています。以前の仕様はモジュールとして大きすぎて複雑だったので、より小さなモジュールに分割され、さらに新しいモジュールが追加されました。これらのモジュールには、ボックスモデル、リストモジュール、ハイパーリンクメソッド、言語モジュール、背景と境界線、テキスト効果、複数列レイアウトなどが含まれます。

最も重要な CSS3 モジュールには以下が含まれます:

セレクター

ボックスモデル

背景と境界線

テキスト効果

2D/3D変換

アニメーション

複数列レイアウト

ユーザーインターフェース

4.4 方法css を書く

css スタイルシート

4.11 一般的なレイアウト