前端

什么是前端？
在跨终端（PC、移动浏览器，客户端，小程序，VR，AR等等）使用web技术栈解决GUI（图形用户界面）人机交互问题

前端技术栈：html/css/js，网络协议

前端应该关注：
功能、美观、无障碍、安全、性能、兼容性（在各种设备上正常使用）、用户体验

前端的边界
node(服务器端)
electron/react native(客户端)
webRTC(P2P)
webGL(3D)
webASSEMBLY(将C++，C，Rust等低级源语言编译成可以在浏览器上运行的代码)

html

超文本标记语言

浏览器解析文件的模式

标签和属性不区分大小写
空标签可以不闭合（input,meta等）
属性值推荐双引号包裹
某些属性值可以省略（required,readonly等）

选项比较多，在页面直接展示出来会比较臃肿，用标签

用户输入时给用户提供提示的选项，用list

引用标签

blockquote 长引用，引用别人的文字比较长
cite短引用，短短几个字，常表示作品的名字或者章节
q短引用，引用具体的内容

code包裹代码，可长可短
引用多行代码，外面包裹pre

strong内容很重要/紧急
em一段话中强调的，需要重读的内容

内容划分

header
nav
main(一个)
article（可多个）
aside
footer

语义化

用html标签的原则是语义化

html的元素、属性、属性值都拥有某些含义
遵循语义来编写html
eg有序列表用ol,无序列表用ul
lang属性表示内容所使用的语言

语义化的重要性

谁会使用我们写的html
开发者——维护、修改页面
浏览器——展示页面
搜索引擎——提取关键词、排序
屏幕阅读器——给盲人读取页面内容，无障碍，每个人都可能有不太方便的时候（光照，在车上等）

语义化的好处

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

总的原则

html传达的是内容，而不是样式

做到语义化

了解每个标签和属性的含义
思考什么标签做适合描述内容
不使用可视化工具生成代码（无法控制生成内容）

css

css属性的计算

css选择器优先级——特异度即特殊的程度

122>22

css属性的继承

某些元素会自动继承其父元素的计算值，除非显式指定一个值（一般和文字相关的属性都是可以继承的，跟盒模型相关的属性都是不可继承的——width等）

不可继承的属性想要继承父元素的话，使用显式继承inherit

css属性的初始值

css中，每个属性都有一个初始值
比如background-color初始值维transparent，margin-left的初始值为0
可以使用initial关键字显式重置为初始值
background-color：initial

布局

确定内容的大小和位置

布局技术

常规流（行级、块级、表格、flexBox,Grid）
浮动
绝对定位

盒模型

width的计算

指定content box的宽度
取值为长度、百分比、auto
auto由浏览器根据其他属性确定
百分数相对于容器的content box宽度

height的计算

给定content box高度
取值为长度、百分比、auto
auto取值由内容计算得来
百分数相对于容器的content box高度
容器有指定的高度时，百分数才生效

padding

border

指定容器边框样式、粗细、颜色

连接处斜切过来
容器的width或者height为0时，三角形出现

当其他border color设置为transparent时，一个三角形出现

margin

可以指定元素四个方向的外边距
取值可以是长度、百分比、auto
百分数是相对于容器宽度

设置容器水平居中
margin-left:auto
margin-right:auto

margin塌陷（在文字排版时比较方便）\

box-sizing:border-box

设置的边框和内边距的值是包含在 width 内的
默认为box-sizing属性content-box
用box-sizing:border-box较多

overflow

visible\hidden\scroll
设置为hidden\scroll时，容器成为BFC，因为容器自己对自己的内容负责。