HTML and CSS learning day1

1. Install VSCode
   vscode download link
2. Open VScode to
   create a new file ctrl+N Save the file ctrl+S After creation, first save the file in xx.html format and then write the code
   
3. Change VScode to Chinese mode to open vscode, click on the icon at the bottom of the sidebar and search for chinese stand-alone install at the top

After the installation is complete, click restart

Switching vscode to Chinese

Code writing is first saved as .html format input!

Click the first one! Or click on the keyboard tab.

Then you can start writing code

5. The title tag has 6 levels of tags from h1 to h6 <h1>我是一个标题标签</h1>
6. Paragraph tag<p>我是一个段落标签</p>
7. Newline label<br />
8. Bold, slanted, strikethrough, underline label

 我是<strong>加粗</strong>的字体
    我是<b>加粗</b>的字体
    我是<em>倾斜</em>的字体
    我是<i>倾斜</i>的字体
    我是<del>删除线</del>
    我是<s>删除线</s>
    我是<ins>下划线</ins>
    我是<u>下划线</u>

9. The div and span tags are
   <div>used for layout, and only one can be placed in a row </div>. The big box
   <span>label is used for layout, and you can put more than one in a row </span>. Small box

10. Image tag

<img src=" " alt=" " title=" " width=" " height=" " border=" "/>

When the image does not display properly altlabel can be replaced
when the mouse over the image titletag can display text written in
widtha label set image width
heighttag set picture height
bordeof r label setting picture frame

11. Label and the image path
    relative path
    with a path <img src="img.jpg" />
    a path <img src="images/img.jpg" />symbol /
    a path <img src="../img.jpg" />symbol../

Absolute path (understand the non-key points)

<img src="C:\Users\50296\Desktop\前端基础第一天-HTML\案例\img.jpg" />

    <img src="http://www.iheima.com/static/ihm/ladders/images/logo.png" />

symbol \

12. Hyperlink label

external link

<h4>外部链接</h4>
    <a href="http://www.iheima.com/" target="_blank">黑马</a>
    <!--target窗口打开方式 默认_self当前页面打开 _blank新的页面打开-->

Internal link

<h4>内部链接</h4>
    <a href="10-demo.html" target="_blank">10</a>

Empty link

<h4>空链接</h4>
    <a href="#" target="_blank">###</a>

Download link

<h4>下载链接</h4>
    <a href="img.zip" target="_blank">下载链接</a>

Element links (pictures, videos, etc.)

<h4>元素链接：图片，表格，视频</h4>
    <a href="https://www.baidu.com/" target="_blank"><img src="img.jpg" /></a>

Anchor link
is first set in the href attribute value #11to find the target position of the label which added an id attribute id = just the name for exampleid="11"

<a href="#11">锚点链接</a>
<h4 id="11">锚点链接介绍</h4>

13. Comment label
    Shortcut keyCTRL + /

 <!-- -->

1. Special characters
   Space:  
   less than: <
   greater than:>