1.元信息类标签(head、title、meta)的使用目的和配置方法
1. <head> 标签
<head> 标签是 HTML 文档的元信息容器，包含了各种与文档相关的配置信息和资源引用。<head> 标签中的内容不会显示在网页的可视区域。
- 用途：包含网页的元数据、样式链接、脚本引用、网页标题等信息。
- 配置示例：
<head> <title>Example Page</title> <meta charset="UTF-8"> <meta name="description" content="A brief description of the page"> <meta name="keywords" content="HTML, CSS, JavaScript, Example"> <meta name="author" content="John Doe"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styles.css"> <script src="script.js"></script> </head>
2. <title> 标签
<title> 标签定义网页的标题，显示在浏览器的标题栏或标签页上，也用于书签和搜索引擎结果的标题展示。
- 用途：
- 在浏览器标签页上显示网页的标题。
- 搜索引擎在搜索结果中展示的标题。
- 配置示例：
<title>My Awesome Website</title>
3. <meta> 标签
<meta> 标签用于描述网页的元数据，如字符编码、作者、关键词、描述等信息。常见的 meta 标签包括设置字符编码、定义描述、关键词、视口等。
常见的 meta 标签及其用途：
-
<meta charset>：设置网页的字符编码，通常设置为 UTF-8，以确保网页在所有语言环境中正确显示。<meta charset="UTF-8"> -
<meta name="description">：提供网页的简要描述，搜索引擎在展示搜索结果时会使用该描述，有助于提高页面的点击率。<meta name="description" content="This is a brief description of the webpage content."> -
<meta name="keywords">：定义与页面相关的关键词，有助于搜索引擎理解网页的主题。不过现代搜索引擎对该标签的权重较低。<meta name="keywords" content="HTML, CSS, JavaScript, SEO"> -
<meta name="author">：标识网页的作者。<meta name="author" content="John Doe"> -
<meta name="viewport">：设置视口属性，优化网页在移动设备上的显示，常用于响应式设计。width=device-width表示视口宽度应与设备宽度相同，initial-scale=1.0设置页面初始缩放比例。<meta name="viewport" content="width=device-width, initial-scale=1.0"> -
<meta http-equiv="X-UA-Compatible">：为 Internet Explorer 设置渲染模式，通常用于让页面在最新的渲染引擎中显示，而不是回退到旧版本的兼容模式。<meta http-equiv="X-UA-Compatible" content="IE=edge"> -
<meta http-equiv="refresh">：设置页面自动刷新或重定向，content的值定义了页面刷新或重定向的秒数。<meta http-equiv="refresh" content="30"> -
<meta name="robots">：告知搜索引擎爬虫如何索引网页内容，content属性的值可以是index/noindex、follow/nofollow等。<meta name="robots" content="index, follow">
meta 标签的使用示例：
<head>
<meta charset="UTF-8">
<meta name="description" content="A tutorial on HTML meta tags">
<meta name="keywords" content="HTML, meta tags, SEO, web development">
<meta name="author" content="Jane Smith">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow">
</head>
4. 社交媒体元信息（Open Graph、Twitter Cards）
社交平台如 Facebook、Twitter 等使用特定的 meta 标签来优化在这些平台上分享时的显示效果。
-
Open Graph（og:）：用于优化 Facebook 等社交平台的分享效果。
- 示例：
<meta property="og:title" content="My Awesome Webpage"> <meta property="og:description" content="This is a description of my awesome webpage"> <meta property="og:image" content="https://example.com/image.jpg"> <meta property="og:url" content="https://example.com">
- 示例：
-
Twitter Cards：优化 Twitter 上的链接预览显示。
- 示例：
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="My Awesome Webpage"> <meta name="twitter:description" content="This is a description of my awesome webpage"> <meta name="twitter:image" content="https://example.com/image.jpg">
- 示例：
5. 其他常见的 <meta> 标签
-
防止点击劫持：防止网页嵌入到
<iframe>中，通过 HTTP 头部也可以设置。<meta http-equiv="Content-Security-Policy" content="frame-ancestors 'none';"> -
优先使用手机号码格式：告知浏览器电话号码可以被点击拨打，主要用于移动设备。
<meta name="format-detection" content="telephone=no">
2.HTML5离线缓存原理
1. Application Cache（AppCache）
原理：
- Application Cache 允许开发者指定一组资源（如 HTML、CSS、JavaScript、图片等），这些资源可以在用户首次访问网站时被缓存下来。
- 当用户再次访问网站时，如果没有网络连接，浏览器会从缓存中加载这些资源。
2. 使用方式
1. 创建 Manifest 文件
首先，需要创建一个清单文件（manifest file），通常命名为 cache.manifest。这个文件列出了要缓存的资源和一些其他的指令。
示例 manifest 文件：
CACHE MANIFEST
# version 1.0
CACHE:
index.html
styles.css
script.js
image.png
NETWORK:
*
- CACHE：列出要缓存的资源。
- NETWORK：列出需要联网访问的资源，
*表示所有其他请求都需要网络。 - FALLBACK：可以指定在某些资源不可用时的替代资源（可选）。
2. 在 HTML 中引用 Manifest 文件
在 HTML 文件中，使用 manifest 属性引用清单文件：
<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
<title>离线缓存示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello, Offline World!</h1>
<script src="script.js"></script>
</body>
</html>
3. 缓存机制
-
首次访问：
- 当用户首次访问页面时，浏览器会下载清单文件及其列出的所有资源并将其存储在缓存中。
-
更新缓存：
- 当清单文件被更新（如版本号改变），浏览器会重新下载清单文件并更新缓存。
- 可以在清单文件中添加版本号作为注释，以便浏览器检测到变化。
-
离线工作：
- 用户在离线状态下访问网站时，浏览器将从缓存中加载资源，而不是尝试连接网络。
4. 注意事项
-
弃用：由于 Application Cache 的许多限制（如复杂的更新机制和不一致的行为），它在现代浏览器中已被弃用。推荐使用 Service Workers 和 Cache API 来实现离线功能。
-
兼容性：虽然许多浏览器支持 Application Cache，但在不同浏览器中的支持程度和行为可能会有所不同。
5. 替代方案：Service Workers
现代 Web 应用程序更倾向于使用 Service Workers，因为它们提供了更强大的功能，如：
- 更灵活的缓存控制。
- 能够拦截网络请求并提供离线体验。
- 更好的更新机制。
3.Service Workers 和 Cache API
Service Workers
1. 什么是 Service Workers？
Service Workers 是一种在浏览器与网络之间运行的脚本，能够拦截和处理网络请求。它们在后台运行，与网页分开，因此可以在没有页面加载的情况下进行操作。
2. 主要功能
- 拦截网络请求：Service Workers 可以拦截页面的所有网络请求，并决定如何响应（从网络、缓存或其他来源）。
- 离线支持：通过缓存资源，Service Workers 允许 Web 应用在没有网络连接的情况下继续工作。
- 后台同步：Service Workers 支持后台同步功能，可以在网络恢复时进行数据更新。
- 推送通知：支持 Web Push API，可以向用户发送推送通知。
3. 生命周期
Service Workers 的生命周期与网页分开，主要包括以下几个阶段：
- 安装（Install）：在首次注册时触发，通常用于缓存所需的资源。
- 激活（Activate）：在新版本的 Service Worker 安装并准备好接管页面时触发。
- 控制（Control）：一旦 Service Worker 激活，它就开始控制页面并拦截请求。
4. 示例代码
// 注册 Service Worker
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js')
.then(registration => {
console.log('Service Worker registered with scope:', registration.scope);
})
.catch(error => {
console.error('Service Worker registration failed:', error);
});
});
}
Cache API
1. 什么是 Cache API？
Cache API 是一种存储和检索 HTTP 请求及其相应的响应的机制。它通常与 Service Workers 一起使用，允许开发者在离线时提供快速的资源访问。
2. 主要功能
- 存储响应：可以将网络请求的响应存储在缓存中，以便后续请求能够快速访问。
- 检索缓存：可以根据请求从缓存中检索资源，减少网络请求，提高性能。
- 删除缓存：支持管理和更新缓存的内容。
3. 示例代码
// sw.js
self.addEventListener('install', event => {
event.waitUntil(
caches.open('my-cache').then(cache => {
return cache.addAll([
'/',
'/index.html',
'/styles.css',
'/script.js'
]);
})
);
});
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request).then(response => {
if (response) {
return response; // 从缓存中返回
}
return fetch(event.request); // 从网络获取
})
);
});
Service Workers 与 Cache API 的关系
- 互补关系：Service Workers 和 Cache API 通常一起使用，Service Workers 负责拦截请求并决定如何响应，而 Cache API 提供了存储和检索响应的能力。
- 离线体验：通过将 Service Workers 与 Cache API 结合使用，开发者可以创建流畅的离线体验，使用户能够在没有网络连接的情况下访问 Web 应用。
4.如何使用使用Canvas API、SVG等绘制高性能的动画
1. Canvas API
1.1 什么是 Canvas API？
Canvas API 是一种以位图方式进行绘图的技术，可以在网页上动态绘制图形、动画和游戏。
1.2 基本用法
- 创建 Canvas 元素：
<canvas id="myCanvas" width="800" height="600"></canvas>
- 获取上下文并绘制：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 绘制一个矩形
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 150, 100);
1.3 动画实现
使用 requestAnimationFrame() 方法可以实现高性能动画。它会在浏览器的下一次重绘时调用指定的函数，从而避免不必要的重绘。
let x = 0;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
ctx.fillStyle = 'blue';
ctx.fillRect(x, 10, 150, 100); // 绘制矩形
x += 2; // 更新位置
if (x > canvas.width) {
x = -150; // 重置位置
}
requestAnimationFrame(animate); // 继续动画
}
animate(); // 启动动画
2. SVG
2.1 什么是 SVG？
SVG（可缩放矢量图形）是一种基于 XML 的图形格式，适合用于矢量图形和动画。
2.2 基本用法
- 创建 SVG 元素：
<svg width="800" height="600">
<rect id="myRect" x="10" y="10" width="150" height="100" fill="blue"></rect>
</svg>
- 使用 CSS 动画：
SVG 元素可以通过 CSS 动画或 SMIL 动画实现动画效果。
@keyframes move {
0% { transform: translate(0); }
100% { transform: translate(300px); }
}
#myRect {
animation: move 2s linear infinite;
}
2.3 使用 JavaScript 动画
使用 requestAnimationFrame() 也可以在 SVG 中实现动画效果。
const rect = document.getElementById('myRect');
let x = 10;
function animate() {
x += 2; // 更新位置
rect.setAttribute('x', x); // 更新属性
if (x > 800) {
x = -150; // 重置位置
}
requestAnimationFrame(animate); // 继续动画
}
animate(); // 启动动画
3. 性能优化建议
无论是使用 Canvas 还是 SVG，以下是一些提高动画性能的建议：
-
减少重绘和重排：
- 在 Canvas 中，避免频繁调用
clearRect()，尽量减少绘制区域的大小。 - 在 SVG 中，避免频繁更新 DOM，尽量使用属性动画。
- 在 Canvas 中，避免频繁调用
-
使用
requestAnimationFrame()：- 这个方法可以使浏览器优化渲染，降低 CPU 和 GPU 的负担。
-
合并绘制操作：
- 在 Canvas 中，将多个绘制操作合并为一个调用，减少上下文切换。
- 在 SVG 中，尽量减少对 DOM 的操作，使用批量更新。
-
使用图形缓存：
- 在 Canvas 中，可以将不变的图形绘制到一个离屏画布中，然后在主画布上绘制该离屏画布。
- 在 SVG 中，可以使用
<use>元素复用定义的图形。
-
减少不必要的计算：
- 在动画循环中，只进行必要的计算，避免每帧都进行复杂的计算。
5.requestAnimationFrame
1. 基本用法
语法：
requestAnimationFrame(callback);
- callback：一个函数，该函数将在浏览器准备好下次重绘时被调用。
2. 优势
- 优化性能：
requestAnimationFrame与浏览器的重绘周期同步，能够自动调整帧率，以优化性能并降低 CPU 使用率。 - 流畅的动画：通过保证动画在合适的时间点执行，减少了卡顿现象。
- 暂停时自动停止：如果用户切换到其他标签页，动画会自动暂停，从而节省资源。
6.canvas更具体的使用方法以及高级用法
1. 基本使用方法
1.1 创建 Canvas
在 HTML 中创建一个 <canvas> 元素：
<canvas id="myCanvas" width="800" height="600"></canvas>
1.2 获取上下文
在 JavaScript 中获取 2D 上下文：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
1.3 绘制基本形状
1.3.1 绘制矩形
ctx.fillStyle = 'blue'; // 填充颜色
ctx.fillRect(10, 10, 150, 100); // 实心矩形
ctx.strokeStyle = 'red'; // 边框颜色
ctx.strokeRect(10, 10, 150, 100); // 矩形边框
1.3.2 绘制圆形
ctx.beginPath(); // 开始新路径
ctx.arc(200, 200, 50, 0, Math.PI * 2); // 圆心 (200, 200)、半径 50
ctx.fillStyle = 'green';
ctx.fill(); // 填充圆形
ctx.stroke(); // 绘制边框
1.3.3 绘制线条
ctx.beginPath();
ctx.moveTo(300, 100); // 起点
ctx.lineTo(400, 200); // 终点
ctx.strokeStyle = 'black';
ctx.stroke(); // 绘制线条
1.4 文本绘制
ctx.font = '30px Arial'; // 字体设置
ctx.fillStyle = 'black';
ctx.fillText('Hello, Canvas!', 50, 50); // 绘制文本
2. 高级用法
2.1 渐变色
2.1.1 线性渐变
const gradient = ctx.createLinearGradient(0, 0, 200, 0); // 渐变从 (0,0) 到 (200,0)
gradient.addColorStop(0, 'red'); // 起始颜色
gradient.addColorStop(1, 'blue'); // 结束颜色
ctx.fillStyle = gradient; // 设置填充样式
ctx.fillRect(10, 10, 200, 100); // 绘制渐变矩形
2.1.2 径向渐变
const radialGradient = ctx.createRadialGradient(150, 150, 20, 150, 150, 100);
radialGradient.addColorStop(0, 'yellow');
radialGradient.addColorStop(1, 'transparent');
ctx.fillStyle = radialGradient;
ctx.fillRect(50, 50, 200, 200);
2.2 图像处理
2.2.1 加载和绘制图像
const img = new Image();
img.src = 'path/to/image.jpg'; // 替换为你的图像路径
img.onload = () => {
ctx.drawImage(img, 100, 100, 200, 150); // 绘制图像
};
2.2.2 图像裁剪
ctx.drawImage(img, 100, 100, 200, 150, 50, 50, 100, 75); // 从 (100,100) 裁剪，绘制到 (50,50)
2.3 动画效果
使用 requestAnimationFrame 创建流畅的动画：
let x = 0;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
ctx.fillStyle = 'blue';
ctx.fillRect(x, 100, 50, 50); // 绘制矩形
x += 2; // 更新位置
if (x > canvas.width) {
x = -50; // 重置位置
}
requestAnimationFrame(animate); // 请求下一帧
}
animate(); // 启动动画
2.4 事件处理
2.4.1 处理鼠标事件
canvas.addEventListener('click', (event) => {
const rect = canvas.getBoundingClientRect();
const mouseX = event.clientX - rect.left; // 获取鼠标相对 canvas 的 X 坐标
const mouseY = event.clientY - rect.top; // 获取鼠标相对 canvas 的 Y 坐标
console.log(`Mouse clicked at: (${mouseX}, ${mouseY})`);
});
2.5 变换
2.5.1 平移、旋转和缩放
ctx.save(); // 保存当前状态
ctx.translate(100, 100); // 平移
ctx.rotate(Math.PI / 4); // 旋转 45 度
ctx.scale(1.5, 1.5); // 缩放
ctx.fillStyle = 'purple';
ctx.fillRect(-25, -25, 50, 50); // 在变换后的坐标系中绘制
ctx.restore(); // 恢复状态7.SVG
1.1 创建 SVG 元素
在 HTML 中创建 SVG 元素：
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="150" height="100" fill="blue" />
</svg>
1.2 绘制基本形状
1.2.1 矩形
<rect x="10" y="10" width="150" height="100" fill="blue" />
1.2.2 圆形
<circle cx="100" cy="100" r="50" fill="green" />
1.2.3 椭圆
<ellipse cx="200" cy="100" rx="100" ry="50" fill="orange" />
1.2.4 线条
<line x1="10" y1="10" x2="150" y2="150" stroke="black" stroke-width="2" />
1.2.5 多边形
<polygon points="200,10 250,190 160,210" fill="red" />
1.3 文本
<text x="50" y="50" font-family="Arial" font-size="30" fill="black">Hello, SVG!</text>
2. 高级用法
2.1 渐变色
2.1.1 线性渐变
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<rect x="10" y="10" width="150" height="100" fill="url(#grad1)" />
2.1.2 径向渐变
<defs>
<radialGradient id="grad2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</radialGradient>
</defs>
<circle cx="200" cy="100" r="50" fill="url(#grad2)" />
2.2 SVG 动画
2.2.1 使用 SMIL 动画
<circle cx="100" cy="100" r="50" fill="green">
<animate attributeName="r" from="50" to="100" dur="1s" begin="0s" repeatCount="indefinite" />
</circle>
2.2.2 使用 CSS 动画
<style>
@keyframes move {
0% { transform: translate(0); }
100% { transform: translate(300px); }
}
.moving-circle {
animation: move 2s linear infinite;
}
</style>
<circle class="moving-circle" cx="10" cy="100" r="50" fill="blue" />
2.3 交互和事件处理
可以为 SVG 元素添加事件监听器：
<circle cx="100" cy="100" r="50" fill="red" onclick="alert('Circle clicked!')" />
2.4 使用 JavaScript 操作 SVG
<svg id="mySVG" width="800" height="600">
<circle id="myCircle" cx="100" cy="100" r="50" fill="blue" />
</svg>
<script>
const circle = document.getElementById('myCircle');
circle.addEventListener('click', () => {
circle.setAttribute('fill', 'green'); // 点击后改变颜色
});
</script>8.CSS盒模型，在不同浏览器的差异
1. CSS 盒模型概述
1.1 盒模型结构
每个元素在网页中都被视为一个矩形盒子，盒模型由以下部分组成：
- 内容区域（Content）：实际显示内容的区域。
- 内边距（Padding）：围绕内容区域的空间，用于增加内容与边框之间的距离。
- 边框（Border）：围绕内边距和内容区域的边框。
- 外边距（Margin）：元素与其他元素之间的空间。
1.2 盒模型计算
盒模型的总宽度和总高度可以通过以下公式计算：
总宽度 = 内容宽度 + 左内边距 + 右内边距 + 左边框宽度 + 右边框宽度 + 左外边距 + 右外边距
总高度 = 内容高度 + 上内边距 + 下内边距 + 上边框高度 + 下边框高度 + 上外边距 + 下外边距
1.3 box-sizing 属性
CSS 提供了 box-sizing 属性来控制盒模型的计算方式：
content-box：默认值，宽度和高度只包含内容区域。border-box：宽度和高度包括内容、内边距和边框。
示例：
/* 默认盒模型 */
.element {
width: 200px; /* 仅内容宽度 */
padding: 20px;
border: 5px solid black;
}
/* 使用 border-box */
.element {
box-sizing: border-box; /* 包括内边距和边框 */
width: 200px; /* 总宽度为 200px */
}
2. 不同浏览器的差异
2.1 默认样式
不同浏览器的默认样式（用户代理样式）可能会导致盒模型的表现有所差异。例如，某些浏览器可能对默认边距和填充的处理不同。
2.2 盒模型处理
- Chrome 和 Firefox：这两个浏览器通常遵循 W3C 标准，对盒模型的处理非常一致。
- Internet Explorer：早期版本的 IE（如 IE 6 和 IE 7）在盒模型的处理上与其他现代浏览器有所不同。IE 的
box-sizing默认值是border-box，这导致在设置宽度时可能会产生意外结果。
2.3 CSS Reset
为了消除不同浏览器之间的差异，开发者通常使用 CSS Reset 或 Normalize.css 来重置默认样式。这有助于确保不同浏览器中的元素表现一致。
2.4 示例比较
/* CSS Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box; /* 统一盒模型 */
}
3. 兼容性注意事项
- 使用
box-sizing：在开发中，建议使用box-sizing: border-box，这使得宽度和高度更易于管理。 - 测试不同浏览器：在不同浏览器中进行测试，确保布局一致性，特别是在处理复杂布局时。
- 使用开发者工具：利用浏览器的开发者工具检查盒模型的计算，确保理解元素的实际尺寸。
9.CSS所有选择器及其优先级
1. CSS 选择器
1.1 基本选择器
-
通用选择器 (
*)：- 选择所有元素。
* { margin: 0; padding: 0; } -
元素选择器：
- 选择指定类型的元素。
p { color: blue; } -
类选择器 (
.)：- 选择具有指定类的元素
.classname { font-size: 16px; } -
ID 选择器 (
#)：- 选择具有指定 ID 的元素。
#unique { background-color: yellow; }
1.2 组合选择器
-
后代选择器（空格）：
- 选择指定元素的所有后代。
div p { color: red; /* 所有 div 内的 p 元素 */ } -
子选择器（
>）：- 选择指定元素的直接子元素。
ul > li { list-style-type: square; /* 仅选择 ul 的直接子 li */ } -
相邻兄弟选择器（
+）：- 选择紧随指定元素后的第一个兄弟元素。
h1 + p { margin-top: 0; /* 紧随 h1 的第一个 p */ } -
通用兄弟选择器（
~）：- 选择指定元素之后的所有兄弟元素
h1 ~ p { color: green; /* 所有 h1 之后的 p 元素 */ }
1.3 属性选择器
-
存在属性选择器：
a[target] { color: orange; /* 选择所有具有 target 属性的 a 元素 */ } -
特定属性选择器：
input[type="text"] { border: 1px solid black; /* 选择所有 type 为 text 的 input 元素 */ } -
属性值包含选择器：
a[href*="example"] { color: blue; /* 选择 href 中包含 "example" 的 a 元素 */ }
1.4 伪类选择器
-
常见伪类：
a:hover { color: red; /* 鼠标悬停时的样式 */ } li:first-child { font-weight: bold; /* 第一个子项 */ }
1.5 伪元素选择器
-
常见伪元素：
p::first-line { font-weight: bold; /* 段落的第一行 */ } p::before { content: "Note: "; /* 在段落前添加内容 */ }
2. 优先级（特指性）
CSS 的优先级决定了当多个选择器匹配同一元素时，哪个选择器的样式将被应用。优先级的计算遵循以下规则：
优先级计算规则
- 内联样式（如
<style="...">）：优先级最高，值为 1, 0, 0, 0。 - ID 选择器：每个 ID 选择器的值为 0, 1, 0, 0。
- 类、伪类和属性选择器：每个类、伪类或属性选择器的值为 0, 0, 1, 0。
- 元素和伪元素选择器：每个元素或伪元素选择器的值为 0, 0, 0, 1。
- 通用选择器（
*）、组合选择器和其他选择器：这些选择器不增加优先级。
10.CSS选择器的使用场景
1. CSS 选择器的使用场景
1.1 通用选择器 (*)
使用场景：用于重置所有元素的默认样式，或为所有元素设置通用样式。
* {
box-sizing: border-box; /* 统一盒模型 */
}
1.2 元素选择器
使用场景：为特定类型的元素（如 h1, p）设置样式。
h1 {
font-size: 24px; /* 设置所有 h1 的字体大小 */
}
1.3 类选择器 (.)
使用场景：为具有特定类的元素应用样式，适合复用。
.button {
background-color: blue; /* 设置按钮的背景颜色 */
}
1.4 ID 选择器 (#)
使用场景：为文档中唯一的元素设置样式，通常用于特定组件。
#header {
background-color: gray; /* 设置唯一头部的背景颜色 */
}
1.5 属性选择器
使用场景：根据元素的属性值设置样式，适合表单和链接等。
input[type="text"] {
border: 1px solid black; /* 设置文本输入框的边框 */
}
1.6 组合选择器
- 后代选择器（空格）：
使用场景：选择特定元素的所有后代元素。
div p {
color: green; /* 设置 div 内所有 p 元素的颜色 */
}
- 子选择器（
>）：
使用场景：选择特定元素的直接子元素。
ul > li {
margin: 5px; /* 仅设置 ul 的直接子 li 的外边距 */
}
- 相邻兄弟选择器（
+）：
使用场景：选择紧随其后的第一个兄弟元素。
h1 + p {
margin-top: 0; /* 紧随 h1 的第一个 p 的外边距 */
}
1.7 伪类选择器
使用场景：用于动态状态或特定条件下的元素样式。
a:hover {
color: red; /* 鼠标悬停时改变链接颜色 */
}
1.8 伪元素选择器
使用场景：用于选择元素的一部分，例如第一行或在元素前后插入内容。
p::first-line {
font-weight: bold; /* 使段落的第一行加粗 */
}11.那些选择器可继承
-
元素选择器（如
p,h1）- 可继承属性：
color,font-family,line-height等
p { color: blue; /* p 元素的文本颜色 */ } - 可继承属性：
-
类选择器（如
.classname）- 可继承属性与元素选择器相同
.text { font-size: 16px; /* 所有具有 .text 类的元素 */ } -
ID 选择器（如
#unique）- 可继承属性与元素选择器相同
#header { text-align: center; /* 头部的文本对齐方式 */ } -
后代选择器（如
div p）- 可继承属性：父元素的可继承属性会传递给子元素
div p { line-height: 1.5; /* 所有 div 内的 p 元素 */ } -
伪类选择器（如
:hover）- 可继承属性：如果应用于可以继承的元素
a:hover { color: red; /* 鼠标悬停时改变链接颜色 */ } -
伪元素选择器（如
::first-line）- 可继承属性：
color,font-family等
p::first-line { font-weight: bold; /* 段落的第一行 */ } - 可继承属性：
12.CSS选择器如何运用at规则
1. 常见的 @ 规则
1.1 @import
用于导入其他样式表。
@import url('styles.css');
1.2 @media
用于定义响应式设计，根据视口的特定条件应用样式。
@media (max-width: 600px) {
body {
background-color: lightblue; /* 屏幕宽度小于 600px 时背景颜色 */
}
}
1.3 @font-face
用于定义自定义字体，使其可以在网页中使用。
@font-face {
font-family: 'MyCustomFont';
src: url('MyCustomFont.woff2') format('woff2');
}
body {
font-family: 'MyCustomFont', sans-serif; /* 使用自定义字体 */
}
1.4 @keyframes
用于定义动画的关键帧，结合动画属性使用。
@keyframes myAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fade-in {
animation: myAnimation 2s ease-in; /* 应用动画 */
}
1.5 @supports
用于条件性地应用 CSS 规则，基于浏览器对特定功能的支持。
@supports (display: grid) {
.container {
display: grid; /* 如果支持 Grid 布局 */
}
}
2. 选择器与 @ 规则结合使用
2.1 使用 @media 与选择器
利用媒体查询选择器，可以根据不同的屏幕尺寸应用不同的样式。
@media (max-width: 800px) {
h1 {
font-size: 24px; /* 小屏幕下 h1 字体大小 */
}
.container {
padding: 10px; /* 小屏幕下容器内边距 */
}
}
2.2 使用 @supports 与选择器
结合选择器和 @supports，可以编写条件样式：
@supports (display: flex) {
.flex-container {
display: flex; /* 如果支持 Flexbox */
}
.flex-item {
flex: 1; /* 子项平分空间 */
}
}
2.3 使用 @keyframes 与选择器
将动画应用于特定选择器：
@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100px);
}
}
.slide-right {
animation: slide 1s forwards; /* 应用动画效果 */
}13.CSS伪类和伪元素有哪些，它们的区别和实际应用
1. CSS 伪类
1.1 定义
伪类是一种选择器，用于选择某个元素的特定状态或位置。伪类以 : 开头。
1.2 常见伪类
-
:hover：当用户悬停在元素上时应用样式。a:hover { color: red; /* 鼠标悬停时链接变红 */ } -
:focus：当元素获得焦点时应用样式（如输入框）。input:focus { border: 2px solid blue; /* 输入框获得焦点时变蓝 */ } -
:first-child：选择父元素的第一个子元素。p:first-child { font-weight: bold; /* 第一个段落加粗 */ } -
:last-child：选择父元素的最后一个子元素。li:last-child { margin-bottom: 0; /* 列表最后一项去掉下边距 */ } -
:nth-child(n)：选择父元素的第 n 个子元素，n可以是数字或公式。tr:nth-child(odd) { background-color: #f2f2f2; /* 表格奇数行背景色 */ }
2. CSS 伪元素
2.1 定义
伪元素用于选择元素的特定部分，并为其应用样式。伪元素以 :: 开头，虽然 : 也常被使用，但推荐使用双冒号以区分伪类和伪元素。
2.2 常见伪元素
-
::before：在元素内容之前插入内容。h1::before { content: "★ "; /* 在 h1 前添加星号 */ } -
::after：在元素内容之后插入内容。p::after { content: " - Read more"; /* 在段落后添加文字 */ } -
::first-line：选择元素的第一行文本。p::first-line { font-weight: bold; /* 段落第一行加粗 */ } -
::first-letter：选择元素的第一个字母。p::first-letter { font-size: 2em; /* 段落第一个字母加大 */ }
3. 伪类与伪元素的区别
| 特性 | 伪类 | 伪元素 |
|---|---|---|
| 语法 | :（单冒号） | ::（双冒号，推荐使用） |
| 目的 | 选择元素的特定状态 | 选择元素的特定部分 |
| 示例 | :hover, :focus | ::before, ::after |
| 内容 | 不能插入内容 | 可以插入内容（content 属性） |
4. 实际应用示例
4.1 使用伪类
.button {
background-color: blue;
color: white;
}
.button:hover {
background-color: darkblue; /* 悬停时改变背景颜色 */
}
4.2 使用伪元素
blockquote::before {
content: "“"; /* 在引用前添加引号 */
font-size: 2em;
color: gray;
}
blockquote::after {
content: "”"; /* 在引用后添加引号 */
}14.HTML文档流的排版规则
1. 文档流的基本概念
1.1 正常文档流
正常文档流是指页面中所有元素按照它们在 HTML 文档中出现的顺序依次排列。浏览器会从上到下、从左到右地渲染元素。
1.2 文档流类型
- 块级元素：占据整行，通常会在新的一行开始。常见的块级元素包括
<div>,<h1>,<p>,<ul>等。 - 行内元素：仅占据其内容的宽度，不会在新行开始。常见的行内元素包括
<span>,<a>,<strong>,<img>等。
2. 排版规则
2.1 块级元素的排版
-
块级元素在页面中独占一行，后续元素会被推到下一行
-
<div>块级内容1</div> <div>块级内容2</div>
2.2 行内元素的排版
-
行内元素可以与其他行内元素并排显示。
-
示例：
<span>行内内容1</span> <span>行内内容2</span>
2.3 组合使用
-
块级元素可以包含行内元素。这使得可以在块级元素的上下文中嵌套行内元素。
<div> <h2>标题</h2> <p>这是一个 <strong>重要</strong> 的段落。</p> </div>
2.4 浮动（float）
-
浮动元素会从正常文档流中移除，但仍然会影响后续的内容。
-
.float-left { float: left; /* 向左浮动 */ width: 50%; }<div class="float-left">浮动内容</div> <div>后续内容</div>
2.5 定位（position）
- 使用
position属性可以改变元素在文档流中的位置。static（默认）：元素按照正常文档流排列。relative：相对自身位置进行偏移，不影响其他元素。absolute：相对最近的定位祖先元素进行绝对定位，脱离正常文档流。fixed：相对于视口进行定位，滚动时保持不变。sticky：根据滚动位置在相对和固定之间切换。
2.6 清除浮动（clearfix）
-
当使用浮动时，父元素可能会 collapse（塌陷）。可以使用清除浮动的方法来确保父元素包含浮动子元素。
.clearfix::after { content: ""; display: table; clear: both; }
15.CSS几种定位的规则、定位参照物、对文档流的影响，如何选择最好的定位方式
1. 定位方式
1.1 静态定位 (static)
- 规则：这是默认的定位方式。元素按照正常文档流排列，不受
top,right,bottom,left属性的影响。 - 参照物：无。
- 对文档流的影响：元素占据正常的空间，后续元素将按顺序排列。
1.2 相对定位 (relative)
- 规则：相对于自身的原始位置进行偏移。
- 参照物：自身。
- 对文档流的影响：元素仍占据原来的空间，后续元素按正常文档流排列，但可以使用
top,right,bottom,left属性进行偏移。
.relative {
position: relative;
top: 10px; /* 向下移动 10px */
}
1.3 绝对定位 (absolute)
- 规则：相对于最近的非静态定位（
relative,absolute,fixed）的祖先元素进行定位。 - 参照物：最近的定位祖先元素。
- 对文档流的影响：脱离正常文档流，不占据空间，后续元素将会填补其原位置。
.absolute {
position: absolute;
top: 20px; /* 相对于参照物的顶部 */
}
1.4 固定定位 (fixed)
- 规则：相对于视口进行定位，滚动时保持在相同位置。
- 参照物：视口。
- 对文档流的影响：同样脱离正常文档流，不占据空间，后续元素将填补其原位置。
.fixed {
position: fixed;
bottom: 0; /* 固定在视口底部 */
}
1.5 粘性定位 (sticky)
- 规则：根据滚动位置在相对和固定之间切换。元素在达到指定位置时变为固定定位。
- 参照物：最近的滚动祖先元素。
- 对文档流的影响：在达到 sticky 的条件前占据正常文档流，当满足条件后，变为固定定位。
.sticky {
position: sticky;
top: 0; /* 滚动到顶部时固定 */
}
2. 如何选择最佳定位方式
选择最合适的定位方式取决于具体需求。以下是一些指导原则：
2.1 使用静态定位
- 场景：大多数情况下，通常使用静态定位来保持元素在正常文档流中。
2.2 使用相对定位
- 场景：当需要对元素进行小幅度调整（如轻微移动、创建重叠效果）时，使用相对定位。
2.3 使用绝对定位
- 场景：当需要在特定位置放置元素，而不希望该元素影响其他元素的布局时，使用绝对定位。
- 注意：确保有一个非静态的祖先元素作为参照。
2.4 使用固定定位
- 场景：需要在页面滚动时保持元素在特定位置（如导航栏、返回顶部按钮）时，使用固定定位。
2.5 使用粘性定位
- 场景：需要元素在滚动到特定位置时固定（如头部或侧边栏）时，使用粘性定位。
- 注意：确保父元素具有定义的高度，以便 sticky 能够正常工作。
扫一扫
1002
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
