フロントエンドの HTML 知識ポイントのまとめ (推奨)

1. HTMLの概要

htyper テキストマークアップ言語ハイパーテキストマークアップ言語

ハイパーテキスト: Web ページに画像、リンク、さらには音楽やプログラムなどのテキスト以外の要素を含めることができることを意味します。

マークアップ言語: タグで構成された言語。

ウェブページ == ブラウザによって解析され表示される HTML ドキュメント

静的ウェブページ: xxx.html などの静的リソース

動的ウェブページ: HTMLコードは、ユーザーのリクエストに基づいて特定の開発言語によって動的に生成されます。

以下はHTMLファイルのツリー構造図です。

ラベルの概念:

•山括弧で囲まれた 2 つの単語で構成されます。例: <html> *すべてのタグ内の単語は数字で始まることはできません。

• タグは大文字と小文字を区別しません。<html> と <HTML>。小文字の使用が推奨されます。

•タグは、開始タグ <a> と終了タグ </a> の 2 つの部分で構成されます。2 つのタグの間の部分はタグ本体と呼ばれます。

•一部のタグは機能が単純で、1 つのタグだけを使用できます。このようなタグは自己終了タグと呼ばれます。例: <br/> <hr/> <input /> <img />

• タグはネストできますが、クロスネストすることはできません。<a><b></a></b>

タグの属性:

•通常はキーと値のペアの形式で表示されます。例: name="alex"

•属性は開始タグまたは自己終了タグ内にのみ出現できます。

• 属性名はすべて小文字です。 * 属性値は二重引用符または一重引用符で囲む必要があります。例: name="alex"

•属性値と属性名がまったく同じ場合は、属性名のみを記述します。たとえば、readonly

2. メインヘッドタグの紹介

•<meta>メタタグの構成: メタタグには、http-equiv 属性と name 属性の 2 つの属性があります。属性が異なるとパラメータ値が異なり、これらの異なるパラメータ値によって Web ページの機能が異なります。

1 name 属性は主に Web ページを説明するために使用されます。対応する属性値は content です。content 内のコンテンツは主に検索エンジンロボットが情報を検索して分類するために使用されます。

2 http-equiv は、その名前が示すように、http のファイルヘッダーに相当します。Web ページのコンテンツを正しく正確に表示するために役立つ情報をブラウザーに送り返すことができます。対応する属性値は content です。content のコンテンツは、実際には各パラメーターの変数値です。

•<title>オールドボーイ</title>

•<link rel="icon" href="http://www.jd.com/favicon.ico">

3. ボディタグ

基本タグ:

<hn>: n の値の範囲は 1 ～ 6 で、大きいものから小さいものまであります。タイトルを示すために使用されます。

<p>: 段落タグ。囲まれた内容は新しい行で囲まれます。また、上部と下部のコンテンツの間には空白行が存在します。

<b> <strong>: 太字のタグ。

<strike>: テキストに中央線を追加します。

<em>: テキストを斜体にします。

<sup> と <sub>: 上付き文字と下付き文字の表。

<br>: 改行。

<hr>: 水平線

ブロックレベルタグとインラインタグ

ブロックレベルタグ: <p><h1><table><ol><ul><form><p>

インラインタグ: <a><input><img><sub><sup><textarea><span>

ブロック要素の特徴

① 常に新しい行から始めます。

② 高さ、行の高さ、余白、パディングをすべて制御できます。

③ 幅が設定されていない場合、デフォルトの幅はコンテナの 100% になります。

④ インライン要素やその他のブロック要素に対応できる

インライン要素の特徴

① 他の要素と同じ行に並んでいる。

② 高さ、行の高さ、余白、パディングは変更できません。

③幅はテキストや画像の幅であり、変更することはできません

④ インライン要素にはテキストまたは他のインライン要素のみを含めることができます

インライン要素については、次の点に注意してください。

幅を設定しても効果はありません。

高さの設定は無効ですが、line-height を通じて設定できます。

余白を設定する場合、上と下の余白ではなく、左と右の余白のみが有効です。

パディングを設定する場合、左と右のパディングのみが有効で、上と下のパディングは無効です。要素の範囲は拡大されますが、要素の周囲のコンテンツは影響を受けないことに注意してください。

特殊文字:

< >"©®

グラフィックタグ <img>:

src: 表示する画像へのパス。

alt: 画像が正常に読み込まれなかった場合のプロンプト。

title: マウスをホバーしたときに表示されるツールチップ。

幅: 画像の幅

高さ: 画像の高さ (幅と高さの属性のいずれか 1 つだけを使用すると、自動的に比例して拡大縮小されます。)

ハイパーリンクタグ <a>:

href: 接続するリソースパスは次の形式です: href="https://www.jb51.net"

target: _blank: ハイパーリンクを新しいウィンドウで開きます。 framename: 指定されたフレームでリンクコンテンツを開きます。

name: ページのブックマークを定義します。

href: #ブックマーク名にジャンプするために使用されます。

リストタグ:

<ul>: 順序なしリスト

<ol>: 順序付きリスト

<li>: リスト内の各項目。

<dl> 定義リスト

<dt> リストタイトル

<dd> リスト項目

テーブルタグ <table>:

border: 表の境界線。cellpadding

: 内側の余白

。cellspacing:

外側の

余白。width

: ピクセルのパーセンテージ。(長さと幅は CSS で設定するのがベストです)

<tr>: 表の

行 <th>: 表のヘッダーセル

<td>: 表のデータセル

rowspan: セルが垂直にまたがる行数

colspan: セルが水平にまたがる列数 (つまり結合されたセル)

<th>: 表のヘッダー <tbody> (あまり使用されません): 表を分割する

フォームタグ <form>

フォームはデータをサーバーに転送するために使用されます。

フォームには、テキストフィールド、チェックボックス、ラジオボタン、送信ボタンなどの入力要素を含めることができます。

フォームには、textarea、select、fieldset、label 要素を含めることもできます。

1. フォームのプロパティ

HTML フォームは、さまざまな種類のユーザー入力を受け取るために使用されます。ユーザーがフォームを送信すると、データがサーバーに送信され、ユーザーと Web サーバー間の対話が可能になります。フォームタグ。送信されるすべてのコンテンツはこのタグ内にある必要があります。

action: フォームが送信される場所。一般的にはサーバー側のプログラムを指し、プログラムはフォームによって送信されたデータ (つまり、フォーム要素の値) を受け取り、それに応じて処理します (例: https://www.sogou.com/web)。

method: フォーム送信メソッド post/get。デフォルト値は get (エンベロープ) です。

get: 1. 送信されたキーと値のペアは、アドレスバーの URL の後に配置されます。 2. セキュリティは比較的低いです。 3. 送信されたコンテンツの長さには制限があります。

post: 1. 送信されたキーと値のペアは、アドレスバーにありません。 2. セキュリティは比較的高いです。 3. 理論上、送信されたコンテンツの長さに制限はありません。

get/post は、2 つの一般的なリクエストメソッドです。

2. フォーム要素

<input>
タイプ：
text テキスト入力ボックス

password パスワード入力ボックスラジオボタン

単一選択

ボックスチェックボックス複数選択

ボックス送信送信

ボタンボタン (js で使用する必要があります) ボタンと送信の違いは何ですか?

ファイルファイルを送信: フォームに属性 enctype="multipart/form-data" を追加する必要があります

XML/HTML コードコンテンツをクリップボードにコピーします def

index(request):
request.POST を印刷
request.GET を印刷
request.FILES を印刷
for item

in request.FILES:

fileObj = request.FILES.get (アイテム)
f =開く(fileObj.name, 'wb')
iter_file = fileObj .chunks()
for line in iter_file:
f.write(line)
f.close()
return HttpResponse('ok')

name: フォーム送信項目のキー。id 属性との違いに注意してください。name 属性はサーバーと通信するときに使用する名前です。id 属性はブラウザーが使用する名前です。この属性は主に

CSS と JavaScript で使用され、クライアント側のプログラミングを容易にします。

value: フォーム送信項目の値。value 属性は、入力タイプによって異なる方法で使用されます。

type="button", "reset", "submit" - ボタンに表示されるテキストを定義します

type="text", "password", "hidden" - 入力フィールドの初期値を定義します

type="checkbox", "radio", "image" - 入力に関連付けられた値を定義します

selected: ラジオボタンとチェックボックスはデフォルトで選択されています

readonly: 読み取り専用です。テキストとパスワードは

無効です: すべての入力で機能します。

<select> ドロップダウン選択タグの属性:

name: フォーム送信項目のキー。

size: オプションの数

multiple:

ドロップダウンで選択された各項目の複数 <option> 属性: value: フォーム送信項目の値。 selected: 選択されたドロップダウン選択がデフォルトで選択されています

<optgroup> 各項目のグループを追加します

<textarea> テキストフィールド name: フォーム送信項目のキー。 cols: テキストフィールドの列のデフォルト数 rows: テキストフィールドの行のデフォルト数

<label>

<フィールドセット>

<フィールドセット>
<legend>ログイン</legend>
<入力タイプ="テキスト">
</フィールドセット>

以上、フロントエンドHTMLの知識ポイント（推奨）のまとめが、編集者が皆さんにシェアする内容の全てです。参考になれば幸いです。また、123WORDPRESS.COMを応援していただければ幸いです。

<<: 自動的にフォーカスを取得する要素入力ボックスの実装

>>: MySQL B-Tree インデックスの簡単な分析

フロントエンドの HTML 知識ポイントのまとめ (推奨)

Docker を使って LEMP 環境を素早く構築する方法の例

Vueでのバスの使用に関する詳細な説明

Windows での Nginx のインストールと環境設定 (nginx をサービスとして実行)

vue-cropperプラグインは、画像キャプチャとアップロードコンポーネントのカプセル化を実現します。

Dockerはコンテナにポートを動的に公開します

Linux でスレッドを作成するための pthread_create の具体的な使用法

HTML で自動ページジャンプを実現する 5 つの方法

MySQL最適化ツール（推奨）

MySQL Order By 複数フィールドのソートルールのコード例

Vue要素ヘッダーにスラッシュを追加するための実装コード

推薦する

HTML要素のID属性とName属性の違い

Vue を使用して CSS トランジションとアニメーションを実装する方法

MySQL sql99構文の内部結合と非等価結合の詳細な説明

CSS シャドウアニメーションの最適化のヒント

MySQLクエリキャッシュの簡単な使い方の詳細な説明

js+canvas でコードレイン効果を実現

ミニプログラム録画機能の実装

Vueでシングルサインオンを実装する方法のまとめ

nginx「504 ゲートウェイタイムアウト」エラーを解決する

nginxフォワードプロキシとリバースプロキシの詳細な説明

Zabbix で Windows のパフォーマンスを監視する方法

JavaScript で localStorage を使用する方法

CSSレイアウトにおけるフロート属性と位置属性の違い

Vue でスロットを使用する方法についての簡単な説明

CSS3 フリップカード番号サンプルコード