HTMLとCSSの学習day1

  1. VSCodevscodeダウンロードリンクをインストールします
  2. VScodeを開い
    て新しいファイル作成しますctrl + Nファイルを保存しますctrl + S作成後、最初にファイルをxx.html形式で保存してから、コードを記述します
    ここに画像の説明を挿入します
  3. VScodeを中国語モードに変更してvscodeを開き、サイドバーの下部にあるアイコンをクリックして、上部にある中国語のスタンドアロンインストールを検索します

インストールが完了したら、[再起動]をクリックします ここに画像の説明を挿入します

vscodeを中国語に切り替える
ここに画像の説明を挿入します
コード書き込みは、最初に.html形式の入力として保存されます。
ここに画像の説明を挿入します
最初のものをクリックしてください!または、キーボードタブをクリックして、
ここに画像の説明を挿入します
コードの記述を開始できます。

  1. タイトルタグには、h1からh6までの6つのレベルのタグがあります <h1>我是一个标题标签</h1>
  2. 段落タグ<p>我是一个段落标签</p>
  3. 改行ラベル<br />
  4. 太字、傾斜、取り消し線、下線ラベル
 我是<strong>加粗</strong>的字体
    我是<b>加粗</b>的字体
    我是<em>倾斜</em>的字体
    我是<i>倾斜</i>的字体
    我是<del>删除线</del>
    我是<s>删除线</s>
    我是<ins>下划线</ins>
    我是<u>下划线</u>
  1. divタグとspanタグは
    <div>レイアウトに使用され、1行に配置できるのは1つだけ</div>です。
    <span>レイアウトには大きなボックスラベルが使用され、複数を並べて配置できます</span>ちいさな箱

ここに画像の説明を挿入します

  1. 画像タグ
<img src=" " alt=" " title=" " width=" " height=" " border=" "/>

画像が正しく表示されない場合画像タグの上にマウスを置く、ラベルで書かれテキストを表示できる場合にaltラベルを置き換えることができます画像幅タグ設定rの画像高さラベル設定額縁
title
width
height
borde

  1. ラベルと画像パス
    相対パスパス
    付き<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" />

シンボル \

  1. ハイパーリンクラベル

外部リンク

<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>

  1. コメントラベル
    ショートカットキーCTRL + /
 <!-- -->
  1. 特殊文字
    スペース:&nbsp;
    より小さい:&lt;
    より大きい:&gt;
    ここに画像の説明を挿入します

おすすめ

転載: blog.csdn.net/weixin_42778611/article/details/114582950