html基础入门：vscode的安装与标签的认识

一、安装vscode

1.安装vscoude:直接百度即可

2.vscode设置成简体中文：搜索插件chinese安装

3.安装谷歌浏览器插件:iGG谷歌访问助手

4.安装vscode插件:
（1）代码提示插件 html css support
（2）代码片段插件 HTML/CSS/Javascript Snippets
（3）标签的自动改名，起始标签改名，结尾标签自动修改 Auto Rename Tag
（4）标签自动关闭 Auto Close Tag
（5）图标主题 Material Icon Theme
（6）文件主题 Material Theme
（7）vscode界面主题 one dark pro
（8）markdown语法检查器 markdownlint
（9）可以预览写好的markdown文件 Markdown Preview Enhanced
（10）直接打开浏览器运行 live server

5.注册微软账号登录vscode可以同步插件

我个人比较喜欢vscode上面自带的

二、标签

1.标题标签

H1

H2

H3

H4

H5

…

2.段落标签

<!--html中所有的内容，如果想添加到HTML中，就必须使用一个标签-->
<p></p>

3.a标签

<!--当前窗口--> 注释快捷键 ctrl+/
<a herf="https://www.baidu.com/" target="_self">百度</a>
<!--新的窗口--> 
<a herf="https://www.baidu.com/" target="_blank">百度</a>
<!--在指定窗口打开target="iframt"内联框架的name值,内联框架就是画中画-->
<iframe src="https//www.baidu.com" frameborder="0">百度</iframe>

<!--我现在想做一个画中画页面，需要点击之后才让它展现，应该这样来实现：-->
<!--首先一个a标签：-->
<a herf="https://www.baidu.com" target="baidu">百度</a>
<!--然后用iframe框架标签来实现画中画-->
<iframe srcdoc=""  frameborder="0" name="baidu"></iframe>
<!--注意1：a标签中的traget属性值要和iframe中的name属性值相对应-->
<!--注意2：srcdoc=""是显示在框架中的 HTML 内容,必须是有效的 HTML 语法-->

<!--frameborder 属性规定是否显示 iframe 周围的边框
iframeborder="0":关闭边框
iframeborder="1"：有边框
注意：出于实用性方面的原因，最好不用设置该属性，要使用 CSS 来应用边框样式和颜色-->

4.如何创建锚点

<!--我想在当前页面添加一个跳转到底部的锚点-->
<!--先创建一个a链接：-->
<a href="#footer">跳到底部</a>
<!--然后在底部添加一个锚点-->
<div id="footer">这是底部</div>
<!--我们如果需要跳转到顶部，应该这样写：-->
<a href="#">跳到顶部</a>
<!--注意1：任何元素只要添加ID,它就是锚点-->
<!--注意2：这里说一下为什么要用DIV标签创建锚点，因为DIV是通用的容器标签，当我们不知道一个内容该使用什么标签时，就可以使用DIV标签来包装-->

5.图片元素

<img src="https://www.php.cn/static/images/logos.png" width="500" alt="图片描述" />
<!--注意1：图片设置大小的时候，只需设置一个，宽度或高度，另一个会等比例缩放-->
<!--注意2：CSS可以设置大小，但是不要这样做（这点没懂，我看到网站上都是用CSS来控制图片大小）-->