前端HTML & CSS完整知识点总结
从零基础到进阶，全面掌握前端基础技术
📖 目录
HTML基础知识
1. HTML文档结构
HTML（HyperText Markup Language）是构建网页的标准标记语言。
基本文档结构
<!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>
重要元素说明
<!DOCTYPE html>- HTML5文档类型声明<html>- 根元素，包含整个页面<head>- 文档头部，包含元数据<body>- 文档主体，包含可见内容
2. 头部元素（Head Elements）
Meta标签
<!-- 字符编码 -->
<meta charset="UTF-8">
<!-- 视口设置（响应式设计必需） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO相关 -->
<meta name="description" content="页面描述">
<meta name="keywords" content="关键词1,关键词2">
<meta name="author" content="作者名称">
<!-- 社交媒体分享 -->
<meta property="og:title" content="页面标题">
<meta property="og:description" content="页面描述">
<meta property="og:image" content="分享图片URL">
外部资源引入
<!-- CSS样式表 -->
<link rel="stylesheet" href="styles.css">
<!-- 网站图标 -->
<link rel="icon" href="favicon.ico">
<!-- 预加载资源 -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
3. 文本内容元素
标题和段落
<!-- 标题层级（h1-h6） -->
<h1>主标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<!-- 段落 -->
<p>这是一个段落。</p>
<!-- 换行和水平线 -->
<br> <!-- 换行 -->
<hr> <!-- 水平分割线 -->
文本格式化
<!-- 语义化强调 -->
<strong>重要内容</strong>
<em>强调内容</em>
<!-- 视觉效果 -->
<b>粗体文字</b>
<i>斜体文字</i>
<u>下划线文字</u>
<s>删除线文字</s>
<!-- 其他格式 -->
<mark>高亮文字</mark>
<small>小号文字</small>
<sub>下标</sub>
<sup>上标</sup>
<code>代码片段</code>
<pre>预格式化文本</pre>
4. 列表元素
<!-- 无序列表 -->
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
<!-- 定义列表 -->
<dl>
<dt>术语</dt>
<dd>术语定义</dd>
</dl>
5. 链接和媒体
链接
<!-- 基本链接 -->
<a href="https://example.com">外部链接</a>
<a href="page.html">内部链接</a>
<a href="#section">锚点链接</a>
<!-- 特殊链接 -->
<a href="mailto:email@example.com">邮箱链接</a>
<a href="tel:+1234567890">电话链接</a>
<a href="file.pdf" download>下载链接</a>
<!-- 链接属性 -->
<a href="https://example.com" target="_blank" rel="noopener">新窗口打开</a>
图片
<!-- 基本图片 -->
<img src="image.jpg" alt="图片描述">
<!-- 响应式图片 -->
<img src="image.jpg" alt="描述" style="max-width: 100%; height: auto;">
<!-- 高级图片 -->
<picture>
<source media="(min-width: 800px)" srcset="large.jpg">
<source media="(min-width: 400px)" srcset="medium.jpg">
<img src="small.jpg" alt="响应式图片">
</picture>
6. 表格
<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>100</td>
</tr>
</tfoot>
</table>
7. 表单元素
<form action="/submit" method="post">
<!-- 文本输入 -->
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required>
<!-- 其他输入类型 -->
<input type="email" placeholder="邮箱">
<input type="password" placeholder="密码">
<input type="number" min="0" max="100">
<input type="date">
<input type="file" accept="image/*">
<!-- 多行文本 -->
<textarea rows="4" cols="50"></textarea>
<!-- 选择框 -->
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
</select>
<!-- 单选和复选 -->
<input type="radio" name="gender" value="male" id="male">
<label for="male">男</label>
<input type="checkbox" name="hobby" value="reading" id="reading">
<label for="reading">阅读</label>
<!-- 按钮 -->
<button type="submit">提交</button>
<button type="reset">重置</button>
</form>
8. 语义化标签
<!-- 页面结构 -->
<header>页面头部</header>
<nav>导航栏</nav>
<main>主要内容</main>
<section>章节</section>
<article>文章</article>
<aside>侧边栏</aside>
<footer>页面底部</footer>
<!-- 内容分组 -->
<div>通用容器</div>
<span>行内容器</span>
<figure>
<img src="image.jpg" alt="图片">
<figcaption>图片说明</figcaption>
</figure>
CSS基础知识
1. CSS语法和引入方式
CSS语法结构
选择器 {
属性名: 属性值;
属性名: 属性值;
}
三种引入方式
<!-- 1. 外部样式表（推荐） -->
<link rel="stylesheet" href="styles.css">
<!-- 2. 内部样式表 -->
<style>
h1 { color: red; }
</style>
<!-- 3. 内联样式 -->
<h1 style="color: blue;">标题</h1>
优先级顺序
!important > 内联样式 > ID选择器 > 类选择器 > 元素选择器 > 通配符选择器
2. CSS选择器
基本选择器
/* 元素选择器 */
p { color: black; }
/* 类选择器 */
.highlight { background: yellow; }
/* ID选择器 */
#header { font-size: 24px; }
/* 通配符选择器 */
* { margin: 0; padding: 0; }
组合选择器
/* 后代选择器 */
div p { color: red; }
/* 子元素选择器 */
div > p { color: blue; }
/* 相邻兄弟选择器 */
h1 + p { margin-top: 0; }
/* 通用兄弟选择器 */
h1 ~ p { color: gray; }
/* 群组选择器 */
h1, h2, h3 { font-family: Arial; }
属性选择器
/* 具有属性 */
[title] { cursor: help; }
/* 属性值匹配 */
[type="text"] { border: 1px solid #ccc; }
/* 属性值包含 */
[class~="highlight"] { background: yellow; }
/* 属性值开头 */
[href^="https"] { color: green; }
/* 属性值结尾 */
[href$=".pdf"] { color: red; }
/* 属性值包含子串 */
[href*="example"] { text-decoration: underline; }
伪类选择器
/* 链接伪类 */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: orange; }
/* 结构伪类 */
li:first-child { font-weight: bold; }
li:last-child { margin-bottom: 0; }
li:nth-child(2n) { background: #f0f0f0; }
li:nth-child(odd) { background: #e0e0e0; }
li:nth-of-type(3) { color: red; }
/* 状态伪类 */
input:focus { outline: 2px solid blue; }
input:disabled { opacity: 0.5; }
input:checked + label { color: green; }
button:hover { background: #ddd; }
/* 其他伪类 */
:root { --main-color: #333; }
:empty { display: none; }
:not(.special) { color: gray; }
伪元素选择器
/* 首字母和首行 */
p::first-letter { font-size: 2em; float: left; }
p::first-line { font-weight: bold; }
/* 前后插入内容 */
.quote::before { content: """; }
.quote::after { content: """; }
/* 选中文本 */
::selection { background: yellow; }
3. 盒模型
盒模型组成
margin（外边距）
├── border（边框）
├── padding（内边距）
├── content（内容）
盒模型属性
.box {
/* 内容尺寸 */
width: 200px;
height: 100px;
/* 内边距 */
padding: 10px;
padding: 10px 20px; /* 上下 左右 */
padding: 10px 20px 15px 25px; /* 上 右 下 左 */
/* 边框 */
border: 2px solid #333;
border-width: 2px;
border-style: solid;
border-color: #333;
border-radius: 5px;
/* 外边距 */
margin: 20px;
margin: 20px auto; /* 水平居中 */
/* 盒模型类型 */
box-sizing: content-box; /* 标准盒模型 */
box-sizing: border-box; /* IE盒模型 */
}
4. 布局基础
Display属性
/* 块级元素 */
.block { display: block; }
/* 行内元素 */
.inline { display: inline; }
/* 行内块元素 */
.inline-block { display: inline-block; }
/* 隐藏元素 */
.hidden { display: none; }
.invisible { visibility: hidden; }
/* 现代布局 */
.flex { display: flex; }
.grid { display: grid; }
Position定位
/* 静态定位（默认） */
.static { position: static; }
/* 相对定位 */
.relative {
position: relative;
top: 10px;
left: 20px;
}
/* 绝对定位 */
.absolute {
position: absolute;
top: 0;
right: 0;
}
/* 固定定位 */
.fixed {
position: fixed;
bottom: 20px;
right: 20px;
}
/* 粘性定位 */
.sticky {
position: sticky;
top: 0;
}
Float浮动
/* 浮动 */
.float-left { float: left; }
.float-right { float: right; }
/* 清除浮动 */
.clear { clear: both; }
/* 清除浮动的方法 */
.clearfix::after {
content: "";
display: table;
clear: both;
}
5. Flexbox布局
/* 容器属性 */
.flex-container {
display: flex;
/* 主轴方向 */
flex-direction: row | row-reverse | column | column-reverse;
/* 换行 */
flex-wrap: nowrap | wrap | wrap-reverse;
/* 简写 */
flex-flow: row wrap;
/* 主轴对齐 */
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
/* 交叉轴对齐 */
align-items: stretch | flex-start | flex-end | center | baseline;
/* 多行对齐 */
align-content: stretch | flex-start | flex-end | center | space-between | space-around;
}
/* 项目属性 */
.flex-item {
/* 排序 */
order: 1;
/* 放大比例 */
flex-grow: 1;
/* 缩小比例 */
flex-shrink: 1;
/* 基础大小 */
flex-basis: auto;
/* 简写 */
flex: 1 1 auto;
/* 单独对齐 */
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
6. Grid布局
/* 容器属性 */
.grid-container {
display: grid;
/* 定义网格 */
grid-template-columns: 100px 200px 1fr;
grid-template-rows: 50px auto 100px;
/* 简写 */
grid-template:
"header header header" 50px
"sidebar content content" 1fr
"footer footer footer" 100px
/ 200px 1fr 200px;
/* 间距 */
grid-gap: 10px;
grid-row-gap: 10px;
grid-column-gap: 20px;
/* 对齐 */
justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;
justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
align-content: start | end | center | stretch | space-around | space-between | space-evenly;
}
/* 项目属性 */
.grid-item {
/* 位置 */
grid-column: 1 / 3;
grid-row: 2 / 4;
/* 区域 */
grid-area: header;
/* 对齐 */
justify-self: start | end | center | stretch;
align-self: start | end | center | stretch;
}
7. 样式属性
颜色和背景
.color-background {
/* 颜色表示方法 */
color: red; /* 颜色名 */
color: #ff0000; /* 十六进制 */
color: #f00; /* 简写 */
color: rgb(255, 0, 0); /* RGB */
color: rgba(255, 0, 0, 0.5); /* RGBA */
color: hsl(0, 100%, 50%); /* HSL */
color: hsla(0, 100%, 50%, 0.5); /* HSLA */
/* 背景属性 */
background-color: #f0f0f0;
background-image: url('image.jpg');
background-repeat: no-repeat | repeat | repeat-x | repeat-y;
background-position: center | top left | 50% 50%;
background-size: cover | contain | 100% 100%;
background-attachment: scroll | fixed;
/* 背景简写 */
background: #f0f0f0 url('image.jpg') no-repeat center/cover;
/* 多重背景 */
background:
url('image1.jpg') no-repeat top left,
url('image2.jpg') no-repeat bottom right,
linear-gradient(45deg, red, blue);
/* 渐变背景 */
background: linear-gradient(45deg, red, blue);
background: radial-gradient(circle, red, blue);
}
字体和文本
.typography {
/* 字体族 */
font-family: "Arial", "Microsoft YaHei", sans-serif;
/* 字体大小 */
font-size: 16px | 1.2em | 120% | 1.2rem;
/* 字体粗细 */
font-weight: normal | bold | 100-900;
/* 字体样式 */
font-style: normal | italic | oblique;
/* 字体变体 */
font-variant: normal | small-caps;
/* 字体简写 */
font: italic bold 16px/1.5 Arial, sans-serif;
/* 文本属性 */
text-align: left | center | right | justify;
text-decoration: none | underline | line-through | overline;
text-transform: none | uppercase | lowercase | capitalize;
text-indent: 2em;
letter-spacing: 1px;
word-spacing: 2px;
line-height: 1.5 | 24px;
white-space: normal | nowrap | pre | pre-wrap;
word-wrap: normal | break-word;
text-overflow: clip | ellipsis;
/* 文本阴影 */
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
边框和阴影
.borders-shadows {
/* 边框 */
border: 2px solid #333;
border-width: 1px 2px 3px 4px;
border-style: solid | dashed | dotted | double | groove | ridge | inset | outset;
border-color: red blue green yellow;
border-radius: 5px | 10px 20px | 10px 20px 30px 40px;
/* 单边边框 */
border-top: 1px solid red;
border-right: 2px dashed blue;
border-bottom: 3px dotted green;
border-left: 4px double yellow;
/* 盒阴影 */
box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
box-shadow:
0 2px 4px rgba(0,0,0,0.1),
0 4px 8px rgba(0,0,0,0.1);
/* 轮廓 */
outline: 2px solid red;
outline-offset: 2px;
}
8. 变换和动画
2D变换
.transform-2d {
/* 平移 */
transform: translate(50px, 100px);
transform: translateX(50px);
transform: translateY(100px);
/* 缩放 */
transform: scale(1.5);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
/* 旋转 */
transform: rotate(45deg);
/* 倾斜 */
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(20deg);
/* 组合变换 */
transform: translate(50px, 100px) rotate(45deg) scale(1.5);
/* 变换原点 */
transform-origin: center | top left | 50% 50%;
}
3D变换
.transform-3d {
/* 3D变换 */
transform: translateZ(50px);
transform: translate3d(50px, 100px, 25px);
transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
transform: rotate3d(1, 1, 1, 45deg);
transform: scaleZ(2);
transform: scale3d(2, 1.5, 0.5);
/* 3D透视 */
perspective: 1000px;
perspective-origin: center;
transform-style: preserve-3d;
backface-visibility: hidden;
}
过渡动画
.transitions {
/* 过渡属性 */
transition-property: all | width | height | color;
transition-duration: 0.3s;
transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(0.1, 0.7, 1.0, 0.1);
transition-delay: 0.1s;
/* 过渡简写 */
transition: all 0.3s ease-in-out 0.1s;
transition: width 0.3s, height 0.5s;
}
.transitions:hover {
width: 200px;
height: 200px;
background-color: red;
}
关键帧动画
/* 定义关键帧 */
@keyframes slideIn {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
/* 应用动画 */
.animations {
animation-name: slideIn;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-delay: 0.5s;
animation-iteration-count: infinite | 3;
animation-direction: normal | reverse | alternate | alternate-reverse;
animation-fill-mode: none | forwards | backwards | both;
animation-play-state: running | paused;
/* 动画简写 */
animation: slideIn 1s ease-in-out 0.5s infinite alternate forwards;
animation: bounce 2s infinite, slideIn 1s ease-out;
}
HTML5新特性
1. 语义化标签
<!-- 页面结构 -->
<header>页面头部</header>
<nav>导航区域</nav>
<main>主要内容</main>
<section>内容章节</section>
<article>独立文章</article>
<aside>侧边内容</aside>
<footer>页面底部</footer>
<!-- 内容标签 -->
<figure>
<img src="image.jpg" alt="图片">
<figcaption>图片说明</figcaption>
</figure>
<details>
<summary>点击展开</summary>
<p>详细内容</p>
</details>
<mark>高亮文本</mark>
<time datetime="2024-01-01">2024年1月1日</time>
<progress value="70" max="100">70%</progress>
<meter value="6" min="0" max="10">6 out of 10</meter>
2. 表单增强
<!-- 新的输入类型 -->
<input type="email" placeholder="邮箱地址">
<input type="url" placeholder="网址">
<input type="tel" placeholder="电话号码">
<input type="search" placeholder="搜索">
<input type="number" min="0" max="100" step="5">
<input type="range" min="0" max="100" value="50">
<input type="date">
<input type="time">
<input type="datetime-local">
<input type="month">
<input type="week">
<input type="color">
<!-- 新的属性 -->
<input type="text" placeholder="占位符文本" required autofocus>
<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
<input type="text" list="suggestions">
<datalist id="suggestions">
<option value="选项1">
<option value="选项2">
</datalist>
<!-- 表单验证 -->
<form novalidate>
<input type="email" required>
<input type="submit" formnovalidate>
</form>
3. 多媒体元素
<!-- 音频 -->
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
您的浏览器不支持音频播放。
</audio>
<!-- 视频 -->
<video controls width="640" height="480" poster="poster.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<track src="subtitles.vtt" kind="subtitles" srclang="zh" label="中文字幕">
您的浏览器不支持视频播放。
</video>
<!-- 嵌入内容 -->
<embed src="document.pdf" type="application/pdf" width="600" height="400">
<object data="flash.swf" type="application/x-shockwave-flash">
<param name="movie" value="flash.swf">
</object>
4. Canvas和SVG
<!-- Canvas画布 -->
<canvas id="myCanvas" width="400" height="300">
您的浏览器不支持Canvas。
</canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100);
</script>
<!-- SVG矢量图形 -->
<svg width="200" height="200">
<circle cx="100" cy="100" r="50" fill="blue" />
<rect x="50" y="50" width="100" height="100" fill="red" opacity="0.5" />
<line x1="0" y1="0" x2="200" y2="200" stroke="green" stroke-width="2" />
</svg>
CSS3新特性
1. 选择器增强
/* 属性选择器 */
[attr^="value"] { } /* 以value开头 */
[attr$="value"] { } /* 以value结尾 */
[attr*="value"] { } /* 包含value */
/* 结构伪类 */
:nth-child(2n+1) { } /* 奇数项 */
:nth-last-child(2) { } /* 倒数第二个 */
:nth-of-type(3) { } /* 同类型第三个 */
:first-of-type { } /* 同类型第一个 */
:last-of-type { } /* 同类型最后一个 */
:only-child { } /* 唯一子元素 */
:only-of-type { } /* 唯一同类型元素 */
:empty { } /* 空元素 */
/* 状态伪类 */
:target { } /* 目标元素 */
:enabled { } /* 启用状态 */
:disabled { } /* 禁用状态 */
:checked { } /* 选中状态 */
:valid { } /* 验证通过 */
:invalid { } /* 验证失败 */
:required { } /* 必填字段 */
:optional { } /* 可选字段 */
/* 否定伪类 */
:not(.class) { } /* 不包含指定类 */
2. 边框和背景增强
.enhanced-borders {
/* 圆角边框 */
border-radius: 10px;
border-radius: 10px 20px 30px 40px;
/* 边框图片 */
border-image: url('border.png') 30 round;
border-image-source: url('border.png');
border-image-slice: 30;
border-image-repeat: round | repeat | stretch;
/* 盒阴影 */
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
/* 多重背景 */
background:
url('image1.png') no-repeat top left,
url('image2.png') no-repeat bottom right,
linear-gradient(45deg, red, blue);
/* 背景尺寸 */
background-size: cover | contain | 100px 200px;
/* 背景裁剪 */
background-clip: border-box | padding-box | content-box;
background-origin: border-box | padding-box | content-box;
}
3. 渐变
.gradients {
/* 线性渐变 */
background: linear-gradient(to right, red, blue);
background: linear-gradient(45deg, red, yellow, blue);
background: linear-gradient(to bottom, red 0%, yellow 50%, blue 100%);
/* 径向渐变 */
background: radial-gradient(circle, red, blue);
background: radial-gradient(ellipse at center, red, blue);
background: radial-gradient(circle at top left, red, blue);
/* 重复渐变 */
background: repeating-linear-gradient(45deg, red, red 10px, blue 10px, blue 20px);
background: repeating-radial-gradient(circle, red, red 10px, blue 10px, blue 20px);
}
4. 文本效果
.text-effects {
/* 文本阴影 */
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
text-shadow:
1px 1px 2px red,
2px 2px 4px blue;
/* 文本描边 */
-webkit-text-stroke: 2px red;
/* 文本溢出 */
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
/* 换行控制 */
word-wrap: break-word;
word-break: break-all | keep-all;
hyphens: auto;
/* 文本列 */
column-count: 3;
column-gap: 20px;
column-rule: 1px solid #ccc;
column-width: 200px;
}
5. CSS变量
:root {
/* 定义全局变量 */
--primary-color: #007bff;
--secondary-color: #6c757d;
--font-size-base: 16px;
--border-radius: 4px;
}
.component {
/* 使用变量 */
color: var(--primary-color);
font-size: var(--font-size-base);
border-radius: var(--border-radius);
/* 带默认值的变量 */
background: var(--bg-color, #ffffff);
}
/* 局部变量 */
.card {
--card-padding: 20px;
padding: var(--card-padding);
}
响应式设计
1. 媒体查询
/* 基础媒体查询 */
@media screen and (max-width: 768px) {
.container {
padding: 10px;
}
}
/* 复杂媒体查询 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
.sidebar {
width: 25%;
}
}
/* 设备方向 */
@media screen and (orientation: landscape) {
.header {
height: 60px;
}
}
/* 高分辨率屏幕 */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.logo {
background-image: url(**********');
background-size: 100px 50px;
}
}
/* 打印样式 */
@media print {
.no-print {
display: none;
}
}
2. 弹性单位
.responsive-units {
/* 相对单位 */
font-size: 1.2em; /* 相对于父元素 */
font-size: 1.2rem; /* 相对于根元素 */
width: 50%; /* 相对于父容器 */
/* 视口单位 */
width: 50vw; /* 视口宽度的50% */
height: 100vh; /* 视口高度的100% */
font-size: 4vmin; /* 视口较小尺寸的4% */
font-size: 4vmax; /* 视口较大尺寸的4% */
/* 计算值 */
width: calc(100% - 20px);
height: calc(100vh - 60px);
}
3. 响应式图片
<!-- srcset属性 -->
<img src="small.jpg"
srcset="small.jpg 300w, medium.jpg 600w, large.jpg 1200w"
sizes="(max-width: 600px) 300px, (max-width: 1200px) 600px, 1200px"
alt="响应式图片">
<!-- picture元素 -->
<picture>
<source media="(min-width: 800px)" srcset="large.jpg">
<source media="(min-width: 400px)" srcset="medium.jpg">
<img src="small.jpg" alt="响应式图片">
</picture>
4. 移动端优化
/* 触摸友好 */
.button {
min-height: 44px; /* 最小触摸目标 */
min-width: 44px;
padding: 12px 16px;
}
/* 防止缩放 */
input[type="text"] {
font-size: 16px; /* 防止iOS缩放 */
}
/* 滚动优化 */
.scroll-container {
-webkit-overflow-scrolling: touch;
overflow-y: auto;
}
/* 禁用选择 */
.no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
性能优化
1. CSS优化
/* 避免复杂选择器 */
/* 不好 */
.header .nav ul li a:hover { }
/* 更好 */
.nav-link:hover { }
/* 使用高效属性 */
.optimized {
/* 使用transform代替改变位置 */
transform: translateX(100px);
/* 使用opacity代替visibility */
opacity: 0;
/* 开启硬件加速 */
transform: translateZ(0);
will-change: transform;
}
/* 避免重排重绘 */
.no-reflow {
/* 避免改变布局的属性 */
transform: scale(1.1); /* 而不是 width: 110%; */
}
2. 加载优化
<!-- 关键CSS内联 -->
<style>
/* 首屏关键样式 */
.header { background: #333; }
</style>
<!-- 非关键CSS异步加载 -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<!-- 字体优化 -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
3. 图片优化
/* 图片懒加载 */
img[loading="lazy"] {
opacity: 0;
transition: opacity 0.3s;
}
img[loading="lazy"].loaded {
opacity: 1;
}
/* 响应式图片 */
.responsive-img {
max-width: 100%;
height: auto;
}
最佳实践
1. HTML最佳实践
语义化HTML
<!-- 好的语义化 -->
<article>
<header>
<h1>文章标题</h1>
<time datetime="2024-01-01">2024年1月1日</time>
</header>
<main>
<p>文章内容...</p>
</main>
<footer>
<p>作者：张三</p>
</footer>
</article>
<!-- 避免过度使用div -->
<div class="article">
<div class="title">文章标题</div>
<div class="content">文章内容</div>
</div>
可访问性
<!-- 图片alt属性 -->
<img src="chart.png" alt="2024年销售数据图表，显示第一季度增长20%">
<!-- 表单标签关联 -->
<label for="email">邮箱地址</label>
<input type="email" id="email" name="email" required>
<!-- 键盘导航 -->
<button tabindex="0">可访问按钮</button>
<div tabindex="-1">不可tab访问</div>
<!-- ARIA属性 -->
<button aria-label="关闭对话框" aria-expanded="false">×</button>
<div role="alert" aria-live="polite">状态消息</div>
2. CSS最佳实践
代码组织
/* 1. 重置样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 2. 基础样式 */
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
line-height: 1.6;
color: #333;
}
/* 3. 布局样式 */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 4. 组件样式 */
.button {
display: inline-block;
padding: 12px 24px;
background: #007bff;
color: white;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.button:hover {
background: #0056b3;
}
/* 5. 工具类 */
.text-center { text-align: center; }
.hidden { display: none; }
.clearfix::after {
content: "";
display: table;
clear: both;
}
命名规范
/* BEM命名法 */
.block { }
.block__element { }
.block--modifier { }
/* 示例 */
.card { }
.card__header { }
.card__body { }
.card__footer { }
.card--large { }
.card--featured { }
/* 语义化类名 */
.primary-button { } /* 而不是 .blue-button */
.sidebar { } /* 而不是 .left-column */
.error-message { } /* 而不是 .red-text */
3. 性能最佳实践
CSS性能
/* 避免昂贵的属性 */
.expensive {
/* 避免 */
box-shadow: 0 0 20px rgba(0,0,0,0.5);
border-radius: 50%;
filter: blur(5px);
/* 在动画中避免改变这些属性 */
width: 100px;
height: 100px;
top: 0;
left: 0;
}
/* 优化动画 */
.optimized-animation {
/* 只动画这些属性 */
transform: translateX(100px);
opacity: 0.5;
/* 开启硬件加速 */
will-change: transform, opacity;
}
加载优化
<!-- 关键资源优先加载 -->
<link rel="preload" href="critical.css" as="style">
<link rel="preload" href="hero-image.jpg" as="image">
<!-- 非关键资源延迟加载 -->
<link rel="prefetch" href="next-page.html">
<img loading="lazy" src="image.jpg" alt="延迟加载图片">
常见问题
1. 布局问题
外边距重叠
/* 问题：相邻元素外边距重叠 */
.element1 { margin-bottom: 20px; }
.element2 { margin-top: 30px; }
/* 实际间距是30px，不是50px */
/* 解决方案 */
.element1 { margin-bottom: 20px; }
.element2 { margin-top: 0; padding-top: 30px; }
浮动清除
/* 问题：父元素高度塌陷 */
.parent {
border: 1px solid #ccc;
}
.child {
float: left;
width: 50%;
}
/* 解决方案 */
.parent::after {
content: "";
display: table;
clear: both;
}
垂直居中
/* 方法1：Flexbox */
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
/* 方法2：Grid */
.grid-center {
display: grid;
place-items: center;
}
/* 方法3：绝对定位 */
.absolute-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
2. 兼容性问题
CSS前缀
.prefixed {
/* 标准属性放最后 */
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}
降级方案
.fallback {
/* 降级方案 */
background: #ff0000;
/* 现代浏览器 */
background: linear-gradient(45deg, red, blue);
/* 检测支持 */
@supports (display: grid) {
display: grid;
}
@supports not (display: grid) {
display: flex;
}
}
3. 调试技巧
CSS调试
/* 边框调试法 */
* {
border: 1px solid red !important;
}
/* 背景调试法 */
.debug {
background: rgba(255, 0, 0, 0.1) !important;
}
/* 轮廓调试法 */
* {
outline: 1px solid blue !important;
}
浏览器开发者工具
/* 使用CSS变量便于调试 */
:root {
--debug-color: red;
--debug-width: 1px;
}
.debug-border {
border: var(--debug-width) solid var(--debug-color);
}
总结
学习路径建议
-
HTML基础 → CSS基础 → 布局技术 → 响应式设计 → 高级特性
-
实践项目：
- 个人简历页面
- 企业官网
- 博客网站
- 电商页面
-
进阶学习：
- CSS预处理器（Sass/Less）
- CSS框架（Bootstrap/Tailwind）
- CSS-in-JS
- Web组件
持续学习资源
- 官方文档：MDN Web Docs
- 规范标准：W3C
- 兼容性查询：Can I Use
- 在线工具：CodePen、JSFiddle
最后的建议
- 多实践：理论结合实际项目
- 关注标准：跟上Web标准发展
- 注重性能：考虑用户体验
- 保持学习：前端技术发展迅速
记住：HTML和CSS是前端开发的基石，扎实的基础是成为优秀前端开发者的关键！
本文档涵盖了HTML和CSS的核心知识点，适合作为学习参考和面试复习材料。
#html基础知识##css样式#
滴滴公司福利 976人发布