HTML （HyperText Markup Language）
前端需要关注的内容
- 功能
- 美观
- 安全
- 性能
- 无障碍
- 兼容
- 体验
DOM树
- 浏览器拿到HTML代码后会将HTML解析成一棵DOM树
语义化
- HTML 中的元素、属性以及属性值都拥有某些含义
- 开发者应该遵循语义来编写HTML
- 有序列表用ol; 无序列表用ul
- lang 属性表示内容所使用的语言
- 语义化的好处
- 代码可读性
- 代码可维护性
- 搜索引擎优化
- 提升无障碍性
- 如何做到语义化
- 了解每个标签和属性的含义
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
HTML是传达内容的不是传达样式的
一些重要的标签
<!DOCTYPE html>
在HTML5 中该声明是必要的，放在HTML文件头部，目的是确保浏览器按照最佳的相关规范进行渲染<head>
规定HTML 文档相关的配置信息，例如元数据<meta>，文档标题<title>，引用的文档样式<style>和脚本<script><meta>
表示那些不能由其他HTML相关（meta-related）元素（<style>、<script>、<title>等）表示的任何元数据信息，比如charset属性，可以声明文档编码
---------------------------------------分隔符--------------------------------------------------
CSS （Cascading Style Sheets）
CSS是如何工作的
选择器
使用多种方式选择元素
- 按照标签名（例如 h1{…}）、类名（例如 .nameStyle{…}）或id（例如 #inputId{…}）
- 按照属性（例如 [disabled]{…}， input[type=“password”]{…}）
- 按照DOM树中的位置，伪元素选择器（例如 ::before{…}）
- 伪类选择器（例如 :hover{…}）
- 通配选择器，使用 * 匹配所有
伪类
不基于标签和属性定位元素，伪类分为状态性伪类和结构性伪类。
-
状态性伪类：
例如链接符和输入框在不同交互情况下的状态：
-
结构性伪类
根据DOM节点出现在DOM树中的位置来决定是否选中元素，例如在列表中的不同位置来选择元素
伪元素
选定之前DOM树上没有的元素或者选中一些常规无法选中的元素，最常用的有<::after>、<::before>等，新版规范里，使用单冒号（:）表示伪类，双冒号（::）表示伪元素，以便区分伪类和伪元素。
CSS选择器优先级规则
- 最近的祖先样式比其他祖先样式优先级高
- "直接样式"比"祖先样式"优先级高
- 内联样式 > id选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
- 计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断
- 属性后插有
!important的属性拥有最高优先级
| 选择器 | 权重 |
|---|---|
| 继承 或 * | 0，0，0，0 |
| 元素选择器 | 0，0，0，1 |
| 类选择器或伪类选择器 | 0，0，1，0 |
| id选择器 | 0，1，0，0 |
| 行内样式style | 1，0，0，0 |
| !important | 正无穷 |
选择器方式的组合使用
| 名称 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 直接组合 | AB | 满足A同时满足B | input:focus |
| 后代组合 | A B | 选中B，如果它是A的子孙 | nav a |
| 亲子组合 | A>B | 选中B，如果它是A的子元素 | section>p |
| 兄弟选择器 | A~B | 选中B如果它在A后且和A同级 | h2~p |
| 相邻选择器 | A+B | 选中B，如果它紧跟在A后面 | h2+p |
行级排版上下文IFC
- 只包含行级盒子的容器会创建一个IFC
- IFC内的排版规则：
-
- 盒子在一行内水平摆放
-
- 一行放不下时换行显示
-
- text-align决定一个行内盒子的水平对齐
-
- vertical-align决定一个行内盒子的垂直对齐
-
- 避开浮动（float）元素
块级排版上下文BFC
-
某些容器会创建一个BFC，不简单是一个块级标签就能创建：
-
- 根元素
-
- 浮动、绝对定位、inline-block
-
- flex子项和grid子项
-
- overflow值不是visible的块盒
-
- display:flow-root
-
BFC内的排版规则：
-
- 盒子从上到下摆放
-
- 垂直方向上的margin合并
-
- BFC内盒子的margin不会与外面的合并
-
- BFC不会和浮动元素重叠
Flex布局 Flex Box
- flex-direction 指定的方向称为主轴，与其垂直的称为侧轴
- justify-content 属性指定flex盒子内的元素在主轴方向上的排列方式
- align-items 属性指定flex盒子内的元素在侧轴方向上的排列方式
- align-self 属性定义flex子项单独在侧轴方向上的对齐方式
- order 属性可以指定flex子项的摆放顺序
- flex-wrap 属性规定flex容器是单行或者多行，同时主轴方向决定了新行堆叠的方向，默认值为nowrap
- flex子项会创建BFC
Flexibility
- 可以设置flex子项的弹性：当容器有剩余空间时会伸展，当容器空间不足时会收缩
- flex-grow 属性指有剩余空间时的伸展能力：将剩余空间按各子项的flex-grow 属性值的比例进行分配
- flex-shrink 属性指容器空间不足时收缩的能力：没有剩余空间时按各子项的flex-shrink 属性的值的比例进行压缩
- flex-basis 属性指没有伸展或收缩时的基础长度
- flex: 1 指flex-grow: 1
- flex: auto 指flex-grow: 1; flex-shrink: 1; flex-basis: auto
- flex: none 指flex-grow: 0; flex-shrink: 0; flex-basis: auto
Float浮动
- 用来做图文环绕，不建议用来使用布局
Position 定位属性
- static 默认值，非定位元素
- relative 相对自身原本位置偏移，不脱离文档流
- absolute 绝对定位，相对于最近的非static祖先元素定位
- fixed 相对于视图绝对定位，导航栏常使用fixed定位
- sticky 粘性定位的元素是依赖于用户的滚动，在
position:relative与position:fixed定位之间切换
256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
