2019 webフロントエンドチュートリアル学習ルート、HTML 5のラベルと文法
4722 ワード
ここ2年来、フロントエンドの開発エンジニアはますます火をつけて、給料の待遇ももうすぐバックエンドの開発エンジニアに近づきます.2019年が来て、フロントエンドの開発エンジニアに入る準備をしている多くの仲間たちは、準備がどうなっているのか分かりません.ある小さい仲間はとても迷って、先端を学びたいですが、方向がありません!今日は、2019年に先端開発を学び、どのようにして先端開発を効率的に学ぶことができますか?
HTML基本構造とHTML基本構文
HTMLの基本構造
HTMLの基本文法
1、
タグ>
タグはタグまたはエレメントとも呼ばれます
例:
2.空のタグ
例:
説明:
1.<>に書かれた最初の単語をタグ、ラベル、要素と呼びます.
2.タグと属性はスペースで区切られ、属性と属性値は等号で接続され、属性値は「」号内に置かなければならない.
3.1つのタグは属性がなくても複数の属性があってもよく、属性と属性の間には前後の順序がない.
4.空のタグは終了ラベルがなく、代わりに「/」を使用します.
五、HTML常用タグ
1、テキストタイトル(h 1-h 6)
LOGO
二級タイトル
三級タイトルH 3
四級タイトルH 4
レベル5
レベル6
注意:テキストタイトルラベルには太字が付いており、独自のテキストサイズがあり、行を独占し、デフォルトの間隔があります.
2、段落テキスト§
段落テキストの内容
段落の識別(段落と段落の間隔)
3、スペース
位置に決定する値はなく、現在のフォント番号に関係する.
4、改行(br)
改行は空のタグです(強制改行)
5、水平線
空のタグ
6、太字には2つのマークがあります
A、太くする内容は太く表示するだけ
B、強調された内容が強調されたテキスト
7、傾斜
強調テキスト
傾斜テキスト
8、拡張
テキストの下線
テキスト削除線
テキスト削除線
下付き文字
上付き文字
9、リスト(ul,ol,dl)
HTMLには、無秩序リスト、秩序リスト、カスタムリストの3つのリストがあります
*無秩序リスト
無秩序リストの構成:
(unordered list)
．．．．．．
*順序付きリスト
順序リストの構成:
(ordered list)
．．．．．．
*カスタムリスト
(definition list)
名詞
説明する
(definition description)
．．．．．．
知識拡張2----整列リストのプロパティ
1)、type:リスト内のリスト項目の項目記号の種類を規定する
構文:
1数字順には、シーケンステーブル(デフォルト)(1,2,3,4)があります.
aアルファベット順にはシーケンステーブル,小文字(a,b,c,d)がある.
Aアルファベット順はシーケンステーブル、大文字(A,B,C,D)
iローマ数字、小文字(i,ii,iii,iv).
Iローマ数字、大文字(I,ii,iii,iv).
2)、start属性には、シーケンステーブルの開始点が規定されています.
構文:
10、画像を挿入する
注意:挿入する画像はサイトの下に置く必要があります.
titleの役割:画像のタイトル;この画像にマウスを置くと小さなヒントが表示され、マウスが離れるとなくなります.HTMLのほとんどのラベルはtitle属性をサポートしています.title属性はヒント情報を専門にしています.
altの役割:ヒントテキストは必ず書く;altプロパティは、あなたの画像が何らかの理由でロードできない場合にページに表示されるヒント情報で、元のロードされた画像の場所に直接出力されます.(画像の最適化)
*相対パスの書き方:
1)現在のファイルがターゲットファイルと同じディレクトリの下にある場合、ターゲットファイル名+拡張子を直接書く.
2)現在のファイルと対象ファイルが同じディレクトリにある場合、書き方は以下の通りである.
フォルダ名/ターゲットファイルのフルネーム+拡張子;
3)現在のファイルが置かれているフォルダとターゲットファイルが置かれているフォルダが同じディレクトリの下にある場合、書き方は以下の通りです.
.../ターゲットファイルのフォルダ名/ターゲットファイル名+拡張子;
11、ハイパーリンクの応用
構文:
リンクテキスト/画像
空のリンク
属性:target:ページの開き方、デフォルト属性値_self.
属性値:blank新しいウィンドウが開きます
新しいページを開く
12、データテーブルの作用と構成
≪アクション｜Action｜oraolap≫:データの表示
表の構成
注意:trは行を表します.1つのtdは、1つの列(1つのセル)テーブルの列ヘッダーを表す
*データテーブルの関連属性
1)width=「表の幅」
2)height=「表の高さ」
3)border=「表の枠線」
4)bgcolor=「表の背景色」
5)bordercolor=「表の枠線色」
6)cellspacing=「セルとセルの間隔」
7)cellpadding=「セルとコンテンツのギャップ」
8)水平位置合わせ:align="left左位置合わせ/center中央/right右位置合わせ"; 垂直揃え:valign="topトップ揃え/middle中央/bottomボトム揃え/baseline(ベースライン); 10)セルのプロパティをマージするには、次の手順に従います.
colspan=「連結するセルの列数」連結列;
rowspan=「連結するセルの行数」連結行;
13、フォームの役割と構成
フォームの役割:ユーザーの情報を収集するために使用される.
フォーム構成:フォームボックス(フォームドメインform)
1)、フォームボックス
2)テキストボックス
3)パスワードボックス
4)提出ボタン
リセットボタン
5)ラジオボックス/ラジオボタン
ラジオボタンのnameプロパティは書かなければなりません.同じラジオボタンのnameプロパティの値は同じでなければなりません.
6)チェックボックス
チェックボタンのnameプロパティは必ず書き、同じグループのチェックボタンのnameプロパティの値は同じでなければなりません.
checked=「checked」はデフォルトで選択されていることを示し、checkedと略記できる
disabled=「disabled」は無効を表し、disabledと略記できる
enabled:使用可能なステータス
7)プルダウンメニューの内容
8)複数行テキストボックス(テキストフィールド)
9)ジャンプボタン
buttonとsubmitの違いは:
submitはコミットボタンが情報をコミットする役割を果たし,typeタイプはbuttonがジャンプのみの役割を果たし,コミットを行わない.
ヒント情報ラベル(役割:ヒント情報と対応するフォームコントロールを関連付ける)
ヒント
拡張知識点3:異なる入力タイプに対してvalue属性の使い方の意味
valueプロパティはinput要素の設定値です.
入力タイプによってvalueプロパティの使い方が異なります.
type=「button」>「reset」>「submit」-ボタンに表示されるテキストを定義
type=「text」、「password」-入力フィールドの初期値を定義します
type=「checkbox」、「radio」-入力に関連付けられた値を定義します.
注記:とでvalue他nameプロパティを設定する必要があります.
知識点の拡張4:
Formでのデータ取得の2つの方法getとpostの違いは? getはサーバからデータを取得し、postはサーバにデータを転送する. getは、パラメータデータキューを提出フォームのACTION属性が指すURLに加算したもので、値はフォーム内の各フィールドに1つ1つ対応しており、URLに表示されます.postは、HTTP postメカニズムにより、フォーム内の各フィールドをその内容とともにHTML HEADER内に配置してACTION属性が指すURLアドレスに転送する.ユーザーはこのプロセスを見ることができません. get方式についてはサーバ側がRequestを用いる.QueryStringは変数の値を取得する、post方式に対してサーバ側はRequestを用いる.Formはコミットされたデータを取得します. get転送のデータ量は小さく、2 KBを超えることはできません.post転送のデータ量は大きく、一般的には制限されないようにデフォルトされています. getセキュリティは非常に低く、postセキュリティは高い.しかし,実行効率はPost法より優れている.
推奨事項:
1、get方式の安全性はPost方式より劣っており、機密情報を含む場合はPostデータ提出方式を提案する.
2、データ照会をする時、Get方式を提案する;データの追加、修正または削除を行う場合は、Post方式を推奨します.
14、divとspanの使い方
特定の意味はありません.1行を独占する以外にデフォルトのプロパティはありません.ページレイアウトでよく使われるラベルです.
テキストノードラベル
テキストの一部、または単語のいずれかです.改行しない以外に、デフォルトのプロパティはありません.
HTML基本構造とHTML基本構文
HTMLの基本構造
HTMLの基本文法
1、
タグ>
タグはタグまたはエレメントとも呼ばれます
例:
2.空のタグ
例:
説明:
1.<>に書かれた最初の単語をタグ、ラベル、要素と呼びます.
2.タグと属性はスペースで区切られ、属性と属性値は等号で接続され、属性値は「」号内に置かなければならない.
3.1つのタグは属性がなくても複数の属性があってもよく、属性と属性の間には前後の順序がない.
4.空のタグは終了ラベルがなく、代わりに「/」を使用します.
五、HTML常用タグ
1、テキストタイトル(h 1-h 6)
LOGO
二級タイトル
三級タイトルH 3
四級タイトルH 4
レベル5
レベル6
注意:テキストタイトルラベルには太字が付いており、独自のテキストサイズがあり、行を独占し、デフォルトの間隔があります.
2、段落テキスト§
段落テキストの内容
段落の識別(段落と段落の間隔)
3、スペース
位置に決定する値はなく、現在のフォント番号に関係する.
4、改行(br)
改行は空のタグです(強制改行)
5、水平線
空のタグ
6、太字には2つのマークがあります
A、太くする内容は太く表示するだけ
B、強調された内容が強調されたテキスト
7、傾斜
強調テキスト
傾斜テキスト
8、拡張
テキストの下線
テキスト削除線
テキスト削除線
下付き文字
上付き文字
9、リスト(ul,ol,dl)
HTMLには、無秩序リスト、秩序リスト、カスタムリストの3つのリストがあります
*無秩序リスト
無秩序リストの構成:
(unordered list)
．．．．．．
*順序付きリスト
順序リストの構成:
(ordered list)
．．．．．．
*カスタムリスト
(definition list)
名詞
説明する
(definition description)
．．．．．．
知識拡張2----整列リストのプロパティ
1)、type:リスト内のリスト項目の項目記号の種類を規定する
構文:
1数字順には、シーケンステーブル(デフォルト)(1,2,3,4)があります.
aアルファベット順にはシーケンステーブル,小文字(a,b,c,d)がある.
Aアルファベット順はシーケンステーブル、大文字(A,B,C,D)
iローマ数字、小文字(i,ii,iii,iv).
Iローマ数字、大文字(I,ii,iii,iv).
2)、start属性には、シーケンステーブルの開始点が規定されています.
構文:
10、画像を挿入する
注意:挿入する画像はサイトの下に置く必要があります.
titleの役割:画像のタイトル;この画像にマウスを置くと小さなヒントが表示され、マウスが離れるとなくなります.HTMLのほとんどのラベルはtitle属性をサポートしています.title属性はヒント情報を専門にしています.
altの役割:ヒントテキストは必ず書く;altプロパティは、あなたの画像が何らかの理由でロードできない場合にページに表示されるヒント情報で、元のロードされた画像の場所に直接出力されます.(画像の最適化)
*相対パスの書き方:
1)現在のファイルがターゲットファイルと同じディレクトリの下にある場合、ターゲットファイル名+拡張子を直接書く.
2)現在のファイルと対象ファイルが同じディレクトリにある場合、書き方は以下の通りである.
フォルダ名/ターゲットファイルのフルネーム+拡張子;
3)現在のファイルが置かれているフォルダとターゲットファイルが置かれているフォルダが同じディレクトリの下にある場合、書き方は以下の通りです.
.../ターゲットファイルのフォルダ名/ターゲットファイル名+拡張子;
11、ハイパーリンクの応用
構文:
リンクテキスト/画像
空のリンク
属性:target:ページの開き方、デフォルト属性値_self.
属性値:blank新しいウィンドウが開きます
新しいページを開く
12、データテーブルの作用と構成
≪アクション｜Action｜oraolap≫:データの表示
表の構成
注意:trは行を表します.1つのtdは、1つの列(1つのセル)テーブルの列ヘッダーを表す
*データテーブルの関連属性
1)width=「表の幅」
2)height=「表の高さ」
3)border=「表の枠線」
4)bgcolor=「表の背景色」
5)bordercolor=「表の枠線色」
6)cellspacing=「セルとセルの間隔」
7)cellpadding=「セルとコンテンツのギャップ」
8)水平位置合わせ:align="left左位置合わせ/center中央/right右位置合わせ";
colspan=「連結するセルの列数」連結列;
rowspan=「連結するセルの行数」連結行;
13、フォームの役割と構成
フォームの役割:ユーザーの情報を収集するために使用される.
フォーム構成:フォームボックス(フォームドメインform)
/
1)、フォームボックス
2)テキストボックス
3)パスワードボックス
4)提出ボタン
リセットボタン
5)ラジオボックス/ラジオボタン
ラジオボタンのnameプロパティは書かなければなりません.同じラジオボタンのnameプロパティの値は同じでなければなりません.
6)チェックボックス
チェックボタンのnameプロパティは必ず書き、同じグループのチェックボタンのnameプロパティの値は同じでなければなりません.
checked=「checked」はデフォルトで選択されていることを示し、checkedと略記できる
disabled=「disabled」は無効を表し、disabledと略記できる
enabled:使用可能なステータス
7)プルダウンメニューの内容
8)複数行テキストボックス(テキストフィールド)
9)ジャンプボタン
buttonとsubmitの違いは:
submitはコミットボタンが情報をコミットする役割を果たし,typeタイプはbuttonがジャンプのみの役割を果たし,コミットを行わない.
ヒント情報ラベル(役割:ヒント情報と対応するフォームコントロールを関連付ける)
ヒント
拡張知識点3:異なる入力タイプに対してvalue属性の使い方の意味
valueプロパティはinput要素の設定値です.
入力タイプによってvalueプロパティの使い方が異なります.
type=「button」>「reset」>「submit」-ボタンに表示されるテキストを定義
type=「text」、「password」-入力フィールドの初期値を定義します
type=「checkbox」、「radio」-入力に関連付けられた値を定義します.
注記:とでvalue他nameプロパティを設定する必要があります.
知識点の拡張4:
Formでのデータ取得の2つの方法getとpostの違いは?
推奨事項:
1、get方式の安全性はPost方式より劣っており、機密情報を含む場合はPostデータ提出方式を提案する.
2、データ照会をする時、Get方式を提案する;データの追加、修正または削除を行う場合は、Post方式を推奨します.
14、divとspanの使い方
特定の意味はありません.1行を独占する以外にデフォルトのプロパティはありません.ページレイアウトでよく使われるラベルです.
テキストノードラベル
テキストの一部、または単語のいずれかです.改行しない以外に、デフォルトのプロパティはありません.