HTML

HyperText（超文本）：如图片、标题、链接、表格

Markup Language（标记语言）：<h1> HTML </h1>

标题

<h1> ~ <h6>

列表

有序列表：ol>li

无序列表：ul>li

自定义列表：dl>dt(标题)>dd(内容)

链接

<a href="#"> </a>

href：跳转目标
target：打开新的标签（_blank）

多媒体标签

<img>、<audio>、<video>、<iframe>

输入

<input> 文本框

plcaeholder：用户未输入，默认显示
type：范围（range）、数字（number）、多选框（checkbox）、单选框（radio）
min/max：最大值最小值（type="number"）、日历（type=“date”）

textarea ：文本域

列表

<select>><option>
<datalist>><option>

文本

引用：

<blockquote>：快捷引用
<cite>：短引用，标题
<q>：短引用，具体引用内容
<code>：单行代码的引用
<pre>><code>：多行代码的引用

强调：

<strong> ：含义的强调
<em>：语气的强调

内容划分

<header>：页头
<nav>：导航
<main>：主体
<article>：文章
<aside>：侧边栏
<footer>：页尾

语义化标签

CSS

Cascading Style Sheets（层叠样式表）
用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果

使用方式

内联：直接在标签内部引入

<div style="[...]"> 内联CSS </div>

嵌入：

[...]
<style> 

</style>
[...]

外链：

<link rel="stylesheet" href="./css/style.css">

选择器

找出页面中的元素，以便给他们设置样式
使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照 DOM 树中的位置

通配选择器

* {
    magin: 0px
}

标签选择器

aside {

}

id 选择器

// id="name"
#name {

}

类选择器

// class="name"
.name {

}

属性选择器

[disabled] {

}

input[type="password"] {

}

// 匹配开头
a[href^="#"] {

}

// 匹配结尾
a[href$=".jpg"] {

}

伪类选择

状态选择

a:link {

}


a:hover {

}

结构选择

li {

}

li:first-child {

}

li:last-child {
    border-bottom: none
}

.error {
    color: red
}

input.error {
    border-color: red
}

组合方式

名称	语法	说明	示例
直接组合	AB	A $\cap$ B	input:focus
后代组合	A B	(B, if A)	nav a
亲子组合	A > B	A $\in$ B	section > p
兄弟选择	A ~ B	B, A 后且同级	h1 ~ p
相邻选择	A + B	B，紧跟 A 后	h2 ~ p

选择器组

body, h1, ..., {

}

[type="checkbox"], ..., {

}

色彩模型

RGB

color: rgb(255, 255, 255)

HSL

HSL（色调，饱和度，明度）
- 色相 0-360（0 红，120 绿，240 蓝）
- 饱和度 0%-100%（0% 灰，100% 彩）
- 亮度 0%-100%（0% 黑，100%白）

color: hsl(0%, 0%, 0%)

透明度

// alpha 表示不透明度， [0%, 100%] -> [全透, 不透]
hsla()

字体

衬线 Serif，无衬线 Sans-serif，手写，艺术字 Fantasy, 等宽 monospace

@font-face {
    font-fanily: f1;
    src: url("//") format("woff2")
}

line-height

normal	默认
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距
length	设置固定的行间距
%	基于当前字体尺寸的百分比行间距
inherit	从父元素继承 line-height 属性的值

white-space

值	描述
normal	默认，空白会被浏览器忽略
pre	空白会被浏览器保留。类似 HTML 中的 `<pre>`标签
nowrap	文本不会换行，文本会在同一行上继续，直到遇到`<br>`标签
pre-wrap	保留空白符序列，但是正常地进行换行
pre-line	合并空白符序列，但是保留换行符
inherit	规定应该从父元素继承 white-space 属性的值

优先级

选择器的特异度 Specificity

继承

某些属性自动继承父元素的计算值

显示继承

* {
    box-sizing: inherit
}

布局

常规流

行级

块级

表格布局

FlexBox

Grid

浮动

绝对定位

盒模型

padding 内边距

border 边框样式

margin 外边距

content

块级 vs. 行级

块级

Block Level Box
不能和其他盒子并排
适用所有的盒子模型

行级

Inline Level Box
不能和其他行级盒子同行或拆分成多行
盒模型中的 width, height 不适用

原子类

<div class="h1 flex" ></div>

CSS 预处理器

Less

Sass

理解 HTML & CSS