这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天

前言

因为之前已经学过HTML，所以这次的第一课就当做复习，其中我觉得比较重要的两个点是DOM树结构的概念和语义化的使用标签，这两个在后面的学习和做项目过程中都很有概念上的帮助

在写项目时，我的习惯也是先进行HTML的搭建，先把框架搭好，vue的话会配合js一起把HTML写好，最后再进行css的调试，其中HTML的搭建是非常重要的一步，如果前期框架没有搭好，那么后面的调试都会出现很多问题。

一、什么是前端？

前端（又称Web前端），是指计算机Web应用程序（网站）的前台页面。在我们打开一个网站所看到网页界面的内容以及交互体验，一般都是由前端工程师进行开发设计的页面，该内容属于前端部分。

如：使用小程序开发者工具开发的这一部分代码，是属于前端部分。小程序开发是前后端分离的，获取动态数据是通过后端的API进行请求。

前端通过GUI界面解决人机交互问题，还需要能够跨终端显示。

如：PC/移动浏览器、客户端/小程序、VR/AR等。

前端由HTML、CSS、JavaScript组成。其中，HTML决定结构和内容，CSS决定表现和样式，JavaScript决定控制网页的行为。只有前端是静态的，通过一系列网络协议与服务器端交换数据，才能实现前端动态显示。

前端应该关注7个方面：

功能

美观

安全

兼容

性能

无障碍

体验

二、前端的开发

浏览器

推荐Google Chrome和Microsoft Edge

我自己在使用的是Edge，我觉得Edge已经超越了谷歌，很多插件包括整体浏览器的使用感觉是比谷歌浏览器要丝滑的

编辑器

推荐 Visual Studio Code

我个人觉得vsode更好用，因为它更加的轻量级，可以自己选择各种各样的插件，比起webstorm，可坑会更方便一点。

三、HTML

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

HTML的内容划分：

在写实际的页面也是这样，看到美工给来的页面，首先要想的是如何划分格子（div），划分成几个格子，所以使用这些带有语义的div就可以迅速的帮助我们划分好区域，接下里再做详细的划分。

四、HTML的语义化

语义化指的是HTML中的元素、属性及属性值都应该有某种含义。

开发者应该遵循语义来编写HTML。

语义化有4个好处：

代码可读性

可维护性

搜索引擎优化

提升无障碍性

注意：HTML应该尽可能简洁，传达内容而不是样式，样式应该交给CSS完成。