HTMLの基本

フロントエンド開発の紹介

1.フロントエンド開発とは何ですか？

ユーザーに提示するWebページやアプリなどのフロントエンドページを作成します
コアHTML、CSS、JSおよび派生テクノロジーフレームワーク
アプリケーションシナリオPC、APP、アプレット、ゲーム、サーバー

2.学習ルート

HTML構文、セマンティクス、SEOベース
CSS構文、ページレイアウト、メディアクエリ、CSS3
CSSの高度なプリプロセッサ、フレームワーク、アーキテクチャの仕様
JS構文データ構造WebAPIES6 +モジュラータイスクリプト
ビルドツールnpm
フレームワークVUEReact Angular
Node.jsサーバーレンダリングの学習を続ける

3.インターネットの原則

フロントエンドの3層HTML（構造）、CSS（スタイル）、JS（動作）
マルチメディアコンテンツ：写真、ビデオ、オーディオ、ハイパーリンク
インターネット運用プロセス

クライアント-> HTTLリクエストの送信->サーバー

サーバー—> HTTL応答---->クライアント

サーバー：プロセッサ、ハードディスク、メモリシステムバスなどを含み、ビジネス処理、安定性、信頼性、セキュリティの要件が高く、要求と処理に応じてデータを保存します
（クラウドサーバー：シンプル、効率的、安全、信頼性、とスケーラブルなコンピューティングサービス）

クライアント：ユーザーの中断、最も一般的に使用されるアプリブラウザ（Google、つまりFirefox）

HTTPプロトコル：ハイパーテキスト転送プロトコル、クライアントとWEBサーバー間のアプリケーション層通信プロトコル

4.プレーンテキスト形式（HTML、CSS、JS）

ネットワーク送信に役立つ他の形式や非テキストコンテンツではなく、テキストのみを保存します
拡張子の保存形式は直接変更できます
プレーンテキスト形式のファイルは、任意のプレーンテキストエディタを使用できます

5.HTML理論

概念

ハイパーテキストは、画像、オーディオ、ビデオ、およびプログラムテキストをリンクするために使用されます
特別なセマンティクスを実現したりコンテンツを表示したりするためにブラウザに書き込まれる文法形式

特徴

マーカーは、通常のテキストにセマンティクスを追加し、ハイパーテキストコンテンツを記述し、Webページの基本構造を構築します
セマンティック化：特別なセマンティックタグを追加して、コードの読み取りとメンテナンスを容易にします。これにより、Webクローラーが役立ち、SEO検索エンジンの最適化が向上します。

詳細

開始タグ、要素コンテンツ、終了タグを含む、開始タグから終了タグまでのHTML要素のすべてのコンテンツ
ラベルレベル
コンテナレベル：任意のコンテンツを内部に保存できます
テキストレベル：テキストのみを書き込むことができます
ラベルの外側の空白は無視され、要素コンテンツの空白は折りたたまれて表示されます
ラベルの属性：属性名：「属性値」の形式、倍数はスペースで区切られます

スケルトン

<html><head><titile></title></head></html>

タイトルページタイトル、エンジンキーワードとしてのキーワード、お気に入りのデフォルトページタイトルとしてのSEO検索最適化、ページを合理化するためのタイトルコンテンツの追加、ページキーワードの抽出
ページ表示コンテンツを格納する本体

DTD、名前空間、文字セット

DTD解析の参照標準
xml拡張可能マークアップ言語はデータの転送と保存に使用され、langは名前空間の設定に使用されます
現在のWebページで使用されている文字エンコードを定義する文字セットは、utf-8を使用するのに速度を必要とせず、gbkを使用するのに速度を必要とします。

6.特定のラベル

タイトルタグ

 <h1> </h1>

label要素の内部要素にセマンティクスを追加すると、titleタグをネストできなくなります
h1タイトルの重みが最も高いです。一般的に、最も重要なコンテンツを配置すると、h1は1つしか表示されません。

段落タグ

<p></p>      <br/>

Pタグはコンテンツに完全なセマンティクスを追加し、自動コンテンツラッピングのスタイルについては責任を負いません
brタグの必須の改行文字は空の要素です

テキストの書式設定

ラベルはbラベルを太字にするために使用されます
タグはイタリック体のiタグに使用されます
イタリック体のemタグでテキストを強調する
アンダースコアuタグを定義します
アンダースコアinsタグを挿入します
~~取り消し線のデルタグ~~

画像タグ

<img></img> 支持格式png、jpg、jif

src属性：画像リンクパス
相対パス：htmlファイル自体からトリガーされ、相対位置に従って検索されます。それぞれ同じレベル、サブレベル、および上位の検索があります。
絶対パス：コンピュータードライブレターのルートディレクトリから検索します。通常は、写真のアドレス
幅と高さの表示、タイトル：マウスを画像に置いたときのテキスト表示、alt：画像プロンプトのテキストは正常に表示されません

オーディオタグ

<audio></audio>  支持格式mp3、ogg、wav controls=“controls”

ビデオタグ

<video></video>支持格式mp4、ogg、webm

ハイパーリンク

<a></a>锚

URLページにジャンプ
ターゲット：リンクされたドキュメントにジャンプする場所を定義します。_selfデフォルト値（現在のウィンドウ内）_blank：新しいウィンドウ
タイトル：マウスがオンのときのテキストリマインダー

アンカージャンプ
- ページ内のアンカージャンプ
```
  <h2 id="html"></h2> ——<a href="#html"></a>
  <a name="html"></a> ——<a href="#html"></a>
```
ページ外へのジャンプを指定

アンカーポイント<ahref = "ジャンプページ" #specificlocation>リンクをアンカーポイントに設定します

レイアウトラベル

div

任意のコンテンツ、従来のコンテナレベルのラベル、比較的広い範囲を配置できます

スパン

小さなエリアでは、全体的な効果を変えることなく、ローカル調整を支援します

フォームベース

<table><tr><td>/<th></th>/</tr></table>

デフォルトのCSSスタイルであるヘッダーを設定するために使用されます

レイアウト表示

セルマージ

rowspan：行間でマージし、上下にマージし、最後に、スパンされた行と列の数を示す属性値を指定します
colspan：行と列のマージ、左と右のマージ

ヒント：セルの行を分割すると、上部が同じ行に配置されます

形

フォームフィールド

これは、すべてのフォームコントロールとプロンプト情報を保持するために使用されるコンテナに相当し、フォームデータの処理に使用されるプログラムのURLアドレスを定義し、データをバックグラウンドサーバーに送信します。

対応する属性を使用して、データ送信の方法と場所を指定します
アクション：urlは、データを受信して処理するサーバーのURLアドレスを指定します
メソッド：get / postは、フォームデータの送信方法を設定するために使用されます
name：カスタム名。フォームの名前を指定します

プロンプト情報

特定の入力操作を実行するようにユーザーに促す説明テキスト

<input>

異なるタイプの属性値は、異なる入力コンテンツを示します

テキスト単一行テキスト値、値値はデフォルトの表示コンテンツを設定するために使用されます

<input type="text"> value="请输入">

パスワードフィールドはマスクされます

<input type="password">

ラジオは単一の選択ボックスであり（相互に排他的な関係は同じ名前属性を設定します）、チェックはデフォルトの選択を設定するために使用されます

<input type="radio" name="sex" checked="男">男

チェックボックスチェックボックス（グループ化には同じ名前属性が使用されます）

<input type="checkbox" name="hobby">绘画

file属性は、ファイルアップロードボタンを定義し、ローカルファイルアップロードサーバーを選択します。複数は、一度に複数のアップロードを設定するために使用されます

<input type="file" multiple="multiple"/>

フォームコントロール

フォーム機能項目、1行のテキスト入力、パスワード入力、ボタン

ボタン

ボタン：通常のボタン、特別な機能なし

<input type="button" value="普通按钮">

リセット：リセットボタン、フォームの内容をクリアし、デフォルトに戻します

送信：送信ボタン、フォームで指定されたバックエンドサーバーにデータを送信し、デフォルトをクリアします

画像：画像として

テキストフィールド、複数行のテキストを入力できます

行属性値、最大行数を表示、列列属性値、行あたりの最大バイト数を表示（1漢字は2バイト）

ドロップダウンメニュー

<select><option></option></select>

デフォルトの選択、選択した属性をオプションに追加、属性値はそれ自体
optgroupラベルは、グループ化のために2つのlabel = "group name"の間でオプションをグループ化し、選択は許可されません

ラベル

（距離が遠い）id属性をフォームに設定し、バインディングコンテンツをlabelタグに書き込み、for属性を設定します。属性値はid属性値です。
（近距離）、入力ラベルの内容を直接ラベルに書き込む、直接バインドできます

キャラクターエンティティ

W3Cには対応する特定のオプションがあります
＆で始まり、;で終わります。通常はエンティティ名を使用します

7.間違った質問の要約

プログラマーは、保存のためにWebページのソースファイルをサーバーにアップロードします
HTML要素は、開始タグ、要素タグ、終了タグなど、開始タグから終了タグまでのすべてです。
段落タグPはダブルタグとテキストタグですが、画像は内部に配置できます

よりエキサイティング：
CSSの基本的なレビュー

基本レビュー（1）| HTML