フロントエンドの 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 知識ポイントのまとめ (推奨)

MySQLデーモンの起動に失敗したエラーの解決方法

mysql5.7.14 解凍版インストールグラフィックチュートリアル

MySQL での varchar 型の日付の比較、並べ替え、その他の操作の実装

IP アドレス経由で MySql にアクセスする方法

純粋な CSS で実装された大きなドロップダウンメニューのサンプルコード

mysql+mycat、負荷分散、マスタースレーブレプリケーション、読み取り/書き込み分離操作に基づく安定した高可用性クラスタを構築します。

div 要素に終了タグがないため、Web ページを開くことができません

HTML で vue-router を使用するサンプルコード

空のパスがページのパフォーマンスに与える影響に対する解決策

CentOS7 は rpm を使用して MySQL 5.7 をインストールするチュートリアル図

推薦する

Vue は URL に基づいて非同一オリジンのファイルをどのようにダウンロードするのか

ネイティブ js でカスタムスクロールバーを実装する

2012年のベストWebデザイン作品レビュー[パート1]

react+antdプロジェクトをゼロから構築する方法を教えます

リモート接続を許可するようにMySQLを変更する方法

Windows 環境での MYSQL5.7 設定ファイルの場所のグラフィカル分析

vue-simple-uploader をベースに、ファイルセグメントアップロード、インスタントアップロード、ブレークポイント再開のグローバルアップロードプラグイン機能をカプセル化します。

https暗号化アクセス用にnginxを設定するための詳細なチュートリアル

Dockerコンテナのネットワーク管理とネットワーク分離の実装

MySQLのSQLモードの特徴のまとめ

Vue パッケージサイズの最適化の実装 (1.72M から 94K)

Linux ユーザーグループと権限の概要

17の広告効果測定の解釈

JS の配列トラバーサルについて、一般的なループをいくつ知っていますか?

VMware Workstation 14 Pro は CentOS 7.0 をインストールします