HTMLメモ(1)_html/css_WEB-ITnose

HTML

2015-8-31

HTML HyperText Markup Language (ハイパーテキスト マークアップ言語)

は純粋なテキスト タイプの言語です。 Web ページ上のコンテンツを識別するには、山括弧付きの「タグ」を使用します。

Web ページのデザインに使用されるマークアップ言語

この言語で書かれ、拡張子として .html または .htm が付くファイル

ブラウザによって解釈および実行されます

HTML ページでは、スクリプト言語で書かれたプログラムセグメントをネストできます。例: VBScript、JavaScript

HTML 基本構文

1. マークアップ構文

関数を記述するために使用される HTML 記号は、

、

など、「タグ」と呼ばれます。タグの使用 山かっこ () で囲む必要があります

閉じたタイプのタグと閉じていないタイプのタグがあります

閉じた: 開始と終了を持つペアで表示され、二重タグとも呼ばれます。例:

非閉鎖: 開始のみで終了はなく、単一ラベルとも呼ばれます。例:
、

---

、

2. 要素、つまりタグ

各山括弧で囲まれた部分

例えば、

で囲まれた部分; これは body 要素と呼ばれます

要素は小さなラベルのようなもので、Web ドキュメントのさまざまな部分を識別するために使用されます

要素にはテキスト コンテンツやその他の要素を含めることも、空にすることもできます。前に説明した空のタグ

要素のネスト

要素を相互にネストして、より複雑な構文を形成することができます

注: ネストされたタグの順序に注意してください。コードはインデントされる必要があります。

属性と値 3.

属性は要素を変更するために使用されます

タグ名>

属性の宣言は開始タグに配置する必要があります; 要素には複数の属性が含まれる場合があります。複数の属性の順序は区別されません

各属性には値があります

属性と属性値は等号で接続されます。

これは P

標準属性 (パブリック属性、共通属性):

ほとんどのタグが持つ属性、

例: id (タグの定義) 一意の識別名)

タイトル (現在のラベルが配置されている領域にマウスを移動したときに表示されるテキスト)

クラス (スタイル シート内の指定されたクラス スタイルを参照)

スタイル (現在のラベルのインライン スタイルを定義します)

4. コメント

コメントはドキュメントの編集時にのみ表示され、ブラウザーがページを表示するときには表示されません

適切なコードを追加するのは良いコーディング習慣です。コードにコメントを追加します

コメントを追加するための構文は次のとおりです:

追記: "" の間にあるもの。 " はブラウザに表示されません。コメントを他のコメント内にネストすることはできません。コメントを タグに埋め込むことはできません。

5、HTML および XHTML、HTML5

1999 年 12 月 24 日、W3C は標準 HTML4 を推奨しました。 01

標準

は HTML4.01 とほぼ同じです。HTML のより厳密で純粋なバージョンです

HTML5 の目標は、より簡潔な HTML コードです (厳密な要件はなくなり、互換性が保証されます)

6。 HTML ドキュメントの数

ドキュメント タイプ宣言

ドキュメント全体の要素を含む

ページ ヘッダー

ページの主要部分

-- ---------------------------------------------------- -------

2015-9-01

1.

機能: Web ページのヘッド、主に Web ページの説明情報が含まれます。

① Web ページのタイトル

---タイトル タグには属性がありません。 Web ページには最大でもタイトルしか含めることができません。

② Webページのエンコード形式

デフォルトのエンコード: ISO-8859-1

メタタグ別

m タグ & lt; メタ charset = "utf-8"/& gt;

& & & lt; (JavaScript) スクリプト;script>

⑥外部 js (JavaScript) スクリプトを導入します

⑦キーワード、説明などのその他の要素を宣言します

Web ページの説明とキーワードを追加します。メタ: 一般に、情報を説明するステートメント。

常用属性：http-equiv(编码)  content  name  charset（编码）

添加关键

添加描述  

2、文本标记

作用：文本是网页上的重要部分；直接书写的文本会用浏览器的样式显示；包含在标记中的文本则会被显示为标记所拥有的样式。

特殊字符：通过转义字符(改变了单词的原有的意思，被解释成一种全新的含义)来表示特殊符号.

空格： 

 

 > ：>  大于

 ¥ ：¥  人民币

 ©：©  企业标识

“："  引号

文本样式：对文本进行修饰。

... 加粗

...倾斜

...下划线

...删除线

^...上标

_...下标

 

3、标题元素  

标题元素让文字以醒目的方式显示，旺旺用于文章的标题

 一级标题

 二级标题

.

.

 六级标题

4、段落元素 

P提供了结构化文本的方式，具备一定的格式。

与其他文本用换行区分；添加垂直空白距离，作为段落的间距

P标签的常用属性：align：文本在p标签内的水平对齐方式

                  align=”center/left/right”

5、换行标记 

在任何地方创建手工换行

6、分区元素

多用于布局；方便以后对文本添加不同的样式

块分区元素：该元素会自动占一行

インライン パーティション要素: 多くのインライン要素は折り返されず、1 行で表示されます

7. ブロック レベルの要素とインライン要素

ブロック レベルの要素: div、 p、hr、hn、ol、ul....

関数: Web ページのレイアウトに主に使用されます

インライン要素: span、b、s、u、i、sub、sup....

関数: 周囲テキスト、テキストに効果を追加するのに便利です

8. 分割線

---

機能: Web ページ上に水平線を作成します。空のタグ。ブロックレベルの要素に属します。

よく使用される属性: size: 水平線のサイズ、太さ

width: 水平線の長さ。 (値は特定の値またはパーセンテージにすることができます(ブラウザのサイズに応じて調整できます))

align: 水平方向の配置 (中央、左、右)

color: カラー

9. pre> ;

ソース ファイル内のスペースと改行を保持します

1. 画像とリンク

URL: ネットワーク上のリソースを識別するために使用されます

テキスト、画像、音声ビデオ ファイル、段落、その他のハイパーテキスト

はパスであり、現在の場所からターゲットの場所へのルートを指します

Web ページには主に 3 つの形式のパスがあります:

絶対パス: から始まる完全なファイル最上位ディレクトリのパス

例: E:LXD_silenceHTML5BasicDay01demo01.html。

完全な URL 構成: プロトコル (http://); ホスト名またはドメイン名 (www.baidu.com); ::: Http://www.baidu.com/img/logo.gif

機能: いいえ現在のリソース パスが何であっても、絶対パスを使用して必要なリソースをいつでも見つけることができます。

相対パス: 現在のファイルの場所を基準としたファイルの相対的な場所を指します。これには、ディレクトリ名が含まれるか、現在のディレクトリから始まるファイルが見つかるパスを指します。

同じレベルで名前を使用します。子レベルのディレクトリを入力します。

ルート相対パス: /image/user.jpg

2. 画像要素 を使用します。ページに画像を追加する 要素は空のタグです

属性: src: 画像を表示するパスを指定します

width: 画像の幅

height: 画像の高さ

: 画像上に表示されているテキストにマウスを移動します

alt: 画像が表示されていない場合のテキスト

3. リンク要素

ハイパーリンクを作成するには、 要素を使用します。構文は次のとおりです:

Text

属性: href: リンク URL

target: target、可能な値は _blank (open新しいウィンドウで)、_self (Web ページが配置されているページで開きます)

name: アンカー名

さまざまな形式のリンク:

① ダウンロード リソース: ダウンロード

② ページジャンプ: ウェブページ

③メールリンク: お問い合わせください

> ;

④ ページに戻る空のリンク:

⑤ JavaScript へのリンク: < ;a href=”javascript”>JS

アンカークリック

次の方法でアンカーポイントを定義します: HTMLのアンカーポイントは、HTML文書内の特定の位置にあるマークに相当します

アンカーを定義しますpoint:

アンカーポイントにジャンプ:

他のアンカーポイントにジャンプ: < ;a href=”ページurl#アンカー名”>< ;/a>

2015-9-02

4. テーブル要素

の役割テーブル: 固定フォーマットによる情報のレイアウト。

でテーブルを定義します

行を定義します

列を定義します

(セル)

テーブルに配置されるすべてのコンテンツはtdに配置する必要があります

< ;/table>プロパティ

境界線のプロパティ: 境界線の境界線の幅

bordercolor 境界線の色

サイズ: 幅 幅 高さ 高さ (絶対値またはパーセンテージにすることができます)

背景: bgcolor 背景色 背景画像

詳細: 水平方向の配置を揃えます

セル間隔 セル間の距離 (セルの外側の余白)

cellpaddingセル内のテキストとセルの境界線 (セルの内側の余白) の間の距離

プロパティ

高さ

align セル内のコンテンツ 水平方向の位置 (左/中央/右) )

valign セル内のコンテンツの垂直位置 (上/中/下)

プロパティ

width width height

bgcolor 背景色

align 水平位置揃え valign 垂直位置整列

列の列のスパン

行の行のスパン

属性

タイトルのデフォルトは表の上の中央に配置されます。 table タグの直後

属性

td と同じレベルの列タイトル (th はヘッダー、デフォルトは中央揃えで太字)

行のグループ化

ヘッダー行グループ化: thead

テーブル本体行グループ化: tbody

テーブルフッター行グループ化: tfoot

5. 構造マーク

header ドキュメントヘッダー、ページヘッダー (使用率が高く、同じページで複数回使用可能)

nav ナビゲーションは通常、ページ内のメイン ナビゲーションを作成するために使用されます。

section ドキュメントのセクション。ドキュメントのメイン コンテンツ (頻繁に使用され、複数回使用できます)

aside メイン コンテンツから独立したコンテンツ。サイドバー、サイドナビゲーションなど...

article 文書内で引用されたテキストの段落。記事、投稿、ブログなど...

footer 記事の終わり (頻繁に使用されます)

順序付きリスト:

start リスト項目の開始番号を定義します

リスト項目:

;/li>

順序なしリスト:

属性: ディスク/円/正方形 (実線の円、中空の円、正方形)

スタイル

リスト項目:

• 定義リスト:

  それらのほとんどは、グラフィックとテキストの混合のスタイル効果に表示されます

  定義リスト

  リストタイトル(画像挿入可)

  ① フォームタグ:

(フォームに配置されていないデータはサーバーに送信できません)

属性: action アクション (サーバーサイド開発者による、データを処理するサーバーのプログラムアドレス)

デフォルトでこのページに送信します。)

メソッド フォームがサーバーにデータを送信する方法

(平文または暗号テキスト)、デフォルト値: get

値: post データをサーバーに送信します。暗号文の形式、

転送されるデータの長さに制限なし

Get 平文の形式でサーバーにデータを送信します、

転送されるデータの長さを 2kb に制限します

name の名前を定義しますフォーム

enctype フォームデータのエンコード方法

②フォーム要素(コントロール)

機能: 特にユーザーデータを受け入れるための

1.Input要素

type: type

テキストボックス。ユーザーによる通常のデータ入力を受け入れます

パスワード ボックス。

このコントロールを使用してパスワードを入力します

注: name 属性は一貫している必要があります

機能: フォームをサーバーに送信するために使用されます

リセットボタン。

機能: すべてのフォーム要素をデフォルト値に復元します

2、textarea 複数行テキストフィールド

3、select および option

4、その他の要素