1 前端重点相关概念
1.1 浏览器内核
浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面
1.2 Web 标准的构成
主要包括结构(structure)、表现(presentation)和行为(Behavior)三个方面
| 标准 | 说明 |
| 结构 | 结构对于网页元素进行整理和分类，现阶段主要学的是HTML |
| 表现 | 表现对于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS |
| 行为 | 行为是指网页模型的定义及交互的编写，现阶段主要学的是Javascript |
web标准提出的最佳方案：结构、样式、行为相分离。
简单理解：结构写到HTML文件中,表现写到CSS文件中，行为写到JavaScript文件中。
2 HTML标签导读
2.1 HTML基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML演示</title>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落</p>
<p>这是另一个段落</p>
<ul>
<li>HTML教程</li>
<li>CSS教程</li>
<li>JavaScript教程</li>
</ul>
<input type="text" placeholder="请输入内容" />
</body>
</html>语法说明如下：
- <!DOCTYPE html>：这是文档类型声明，用来将文档声明为 HTML 文档（从技术上来说它并不是标签），doctype 声明不区分大小写；告诉浏览器这个页面采用html5版本来显示页面；
- <html lang="en">：声明lang语言种类，表示en为英语网页，en 也可以显示英文；
- <html> </html>：该标签是 HTML 页面的根标签，其他所有的标签都需要在 <html> 和 </html> 标签之间定义；
- <head> </head>：该标签中用来定义 HTML 文档的一些信息，例如标题、编码格式等等；
- <meta charset="UTF-8">：用来指明当前网页采用 UTF-8 编码，UTF-8 是全球通用的编码格式，绝大多数网页都采用 UTF-8 编码；
- <title> </title>：该标签用来定义网页的标题，网页标题会显示在浏览器的标签栏；
- <body> </body>：该标签用来定义网页中我们能通过浏览器看到的所有内容，例如段落、标题、图片、链接等等；
- <h1> </h1>：该标签用来定义标题；
- <p> </p>：该标签用来定义段落；
- <a> </a>：该标签用来定义链接；
- <ul> </ul>：该标签用来定义列表；
- <li> </li>：该标签用来定义列表项；
- <input type="text" />：用来定义一个输入框
2.2 Vscode快捷键
2.2.1 编辑器与窗口管理
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
2.2.2 代码查找替换与格式调整
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
2.2.3 光标操作
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
2.2.4 查看全部快捷键
1 2 |
|
2.2.5 HTML骨架快速生成
1 2 |
！ ！tab |