《环境搭建-Visual Studio Code及常用插件安装》20201208

一、环境安装

1、安装VScode编辑器、谷歌浏览器

2、安装VScode编辑器插件

中文插件包：Chinese (Simplified) Language Pack for Visual Studio Code

HTML和CSS代码提示插件：HTML CSS Support

快速生成代码片段插件：HTML/CSS/Javascript Snippets

标签首尾自动更名插件：Auto Rename Tag

图标主题插件：Material Icon Theme

主题插件：One Dark Pro

markdow语法检查器插件：markdownlint

markdow预览插件：Markdown Preview Enhanced

通过编辑器运行代码服务插件：Live Server

3、安装谷歌浏览器插件插件

用于访问谷歌插件商城：iGG谷歌访问助手

拦截浏览器广告：AdBlock

设置谷歌浏览器编码：Charset

用于一些网站的破解相关：Tampermonkey

Vue开发工具：Vue.js devtools

颜色识色器：chrome-color-picker

划词翻译

浏览器文档阅读，去广告、侧边栏：简悦-SimoRead

量页面工具：PageRuler Redux

二、标签

页面上看到的内容叫元素
标签属性写在起始标签上
页面上的元素都是由标签和标签属性共同设置的

<!-- 由大到小 -->
<h1>标题标签</h1>
<h2>标题标签</h2>
<h3>标题标签</h3>
<h4>标题标签</h4>
<h5>标题标签</h5>
<h6>标题标签</h6>
<!-- 段落文章使用 -->
<p>段落标签</p>
<!-- 链接标签 -->
<a href="https://www.baidu.com" target="_self">百度</a>
<a href="https://www.baidu.com" target="_blank">百度</a>
<!-- 内联框架 -->
<a href="https://www.php.cn" target="baidu">打开百度</a>
<iframe src="https://www.baidu.com" name="baidu"  width="400" height="400"></iframe>

1. a标签中href属性是跳转的地址；
   target是地址的跳转方式：_self是本页面跳转，_blank是新打开窗口跳转；
   target也可以通过设置iframe框架的标签名进行iframe页面的跳转

2. iframe标签是在当前页面新增一个网页窗口
   width:设置框架页面宽度
   height:设置框架页面高度
   src：框架页面跳转的地址
   srcdoc：可以设置框架页面默认的文字描述

<!-- 锚点使用 -->
<a href="#footer" id="header">跳转到底部</a>
<!-- 通用容器标签，内部可以放任何类型的元素 -->
<div style="height: 1000px;"></div>
<div id="footer">我是底部</div>
<a href="#md">跳转到a标签</a>
<a href="#">跳到最顶部</a>

1. 通过设置锚点可以实现页面中的任意节点跳转

<img src="https://www.php.cn/static/images/index_banner1.png" alt="图片挂了" width="200">

img图片标签：

1. src设置图片路径，或者网络地址
2. alt图片路径错误，或不存在时，显示文字说明
3. width图片宽度，一般图片的宽度或者高度只要设置一个，图片自动回复等比缩放，所以不需要同时设置高度宽度
4. 图片标签很少单独使用，一般配合其他标签使用，如a标签

总结：标签是设置页面元素的容器，所有元素都可以通过style样式来进行控制