这是我参与「第四届青训营」笔记创作活动的的第1天

产品要求

功能
安全性
性能
兼容
美观
用户体验
无障碍

HTML

<!DOCTYPE html>表示采用标准模式处理HTML文件

语法

标签和属性不区分大小写，推荐小写
空标签可以不闭合，比如input、meta
属性值推荐用双引号包裹
某些属性值可以省略，比如required、readonly

具体常见标签

标题

h1~h6

列表

有序列表 ol li
无序列表 ul li
键值列表 dl dt dd

链接

<a href="" target="_blank"> target="_blank"表示在新窗口打开，不加的话是在本页面打开

多媒体

图片 img
音频 audio
视频 video

input

input标签用于给用户输入，type属性指定输入类型，有text、checkbox、range、number、date、file等

更多详见developer.mozilla.org/zhCN/docs/W…

文本处理相关

code代码、pre预设、strong强调、em文本内突出

内容划分

语义化标签：header，nav，main，article，aside，footer

语义化

HTML中的元素、属性及属性值都拥有某些含义开发者应该遵循语义来编写HTML

有序列表用o;无序列表用ul
lang属性表示内容所使用的语言

好处

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

CSS

组合器：

后代选择器：用空格``表示，包括孩子，孙子辈及以下
相邻下一个兄弟元素：用+表示，必须紧邻
后面所有兄弟节点：用~表示，无需紧邻
子选择器：用>表示

选择器优先级:

!important>内联样式>id选择器>类选择器、属性选择器、伪类选择器>标签选择器、伪元素选择器>通配符*

权重计算：10000、1000、100、10、1、0 对应上述优先级

布局

常规流

display属性
- block：块级盒子
- inline：行级盒子
- inline-block：本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
- none：排版时完全被忽略

行级：IFC，可以并列，只包含行级盒子的容器会创建一个IFC
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align决定一行内盒子的水平对齐
- vertical-align决定一个盒子在行内的垂直对齐
- 避开浮动(float)元素
块级：
- 某些容器会创建一个BFC
  - 根元素
  - 浮动、绝对定位、inline-block
  - Flex子项和Grid子项
  - overflow值不是visible的块盒
  - display: flow-root;
- BFC内的排版规则
  - 盒子从上到下摆放
  - 垂直margin合并
  - BFC 内盒子的margin不会与外面的合并
  - BFC不会和浮动元素重叠
表格布局
Flex布局
- 它可以控制子级盒子的：
  - 摆放的流向（→←↑↓）
    - 主轴：justify-content,六个选项
    - 交叉轴：align-items，五个选项默认是stretch
    - 也可以设置元素的align-self属性
  - 摆放顺序
  - 盒子宽度和高度
  - 水平和垂直方向的对齐
  - 是否允许折行
- 弹性：
  - flex-grow:定义项目的放大比例，默认为0，所有设置该属性的元素按比例分剩余空间
  - flex-shrink：属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
    
    当空间不足时，所有设置该属性的元素都按比例缩小
  - flex-basis：
  - flex属性：flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
Grid布局

块级 VS 行级

块级
- 不和其他盒子并列摆放
- 适用所有的和模型属性
行级
- 和其它行级盒子一起放在一行或拆开成多行
- 盒模型中的width、height不适用

浮动

float：现在一般是用来实现文字环绕效果

绝对定位

position:

static：默认值，非定位元素
relative：相对自身原本位置偏移，不脱离文档流
absolute：绝对定位，相对非static祖先元素定位
fixed：相对于视口绝对定位
sticky：相对它的最近滚动祖先和最近块级祖先偏移，看看MDN

浏览器常规流盒子里只允许都是行级元素或都是块级元素，当二者同时存在同一个盒子内时，浏览器会给不同的元素生成匿名的盒子

HTML与CSS基础 | 青训营笔记