スケルトンタグと一般的に使用されるタグ

`<!DOCTYPE>`

ドキュメントタイプを宣言しHTML5、標準に従ってページを解析するようにブラウザに指示します。

<!DOCTYPE> タグはドキュメントの上部にあり、現在のドキュメントが使用しているHTML標準仕様をブラウザに示すために使用されます。ブラウザが指定されたドキュメントタイプに従って解析できるように、ドキュメントタイプを最初に宣言する必要があります。。

`<html>` ラベル：

役割：Webページのルートノード。

`<head>` ラベル：

役割：格納するためのtitle、meta、style、script、linkおよび他のラベル。補助ブラウザはページを解析し、ページに表示しません。

`<title>` ラベル：

役割：ページに独自のタイトルを付けます。

`<body>` ラベル：

役割：ページのメイン部分は、ページが表示するようにラベルを格納するために使用されるp、h、a、imgなどなど。

注：<body>中央の複数のスペースまたは改行文字は、1つのスペースとして扱われます。

`<meta>` ラベル

Webページのメタデータを設定します。属性が異なると、<meta>タグの機能も異なります。

<meta charset="utf-8" />文字セットエンコーディングを指定しますutf-8（最適化されたグローバルコード）
キーワードの設定に使用 <meta name="keywords" content="xxx" />
説明情報を設定するために使用されます <meta name="description" content="xxxx" />

utf-8は、現在最も一般的に使用されている文字セットのエンコード方法です。一般的に使用されている文字セットのエンコード方法には、gbkとgb2312があります。gb2312には、6763の漢字が含まれています。GBKはすべての漢字を含み、GB2312の拡張であり、繁体字のサポートを追加し、GB2312と互換性があります。UTF-8には、世界のすべての国で使用する必要のある文字が含まれています。

タイトルタグ

<hn> 标题文本 </hn>

でhtml6つのタイトルの合計インチ <h1>、<h2>、<h3>、<h4>、<h5>と<h6>。重要度の高い順に減らします。<h1>これは最大のタイトルであり、ページに1回だけ表示できます。他は関係ありません。

段落タグ

<p>文本内容</p>

ページ上のテキストは整然と表示する必要があり、段落タグと切り離せません。通常の記事を書くのと同じように、ページ全体を複数の段落に分割できます。これはHTMLドキュメントの最も一般的なラベルです。デフォルトでは、テキスト段落は自動的に折り返されますブラウザウィンドウのサイズに応じて。

横線ラベル

<hr />
<!-- 单标签 -->

Webページでは、段落と段落を区切る水平線がよく見られ、ドキュメントの構造が明確で階層化されています。これらの水平線は、画像を挿入するか<hr />、Webページの水平線にまたがるタグを作成するタグによって実現できます。

改行ラベル

<br />

ではHTML、テキストの段落のブラウザウィンドウの右端まで、左から右に配置され、その後、ラップされます。特定のテキストを強制的に折り返す場合は、折り返しタグを使用する必要があります。

`div` `span` ラベル

<div>这是头部</div>
<span>今日价格</span>

div span セマンティクスはありませんが、Webページのレイアウトで一般的に使用される2つのタグがあります。

画像タグ

<img src="图像URL" />

HTMLWebページの要素を実装するには、HTMLラベルに依存する必要があります。画像を表示するには、Webページでimageタグを使用する必要があります。

src属性は、画像ファイルのパスとファイル名を指定するために使用されますimg。彼は必須の属性タグです。

alt この属性は、画像が見つからない場合に表示されるコンテンツを指定するために使用されます。

jpg png svg gif 画像のフォーマットです。

道

相対パスと絶対パス

相対パス

現在のファイルとの相対
同じレベルのディレクトリで、画像ファイルの名前を入力するだけです<img src="avatar.jpg" />。
イメージファイルは、現在のファイルの次のレベルのディレクトリにあります。フォルダ名とファイル名/を、などで区切って入力します<img src="img/avatar.jpg" />。
現在のディレクトリ内の画像ファイルは、ファイル名に加えて../、レベルの場合は../ ../、などを使用する必要があります<img src="../avatar.jpg" />。

絶対パス

ローカル絶対パス

D:\web\img\avatar.jpg

ネットワークパス

https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=586984b5572c11dfded1b8255b1c05ed/bd3eb13533fa828b9caedeb5fd1f4134960a5ad2.jpg

<!-- 本地绝对路径 -->
<img src="H:/html+css课程/01-html/mydev/bf.png" alt="sorry,图片未找到" />
<!-- 网络路径 -->
<img
	src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=586984b5572c11dfded1b8255b1c05ed/bd3eb13533fa828b9caedeb5fd1f4134960a5ad2.jpg"
	alt="sorry,图片未找到"
/>

<!-- 相对路径,相对当前文件所在的目录 -->
<!-- 同级目录 -->
<img src="bf.png" alt="sorry,图片未找到" />
<!-- 下级目录 -->
<img src="img/bf.png" alt="sorry,图片未找到" />
<!-- 上一级目录 -->
<img src="../bf.png" alt="sorry,图片未找到" />

<!-- alt 属性 用来表示 图片未找到时 所显示的内容 -->

リンクラベル

<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>

でHTMLハイパーリンクを作成し、それだけでリンクするオブジェクトを囲むようにリンクタグを使用し、非常に簡単です。

href：リンク先のurlアドレスを指定しhrefます。プロパティ時にラベルを適用すると、ハイパーリンク機能があります。ハイパーテキスト参照の略語。ハイパーテキスト参照を意味します。

target：リンク先のページを開く方法を指定します。

_self 現在のウィンドウで開きます（デフォルト値）。
_blank 新しいウィンドウで開きます。

注意：

外部リンクは、ネットワークパスに直接リンクできます。
内部リンクは、たとえば、内部ページ名に直接リンクできます<a href="index.html"> 首页 </a>。

その時点でリンクターゲットが決定されていない場合、リンクタグのhref属性値は通常、として定義されhref="#"、リンクが一時的に空のリンクであることを示します。
テキストハイパーリンクを作成できるだけでなく、画像、表、音声、ビデオなどのさまざまなWebページ要素にハイパーリンクを追加できます。

<!-- 当前窗口跳转 -->
<a href="https://www.baidu.com/">百度</a>
<a target="_self" href="https://www.baidu.com/">百度</a>
<!-- 新窗口跳转 -->
<a target="_blank" href="https://www.baidu.com/">百度</a>
<!-- 点击图片跳转 -->
<a href="https://www.baidu.com/">
	<img src="bf.png" alt="sorry,图片未找到" />
</a>

リストラベル

順不同リスト `ul`

順序付けされていないリストの各リスト項目には、順序レベルの区別がなく、並列です。基本的な構文形式は次のとおりです。

<ul>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
	......
</ul>

たとえば、次の場合、ニュースは順序がなく、キューに入れる必要はなく、最初に配信され、次に最初に公開されます。

[外部リンク画像の転送に失敗しました。ソースサイトにリーチング防止メカニズムがある可能性があります。画像を保存して直接アップロードすることをお勧めします（img-4nKc3fsP-1593770248576）（https://i.loli.net/2019/07 /22/5d355c8a6941286724.png）]

注意

リストには厳密なネスト関係があります
<ul></ul>タグにのみネストできます。タグ<li></li>に<ul></ul>他のタグやテキストを直接入力することはできません。
<li></li>Betweenは、すべての要素を保持できるコンテナに相当します。
順序付けされていないリストには独自のスタイル属性がありますが、通常は独自のスタイルを使用しません。

注文リスト `ol`

順序付きリストは順序付きリストであり、各リスト項目は特定の順序で配置および定義されます。順序付きリストの基本的な構文形式は次のとおりです。

<ol>
	<li>列表项1</li>
	<li>列表项2</li>
	<li>列表项3</li>
	......
</ol>

すべての特性は基本的にul同じです。しかし、実際の作業では、ほとんど使用されませんol。

カスタムリスト

カスタムリストは、用語や名詞を説明および説明するためによく使用されます。カスタムリストのリスト項目の前に箇条書きはありません。基本的な構文は次のとおりです。

<dl>
	<dt>名词1</dt>
	<dd>名词1解释1</dd>
	<dd>名词1解释2</dd>
	...
	<dt>名词2</dt>
	<dd>名词2解释1</dd>
	<dd>名词2解释2</dd>
	...
</dl>