一、什么是前端
1、解决GUI人机交互问题
2、跨终端
（1） pc/移动浏览器
（2）客户端小程序
（3）VR/AR等
3、Web 技术栈
二、前端技术栈
三、前端应该关注哪些方面
四、前端的边界
五、前端开发环境
六、HTML是什么
HyperText Markup Language
HyperText：图片、标题、链接、表格
Markup Language：<h1>文章标题</h1>
<img src = "photo.jpg" />
src：属性名
photo.jpg：属性值
eg：
<！doctype html>：标记了当前html文件是什么版本，浏览器可以根据这个决定使用哪种渲染模式
<html>：文档的根标签,其他标签都写在这个里面
<head>:里面放置页面的原数据，不需要呈现给用户的信息
<body>：放置需要呈现给用户的内容
浏览器呈现效果
七、DOM树
DOM（Document Object Model）即文档对象模型，提供了对整个文档的访问模型，将文档作为一个树形结构，树的每一个结点都表示了一个HTML标签或标签内的文本项。
八、HTML语法
1、标签和属性不区分大小写，推荐小写
2、空标签可以不闭合
3、属性值推荐双引号包裹
4、某些属性可以省略
eg：required、readonly
九、HTML标题 h1-h6
十、HTML链接
十一、输入
十二、页面内容划分
header：放置logo、导航……
main：放置页面主题
aside：放置相关内容，但不太重要
article：放置文章正文，有些页面可以没有article
footer：放置参考链接、版权……
十三、语义
1、语义是什么
HTML中的元素、属性和属性值都拥有某些含义
开发者应该遵循语义来编写HTML
有序列表用 ol ；无序列表用 ul
lang 属性表示内容所使用的语言
2、HTML使用者
开发者：修改、维护页面
浏览器：展示页面
搜索引擎：提取关键词、排序
屏幕阅读器：读页面内容
3、语义化的好处
代码可读性
可维护性
搜索引擎优化
提升无障碍性
4、如何做到语义化
十四、HTML原则
传达内容，而不是样式
了解每个标签和属性的含义
思考什么标签最适合描述这个内容
不使用可视化工具生成代码
