跳到主要内容

HTML/CSS 知识速查表

本页面汇总了 HTML 和 CSS 编程中最常用的语法和知识点，方便快速查阅。

HTML 基础​

文档结构​

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
</head>
<body>
    <!-- 内容 -->
</body>
</html>

常用标签​

标签说明
<html>根元素
<head>头部信息
<body>主体内容
<h1> - <h6>标题
<p>段落
<a href="">链接
<img src="" alt="">图片
<ul> / <ol> / <li>列表
<div>块级容器
<span>行内容器
<br>换行
<hr>水平线

表格标签​

<table>
    <caption>标题</caption>
    <thead>
        <tr><th>表头1</th><th>表头2</th></tr>
    </thead>
    <tbody>
        <tr><td>数据1</td><td>数据2</td></tr>
    </tbody>
    <tfoot>
        <tr><td>脚注</td><td></td></tr>
    </tfoot>
</table>

表单元素​

<form action="" method="POST">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="email" name="email">
    <input type="number" name="age">
    <input type="checkbox" name="agree">
    <input type="radio" name="gender" value="male">
    <input type="radio" name="gender" value="female">
    <select name="country">
        <option value="cn">中国</option>
        <option value="us">美国</option>
    </select>
    <textarea name="message"></textarea>
    <button type="submit">提交</button>
    <button type="reset">重置</button>
</form>

input type 类型​

type说明
text文本输入
password密码输入
email邮箱输入
number数字输入
tel电话输入
urlURL输入
search搜索框
date日期选择
time时间选择
color颜色选择
range范围滑块
file文件上传
hidden隐藏字段

全局属性​

属性说明
id唯一标识
class样式类名
style内联样式
title提示文本
data-*自定义数据
lang语言代码
dir文本方向

语义化标签​

标签说明
<header>页面头部
<nav>导航区域
<main>主内容区
<article>文章内容
<section>章节区块
<aside>侧边栏
<footer>页面底部
<figure>插图区域
<figcaption>插图标题

多媒体​

<!-- 图片 -->
<img src="image.jpg" alt="描述" width="500" height="300">

<!-- 音频 -->
<audio controls>
    <source src="music.mp3" type="audio/mpeg">
</audio>

<!-- 视频 -->
<video controls width="640" height="480">
    <source src="video.mp4" type="video/mp4">
</video>

<!-- 嵌入网页 -->
<iframe src="https://example.com" width="500" height="400"></iframe>

CSS 基础​

引入方式​

/* 外部样式表 */
<link rel="stylesheet" href="styles.css">

/* 内部样式表 */
<style>
    body { background: #fff; }
</style>

/* 内联样式 */
<div style="color: red;"></div>

选择器​

/* 元素选择器 */
p { color: blue; }

/* 类选择器 */
.highlight { background: yellow; }

/* ID选择器 */
#header { height: 60px; }

/* 后代选择器 */
article p { line-height: 1.6; }

/* 子选择器 */
ul > li { list-style: none; }

/* 相邻兄弟 */
h1 + p { font-size: 18px; }

/* 伪类 */
a:hover { color: red; }
li:first-child { font-weight: bold; }

/* 伪元素 */
p::before { content: "»"; }
p::after { content: "«"; }

/* 属性选择器 */
input[type="text"] { border: 1px solid #ccc; }

常用属性​

/* 文本 */
color: #333;                    /* 文字颜色 */
font-size: 16px;               /* 字号 */
font-family: Arial, sans-serif; /* 字体 */
font-weight: bold;             /* 字重 */
line-height: 1.6;              /* 行高 */
text-align: center;           /* 对齐 */
text-decoration: underline;   /* 装饰线 */
letter-spacing: 2px;          /* 字间距 */

/* 背景 */
background-color: #f5f5f5;
background-image: url(bg.jpg);
background-size: cover;
background-position: center;

/* 边框 */
border: 1px solid #333;
border-radius: 5px;
border-width: 2px;
border-style: solid;
border-color: red;

/* 尺寸 */
width: 100%;
height: 200px;
max-width: 1200px;
min-height: 100px;

/* 外边距 */
margin: 10px;
margin: 10px 20px;
margin-top: 10px;
margin: auto;

/* 内边距 */
padding: 15px;
padding: 10px 20px;
padding-left: 20px;

/* 显示 */
display: block;
display: inline;
display: inline-block;
display: flex;
display: grid;
display: none;
display: contents;

/* 定位 */
position: static;
position: relative;
position: absolute;
position: fixed;
position: sticky;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100;

/* 浮动 */
float: left;
float: right;
clear: both;

/* 溢出 */
overflow: hidden;
overflow: auto;
overflow: scroll;

/* 透明度 */
opacity: 0.5;

/* 鼠标样式 */
cursor: pointer;
cursor: not-allowed;

盒模型​

/* 标准盒模型 */
box-sizing: content-box;  /* 默认 */

div {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
    /* 总宽度 = 200 + 20*2 + 5*2 + 10*2 = 270px */
}

/* IE盒模型 */
box-sizing: border-box;  /* 推荐 */

div {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
    margin: 10px;
    /* 内容区域自动缩小，总宽度 = 200px */
}

Flexbox 布局​

.container {
    display: flex;
    flex-direction: row;           /* 主轴方向 */
    flex-wrap: wrap;              /* 换行 */
    justify-content: center;       /* 主轴对齐 */
    align-items: center;          /* 交叉轴对齐 */
    align-content: space-between; /* 多行对齐 */
    gap: 20px;                    /* 间距 */
}

.item {
    flex-grow: 1;     /* 放大比例 */
    flex-shrink: 0;    /* 缩小比例 */
    flex-basis: 200px; /* 初始大小 */
    flex: 1;          /* 简写 */
    align-self: center; /* 单项对齐 */
}

/* flex-direction 值 */
row | row-reverse | column | column-reverse

/* justify-content 值 */
flex-start | flex-end | center | space-between | space-around | space-evenly

/* align-items 值 */
stretch | flex-start | flex-end | center | baseline

Grid 布局​

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* 列 */
    grid-template-rows: 100px 200px;       /* 行 */
    gap: 20px;                             /* 间距 */
    grid-template-areas:                    /* 命名区域 */
        "header header header"
        "sidebar main main"
        "footer footer footer";
}

.item {
    grid-column: 1 / 3;      /* 列位置 */
    grid-row: 1;             /* 行位置 */
    grid-area: header;        /* 命名区域 */
    justify-self: center;     /* 水平对齐 */
    align-self: start;        /* 垂直对齐 */
}

/* fr 单位 - 比例份数 */
grid-template-columns: 1fr 2fr 1fr;

/* auto-fill/auto-fit - 自动填充 */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

响应式​

/* 媒体查询 */
@media screen and (max-width: 768px) {
    .container { flex-direction: column; }
}

@media (min-width: 1024px) {
    .container { max-width: 1200px; }
}

/* 移动优先 */
.mobile-first {
    font-size: 14px;
}
@media (min-width: 768px) {
    .mobile-first { font-size: 16px; }
}
@media (min-width: 1024px) {
    .mobile-first { font-size: 18px; }
}

常用颜色值​

格式示例
十六进制#FF5733 / #F53
RGBrgb(255, 87, 51)
RGBArgba(255, 87, 51, 0.5)
HSLhsl(11, 100%, 60%)
颜色名red, blue, white

常用单位​

单位说明
px像素，绝对单位
%百分比，相对单位
em当前字体大小倍数
rem根元素字体大小倍数
vw/vh视口宽/高的1%
vmin/vmax视口最小/大值
ch/ex字符/字x高度

CSS 变量​

:root {
    --primary-color: #3498db;
    --font-size-base: 16px;
    --spacing: 10px;
}

.button {
    background-color: var(--primary-color);
    font-size: var(--font-size-base);
    padding: var(--spacing);
}

过渡和动画​

/* 过渡 */
transition: property duration timing-function delay;

.button {
    transition: all 0.3s ease;
}
.button:hover {
    transform: scale(1.1);
}

/* 动画 */
@keyframes slideIn {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.animated {
    animation: slideIn 0.5s ease-out;
}

常用技巧​

/* 居中 */
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 清除浮动 */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

/* 文本省略 */
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 多行文本省略 */
.multi-line-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 保持宽高比 */
.aspect-ratio {
    aspect-ratio: 16 / 9;
}

/* 三角形 */
.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

CSS Reset​

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}