一、前端

01 前端的定义

解决 GUI 人机交互问题、跨终端、PC/移动浏览器、客户端/小程序、VR/AR等以及Web 技术栈。

02 前端技术栈

浏览器可以将用户填写的内容或者一些行为通过HTTP协议交到服务器端，所以说JavaScript、CSS、HTML以及网络协议构成了前端最基础的技术栈。

03 前端技术栈应该关注的方面

美观、安全、兼容、功能、体验、性能、无障碍。

04 前端的边界

05 前端的开发环境

二、HTML

01 HTML的定义和结构

HTML全称为HyperText Markup Language，名为超文本标记。
其中HyperText意为超文本，包括图片、标题、链接、表格等；其次Markup Language意为标记，指的是用一个开始标签和一个结束标签来表示一段内容。
在标签上设置一些属性，例：
在< img src-"photo. jpg" />中scr为属性名，photo. jpg为属性值。

02 DOM树

03 HTML语法

1、标签和属性不区分大小写，推荐小写（因大家现在用ReAct review框架比较多，我们把那个自定义的一个组件用大写去表示，一些原生的标签用小写来表示。）
2、空标签可以不闭合，比如 input、meta（这个标签本身里边是不会再放其他内容，这种情况下我们可以不写那个接收标签，或者说在开始前最后写一个斜杠就OK。）
3、属性值推荐用双引号包裹
4、某些属性值可以省路，比如 required、 readonly（某一些属性其实他的值就是一个数，那这种情况下我们可以把他的值给省略。）

标题h1~h6，链接href="",图片img,可替代性文本alt，audio，video
输入input placeholder（占位符，用户未填写时填写框会默认显示的值）
input type= " range"（调节范围/大小）
input type="number" min-"a" max-"b"（指定输入一定范围的数字）
input type="date"h018-02-10"（最小日期，同理可填最大）
textarea （表示用户可写多行标签，是双标签）

多选
p
label input type="radio" name-"sport"/（项一）
a /label

......（项二）
......
/p

单选
p
select
option a /option
option b /option
option c /option
/select
/p

展开选项
Input list "countries" /
datalist id "countries"
option a /option
option b /option
optlon c /option
/datalists

文章（文字）

内容划分（页面整体） 以上是一个经典的页面划分图。
header/nav：这页面上关于头部的一些信息一般放在标签header，header就实际上也是给用户要呈现的内 容，head则是一个页面元数据，header可以放比如说logo、导航，像导航我们可以用一个nav这样的标签来表示。
main：页面的主体的部分被放在一个main标签里边，一般来说一个页面里面只有一个main元素（重点内容）。
aside：表示是跟这个内容相关的但并不是直接属于这个页面内容的，比如说我们看一篇新闻,那这个新闻的这个标题要还有一些正文属于在 nav标签里面，跟这个标题相关的一些，比如说广告、热点、一些文章推荐的是属于aside。
article：article就是表示一篇文章。一些文章正文，我们可以放在article里面，此外页面也可以没有article，比如说就是首页里面就是一些链接。
footer：是放在页尾的页面尾部的一些标签，它里边就一般会放参考链接、版权信息、备案信息等。

三、语义化

01 语义化的定义

HTML中的元素、属性及属性值都拥有某些含义
开发者应该遵循语义来编写HTML
有序列表用ol；无序列表用ul
lang 属性表示内容所使用的语言

02 语义化的使用者

开发者•修改、维护页面
浏览器 - 展示页面
搜索引擎 •提取关键词、排序
屏幕阅读器-给盲人读页面内容

03 语义化的优点

代码可读性
可维护性
搜索引擎优化
提升无障碍性

04 总原则：传达内容，而不是样式

别花里胡哨hhh

05 如何实现HTML语义化？

了解每个标签和属性的含义（可以看看MDN的文章）
思考什么标签最合适描述这个内容（考虑合理性）
不使用可视化工具生产代码（手写代码更具可控性，编辑器插件可作辅助）