这是我参与「第四届青训营 」笔记创作活动的的第1天。
前端
是什么
网站的“前台”，运行在PC端或移动端展现给用户的页面。
干什么
解决GUI （Graphical User Interface--图形用户接口） 人机交互问题。
怎么干
通过三大核心技术在网络协议的帮助下与服务端进行交互。
| 技术 | 作用 |
|---|---|
| HTML | 内容：相当于人的骨骼 |
| CSS | 样式：相当于人的外貌 |
| JavaScript | 行为：相当于人的动作 |
具体内容日后给出详细分析嘿嘿嘿。
为什么而战
为了提升功能，美观，安全，性能，无障碍，兼容，体验。
HTML
是什么
HTML（HyperText Markup Language）超文本标记语言。
- 超文本：图形，动画，声音，表格，链接等
- 标记语言：一系列标签
干什么
负责将我们要表达的信息呈现在浏览器上。
怎么干
通过使用各种标签将信息进行处理，之后交给浏览器进行解析
标签
主体由三个标签构成：<html><head><body>
还有许许多多功能性标签：
- 分区根元素
- 内容分区
- 文本内容
- 内联文本语义
- 图片与多媒体
- 内嵌内容
- SVG与MathML
- 脚本
- 编辑标识
- 表格内容
- 表单
- 交互元素
- web组件
解析（DOM树）
DOM是什么呢？文档对象模型。DOM把一份文档解析为一棵树，即我们常说的DOM树。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> DOM </title>
</head>
<body>
<h1>Let's learn DOM!</h1>
<p>Are you ready?</p>
<ul id="DOM">
<li>D</li>
<li>O</li>
<li>M</li>
</ul>
</body>
</html>
接下来，就让我们用这个小案例敲开DOM的大门：
将上述代码抽象为DOM树即为上图，我们可以很清楚的看出html为树根即根元素，
之后html的两个分支meta与body为html的子元素而他们两个之间则是并列关系也可称为兄弟关系，再往下即body的三个子元素h1 p和ul,继续往下ul里面又包含三个子元素li li li,这样，我们就将这个代码的DOM树分析完成了。
