- VSCodevscodeダウンロードリンクをインストールします
- VScodeを開い
て新しいファイルを作成しますctrl + Nファイルを保存しますctrl + S作成後、最初にファイルをxx.html形式で保存してから、コードを記述します
- VScodeを中国語モードに変更してvscodeを開き、サイドバーの下部にあるアイコンをクリックして、上部にある中国語のスタンドアロンインストールを検索します
インストールが完了したら、[再起動]をクリックします
vscodeを中国語に切り替える
コード書き込みは、最初に.html形式の入力として保存されます。
最初のものをクリックしてください!または、キーボードタブをクリックして、
コードの記述を開始できます。
- タイトルタグには、h1からh6までの6つのレベルのタグがあります
<h1>我是一个标题标签</h1>
- 段落タグ
<p>我是一个段落标签</p>
- 改行ラベル
<br />
- 太字、傾斜、取り消し線、下線ラベル
我是<strong>加粗</strong>的字体
我是<b>加粗</b>的字体
我是<em>倾斜</em>的字体
我是<i>倾斜</i>的字体
我是<del>删除线</del>
我是<s>删除线</s>
我是<ins>下划线</ins>
我是<u>下划线</u>
- divタグとspanタグは
<div>
レイアウトに使用され、1行に配置できるのは1つだけ</div>
です。
<span>
レイアウトには大きなボックスラベルが使用され、複数を並べて配置できます</span>
。ちいさな箱
- 画像タグ
<img src=" " alt=" " title=" " width=" " height=" " border=" "/>
画像が正しく表示されない場合画像タグの上にマウスを置くと、ラベルで書かれたテキストを表示できる場合にalt
ラベルを置き換えることができます画像幅タグ設定rの画像高さラベル設定額縁title
width
height
borde
- ラベルと画像パス
相対パスパス
付き<img src="img.jpg" />
パス<img src="images/img.jpg" />
シンボル/
パス<img src="../img.jpg" />
シンボル../
絶対パス(重要でないポイントを理解する)
<img src="C:\Users\50296\Desktop\前端基础第一天-HTML\案例\img.jpg" />
<img src="http://www.iheima.com/static/ihm/ladders/images/logo.png" />
シンボル \
- ハイパーリンクラベル
外部リンク
<h4>外部链接</h4>
<a href="http://www.iheima.com/" target="_blank">黑马</a>
<!--target窗口打开方式 默认_self当前页面打开 _blank新的页面打开-->
内部リンク
<h4>内部链接</h4>
<a href="10-demo.html" target="_blank">10</a>
空のリンク
<h4>空链接</h4>
<a href="#" target="_blank">###</a>
ダウンロードリンク
<h4>下载链接</h4>
<a href="img.zip" target="_blank">下载链接</a>
要素のリンク(写真、ビデオなど)
<h4>元素链接:图片,表格,视频</h4>
<a href="https://www.baidu.com/" target="_blank"><img src="img.jpg" /></a>
アンカーリンク
は、最初にhref属性値#11
に設定され、id属性を追加したラベルのターゲット位置を検索します。id=たとえば名前だけです。id="11"
<a href="#11">锚点链接</a>
<h4 id="11">锚点链接介绍</h4>
- コメントラベル
ショートカットキーCTRL + /
<!-- -->
- 特殊文字
スペース:
より小さい:<
より大きい:>