- 前に書かれている：Bilibili dark horse programmer pink Teacherのチュートリアルを参照してください
- アドレス：https : //www.bilibili.com/video/BV14J4114768?t=328&p=26
目次
HTML共通タグ
組版ラベル
- 組版タグは主にcssと組み合わせて使用され、Webページ構造のタグを表示します。これは、Webページレイアウトで最も一般的に使用されるタグです。
タイトルタグh（by heart）
- 単語の省略形：ヘッドタイトルタイトルドキュメントタイトル
- Webページをより意味のあるものにするために、ページでタイトルタグを使用することがよくあります。HTMLには6つのレベルのタイトルがあります。
- タイトルタグのセマンティクス：タイトルとして使用され、重要度は低くなります
- 基本的な構文形式は次のとおりです。
<h1> 标题文本 </h1> <h2> 标题文本 </h2> <h3> 标题文本 </h3> <h4> 标题文本 </h4> <h5> 标题文本 </h5> <h6> 标题文本 </h6>
- 表示効果は次のとおりです。
- 概要：
- タイトルのテキストが太字になり、フォントサイズが大きくなります
- タイトルは1行に1つしかありません
段落タグp（ハート）
- 単語の省略形：段落の段落[ˈpærəgræf]この単語を覚えていない
- 関数のセマンティクス：
- HTMLドキュメントはいくつかの段落に分割できます
- テキストはWebページに規則正しく表示される必要があり、段落タグは分離できません。通常の記事を書くように、Webページ全体をいくつかの段落に分割することもでき、段落タグは
<p> 文本内容 </p>
- HTMLドキュメントで最も一般的なタグです。デフォルトでは、段落のテキストはブラウザウィンドウのサイズに応じて自動的に折り返されます。
横線ラベルhr（認識）
- 単語の略語：横横线[ˌhɔrəˈzɑntl]上記と同じ
- Webページでは、段落と段落を区切る水平線がよく見られ、ドキュメントの構造が明確で明確になります。
- これらの水平線は、画像を挿入することによって、または単にタグを介して実現できます。<hr />は、Webページの水平線にまたがるタグを作成することです。基本的な構文形式は次のとおりです。
<hr />是单标签
- Webページにデフォルトスタイルの水平線を表示します。
改行ラベルbr（メモリ）
- 略語：ブレークブレーク、ブレーク
- HTMLでは、段落内のテキストはブラウザウィンドウの左から右、右端に配置され、自動的に折り返されます。
- 特定のテキストを強制的に折り返す場合は、折り返しタグを使用する必要があります
<br />
- 現時点では、Enterキーを押してWordで直接改行するだけでは機能しません。
divおよびspanタグ（強調）
- Divスパンにはセマンティクスがありません。Webページレイアウトの主要な2つのボックスです。css+ divについて聞いたことがあるはずです。
- DivはDivisionの略語です。つまり、実際にはWebページを組み合わせるためのdivが多数あります。
- スパンスパン
- 構文フォーマット：
<div> 这是头部 </div> <span>今日价格</span>
- どちらもボックスであり、Webページの要素を保持するために使用されますが、それらは異なります。
divタグ レイアウトに使用されましたが、現在は1つのdivのみを行に配置できます スパンタグ レイアウトに使用され、複数のスパンを線に配置できます
組版ラベルの概要
ラベル名 定義 説明 <hx> </ hx> タイトルタグ タイトルとして使用し、重要度を下げる <p> </ p> 段落タグ HTMLドキュメントはいくつかの段落に分割できます <hr /> 横線ラベル 言うことはありません、ただの線 <br /> 改行ラベル <div> </ div> divタグ レイアウトに使用されましたが、現在は1つのdivのみを行に配置できます <span> </ span> スパンタグ レイアウトに使用され、複数のスパンを線に配置できます
テキスト書式タグ（ハート）
- Webページでは、テキストに太字、斜体、または下線の効果を設定する必要がある場合があります。現時点では、特別な方法でテキストを表示するには、HTMLでテキスト書式タグを使用する必要があります。
- 違い：
- bは大胆です。大胆であることに加えて、強調することも意味します。
- 残りは同じです...
ラベル属性
- いわゆる属性は、携帯電話の色や携帯電話のサイズなどの外部特性です。。
- 電話の色は黒です
- 電話のサイズは8インチです
- 水平線の長さは200です
- 写真の横幅は300です
- HTMLを使用してWebページを作成するときに、HTMLタグでより多くの情報を提供する場合は、HTMLタグの属性を使用してそれらを設定できます。基本的な構文形式は次のとおりです。
<标签名 属性1="属性值1" 属性2="属性值2" …> 内容 </标签名> <手机 颜色="红色" 大小="5寸"> </手机>
画像タグimg（強調）
- 単語の省略形：画像
- ウェブページに画像を表示したい場合は、画像タグを使用する必要があります次に、画像タグ<img />とその関連属性について詳しく説明します。（一匹の犬です）
- 構文は次のとおりです。
<img src="图像URL" />
- この文法のsrc属性は、画像ファイルのパスとファイル名を指定するために使用され、imgタグの必須属性です。
- 境界線にcssを使用します
- 注意：
- タグには複数の属性を含めることができます。これらの属性は、開始タグのタグ名の後に記述する必要があります。
- 属性の順序は区別されません。タグ名と属性、および属性と属性はスペースで区切られます。
- キーと値のペアの形式を取得しますkey = "value"形式
- 場合：
<img src="cz.jpg" width="300" height="300" /><br /> 带有边框的<br /> <img src="cz.jpg" width="300" height="300" border="3" /><br /> 有提示文本的<br /> <img src="cz.jpg" width="300" height="300" border="3" title="这是个小蒲公英" /><br /> 有替换文本的<br /> <img src="cz.jpg" width="300" height="300" border="3" alt="图片不存在" />
リンクラベル（強調）
- 単語の略語：アンカーの略語[ˈæŋkə（r）]。アンカー・鉄アンカーの基本説明
- HTMLでハイパーリンクを作成するのは非常に簡単です。テキストを含めるにはタグを使用するだけです。
- 構文フォーマット：
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
の属性 効果 href リンク先のURLアドレスを指定します（必須属性）タグにhref属性を付けるとハイパーリンクの機能があります 目標 リンクされたページの開く方法を指定するために使用されます。その値はselfおよび空白です。_selfはデフォルト値で、__ blankは新しいウィンドウでの開く方法です。
- 注意：
- 外部リンクを追加する必要がありますhttp：// www.baidu.com
- 内部リンクは、<a href="index.html">ホームページ</a>などの内部ページ名に直接リンクできます
- リンクターゲットがその時点で決定されていない場合、リンクタグのhref属性値は通常「＃」（つまり、href = "＃"）として定義され、リンクが一時的に空のリンクであることを示します。
- テキストハイパーリンクを作成できるだけでなく、画像、表、オーディオ、ビデオなどのさまざまなWebページ要素にハイパーリンクを追加することもできます。
注釈タグ
- HTMLコメントタグには特別なタグもあります。
- 読みやすく、理解しやすいがページに表示する必要がない注釈テキストをHTMLドキュメントに追加する必要がある場合は、注釈タグを使用する必要があります。
- 簡単な説明：
- コメントコンテンツはブラウザウィンドウに表示されませんが、HTMLドキュメントコンテンツの一部としてユーザーのコンピュータにダウンロードされ、ソースコードを表示すると表示できます。
- 構文フォーマット：
<!-- 注释语句 --> 快捷键是： ctrl + / 或者 ctrl +shift + /
- 重要性に注意：
- コメントは人々が見るためのものであり、目的はコードのこの部分が何をしているかをよりよく説明することです、プログラムはこのコードを実行しません
- 一般的に、一部の状態の説明、属性の説明などの単純な説明に使用されます。
- コメントコンテンツの前後のスペース文字。コメントは、コメントを付けるコードの上、別の行にあります。
- 推奨：
<!-- Comment Text --> <div>...</div>
- 非推奨：
<div>...</div><!-- Comment Text --> <div><!-- Comment Text --> ... </div>
パス（強調、難易度）
- 実際の作業では、ファイルをランダムに配置することはできません。そうしないと、ファイルをすばやく見つけることが難しくなるため、ファイルを管理するためのフォルダーが必要です。
- ディレクトリフォルダ：
- これは通常のフォルダであり、htmlファイルや画像など、ページを作成するために必要な関連資料のみを格納します。
- ルートディレクトリ
- ディレクトリの最初のレベルを開きますフォルダはルートディレクトリです
- ページには多くの写真が表示されます。通常、画像ファイル（画像）を保存するための新しいフォルダを作成し、画像を挿入します。「パス」メソッドを使用して画像ファイルの場所を指定する必要があります。パスは、相対パスと絶対パスに分類できます。
相対パス
- 引用されたファイルのWebページの場所に基づいて確立されたディレクトリパス。したがって、異なるディレクトリに保存されたWebページが同じファイルを参照する場合、使用されるパスは異なるため、相対パスと呼ばれます。
- 相対パスは、ターゲットファイルを見つけるためにコードが配置されているファイルから始まり、上位レベルと次のレベルと呼ばれるものは同じレベルです。簡単に言えば、画像はHTMLページに配置されます。
絶対パス
- 絶対パスは、Webサイトのルートディレクトリに基づくディレクトリパスを指します。絶対と呼ばれる理由は、すべてのWebページが同じファイルを参照する場合、使用されるパスは同じであることを意味します。
- 注意：
- 絶対パスの使用量は少なく、理解できます。ただし、その記述、特に記号\は相対パスではないことに注意してください/
アンカーポイントの配置（難易度）
- アンカーリンクを作成することにより、ユーザーはターゲットコンテンツをすばやく見つけることができます。
- アンカーリンクを作成するには2つの手順があります。
- 1.対応するID名を使用して、ジャンプターゲットの場所をマークします。（目標を見つける）
<h3 id="two">第2集</h3>
- 2.<ahref="#id名">リンクテキスト</a>を使用してリンクテキストを作成（クリック）（プル関係）姓がBiである祖父もいます。
<a href="#two">
- 回路図：
- 高速メモリ方式：
- それは、誰かが何かをするのを探すようなもので、まず彼を見つけ、関係を構築し、最後にその効果を確認します。
ベースタグ
- 文法：
<base target="_blank" />
- 総括する：
- ベースはリンク全体のオープン状態を設定できます
- ベースは<head> </ head>の間に書かれています
- すべての接続はデフォルトで追加されますtarget = "_ blank"
プレフォーマットされたテキストのプレタグ
- ラベルは、事前にフォーマットされたテキストを定義できます。
- <pre>タグ要素で囲まれたテキストは、通常、スペースと改行を保持し、テキストは等幅フォントでレンダリングされます。
<pre> 此例演示如何使用 pre 标签 对空行和 空格 进行控制 </pre>
- いわゆる事前フォーマット済みテキストは、スペースと改行が予約された、事前に記述したテキスト形式に従ってページを表示することです。
- このタグを使用すると、内部のテキストは、段落および改行タグなしで、書き込みモードに従って表示されます。ただし、全体的な制御が容易ではないため、あまり使用されていません。
特殊文字（理解）
- 特別な記号の中には、htmlで直接使用することが困難または不便なものがあります。現時点では、次の代替コードを使用できます。
- 総括する：
- 演算子＆で始まり、セミコロン演算子 ;で終わります。
- ラベルではなく、シンボルです。
- 「<」未満および「>」を超える特殊文字は、HTMLでは使用できません。ブラウザはそれらをタグとして解析します。正しく表示するには、HTMLソースコードで文字エンティティを使用してください
