前端技术栈：
- JavaScript ==> 控制行为
- CSS ==> 控制样式
- HTML ==> 控制内容
三剑客（前端）通过网络协议与服务器段（后端）就行交互
前端应该关注：
- 功能
- 美观
- 无障碍
- 安全
- 性能
- 兼容性（PC端和移动端）
前端的边界：
各种工具语言：
- nodeJS
- ELECTRON
- React Native
- Web RTC
- WebGL
- WebASSEMBLY
前端的技术在不断的更新
开发环境：
浏览器：
- IE/Edge
- Chrome
- Firefox
- Safari
编辑器：
- VSCode
- Vim
- WebStrom
HTML到底是什么：
HTML ==> HyperText Markup Language
- HyperText ==> 图片，标题，链接，表格
- Markup Language ==> 标签 （如：
<head></head>之类的，标签加属性值）HTML ==> 浏览器解析 ==> 得到DOM树
HTML是传达内容的，不是传达样式的
DOM树：
document
<html>
<head>
<meta><title>
<body>
<h1><p>每级就是一个DOM节点
HTML语法：
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以省略，比如required、 readonly
标题：
h1 ~ h6
列表：
- 有序（
<ol> <li>xxx</li> </ol>）- 无序（
<ul> <li>xxx</li> </ul>）<dl> <dt> <dd>xxx</dd> </dt> </dl>链接：
<a href="具体链接内容" targe="_blank"> 描述 </a>图片：
<img src="具体链接" alt=" 替代性文本" with="">音频：
<audio src="" controls></audio>视频：
<video src="" controls></video>输入：
input标签（短文本、一些表单、单选框、复选框 等）
textarea标签（长文本）
文本：
块级引用：
<blockquote cite="链接"> </blockquote>文段：
<p> </p>代码：
<code> </code><pre> <code> </code> </pre>强调：
<strong></strong><em></em>
内容划分：
将一些标签放在合适的位置
- nav ==> header
- article ==> main ==> aside
- footer
语义化是什么：
HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML
- 有序列表用ol;无序列表用ul
- lang属性表示内容所使用的语言
语义化的好处：
- 代码可读性
- 可维护性
- 搜索引擎优化
- 提升无障碍性
怎么语义化：
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
谁在使用我们的HTML：
我们写的HTML的读者都有哪些：
- 开发者-修改、维护页面
- 浏览器-展示页面
- 搜索引擎-提取关键词、排序
- 屏幕阅读器-给盲人读页面内容
我们所写的HTML的读者是不同的，但是我们应该按照一定的规则去写
这样有利于我们代码的阅读和修改，也方便团队之间的优化和改进产品
