htmlの基本的な構文と使い方
01 テンプレート
- VScode を使用して HTML ファイルを作成する場合、次のように入力できます。 HTMLテンプレートを素早く取得する方法
- 注: これらは英語の記号です。番号
02コメント
- ショートカットキーはCtrl+/です
03 ラベルの種類
- シングルレーベルとダブルレーベルに分かれる
- ダブルラベル
- シングルラベル
04 ラベルの属性
1. 二重タグは他のタグと入れ子にすることができます
- レンダリング
2. タグ名の後に属性を追加できます
- 通用属性：
id、class、title等
05 開封方法
- VScode でプラグイン Live Server をダウンロードする
- 右クリックして「ライブサーバーで開く」を選択します
- 利点: コードを保存するとブラウザが自動的に更新されるため、手動で更新する必要はありません。
06 タイトルタグ
-
<h1> - <h6>フォニーナ・ド・フォンテーヌ
フォニーナ・ド・フォンテーヌ
フォニーナ・ド・フォンテーヌ
フォニーナ・ド・フォンテーヌ
フォニーナ・ド・フォンテーヌ
フォニーナ・ド・フォンテーヌ
-
レンダリング
07 段落タグ
<p> </p>
段落の最初の行に組み込まれたインデント効果を使用して、段落テキストをすばやく設定するために使用されます。
<p>芙宁娜，米哈游出品的游戏《原神》及其衍生作品中的角色，魔神名芙卡洛斯，“尘世七执政”中的末任水神，众水、众方、众民与众律法的女王，曾经统治着水之国枫丹 ，深受民众喜爱 。</p>
- レンダリング
08 テキスト変更タグ
1. 太字のテキスト
-
<strong> </strong>テキストの太字効果をすばやく設定するために使用されます。
2.斜体テキスト
<em> </em>
テキストの斜体効果を素早く設定するために使用されます
3. 上付き文字
<sup> </sup>
テキストを上付き効果としてすばやく設定するために使用されます
4. 下付きテキスト
<sub> </sub>
テキストを下付き効果としてすばやく設定するために使用されます。
5. テキストを削除する
<del> </del>
ドキュメント内の削除を説明する取り消し線効果を持つテキストをすばやく設定するために使用されます。
6. テキストを追加する
<ins> </ins>
文書内の更新や修正を説明するために、テキストに下線効果を与えるようにすばやく設定するために使用されます。
- 場合
<p>
<strong>芙芙</strong>
<em>芙芙</em>
芙芙<sup>2</sup>
芙芙<sub>2</sub>
<del>芙芙</del>
<ins>芙芙</ins>
</p
- レンダリング
09 画像タグ
<img src="" alt="">
画像を引用します。
- **src: **イメージのファイルアドレス[ディスクアドレス(相対パス/絶対パス)、ネットワークアドレス]。
- **alt:** 画像が正常に表示できない場合は、代わりにテキストプロンプトが表示されます。
<img src="image-20231212183411453.png" alt="图片加载失败">xxxxxxxxxx <img src="image-20231212183411453.png" alt="图片加载失败">
- レンダリング
10 ファイルパス
- ローカルパスとネットワークパスに分かれる
- ローカルパスは相対パスと絶対パスに分けられます
- 相対パスは、プロジェクト ファイルからの相対的な画像パスです (一般的に使用されます)。
- 絶対パスは、ローカル コンピュータ上のイメージの場所です。
- ネットワーク パスはネットワーク上の画像の場所です。
リンクタグ11個
<a href="" target=""> </a>
あるページから別のページにジャンプします (他の URL またはローカル HTML を使用できます)。
-
href
ジャンプアドレス (リンクまたは他の HTML ファイル)。
-
目標
リンクを開く方法 (
_self- 現在のページで開きます [デフォルト値]_blank- 新しいタブで開きます)。
12 個のアンカーポイント
-
<a href="#id" > </a> -
タグと属性 ID の共同使用
-
ページにスクロール バーが表示される場合は、このページ内の指定したラベルの位置にジャンプできます。
-
href
跳转目标标签的【id值】。