HTMLの基礎を徹底解説（第1部）

1. WEBを理解する

Web ページは主にテキスト、画像、ハイパーリンクなどの要素で構成されています。もちろん、これらの要素に加えて、Web ページにはオーディオ、ビデオ、Flash を含めることもできます。

ブラウザは、 Web ページを表示および実行するためのプラットフォームです。

ブラウザカーネル（タイプセットエンジン、解釈エンジン、レンダリングエンジン）

Web ページのコンテンツを読み取り、情報を整理し、Web ページの表示方法を計算し、ページを表示する役割を担います。

ブラウザ	カーネル	述べる
IE	トライデント	IE、チーターセキュリティ、360スピードブラウザ、百度ブラウザ
ファイアフォックス	ヤモリ	残念ながら、近年は衰退しています。起動が遅く、頻繁にアップグレードする必要があり、Flash と呼ばれる豚のようなチームメイトと、Chrome と呼ばれる神のような対戦相手がいます。
サファリ	ウェブキット	現在、多くの人が誤って Webkit を Chrome カーネルと呼んでいます (Chrome カーネルはすでに Blink であるにもかかわらず)。アップルは妻が誰かに奪われたように感じ、トイレで泣きながら気絶したほどだった。
クロム	クロム/ブリンク	Blink レンダリングエンジン (つまり、ブラウザコア) は Chromium プロジェクトで開発され、Chrome ブラウザに組み込まれました。 Blink は実際には WebKit のブランチです。ほとんどの国内ブラウザの最新バージョンは Blink カーネルを使用しています。二次開発
オペラ	瞬き	次に、Chrome に従って Blink カーネルを使用します。

ウェブ標準

「構成」👉 構造基準、性能基準、動作基準

ウェブページ上の要素を整理および分類するための構造標準 (HTML)
プレゼンテーション標準は、Webページ要素のレイアウト、色、サイズ、その他の外観属性を設定するために使用されます（CSS）
動作標準は、Web ページモデルの定義とインタラクションの記述に使用されます (JavaScript)

「Web標準の利点」👇

メンテナンスが簡単: CSSファイルを変更するだけで、サイト全体のスタイルを変更できます。
高速なページ応答: HTMLドキュメントのサイズが縮小され、応答時間が短くなります
アクセシビリティ: セマンティック HTML (構造とプレゼンテーションが分離された HTML) で記述された Web ページは、スクリーンリーダーによって認識されやすくなります。
デバイスの互換性: スタイルシートが異なると、デバイスによって Web ページの外観が異なる場合があります。
検索エンジン: セマンティックHTMLは検索エンジンによる解析が容易になり、ランキングが向上します。

2. HTML入門

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

いわゆるハイパーテキストには 2 つの意味があります。

画像、サウンド、アニメーション、マルチメディア、その他のコンテンツ（テキスト制限を超えて）を追加できるため
それだけでなく、あるファイルから別のファイルへジャンプしたり、世界中のどこにホストされているファイルとも接続 (テキストのハイパーリンク) したりできます。

「HTMLスケルトンフォーマット」

<!-- ページ内の最大のルート タグ -->
<html>
    <!-- ヘッダータグ -->
    <ヘッド>     
        <!-- タイトルタグ -->
        <タイトル></タイトル> 
    </head>
    <!-- ドキュメントの本文 -->
    <本文>
    </本文>
</html>

チームは資本化に合意した

HTMLタグ名、クラス名、タグ属性、およびほとんどの属性値はすべて小文字です

HTML要素タグの分類

通常の要素（二重タグ）
空要素（単一タグ）

 通常の要素（二重タグ）
  <タグ名> コンテンツ</タグ名> たとえば、<body> 私はテキスト</body>
  空要素（単一タグ）
  <タグ名/> たとえば<br /> または<br>

HTMLタグの関係

ネストされた関係の親子包含関係
平行関係兄弟レベルの平行関係
2 つのタグ間の関係がネストされている場合、子要素はタブキーの位置 (タブは 4 つのスペース) でインデントするのが最適です。平行関係の場合は、垂直に揃えるのが最適です。

ドキュメントタイプ <!DOCTYPE>

ドキュメントタイプは、使用している XHTML または HTML のバージョンを示すために使用されます。ブラウザに HTML5 標準に従ってページを解析するように指示します。

ページ言語 lang

LangはHTMLタグコンテンツで使用される言語を指定します

 <html lang="ja">  
  en は言語を英語として定義します zh-CN は言語を中国語として定義します

言語の役割

1. lang属性に応じて異なる言語のCSSスタイルまたはフォントを設定する

2. 検索エンジンに正確な識別を指示する

3. 文法チェッカーで言語識別を行う

4. 翻訳ツールが識別できるように支援する

5. ウェブページの読者が識別できるようにする

文字セット

文字セットとは、複数の文字の集まりです。コンピュータがさまざまな文字セットのテキストを正確に処理するには、コンピュータがさまざまなテキストを認識して保存できるように、文字エンコードが必要です。

UTF-8 は最も一般的に使用される文字セットのエンコード方法です。
HTML ファイルは UTF-8 エンコーディングで保存され、ブラウザはエンコーディングに従って対応する HTML コンテンツをデコードします。

  <メタ文字セット="UTF-8" />

メタビューポートの使用

通常、ビューポートはウィンドウまたはビューポートを指します。 Web ページを表示するために使用されるブラウザ (またはアプリ内の Web ビュー) 上の領域。モバイルと PC のビューポートは異なります。PCのビューポートはブラウザウィンドウ領域ですが、モバイルにはレイアウトビューポート、ビジュアルビューポート、理想的なビューポートという 3 つの異なるビューポートの概念があります。

meta には name と http-equiv という 2 つの属性があります。

名前属性の値

キーワード（キーワード）は検索エンジンにウェブページのキーワードを伝える
説明（ウェブサイトのコンテンツの説明）は、ウェブサイトの主なコンテンツを検索エンジンに伝えるために使用されます。
ビューポート（モバイル端末ウィンドウ）
ロボット（検索エンジンクローラーのインデックス作成方法を定義）ロボットは、どのページをインデックスする必要があるか、どのページをインデックスする必要がないかをクローラーに伝えるために使用されます。
著者
ジェネレーター（ウェブページ作成ソフトウェア）
著作権

http-equivには以下のパラメータがあります

http-equivは http のファイルヘッダーに相当します。Web ページのコンテンツを正しく正確に表示するために役立つ情報をブラウザーに返すことができます。

content-Type ウェブページの文字セットを設定する（Html4 の使用、非推奨）

Expires(期限) 、Web ページの有効期限を設定するために使用できます。 Web ページの有効期限が切れると、サーバーに再送信する必要があります。

Pragma(cache模式) ,ページコンテンツがローカルマシンのキャッシュから取得されないようにブラウザーを設定するために使用されます。設定すると、Web ページを離れると、キャッシュから再度取得できなくなります。

Refresh(刷新) ,自動的に更新され、新しいページが示されます。

cache-control （リクエストとレスポンスに続くキャッシュメカニズム)

	<メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">

HTMLタグの意味化

コードの読み取りと保守に便利で、スタイルが失われた場合でもページに明確な構造を提示できます。
検索エンジンはタグを使用して個々のキーワードのコンテキストと重みを判断するため、SEO に役立ちます。
セマンティクスに基づいてウェブページをレンダリングする視覚障碍者向けデバイスなど、他のデバイスによる解析を容易にする

「拡張」タグ: ページ上のすべてのリンクのデフォルトのURLを指定し、リンク全体のオープンステータスを設定します。

<ヘッド>
    <base href="http://www.baidu.com" target="_blank">
    <ベースターゲット="_self">
</head>
<本文>
    <a href="">テスト</a> Baidu へジャンプ</body>

3. 一般的なHTMLタグ

1. レイアウトタグ: 主に CSS で使用され、Web ページの構造を表示するタグであり、Web ページのレイアウトに最もよく使用されるタグです。

タイトルタグh（h1〜h6）
段落タグpはHTML文書を複数の段落に分割できる。
水平線ラベル hr
改行タグ br
div タグと span タグ: セマンティクスはなく、Web ページレイアウトで最も重要な 2 つのボックスです。

2. タイポグラフィタグ

bと強いテキストは太字で表示されます
i と em はテキストを斜体にします
sとdel` テキストは取り消し線付きで表示される
u と ins のテキストは下線付きです

3. タグ属性（インライン）

HTML を使用して Web ページを作成するときに、HTML タグでより多くの情報を提供したい場合は、HTML タグの属性を使用して設定できます。

<タグ名 属性 1 = "属性値 1" 属性 2 = "属性値 2" ...> コンテンツ </タグ名><携帯電話の色 = "赤" サイズ = "5 インチ"> </携帯電話>

4. 画像タグ img

ここに画像の説明を挿入

知らせ：

タグには複数の属性を設定できます。これらの属性は、開始タグのタグ名の後に記述する必要があります。
属性間には特別な順序はありません。タグ名と属性、および属性はスペースで区切られます。
キーと値のペアの形式はkey=“value”です。

<img src="cz.jpg" width="300" height="300" border="3" title="これは小さなタンポポです" />

5. リンクタグ（重要）

<a href="ジャンプ ターゲット" target="ターゲット ウィンドウ ポップアップ メソッド">テキストまたは画像</a>
target="_self" デフォルトウィンドウポップアップモード target="_blank" 新しいウィンドウポップアップ

財産	効果
参照	リンク先のURLアドレスを指定するために使用します。(必須属性) タグにhref属性を適用するとハイパーリンクとして機能します。
ターゲット	リンク先のページをどのように開くかを指定するために使用します。指定できる値は _self と _blank です。_self はデフォルト値で、_blank は新しいウィンドウでページを開く場合に使用します。

srcとhrefの違い

簡単に言うと、srcはリソースのソース、hrefはリダイレクトURLです。

1.src は現在の要素を置き換えるために使用され、href は現在のドキュメントと参照先のリソース間の接続を確立するために使用されます。

2. src はソースの略語で、外部リソースの場所を指します。指し示されたコンテンツは、ドキュメント内の現在のタグの場所に埋め込まれます。src リソースが要求されると、それが指し示すリソース (js スクリプト、img 画像、フレーム要素など) がダウンロードされ、ドキュメントに適用されます。ブラウザがこの要素を解析すると、リソースが読み込まれ、コンパイルされ、実行されるまで、他のリソースのダウンロードと処理が一時停止されます。画像やフレームなどの要素にも同じことが当てはまり、ポイントされたリソースを現在のタグに埋め込むのと似ています。これは、js スクリプトを上部ではなく下部に配置する必要がある理由でもあります。

3.href は Hypertext Reference の略で、ネットワークリソースの場所を指し示し、現在の要素 (アンカー) または現在のドキュメント (リンク) 間のリンクを確立します。これをドキュメントに追加すると、ブラウザはドキュメントを CSS ファイルとして認識し、リソースを並行してダウンロードし、現在のドキュメントの処理を停止しなくなります。そのため、CSS を読み込むには @import メソッドではなく link メソッドを使用することをお勧めします。

知らせ：

1. 外部リンクにはhttp://www.baidu.comを追加する必要があります

2. 内部リンクは、<a href="index.html">ホームページのように内部ページ名に直接リンクできます。

3. リンク先がその時点で決定されていない場合、リンクタグの href 属性値は、通常「#」（つまり、href="#"）として定義され、リンクが一時的に空のリンクであることを示します。

4. テキストハイパーリンクを作成できるだけでなく、画像、表、オーディオ、ビデオなどのさまざまな Web ページ要素にハイパーリンクを追加することもできます。

アンカーの配置: アンカーリンクを作成することで、ユーザーは対象のコンテンツをすばやく見つけることができます。

1. 対応する ID 名を使用して、ジャンプ ターゲットの位置をマークします。 （ターゲットを見つける）
  <h3 id="two">エピソード 2</h3> 
2. <a href="#id name">リンクテキスト</a>を使用してリンクテキスト（クリック可能）を作成します。 
  <a href="#two">

6. 注釈タグ

<!-- コメント文 -->     
  ショートカットキーはctrl + /です       
  またはCtrl + Shift + /

チームの合意: コメント内容の前後にスペースがあり、コメントはコメントするコードの上にあり、別の行を占めています。

7. パス

ここに画像の説明を挿入

8. その他の知識

フォーマット済みテキスト ラベル要素内のテキストでは、通常、スペースと改行が保持されます。テキストも等幅フォントで表示されます。テキストのフォーマットとは、スペースや改行などを保持しながら、事前に記述したテキスト形式に従ってページを表示することを意味します。

特殊文字

ここに画像の説明を挿入

XHTMLとは何か

XHTML は「EXtensible HyperText Markup Language」の略です。
XHTML の目標は HTML を置き換えることです。
XHTML は HTML 4.01 とほぼ同じです。
XHTML は HTML のより厳密でクリーンなバージョンです。
XHTML は、XML アプリケーションとして再定義された HTML の厳密なバージョンです。たとえば、タグは小文字でなければならない、タグは正しく閉じられなければならない、タグは正しい順序でなければならない、属性には二重引用符を使用しなければならない、といった要件があります。
XHTML は W3C 標準です。

HTML コードを書くときに注意すべきことは何ですか?

意味のない div タグと span タグはできる限り少なくします。
セマンティクスが明らかでない場合、div または p のどちらも使用できる場合は、p を使用するようにしてください。p はデフォルトで上下のスペースを持っているため、特殊な端末との互換性に役立ちます。
b、font、u などの純粋なスタイルタグは使用せず、代わりに CSS 設定を使用してください。
強調する必要があるテキストは、strong タグまたは em タグ (ブラウザのデフォルトスタイル。CSS で指定できる場合は使用しないでください) に含めることができます。strong のデフォルトスタイルは太字 (b を使用しないでください)、em は斜体 (i を使用しないでください) です。
表を使用する場合、タイトルには caption 、ヘッダーには thead 、本文には tbody 、フッターには tfoot を使用します。表のヘッダーと一般セルは区別する必要があり、表のヘッダーには th を使用し、セルには td を使用します。
フォームフィールドは fieldset タグで囲み、フォームの目的は legend タグで説明する必要があります。
各入力タグに対応する説明文はラベルタグを使用する必要があり、入力に id 属性を設定し、ラベルタグ内にを設定することで、説明文が対応する入力に関連付けられます。

4. 表

これは今でもよく使われるタグですが、レイアウトには使われません。表形式のデータを表示して提示するためによく使われます。データ表示を非常に規則的かつ読みやすくすることができるからです。特にバックグラウンドでデータを表示する場合は、テーブルを使いこなすことが非常に重要です。シンプルでわかりやすいテーブルは、複雑なデータを整然と表示できます。

テーブルを作成する

<テーブル>
  <tr>
    <td>セル内のテキスト</td>
    ...
  </tr>
  ...
</テーブル>

table、tr、tdはテーブルを作成するための基本タグであり、どれも欠落することはできません。

table はテーブルタグを定義するために使用されます。
tr タグはテーブル内の行を定義するために使用され、table タグ内にネストする必要があります。
td はテーブル内のセルを定義するために使用され、タグ内にネストする必要があります。
文字 td は、データセルの内容であるテーブルデータを表します。これで、テーブルはデータの保存に最適であることがわかりました。 td はすべての要素を保持できるコンテナのようなものです。

ここに画像の説明を挿入

ヘッダーセルタグ th: 通常、ヘッダーセルは表の最初の行または列に配置され、テキストは太字で中央揃えになります。対応するセルタグをヘッダータグに置き換えるだけで済みます。

ここに画像の説明を挿入

表のタイトルのキャプション通常、このタイトルは中央に配置され、表の上に表示されます。キャプションタグはテーブルタグの直後に来る必要があります。このタグはテーブル内でのみ意味を持ちます。あなたは風、私は砂

<テーブル>
   <caption>私は表のタイトルです</caption>
</テーブル>

表のプロパティ

ここに画像の説明を挿入

3つのパラメータは0です。通常の開発では、3つのパラメータborder cellpadding cellspacingは0です。

セルを結合します。結合の順序は先上后下先左右です。結合後、不要なセルを削除する必要があります。

行を結合: rowspan="結合セルの数"
列を結合: colspan="結合セルの数"

概要表

タグ名	意味	例示する
< 表 ></ 表 >	テーブルタグ	それは四角い箱です。
< tr></ tr>	表の行ラベル	行ラベルはテーブルタグ内でのみ意味を持ちます
< td ></ td>	セルラベル	セルタグは、何でも保持できるコンテナーレベルの要素です。
< 番目></ 番目>	ヘッダーセルラベル	まだセルですが、その中のテキストは中央揃えで太字になります。
< キャプション ></ キャプション >	表タイトルタグ	表のタイトルは表の後に続き、表の中央に配置されます。
clospan と rowspan	属性を結合する	セルを結合するには

テーブルパーティション構造

より複雑な表の場合、表の構造は比較的複雑であるため、表はヘッダー、本文、脚注の 3 つの部分に分割されます。これら 3 つの部分はそれぞれ thead、tbody、tfoot でマークされており、テーブル構造を区別しやすくなります。

知らせ：

< thead ></ thead>: テーブルのヘッダーを定義するために使用されます。タイトルなどを入れるのに使用します。内側にラベルが付いている必要があります。
< tbody></ tbody>: 表の本体を定義するために使用されます。データ本体を入れます。
< tfoot></ tfoot> は表の脚注などを配置するために使用されます。
上記のタグはすべてテーブルタグ内に配置されます。