HTML & CSS | 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第1天。
MDN 和 W3C HTML&CSS 规范。
一、什么是前端
- 解决（图形界面）GUI下的人机交互问题
- 跨终端（eg：PC/移动浏览器，客户端/小程序，VR/AR...）
- 使用Web技术栈
前端技术栈：
HTML、CSS、JavaScript：运行在浏览器里面。
浏览器利用HTTP协议，和服务器端通信，把前面前端的这些代码，通过HTTP协议从服务器上拿到，并渲染成我们看到的页面。
浏览器，也可以把用户填写的内容或者用户的一些行为，通过HTTP协议提交到服务器端，所以我们说三件套和网络协议（eg:http、socket协议）构成前端最基础的技术栈
二、HTML
2.1 定义
超文本标记语言：HyperText Markup Language
HyperText（超文本）：图片，链接，标题，表格
2.2 DOM树
- 文档：一个页面就是一个文档，DOM中使用document表示
- 元素：页面中的所有标签都是元素, DOM中使用element表示
- 节点：网页中的所有内容都是节点(标签、属性、文本、注释等)，如文档节点(document对象)
DOM把以上内容都看做是对象
一棵节点树中的所有节点彼此都是有关系的。
2.3 HTML语法
- 标签和属性不区分大小写，推荐小写
- 空标签可以不闭合，比如input、 meta
- 属性值推荐用双引号包裹
- 某些属性值可忽略，如required，readonly
2.4 一些标签
- 列表list
- ul - li 无序
- ol - li 有序
- dl - dt dd z自定义标签
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
- 链接（anchor）
- target="_blank" -> 新窗口打开链接
<a href="https:www.baidu.com" target="_blank">
百度
</a>
-
多媒体：img、audio、video标签
- src="地址"
-
表单类控件：input、textarea、select(下拉菜单)
- placeholder
- type (range拖动条/number/date/text/password/radio单选/checkbox多选/button/reset/submit/)
- 快捷选项：list属性 以及 datalist标签。（文本框输入，list里面自动配对）
<input type="range">
<input type="number" min="1" max="10">
<input type="date" min="2019-05-05">
<select>
<option>选项1</option>
<option>选项2</option>
<option selected>选项3</option>
</select>
<input list = "countries" />
<datalist id="countries">
<option>Greece</option>
<option>United Kingdom</option>
<option>United States</option>
</datalist>
- 文本类标签
- 块级引用：blockquote
- 短引用：cite，作品名字/章节、q（前面提到过的）
- 代码块：code
- 预格式化文本：pre
2.5 页面划分的语义化标签
最好只有一个main标签
什么是语义化
1. 每一个HTML元素都有具体的含义
- a元素：超链接
- p元素：段落
- h1元素：一级标题
2.传达内容，而不是样式
- 所有元素与展示效果无关
- 元素展示到页面中的效果，应该由CSS决定。
- 因为浏览器带有默认的CSS样式，所以每个元素有一些默认样式。
重要：选择什么元素，取决于内容的含义，而不是显示出的效果
语义化的好处：
- 代码可读性
- 可维护性
- 搜索引擎优化（SEO）
- 提升无障碍性
如何做到语义化：
- 了解每个标签和属性的含义（MDN文档、W3C规范）
- 思考什么标签最适合描述这个内容
- 不使用可视化工具生成代码
2.6 谁在使用我们写的HTML
- 开发者：修改、维护页面
- 浏览器：展示页面
- 搜索引擎：提取关键词、排序
- 屏幕阅读器：给盲人读页面内容
三、CSS
作用：用来定义页面元素的样式。
3.1 语法规范
CSS 规则由两个主要的部分构成：选择器 以及 一条或多条声明。
选择器 {
属性: 属性值; // 声明
}
h1 {
color: blue;
}
3.2 引入方式
- 内联式（不推荐） 直接写在标签里面
- 嵌入式 写在style里面
- 外链式 引入
3.3 CSS加载过程
对DOM树的每个节点的CSS属性解析出来，加到DOM树，形成渲染树
3.4 选择器 Selector
- 通配选择器*
- 按照标签名、类名、id（id唯一）
- 属性选择器
- 按照DOM树中的位置
- 伪类选择器
属性选择器
根据元素的属性及属性值来选择元素
<body>
<label>用户名：</label>
<input type="zhao" disabled />
<label>密码：</label>
<input type="password" value="123456">
<style>
[disabled] {
background: #eee;
color: #999;
}
input[type="password"] {
border-color: red;
color: red;
}
</style>
</body>
<body>
<p><a href="#top" title="aa">回到顶部</a></p>
<p><a href="a.jpg">查看图片</a></p>
<style>
/* 所有包含title属性的元素,*号可以去掉 */
*[title] {
font-size: 20px;
}
/* 既有href属性，又有title属性的a标签元素 */
a[href][title] {
font-size: 10px;
}
/*
^= ：以xx开头就会被选中
$= : 以xx结尾就会被选中
*/
a[href^="#"] {
color: red;
}
a[href$=".jpg"] {
color: green;
}
</style>
</body>
伪类选择器
不基于标签和属性定位元素
- 状态伪类：特定的状态下被选中
- 链接
- link 没有点击过的（访问过的）链接
- visited 点击过的（访问过的）链接
- hover 鼠标经过（停留）的那个链接
- active 鼠标正在按下还没有弹起鼠标的那个链接
- 输入框：active
- 链接
- 结构伪类：和节点结构关系有关
- first-child
- last-child
选择器组合方式
| 名称 | 语法 | 说明 | 示例 |
|---|---|---|---|
| 直接组合 | AB | 满足A且B | input:focus |
| 后代组合 | A B | 选中B，如果它是A的子孙 | nav a |
| 亲子组合 | A>B | 选中B，如果它是A的直接的子元素（孙辈的不行） | section>p |
| 兄弟选择器 | A~B | 选中B，如果它在A后面且同级 | h2~p（h2后面出现的且同级的p） |
| 相邻选择器 | A+B | 选中B，如果它紧跟在A后面 | h2+p（h2紧跟着的p） |
选择器组
将相同样式的选择器组在一起
h1,h2,h3,h4,h5{
color:blue;
}
3.5 颜色、字体
颜色
直接颜色名字，#十六进制，RGB，HSL，不透明度alpha（0完全透明）（rgba，hsla）
- HSL
- 色相：Hue，范围0-360；
- 饱和度：Saturation，范围0-100%；
- 亮度：Lightness，范围0-100%。
适用范围：当鼠标移向按钮，仅仅需要按钮的亮度降低来实现悬浮效果，就不需要重新设置RGB了。
字体
- 字体复合属性：斜体 粗细 大小/行高 字体族
- font-style 样式：normal/italic
- font-size 字体大小
- 关键字：small、medium、large
- 长度：px、em
- 百分数：相对于父元素字体大小80%
- font-weight 字重
- normal、bold
- 100-900（400 等同于 normal，而 700 等同于 bold）（不一定有用，有的字体没有设置那么多字重）
- line-height
- 16px
- 1.5 -> 1.5倍行距
- font-family
字体族 font-family
本地有字体就用，没有就用下一个指定的，但是最后还是要指定一个通用字体族，防止本地没有或者下载不到。
通用字体族：
- 衬线体Serif——Georgia，宋体
- 无衬线体Sans-Serif——Arial，Helvetica，黑体，微软雅黑
- 手写体Cursive——Caflisch Script，楷体
- Fantasy——Comic Sans MS，Papyrus
- 等宽字体Monospace——Consolas，Courier，中文字体
字体使用建议：
- 字体列表最后写上通用字体族；
- 英文字体放在中文字体的前面；
- 衬线体兜底，防止差异过大。
- 字体名称带空格的要加引号。（这个应该算要求）
Web Font 远程字体，中文字体文件比较大，通常为几兆。
@font-face{
font-family:f1;
src:url("//s2.ssl.qhimg.com/static/ff00cb8151eeecd2.woff2") format("woff2");
}
- 对齐 text-align
- left，right，center，justify(两端对齐)
- 间距 spacing
- letter-spacing：字符间距
- word-spacing：单词间距
- 首行缩进 text-indent
- 装饰 text-decoration
- none
- underline： 下划线
- line-through：中（像删除线）
- overline：上划线
- white-space 空白符 合并
- normal：合并一个格子
- nowrap：永不换行
- pre：保留空格和行
- pre-wrap：一行显示不下才自动换行
- pre-line：合并空格，保留换行
3.6 CSS三大特性
层叠性、继承性、优先级
层叠性
给同一个选择器设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式，层叠性主要解决样式冲突的问题。
层叠性原则：
- 样式冲突，遵循的原则是
就近原则，哪个样式距离结构近，就执行哪个样式 - 样式不冲突，不会层叠
注：就近的标准是：后 > 前
选择器优先级
!important >>>>> id > （伪）类 > 标签
继承性
子标签会继承父标签的某些样式（计算值）（像rem这种相对值就继承不了。）
继承一些不可继承的东西：boxsizing: inherit;
初始值：浏览器的默认初始值。
- CSS中，每一个属性都有一个初始值，比如
margin-left的初始值为0background-color的初始值为transparent
- 可以使用
initial关键字显式重置为初始值。background-color: initial
3.7 CSS的属性计算过程
四、CSS布局
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
4.1 布局技术
- 常规流（标准流）
- 包括：行级，块级，表格布局，FlexBox，Grid布局
- 浮动
- 绝对定位
盒模型
基础的盒模型属性：
padding，border，margin（长度，百分数（相对于容器宽度），auto）margin:auto—— 水平居中- 两个相邻的盒子的margin不叠加，取最大的
height、width（长度，百分数（相对于容器宽度），auto）- 边框
border（是四个梯形，不是四个矩形）- 可以把宽高设置为0，border-width值一样，就能得到一个四个彩色三角形拼成的正方形
- 如果只设置一边的border，就能得到三角形
<body>
<div class="triangle1"></div>
<div class="triangle2"></div>
<style>
.triangle1 {
width: 0;
height: 0;
border-top: 50px solid green;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.triangle2 {
width: 0;
height: 0;
border-bottom: 50px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
</style>
</body>
-
box-sizing
content-box,border-box,inherit- 什么时候使用
border-box？设置width:100%，就可以不用额外考虑边框的大小撑开盒子了。
-
overflow 溢出
visible,hidden,scroll,auto
4.2 块级 & 行级
| 块级盒子 | 行级盒子 |
|---|---|
| Block Level Box | Inline Level Box |
| 不和其它盒子并列摆放 | 和其它行级盒子一起放在一行或拆开成多行 |
| 适用所有的盒模型属性 | 盒模型中的width、height不适用 |
| 块级元素 | 行级元素 |
|---|---|
| 生成块级盒子 | 生成行级盒子，内容分散在多个行盒(line box)中 |
| body、article、div、main、section、h1-6、p、ul、li等 | span、em、strong、 cite 、code等 |
| display: block | display: inline |
display属性
- block、inline
inline-block：本身是行级，可以放在行盒中;可以设置宽高;作为一个整体不会被拆散成多行- none：排版时完全被忽略
行级排版上下文
- Inline Formatting Context (IFC)
- 只包含行级盒子的容器会创建一个IFC
- IFC内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align决定一行内盒子的水平对齐
- vertical-align 决定一个盒子在行内的垂直对齐
- 避开浮动(float)元素*
<div>
This is a paragraph of text with long word Honorificabilitudinitatibus. Here is an image
<img src="https://assets.codepen.io/59477/cat.png" alt="cat">
And <em>Inline Block</em>
</div>
<style>
html {
background: #111;
color: #fff;
}
div {
font-size: 20px;
}
div {
width: 10em;
//overflow-wrap: break-word;
background: #411;
}
em {
display: inline-block;
width: 3em;
background: #33c;
}
</style>
块级排版上下文
- Block Formatting Context (BFC)
- 某些容器会创建个BFC
- 根元素
- 浮动、绝对定位、inline block
- Flex子项和Grid子项
- "overflow值不是visible 的块盒
- "display: flow-root;
- BFC内的排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠
4.3 Flex Box
一种新的排版上下文
-
它可以控制子级盒子的:
- 摆放的流向(← → ↑ ↓)
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
-
摆放的流向 flex-direction
- 横向（中心线为主轴对齐）：
row,row-reverse - 纵向：
column,column-reverse
- 横向（中心线为主轴对齐）：
-
内容的调整 justify-content
- 左侧开始：
flex-start - 右侧开始：
flex-end - 居中：
center - 两端对齐：
space-between - 两窄中宽：
space-around - 均等划分：
space-evenly
- 左侧开始：
-
元素间的对齐 align-items
- 单个元素自己的对齐：align-self（内部设置）
- 元素顺序:
Order。给每一个指定不同的order，那么就会按照从小到大的order来进行布局：
Flexibility
设置子项的弹性，剩余空间就伸展，空间不足就压缩。
- flex-grow：值越大，能伸展的能力越强。
- flex-shrink：收缩的能力，当值为0时表示不收缩。
- flex-basis:没有伸展或收缩的基础长度。
- （缩写和具体属性见
文档）
4.4 Grid布局
- 通过display:grid使得元素生成一个块级的Grid容器；
- 再利用grid-template相关属性将容器划分为网格；
- 设置每一个子项占据哪些行或者列。
内容很多，功能很强，具体看MDN Grid
4.5 float浮动
类似word文字环绕图片
清除浮动balabala
现在的必要性不大：因为现在有flex box和grid
4.6 position属性
- static——默认值，定位元素
- relative——相对自身原本位置偏移
- 不脱离常规流
- 使用top、left 、bottom 、right 设置偏移长度
- 流内其它元素当它没有偏移一样布局
- absolute——绝对定位（子绝父相）
- 相对非 static祖先元素定位
- 脱离常规流
- 不会对流内元素布局造成影响
- fixed——相对于视口绝对定位
- 脱离常规流
- sticky（粘性定位）
