因为工作中接触到一些代码的使用，本小白开始学习编程知识，每天记录一些自学编程过程中的一些知识点，一是为了方便跟大家分享，另外就是为了以后复习使用。

• 安装Visual Studio Code，Chrome（谷歌浏览器）
• 安装VS和Chrome插件

Visual Studio Code常用插件：

1.语言、格式化：

• Chinese Language Pack for Visual Studio Code 中文简体语音包
• Prettier-Code Formatter 几乎支持所有前端代码的格式化
• Simple icons小巧实用的文件图标集合
• One Dark Pro个人非常喜欢的一款主题

2.HTML/CSS插件：

• Auto Close Tag 标签自动关闭
• Auto Rename Tag 标签自动更名
• Auto Complete Tag 标签自动完成
• HTML CSS Support 自动补全样式表
• HTML Snippetshtml 代码片段
• highlight matching tag 自动高亮显示结束括号/标签

3.JS/Vue插件：

• JavaScript(ES6) Code snippets JS/ES6代码片段
• Vue Vue语法提示
• Vue2 Snippets Vue代码片段
• Vue-beautify Vue代码格式化

4.PHP/MySQL相关插件：

• PHP Intelephense 代码提示与函数跳转
• PHP IntelliSense 代码智能感知（可选）
• PHP DocBlocker代码块注释（可选）
• Format HTML in PHP格式化 PHP 中的 html 代码
• MySQL MySQL 语法高亮

5.MarkDown语法插件：

• Markdownlint Markdown 语法检查器
• Markdown Rreview Enhancedmardown 文件预览

6.提高工作效率的插件：

• Path Intellisense 智能路径提示
• Bracket Pair Colorizer 不同颜色表示不同层级括号
• Code Runner 支持常见的编程语言运行调试
• Live Server 内置 web 服务器

7.如何在VSCode中配置PHP代码检查器：在VSCode配置文件（setting.json）

// 版本与路径替换成系统中的php可执行文件路径与版本号
"php.validate.executablePath": "E:/phpstudy_pro/Extensions/php/php7.3.4nts/php.exe",
"intelephense.environment.phpVersion": "7.3.4",

• 页面的内容均由元素组成；
• 元素是由标签来描述的，标签根据元素的类型分为单标签、双标签，每个元素的特征由属性来描述，需要将属性写到起始标签中。

开会通知：本周五进行大扫除
开会通知：本周五进行大扫除

• 元素是由标签和属性共同描述的；

男朋友

• html中的所有内容，如果想要添加到html文档中，就必须要使用一个标签。

// JS代码必须写到一个script标签中

Hello World
Hello World
Hello World

程序猿界有一句话：每一个程序猿都应该拥有一台MacBook Pro

• 链接标签 a标签-当今互联网的灵魂，实现了全球资源之间的共享

1.target属性：

• 规定在何处打开链接文档。

1. _blank跳转到新的页面，在新窗口打开
2. _self(默认值) 在相同的框架中打开链接文档；
3. _parent在父框架集中打开被链接文档；
4. _top在整个窗口中打开被链接文档；
5. iframename在指定窗口打开。

代码案例：

Hello World

Hello World

打开百度

• 注意：
  使用target="iframename"时，需要注意a标签的target值需要跟iframe的name值相等。

2.锚点

• 使用锚点可以实现在当前页面中的任意位置进行跳转。

跳转到底部

This is footer

• div：通用元素标签，内部可以放任意元素类型。
• 如何返回当前页面顶部？
  直接将a标签的href值设置为#即可，如：回到顶部。
• 备注：
  vue.js、react等单页面应用，路由就是使用锚点实现的。

如果我们想要在页面添加一张图片，可以使用img标签

• 必须属性：

1. src 图片的URL地址；
2. alt 图片的描述信息。

• 案例：

• 备注：
  设置图片大小时，可以只设置宽度或者高度，另一个属性就会进行等比缩放，不需要同时设置。在实际开发中，一般在CSS中设置图片的样式，图片很少单独使用，基本都是用在链接中。

个人总结：有些代码看起来简单，但是自己上手起来真的是难，属于那种一看就会，一写就错，看来只能通过多写，多练才可以熟能生巧，这是个细活，急不得，要戒骄戒躁，平稳心态来面对这么多难题，加油！