今天我们就正式开始学习前端了，那么我们都需要做些什么呢？首先，需要搭建一个前端开发环境，其次，要学习html，CSS，JavaScript，最后，要进行一个前端的项目开发。
一.什么是前端？
1.前端，又名Web前端，用来直接给用户呈现一个一个的网页。一个软件通常情况下是由后端+前端完成。
2.生活中会遇到哪些前端页面？可以主要归结为三类：一类是Web页面，另一类是PC端应用程序页面，还有一类是移动端APP页面。
3.学了这个能达到什么样的水平呢？可以开发出来一个简单的Web页面。
二.什么是HTML？
HTML是一种超文本标记 语言。（超文本：意味着我这样一个页面支持文本、声音、图片、视频、表格、链接等数据。那如何能做到一个页面能展示这些数据呢？原来是要通过许许多多的标签，这些标签就组成许许多多的标记）。
HTML页面是运行到浏览器上面的。（推荐下载chrome浏览器）
三.vscode开发工具搭建
为什么推荐vscode？因为vscode是企业开发前端的时候非常常用的一个开发工具。
在vscode中，可以先安装三个插件，第一个插件是"Auto Rename Tag"（一个跟着变，另一个也跟着变）；另一个插件是"view-in-browser"（可以通过它在vscode里直接打开浏览器）；还有一个插件是"Live Server"（可以是浏览器页面自动刷新更改内容），具体使用方式见下图。
四.编写第一个HTML界面
前提：记事本编写代码。效果：直接在浏览器上输出hello word。
图中都是双标签（尖括号）：标签有开始有结束；单标签后面会介绍到。
1.html：html文件的根标签。
2.head：编写页面相关的属性。
3.title：页面的标题。
4.body：页面的内容展示信息。（head、title、body等所有的标签其实都相当于html的一个子标签，head和body是兄弟标签，head和title是父子标签，这样一种结构我们称为DOM树，DOM树中每一个标签相当于一个对象，程序员可以通过代码拿到这些对象，拿到之后就可以对这些对象进行增删查改。）
五.vscode如何快速生成代码框架
1."！+回车"快速生成代码，如下图：
第一行：指定当前html版本为5。 第二行：lang代表语言，指定当前页面内容为英文。
第四行："charset"代表浏览器解码规则。第五行：IE浏览器渲染效果按照IE浏览器最高版本展示。
第六行：移动端适配。
六.html标签：标题&段落&换行标签
**1.注释标签：**ctrl+/，可以直接把这一行变成一个注释。注释是在浏览器中不展示的，想看的话可以在浏览器中按法f12。
**2.标题标签：**h1-h6，有六个，从h1-h6，数字越大，则字体越小,字也越来越细。
3.段落标签：<p>段落内容</p>
4.换行标签：</br>，换行标签换行之后比段落标签间隙小。
（1）br是一个单标签，不需要结束标签。
（2）</br>是一个规范写法，不建议写成<br>。
七.格式化标签
**1.加粗标签：**strong和b标签。（前面的这个标签不仅有各自的功能，还可以代表强调，强调有什么好处？有时爬虫会爬Web网站，通过这些强调，可以让爬虫获取到当前的文本。其余道理同下）
**2.倾斜标签：**em标签和i标签。
**3.删除标签：**del标签和s标签。
**4.下划线标签：**ins标签和u标签。（这三个标签不再展示具体示例，道理和上面的一样。）
八.img标签----属于单标签
im标签是HTML里非常重要的一个标签，之所以说它重要，是因为页面的图片就是通过img标签来完成，在img标签中有很多属性：
（1）src属性：img标签必须带有src属性，表示图片的获取路径。
绝对路径：一种是图片路径，另一种是网络上的图片资源。
相对路径：./xxx.png ./img/xxx./png ../xxx.png
cpp
<img src="rose.jpg">此时要把rose.jpg这个图片文件放到和html中的同级目录中。
（2）其他属性：
①alt:替换文本，当文本不能正确显示的时候，会显示一个替换的文字。（alt后面的文案，只有在图片加载出错时，才会展示；如果图片加载成功，这个文案就不会展示）
②title:提示文本，鼠标放到图片上，就会有提示。
③width/height:控制宽度高度，高度和宽度一般改一个就行，另外一个会等比例缩放，否则就会图片失衡。
④border:边框，参数是宽度的像素，但是一般使用CSS来决定。
注意：属性和属性之间既可以用空格隔开，也可以用换行隔开。
九.超链接标签----a标签
1.a标签的两个属性：
（1）href:必须具备，表示点击后会跳转到哪个页面。然后浏览器会出现一个超链接，点击之后即可跳转到对应页面；下图第十行表示不跳转，就只在当前页面；下图第11行表示图片跳转
（2）target:打开方式，默认是_self（会在当前页面打开，会把之前的页面覆盖掉），如果是_blank则用新的标签页打开。
十.表格标签----table标签
1.table标签：表示整个表格。
2.tr:表示表格的一行。
3.td:表示一个单元格。
4.th:表示表头单元格，会居中加粗。
5.thead：表头信息，也就是表格的头部区域（注意和th区分，范围是比th要大的）。
6.tbody:表格得到主题区域。（通常把表头相关的信息放在thead里，表格内容相关的信息放在tbody里）。
注：表格标签有一些属性，可以用于设置大小边框等，但是一般使用CSS方式来设置。
这些属性都要放到table标签中：
（1）align:是表格相对于周围元素的对齐方式，align="center"（不是内部元素的对齐方式，而是控制的表格整体）。
（2）border:表示边框。1 表示有边框（数字越大，边框越粗），""表示没边框。
（3）cellpadding:内容距离边框的距离，默认1像素。
（4）cellspacing：单元格之间的距离，默认为2像素。
（5）width/height:设置尺寸。 注意这几个属性vscode都提示不出来。
（7）合并单元格：用rowspan="x"和colspac="x"（x表示合并的单元格数）。
cpp
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" width="500" height="300" cellspacing="0" cellpadding="50" align="center">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td rowspan="2">男</td>
<td>三</td>
</tr>
<tr>
<td>李四</td>
<!-- <td>男</td> -->
<td>四</td>
</tr>
<tr>
<td colspan="2">王五/女</td>
<!-- <td>女</td> -->
<td>五</td>
</tr>
</tbody>
</table>
</body>
</html>结果展示：
以上就是我们今天的内容，喜欢的朋友们记得一键三连喔~后续的内容更加精彩，敬请期待！