HTML/CSS

HTML5

基础结构

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>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

说明：

<!DOCTYPE html> 声明文档类型
lang="zh-CN" 指定语言为中文
meta charset="UTF-8" 设置字符编码
viewport 设置移动端视口
defer 属性使脚本在页面加载后执行

语义化标签

html

<!-- 文档结构 -->
<header>
    <h1>网站标题</h1>
    <nav>
        <ul>
            <li><a href="#home">首页</a></li>
            <li><a href="#about">关于</a></li>
            <li><a href="#contact">联系我们</a></li>
        </ul>
    </nav>
</header>

<main>
    <article>
        <h2>文章标题</h2>
        <p>文章内容...</p>
        <section>
            <h3>章节标题</h3>
            <p>章节内容...</p>
        </section>
    </article>
    
    <aside>
        <h3>侧边栏</h3>
        <ul>
            <li>相关链接1</li>
            <li>相关链接2</li>
        </ul>
    </aside>
</main>

<footer>
    <p>版权信息</p>
    <address>联系方式</address>
</footer>

说明：

header 通常包含网站标题和导航
nav 用于导航菜单
main 包含页面的主要内容
article 表示独立的内容块
section 表示文档中的章节
aside 用于侧边栏内容
footer 包含页脚信息

表单元素

html

<form action="/submit" method="post">
    <!-- 文本输入 -->
    <div class="form-group">
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username" required>
    </div>
    
    <!-- 密码输入 -->
    <div class="form-group">
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" required>
    </div>
    
    <!-- 单选按钮 -->
    <div class="form-group">
        <label>性别：</label>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">男</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">女</label>
    </div>
    
    <!-- 复选框 -->
    <div class="form-group">
        <label>兴趣爱好：</label>
        <input type="checkbox" id="reading" name="hobby" value="reading">
        <label for="reading">阅读</label>
        <input type="checkbox" id="sports" name="hobby" value="sports">
        <label for="sports">运动</label>
    </div>
    
    <!-- 下拉选择 -->
    <div class="form-group">
        <label for="city">城市：</label>
        <select id="city" name="city">
            <option value="">请选择</option>
            <optgroup label="一线城市">
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
            </optgroup>
            <optgroup label="二线城市">
                <option value="hangzhou">杭州</option>
                <option value="chengdu">成都</option>
            </optgroup>
        </select>
    </div>
    
    <!-- 文件上传 -->
    <div class="form-group">
        <label for="avatar">头像：</label>
        <input type="file" id="avatar" name="avatar" accept="image/*">
    </div>
    
    <!-- 提交按钮 -->
    <button type="submit">提交</button>
    <button type="reset">重置</button>
</form>

说明：

label 标签关联表单控件
required 属性表示必填
accept 属性限制文件类型
optgroup 对选项进行分组

多媒体元素

html

<!-- 图片 -->
<figure>
    <img src="image.jpg" alt="图片描述" width="300" height="200" loading="lazy">
    <figcaption>图片说明</figcaption>
</figure>

<!-- 视频 -->
<video controls width="400" height="300" poster="poster.jpg">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    <track src="subtitles_zh.vtt" kind="subtitles" srclang="zh" label="中文">
    <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
    您的浏览器不支持视频播放
</video>

<!-- 音频 -->
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    您的浏览器不支持音频播放
</audio>

<!-- 画布 -->
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    ctx.fillStyle = 'red';
    ctx.fillRect(50, 50, 100, 100);
</script>

<!-- SVG -->
<svg width="100" height="100" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" stroke="black" fill="red" />
    <text x="50" y="50" text-anchor="middle" fill="white">SVG</text>
</svg>

说明：

figure 和 figcaption 用于图片说明
loading="lazy" 实现图片懒加载
poster 属性设置视频封面
track 元素添加字幕
Canvas 需要 JavaScript 绘制
SVG 是矢量图形，可缩放

表格

html

<table>
    <caption>学生成绩表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
            <th>总分</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>90</td>
            <td>85</td>
            <td>88</td>
            <td>263</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>85</td>
            <td>92</td>
            <td>90</td>
            <td>267</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>平均分</td>
            <td>87.5</td>
            <td>88.5</td>
            <td>89</td>
            <td>265</td>
        </tr>
    </tfoot>
</table>

说明：

caption 定义表格标题
thead 定义表头
tbody 定义表格主体
tfoot 定义表格页脚

CSS

选择器

css

/* 基本选择器 */
* { margin: 0; padding: 0; } /* 重置样式 */
h1 { color: blue; } /* 元素选择器 */
.highlight { background: yellow; } /* 类选择器 */
#header { height: 60px; } /* ID选择器 */
[type="text"] { border: 1px solid #ccc; } /* 属性选择器 */

/* 组合选择器 */
h1, h2, h3 { font-family: Arial; } /* 群组选择器 */
nav a { color: white; } /* 后代选择器 */
ul > li { list-style: none; } /* 子元素选择器 */
h2 + p { margin-top: 10px; } /* 相邻兄弟选择器 */
h2 ~ p { color: gray; } /* 通用兄弟选择器 */

/* 伪类选择器 */
a:hover { color: red; } /* 鼠标悬停 */
input:focus { border-color: blue; } /* 获得焦点 */
li:first-child { font-weight: bold; } /* 第一个子元素 */
li:last-child { border-bottom: none; } /* 最后一个子元素 */
li:nth-child(odd) { background: #f0f0f0; } /* 奇数子元素 */

说明：

选择器优先级：ID > 类 > 元素
组合选择器可以更精确地选择元素
伪类选择器用于特定状态

盒模型

css

.box {
    /* 尺寸 */
    width: 200px;
    height: 200px;
    min-width: 100px;
    max-width: 300px;
    
    /* 内边距 */
    padding: 20px;
    padding-top: 10px;
    padding-right: 15px;
    padding-bottom: 10px;
    padding-left: 15px;
    
    /* 边框 */
    border: 1px solid #000;
    border-width: 1px;
    border-style: solid;
    border-color: #000;
    border-radius: 5px;
    
    /* 外边距 */
    margin: 20px;
    margin-top: 10px;
    margin-right: 15px;
    margin-bottom: 10px;
    margin-left: 15px;
    
    /* 盒模型类型 */
    box-sizing: border-box; /* 标准盒模型 */
    
    /* 溢出处理 */
    overflow: hidden;
}

说明：

box-sizing: border-box 使 padding 和 border 包含在 width 中
overflow: hidden 隐藏溢出内容
可以使用简写形式：padding: 10px 15px;

Flexbox 布局

css

.container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.item {
    flex: 1;
    min-width: 200px;
}

/* 响应式布局 */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

说明：

flex: 1 使元素平均分配空间
gap 设置元素间距
可以轻松实现响应式布局

Grid 布局

css

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;
    gap: 20px;
    grid-template-areas:
        "header header header"
        "main main sidebar"
        "footer footer footer";
}

.header { grid-area: header; }
.main { grid-area: main; }
.sidebar { grid-area: sidebar; }
.footer { grid-area: footer; }

/* 响应式布局 */
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "header"
            "main"
            "sidebar"
            "footer";
    }
}

说明：

grid-template-areas 定义布局区域
grid-area 指定元素位置
可以轻松实现复杂布局

响应式设计

css

/* 移动优先 */
.container {
    width: 100%;
    padding: 10px;
}

/* 平板 */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
        margin: 0 auto;
        padding: 20px;
    }
}

/* 桌面 */
@media (min-width: 1024px) {
    .container {
        max-width: 960px;
    }
}

/* 大屏幕 */
@media (min-width: 1280px) {
    .container {
        max-width: 1200px;
    }
}

说明：

使用相对单位（%, em, rem）
设置合适的断点
考虑不同设备的特性

动画

css

/* 过渡 */
.button {
    background: blue;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.button:hover {
    background: darkblue;
    transform: scale(1.1);
}

/* 动画 */
@keyframes slide {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-in {
    animation: slide 0.5s ease forwards;
}

说明：

过渡用于简单状态变化
动画用于复杂效果
使用 forwards 保持最终状态

变换

css

.card {
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}

.card:hover {
    transform: rotate(5deg) scale(1.05);
}

/* 3D 效果 */
.cube {
    transform-style: preserve-3d;
    perspective: 1000px;
}

.cube:hover {
    transform: rotateY(180deg);
}

说明：

可以组合多个变换
3D 变换需要设置 perspective
使用 transform-style: preserve-3d 保持 3D 效果

滤镜

css

.image {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

.image:hover {
    filter: grayscale(0%);
}

/* 组合滤镜 */
.overlay {
    filter: brightness(150%) contrast(120%);
}

说明：

可以组合多个滤镜
常用于图片效果
可以创建叠加效果

渐变

css

.gradient {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
}

.radial {
    background: radial-gradient(circle at center, #ff6b6b, #4ecdc4);
}

/* 多色渐变 */
.rainbow {
    background: linear-gradient(
        to right,
        red,
        orange,
        yellow,
        green,
        blue,
        indigo,
        violet
    );
}

说明：

可以创建平滑的颜色过渡
支持多个颜色点
可以设置渐变方向

最佳实践

1. 语义化

使用合适的 HTML 标签
添加适当的 ARIA 属性
保持结构清晰
使用有意义的类名
避免过度使用 div

2. 性能优化

减少 DOM 嵌套
使用 CSS 选择器优化
避免使用通配符选择器
使用 CSS 变量
压缩和合并文件
使用 CDN
延迟加载非关键资源

3. 可维护性

使用 BEM 命名规范
模块化 CSS
添加适当的注释
保持代码风格一致
使用 CSS 预处理器
使用 CSS 后处理器

4. 浏览器兼容性

使用 Autoprefixer
添加浏览器前缀
使用 Modernizr 检测特性
提供降级方案
使用 CSS 重置
测试不同浏览器

5. 可访问性

使用语义化标签
添加适当的 ARIA 属性
确保键盘可访问
提供替代文本
使用合适的颜色对比度
支持屏幕阅读器

学习资源

在线教程

视频课程

慕课网
极客时间
B站技术区
YouTube 技术频道
Udemy
Coursera

HTML/CSS

JavaScript

Vue2

Vue3

TypeScript

组件库

性能优化

工程化

安全

HTML/CSS

目录

HTML5

基础结构

语义化标签

表单元素

多媒体元素

表格

CSS

选择器

盒模型

Flexbox 布局

Grid 布局

响应式设计

动画

变换

滤镜

渐变

最佳实践

1. 语义化

2. 性能优化

3. 可维护性

4. 浏览器兼容性

5. 可访问性

学习资源

在线教程

视频课程

工具推荐

框架和库

HTML/CSS ​

目录 ​

HTML5 ​

基础结构 ​

语义化标签 ​

表单元素 ​

多媒体元素 ​

表格 ​

CSS ​

选择器 ​

盒模型 ​

Flexbox 布局 ​

Grid 布局 ​

响应式设计 ​

动画 ​

变换 ​

滤镜 ​

渐变 ​

最佳实践 ​

1. 语义化 ​

2. 性能优化 ​

3. 可维护性 ​

4. 浏览器兼容性 ​

5. 可访问性 ​

学习资源 ​

在线教程 ​

视频课程 ​

工具推荐 ​

框架和库 ​

HTML/CSS

目录

HTML5

基础结构

语义化标签

表单元素

多媒体元素

表格

CSS

选择器

盒模型

Flexbox 布局

Grid 布局

响应式设计

动画

变换

滤镜

渐变

最佳实践

1. 语义化

2. 性能优化

3. 可维护性

4. 浏览器兼容性

5. 可访问性

学习资源

在线教程

视频课程

工具推荐

框架和库