这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
重学HTML & CSS基础
HTML、CSS、JavaScript被称为前端三件套，他们分别关注内容、样式、行为，是所有前端技术的基础。
HTML基础
理解HTML
HTML为Hyper Text Markup Language的缩写，译为超文本（可以表示为图片、链接等形式）标记（使用开始、结束<... />标记信息）语言
运行机制
浏览器拿到HTML代码，会将HTML代码进行解析，解析为DOM树
常见HTML标签
- h1～h6
标题标签，1～6表示从大到小
- ul、ol、li、dl、dt、dd
ul：无序列表项，ol：有序列表项，li：列表条目，dl：键值对列表（可自定义），dt：列表标题，dd列表项子元素
- a
一般作为跳转链接，href设置目的链接，target设置打开方式
- img、audio、video
媒体标签，分别代表图片、声音、视频
- input
文本输入框，需要注意type属性和一些特别的场景：datalist...
- blockquote、cite、code
长引用、短引用、代码展示
- strong、em
含义强调、语义强调
...
语义化标签
- header、nav、main、article、aside、footer
语义化好处
- 代码可读性
- 可维护性
- 搜索引擎优化SEO
- 提升无障碍性
CSS基础
理解CSS
CSS为Cascading Style Sheets（层叠样式表），即最终实现效果由各个样式层叠
运行机制
CSS使用
引入CSS
- 外链
- 嵌入
- 内联
选择器
通配（*）选择器、标签选择器（span）、id选择器（#id）、类选择器（class）、属性选择器（[]）,另外也可以通过伪类作为更多样的选择
选择器可以通过组合的方式来满足你的需要，有包括（～、>、+...），使用，可以将样式组合
颜色
颜色有rgb和#十六进制、HSL三种形式，rgb和#对应的是三原色组合，HSL可以调节明暗、饱和度。另外最后属性值一般为不透明度。
文字相关
- font-family，一般使用很多，间隔来保证单设备匹配，也可通过@font-face外链引入
- font-weight，字重（粗细）
- line-height，行高
- white-space，文本换行
选择权权重
权重最高的样式生效
继承
一般文字相关可继承、盒模型相关不可继承
层叠样式表渲染机制
布局
盒模型
- 标准盒子模型 ＝ margin + border + padding + content （content = width | height）
- IE盒子（怪异）模型 ＝ margin + content （content = border + padding + width | height） 可通过box-sizing转换
需要注意的是border实际是梯形！！
行级（IFC）、块级（BFC）
可通过display转换，需注意inline-block特殊属性
块级需要注意margin上下值会合并
Flex
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 可以简便、完整、响应式地实现各种页面布局，是目前布局的首选方案
Grid
相较于flex，提供二维的布局模式
——————————————————————————
以上两布局具体可以看阮一峰老师的文章，这里不做具体描述
float浮动
提供图文环绕的效果
position
relative、static、absolute（脱离文档流）、fixed（脱离文档流）、sticky...
个人总结
本次重新学了HTML和CSS的知识，很多知识自己已经较熟练掌握，当然也有理解不够深入的（如：层叠样式表渲染机制），重学每个人对于HTML、CSS的理解也能更近一步掌握相关知识。
