查查表

转义字符

转义字符 字符
  半宽空格（ ）
  全宽空格（ ）
  不折行空格（ ）
&lt; <
&gt; >
&amp; &
&quot; "

长度单位

类型 单位 解释 换算
绝对长度
（固定不变）		 px 像素 N/A
cm 厘米 37.8px
mm 毫米 3.78px
Q 四分之一毫米 0.945px
in 英寸 96px
pc 派卡 16px
pt 磅 4/3px
相对长度
（取决于其它因素变化）		 em 字符（字体大小） N/A
rem 字符（相对于根元素的字体大小）
% 相对于父元素的百分比
vw 视图宽度 的百分比
vh 视图高度 的百分比
vmin 视图宽度与视图高度中
更小的那个的百分比
vmax 视图宽度与视图高度中
更大的那个的百分比

HTML 标签

结构

html ( style (CSS样式) head (网页头) body (网页内容) )

<!doctype html> 首行必写（单标签）
<html> 必写（双标签）

<style> 内嵌样式

CSS 参数

<head> 网页头

<link rel="stylesheet" type="text/css" href="<CSS路径>"> 引入 CSS（单标签）
<meta charset="utf-8"> 网页代码页（单标签）
<title> 标题（双标签）

<body> 网页内容

style 参数 行内样式

格式

1
<body style="<参数>: <值>; <参数>: <值>;">

style 样式参数

单标签

<hr> 分割线

  • width 长度
  • size 粗细
  • style
    • background-color 颜色
    • border-style 样式

<br> 换行

<img> 图片

  • src 图片路径
  • alt 图片显示不出时显示的文本
  • width 宽度
  • height 高度

<figcaption> 图片下方注释

<form> 表单

  • method 提交方式 默认get 接受post
  • action 提交的 URL

<input> 输入表单

  • type 类型
    • text 文本，默认
    • button 按钮
    • checkbox 复选框
    • color 颜色选择
    • date 日期
    • datetime-local 日期时间，不包含时区
    • time 时间
    • month 年和月
    • week 年和周
    • file 接受档案
    • email 电子信箱
    • image 图像
    • password 密码
    • radio 单选选项
    • range 拉动条组件
    • search 搜索
    • tel 电话
    • url URL
    • submit 提交按钮
    • reset 重设表单为预设
  • pattern 检验用的表达式
  • checked 是否被选中
  • value 值
  • placeholder 没有值时的背景内容
  • required 必须
  • readonly 只读
  • multiple 允许多个值
  • min/max 最小值/最大值

双标签

<span> 文本容器 用于同一行中应用不同样式

<b> 加粗
<i> 斜体

<p> 段落

  • align 对齐
    • left
    • center
    • right

<h*> 标题

  • *为1到6

<a> 链接

  • href 链接地址
  • target 进入方式
    • 默认_self当前标签页打开
    • _blank新标签页打开

<div>

width 宽度
height 高度
color 文字颜色

边框

border-width 边框粗细 接受1-4个值 上右下左

  • thin/medium/think 细到粗
  • 数值 直接设置

border-style 边框样式 接受1-4个值 上右下左

  • none 无
  • dotted 点画线
  • dashed 虚线
  • solid 实线
  • double 双层
  • groove 3D 沟槽
  • ridge 3D 脊
  • inset 3D 嵌入
  • outset 3D 突出

border-color 边框颜色 接受1-4个值 上右下左
border-image 边框图像
border-image-slice 九宫格分割

背景

background-color 背景颜色
background-image 背景图像
background-position 背景图像位置 默认为左上角
background-repeat 背景图像平铺方式 默认为repeat

  • repeat 重复
  • repeat-x/y 仅在水平/垂直方向重复
  • no-repeat 不重复
  • inherit 从父元素继承
边距

margin 外边距 接受1-4个值 上右下左 接受auto
padding 内边距 接受1-4个值 上右下左 接受auto

列表

<ol> 有序列表

  • type 类型
    • 1 数字
    • a 小写英文字母
    • A 大写英文字母
    • I 罗马数字

<ul> 无序列表

  • type 类型 默认为dise
    • dise 实心圆
    • circle 空心圆
    • square 实心矩形

<li> 列表的项

表格

结构
1
table ( thead ( th th ) tbody ( tr ( td td ) tr ( td td ) ) )

<table> 表格

  • border 外边框粗细，0时无边框
  • cellspacing 单元格间距
  • cellpadding 单元格内边距
  • width 总宽度
  • height 总高度

<caption> 表格外标题
<thead> 表格标题行
<tbody> 表格内容
<th> 表格列标题

  • width 列宽度

<tr> 表格行

  • height 行高度

<td> 格内容

  • width 宽度
  • height 高度
  • align 对齐
    • left
    • center
    • right
  • valign 上下对齐
    • top
    • middle
    • down
  • colspan 水平跨度（跨过多列）
  • rowspan 垂直跨度（跨过多行）

术语描述列表

<dl> 列表
<dt> 术语
<dd> 描述

CSS 参数

格式

1
选择器 { 参数: 值; 参数: 值; }

style 样式参数

优先级：id 选择器 > 类选择器 > 标签选择器

引入其它 CSS

@import url('<CSS路径>');

选择器

标签选择器

直接使用标签 body h1 p 等作为选择器

类选择器

使用.类名（例如.text）作为选择器
在标签中加上class="text"来应用样式

id 选择器

使用#id名（例如#text）作为选择器
标签中加上id="text"来应用样式

伪类

选择器:伪类
link 未访问的链接
visited 已访问的链接
hover 鼠标悬停
active 选中的链接

input:focus 输入框获得焦点

first-child 父元素的第一个子元素
last-child 父元素的最后一个子元素
nth-child(*) 父元素的第*个子元素

  • <数字>
  • even 偶数
  • odd 奇数

style 样式参数

color 颜色
background-color 背景颜色
font-family 字体 逗号分隔备选字体
font-size 字体大小
font-style 字体差分

  • normal 正常
  • italic 斜体
  • oblique 倾斜的文字

font-weight 字体加粗

  • normal 正常
  • bold 粗体
  • 数值 直接加粗

text-align 文本对齐

  • left
  • center
  • right
  • justify 两端对齐
  • inherit 从父元素继承

text-decoration-line 文本装饰线

  • underline 下划线
  • overline 上划线
  • line-through删除线

text-decoration-style 文本装饰线样式

  • dotted 点画线
  • dashed 虚线
  • solid 实线
  • double 双层
  • wavy 波浪线

text-decoration-color 文本装饰线的颜色
text-decoration-thinkness 文本装饰线的粗细
text-underline-offset 文本下划线 距离

text-indent 段落首缩进
line-height 行间距
letter-spacing 字间距
word-spacing 单词间距

opacity 透明度
box-shadow 阴影

  • 接收顺序 x偏移 y偏移 阴影模糊半径 阴影扩散半径 阴影颜色

object-fit 图片填充

  • none 保持不变
  • fill 拉伸 预设值
  • contain 保持比例拉伸留白
  • cover 保持比例拉伸裁切
  • scale-down 自动选择 none 或 contain 中较小的

border-radius 圆角 接收上右下左四个值

border-collapse 是否合并相邻单元格的边框

  • seperate 不合并
  • collapse 合并

display 显示类型

  • block 块级元素 开新行
  • inline 行内元素 不开新行
  • inline-block 行内块级元素 不开新行
  • flex 块级元素 按照弹性盒模型布局
  • inline-flex 同上 行内元素 不开新行
  • grid 块级元素 按照网格模型布局
  • inline-grid 同上 行内元素 不开新行
  • flow-root 块级元素 新建区块格式化上下文

float 元素浮动

  • none 预设值 无
  • left 左
  • right 右

list-style-type 列表符号样式

  • <ol> 有序列表
    • decimal 数字
    • lower-alpha 小写英文字母
    • upper-alpha 大写英文字母
    • lower-roman 小写罗马数字
    • upper-roman 大写罗马数字
  • <ul> 无序列表
    • dise 实心圆
    • circle 空心圆
    • square 实心矩形

list-style-image 列表符号图像
list-style-position 列表符号位置

  • outside 在后方文本块之外
  • inside 在后方文本块之内

overflow 内容溢出时行为

  • visible 不裁剪允许出框，默认
  • hidden 隐藏出框部分
  • clip 同上，但完全禁用滚动
  • scroll 始终添加滚动条
  • auto 不溢出时与visible相同，溢出时与scroll相同
  • overlay 同上，但滚动条处于内容上方而非空间内

颜色

详见 CSS Color Module Level 3

渐变

线性渐变 linear-gradient
径向渐变 radial-gradient
锥形渐变 conic-gradient
重复线性渐变 repeating-linear-gradient
重复径向渐变 repeating-radial-gradient
重复锥形渐变 repeating-conic-gradient
详见 使用 CSS 渐变
实际返回值是图片 所以需要用于-image而不是-color的参数

解法速查

去除<a>超链接的特殊效果

1
2
3
4
a {
  color: inherit;
  text-decoration: none;
}

让<li>里的a实现填充背景

1
2
3
a {
  display: block;
}

居中元素

（改为块然后设置左右margin为auto）

1
2
3
4
<选择器> {
  display: block;
  margin: 0 auto;
}
HTML CSS
许可协议

本文采用 CC BY-NC 4.0 许可协议，转载请注明出处。

分享文章