前端基本知识介绍
一.前端三剑客
1.前导
（1）HTML,CSS,JS都是单独的语言；
（2）HTML,CSS,JS构成前端技术基础；
2.三剑客的分工
（1）HTML：负责网页的架构；
（2）CSS：负责网页的样式，美化；
（3）JavaScript（JS）：负责网页的行为；
二.VsCode的介绍与配置
1.vscode的介绍
vscode 全称为 Visual Studio Code ，是⼀款免费开源的现代化轻量级代码编辑器，⽀持⼏乎所有主流的开发语⾔的语法⾼亮、智能代码补全、⾃定义快捷键、括号匹配和颜⾊区分、代码⽚段、代码对⽐ Diff、GIT命令 等特性，⽀持插件扩展，并针对⽹⻚开发和云端应⽤开发做了优化。
3.vscode的使用
3.1 图形界面操作
3.3 常用插件
我们通常需要代码提示我们辅助编写，这个时候就涉及到VSCODE提供的一系列的插件插件安装在 Extension 中，点击即可看到一个搜索按钮，可以输入关键字搜索自己想要的插件。如图：
前端开发推荐安装的几个插件：
1. jshint ： js 代码规范检查。
2. Beautify ：⼀键美化代码的插件。
3. Javascript(ES6) code snippets ： ES6 语法提示。
4. Auto Rename Tag ：⾃动重命名标签。标签都是成对出现的，开始标签修改了，结束标签
也会跟着修改。
5. Auto Close Tag ：⾃动闭合标签。针对⼀些⾮标准的标签，这个插件还是很有⽤的。
6. vscode-icons ：可选。提供了很多类型的⽂件夹 icon ，不同类型的⽂件夹使⽤不同的
icon ，会让⽂件查找更直观。
7. open in browser ：可选。右键可以选择在默认浏览器中打开当前⽹⻚。
三.HTML基础标签
HTML基础知识
1.HTML为何物？
HTML是超文本标记语言（Hyper Text Markup Language）是用来描述网页的一种语言。
注意：HTML不是一种编程语言，而是一种标记语言。
简单来说，HTML文件也可以直接称为网页，浏览器的作用就是读取HTML文件，并且以网页的形式去展示它们。
2.标签介绍
HTML标签是由尖括号包围起来的关键词，如<html></html>。
单标签与双标签
（1）双标签书写规则：<双标签名称>内容</双标签名称>，例如<html>内容</html>；
（2）单标签书写规则：<单标签名称/>，例如<br/>;
3.HTML属性
HTML属性指的是标签属性，HTML标签可以拥有属性，给相关的HTML元素提供更多的信息。
注意：
（1）一个HTML标签可有多个属性；
（2）属性写在HTML元素的开始标签；
（3）属性总是以名称/键值对的形式出现，比如：class="method";
4.HTML标签骨架
<!DOCTYPE html> ：向浏览器声明当前的⽂档类型是 html
<html></html> ：是⽹⻚当中最⼤的标签，我们称之为根标签
<head></head> ：为⽹⻚的头部，它⾥⾯的内容主要⽤来定义⽹⻚标签及给浏览器查看的
⼀些信息
<meta charset="UTF-8"> ： 定义⽹⻚的编码为UTF- 8
<title></title> ：为⽹⻚标题标签，它⾥的内容会显示在浏览器的标签⻚上
<body></body> ：为⽹⻚主体标签，它⾥⾯的内容都会显示在浏览器的⽩⾊窗⼝区域
基本的HTML标签
1.HTML标题标签
HTML的文章标题标签，如：<h1></h1>~<h6></h6>分六个级别，效果一次减少，并且每个标题都是独占一行空间。
如：
注意：没有<h7></h7>标签；
2.换行与空格
2.1空格问题
 ；表示一个空格；
如：
2.2换行问题
<br/>表示换行；
如：
扩展：对于HTML语言，没有严格的语义，即<br>与<br/>或者<br >浏览器都可以识别出来。
html1.0~5.0 xhtml(严格) 五大浏览器联合更新自己的版本HTML5(不严格)
3.HTML段落
3.1段落标签介绍
HTML段落是通过<p></p>标签进行定义的。
如：
作用：（1）虽然p标签的文字显示外观来看，和普通文字没有区别，但是它独占一行；
（2）标签语义化，便于定位；
3.2标签语义化
在合适的地方显示合理的标签，搜索引擎也偏好于标签语义化做的更好的页面。
4.字体加粗与倾斜及删除效果
4.1加粗标签
（1）<b></b>为加粗标签；
（2）<strong></strong>为加粗标签；
如：
区别：b标签为简单加粗；strong为加粗效果+特别强调效果；
4.2倾斜
（1）<i></i> 为倾斜标签；
（2）<em></em>也可实现倾斜；
如：
区别：em标签的语义更强一些。i为倾斜了，em为又倾斜了。
4.3删除
<s></s> 删除效果；
<del></del> 删除效果；
如：
注意：这两个标签没有任何语义区别，而w3c则说明s标签要被del标签替代；
5.图片标签
<img scr="" alt="" width="" height="" title="">
（1）src:表示资源,图⽚加载的名字
（2）width(宽),height(⾼):设置图⽚的⼤⼩。
（3）title:⿏标悬停在图⽚上的提示⽂字
（4）alt:
图⽚没有被正常加载时显示
⽹⻚阅读器读取此内容
如：
6.超链接
6.1超链接使用
超链接：点击页面发生跳转；
使用标签为：<a href=""></a>
其中href为：跳转的网址；
如：
6.2空链接
空链接：在href中指定为#号即可；
作用：（1）暂时不知道点击之后跳转到哪里，使用空链接占位；
（2）刷新界面；
<a href="#"></a>
