一. 什么是前端？
解决GUI的人机交互问题。无论是PC还是手机，无论是app还是小程序，甚至是VR 前端工程师使用web技术解决多端交互问题 二. 前端技术栈？
HTML：负责页面结构内容 CSS: 设置页面样式 JS: 定义网页行为 这三个都是运行在浏览器中，而浏览器通过http协议与服务器通信。
三. 前端应该关注哪些方面？
前端不应只关注技术，还应该关注：
做的产品有哪些功能？应该解决什么问题？能否满足用户需求？ 做出的界面是否美观？ 无障碍需求者能否正常使用网页？ 能不能保证用户数据的安全？ 性能足够快？动画足够流畅？ 我们做出来的网页能否在各大平台流转？ 用户对一个产品的直观感受取决于前端。要想做出好产品应该学习很多东西
四. 前端的边界？
随着技术的不断发展，现在的前端早已脱离单纯地制作web网页的范畴，下面是前端在除web网页以外的应用：
使用nodejs构建服务器应用 使用Electron开发客户端应用 使用webRTC进行p2p传输 使用webGL开发3d游戏 前端在互联网行业是发展很快的领域，技术更新迭代特别快。只有不断学习才能跟上时代的发展
五. 开发环境？
浏览器：各大浏览器
编辑器：vscode，vim，webstorm等
六. HTML简介
HTML 全名为HyperText Markup Language
所谓超文本，指的是不只是包含文本。更包括图片，链接，表格等更丰富的元素
HTML使用标签表示一段内容，例如:
标题
我们可以在标签上写入属性，例如:
，src为属性名，photo.png为属性值
作为上面的特例，img也可以写成
HTML的第一行为，用于标识页面的html版本。
HTML的根标签为html，所有元素都需要包括在该标签中(以后的讲述中，标签二字自动省略)
html里有head和body，其中head存放各类元数据，body存放我们给用户看的内容。
七. HTML语法
标签属性推荐小写 空标签可以不闭合 属性值使用双引号包裹 某些属性值可以忽略，如required，readonly 八. HTML标签
8.1 标题
从h1到h6，标题依次减小
8.2 列表
列表分为有序列表，无序列表
有序列表为ol，无需列表为ul，它们的子元素都为li
还有一种列表分为dl，这种是列表标签。列表标签的子元素有两种：
dt代表父类 dd代表子类 这么说可能有点抽象，现在以一个实际的例子体验一下：
- 1
- 1
- 1
- 1
- 1
- 1
- 水果
- 苹果
- 鸭梨
- 蔬菜
- 西蓝花
- 番茄酱
截图
8.3 链接
通过链接，我们可以前往别的页面
链接最重要的属性是herf，代表链接跳转到的地址
target属性为_blank时，点击链接会新开一个页面
8.4 媒体属性
img audio video 这三个属性都是媒体数据，使用src 属性提供数据
audio，video的controls的属性可以让浏览器显示播放控件
8.5 输入
主要使用input标签，使用type属性指定input类型。默认为text
使用placeholder指定未输入时的文本提示
type可用的值如下：
值 属性 额外标签 range 滑块条 无 number 数字输入框 min代表最小值，max代表最大值 date 日期输入框 min代表最小日期 checkbox 多选框 radio 单选框 互斥属性通过name指定。含相同name属性的radio有且只有一个可被选中 其中有几个特殊的输入：
textarea，它可以输入更多的文本信息。
select多选输入框，子元素为option
如果想让input输入关键词时有提示，可以使用list属性，示例如下：
1 2 3m 8.6 文本表示标签标签 含义 属性 blockquote 长引用。 使用cite指定引用源，内部嵌套要引用的内容 cite 短引用 无 q 为文字两头包上双引号 无 code 表示代码 引用多行代码需要在code标签外部包裹pre标签 strong 加粗，用于语气的强调 无 em 斜体，用于重读 无 8.7 内容划分
标签 解释 header 页头 nav 导航栏 main 页面主体 article 列表条目 aside 侧边栏 footer 底部导航栏 九. 语义化
9.1 语义化的好处
提高代码可读性 提高可维护性 有利于搜索引擎优化 提升无障碍性 9.2 原则
传递内容，而不是样式
9.3 如何做到语义化？
了解标签和属性的含义 思考什么标签最适合描述这个内容 不使用可视化工具生成代码 其中了解标签的含义可以去MDN文档，该文档含中文
十. 谁在使用HTML？
角色 职责 开发者 修改维护页面 浏览器 展示页面 搜索引擎 提取关键词，排序 屏幕阅读器 为盲人阅读内容
