一、什么是前端
使用web技术栈解决多端（PC/移动浏览器、客户端/小程序、VR/AR等）图形用户界面交互问题
1.1 前端技术栈：JacaScript（行为）、css（样式）、HTML（内容）
1.2需关注的方面：功能、美观、无障碍、安全、性能、兼容、体验等
1.3 前端的开发环境： 浏览器： IE/Edge、Chrome、Firefox、Safari 编辑器： VSCode、Vim、WebStorm
二、HTML（HyperText Markup Language）
2.1 定义
HTML 是用来描述网页的一种语言。HTML 是一种在 Web 上使用的通用标记语言。HTML 允许格式化文本，添加图片，创建链接、输入表单、框架和表格等等，并可将之存为文本文件，浏览器即可读取和显示。
- HTML 使用标记标签来描述网页
- HTML 文档包含了HTML 标签及文本内容
- HTML文档也叫做 web 页面
2.2 语法及实例展示
2.2.1 语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，如input、meta
- 属性值推荐使用双引号包裹
2.2.2 入门实例
<!DOCTYPE html> //声明为HIML5文档
<html> // <html> 元素是 HTML 页面的根元素
<head>
<meta charset="utf-8">
<title>文档标题</title> //<title>元素描述了文档的标题
</head>
<body> //<body>元素包含了可见的页面内容
<h1>我的第一个标题</h1> //<h1>元素定义一个大标题
<p>我的第一个段落。</p> //<p>元素定义一个段落
</body>
</html>
运行结果：
2.3 基本标签
(1)HTML标签
整个网页是从<html>这里开始的，然后到</html>结束。
(2)head标签
head标签代表页面的“头”，定义一些特殊内容，这些内容往往都是“不可见内容”（在浏览器不可见）。
| head内部标签 | 说明 |
|---|---|
| <title> | 定义网页的标题 |
| <meta> | 定义网页的基本信息（供搜索引擎） |
| <style> | 定义CSS样式 |
| <link> | 链接外部CSS文件或脚本文件 |
| <script> | 定义脚本语言，如JS |
| <base> | 定义页面所有链接的基础定位 |
(3)body标签
body标签代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”（在浏览器可见）。
| 标签 | 说明 |
|---|---|
| <h1> ~<h6> | 各级标题 |
| <p> | 段落 |
| <br> | 换行 |
| <hr> | 水平线 |
| <div> | 分割（块元素） |
| <span> | 区域（行内元素） |
| <img> | 图像（名称和尺寸以属性的形式提供） |
| <table> | 表格（每个表格均有若干行（由<tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。） |
| <ul> | 无序列表，其中<li>标记列表项 |
| <ol> | 有序列表，其中<li>标记列表项 |
文本格式化
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr> （缩写）
<address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）
2.4 语义化
HTML中的元素、属性及属性值都拥有某些含义；开发者应遵循语义来编写HTML。语义化可以提高代码可读性、可维护性；有利于搜索引擎的优化以及提高无障碍性。
需要注意的是传达内容，而不是样式
（1）使用HTML的对象：
- 开发者 -- 修改、维护页面
- 浏览器 -- 展示页面
- 搜索引擎 -- 提取关键词、排序
- 屏幕阅读器 -- 给盲人读页面内容
（2）如何做到语义化：
- 了解每个标签和属性的含义（mdn文档）
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
