当前位置：首页 > news >正文

前端开发知识梳理 - HTMLCSS

news 来源：原创 2025/5/9 13:15:48

1. 盒模型

由内容区（content）、内边距（padding）、边框（border）和外边距（margin）组成。

（1）标准盒模型（box-sizing默认值, content-box）：width/height = content(尺寸)，元素的总宽度/高度 = width/height + padding + border
（2）怪异盒模型（box-sizing: border-box）：width/height = content + padding + border(尺寸)，即元素的总宽度/总高度 = width/height

2. HTML5 新特性

HTML5 是 HTML 语言的第五个主要版本，引入了许多新特性，极大地增强了网页的功能和表现力，以下是一些重要的新特性：

语义化标签

HTML5 引入了一系列语义化标签，使得代码结构更加清晰，便于开发者理解和搜索引擎解析。

<header>：通常用于表示页面或页面中某个区域的头部，包含网站标题、导航栏等内容。
<nav>：专门用于定义导航链接的区域，比如网站的菜单导航。
<article>：表示一个独立的、完整的内容块，可独立于页面其他部分被复用，如一篇博客文章、论坛帖子等。
<section>：用于对页面进行分块，将相关内容组织在一起，例如文章的章节。
<aside>：表示与页面主要内容间接相关的部分，如侧边栏、广告等。
<footer>：一般用于页面或页面中某个区域的底部，包含版权信息、联系方式等。

表单增强

HTML5 为表单元素增加了许多新的属性和输入类型，提升了表单的用户体验和数据验证能力。

新的输入类型：如 email、url、number、date、range、color 等。例如，使用 email 类型时，浏览器会自动验证输入是否为有效的电子邮件地址。

<input type="email" placeholder="请输入邮箱地址">

新的表单属性：placeholder 用于在输入框内显示提示信息；required 表示该字段为必填项；pattern 可使用正则表达式对输入内容进行验证。

<input type="text" placeholder="请输入用户名" required pattern="[a-zA-Z]{3,}">

多媒体支持

HTML5 原生支持音频和视频播放，无需依赖第三方插件（如 Flash）。

<audio> 标签：用于在网页中嵌入音频文件，支持多种音频格式，如 MP3、OGG 等。

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

<video> 标签：用于嵌入视频文件，支持 MP4、WebM、OGG 等格式。

<video width="320" height="240" controls><source src="example.mp4" type="video/mp4">您的浏览器不支持视频播放。
</video>

画布（`<canvas>`）

<canvas> 元素提供了一个可以使用 JavaScript 进行绘图的区域，可用于创建动态图形、动画、游戏等。

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

上述代码在画布上绘制了一个红色的矩形。

地理定位（Geolocation）

HTML5 的地理定位 API 允许网页获取用户的地理位置信息，可用于开发地图应用、附近商家推荐等功能。

if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(function(position) {const latitude = position.coords.latitude;const longitude = position.coords.longitude;console.log(`纬度: ${latitude}, 经度: ${longitude}`);}, function(error) {console.log(`定位失败: ${error.message}`);});
} else {console.log('您的浏览器不支持地理定位功能。');
}

本地存储

HTML5 提供了 localStorage 和 sessionStorage 两种本地存储方式，用于在浏览器中存储数据。

localStorage：数据会永久存储在浏览器中，除非手动删除，否则不会过期。

// 存储数据
localStorage.setItem('username', 'John');
// 获取数据
const username = localStorage.getItem('username');
console.log(username);

sessionStorage：数据仅在当前会话期间有效，关闭浏览器窗口或标签页后数据会被清除。

// 存储数据
sessionStorage.setItem('message', 'Hello, World!');
// 获取数据
const message = sessionStorage.getItem('message');
console.log(message);

Web Workers

Web Workers 允许在浏览器中创建独立于主线程的后台线程，用于执行耗时的脚本，避免阻塞主线程，提高页面的响应性能。

// main.js
if (typeof(Worker) !== "undefined") {const worker = new Worker('worker.js');worker.postMessage('开始计算');worker.onmessage = function(event) {console.log('计算结果: ' + event.data);};
} else {console.log('您的浏览器不支持 Web Workers。');
}// worker.js
onmessage = function(event) {let result = 0;for (let i = 0; i < 1000000; i++) {result += i;}postMessage(result);
};

WebSocket

WebSocket 提供了一种在浏览器和服务器之间进行实时双向通信的机制，适用于实时聊天、实时数据更新等场景。

// 客户端代码
const socket = new WebSocket('ws://example.com/socket');
socket.onopen = function() {socket.send('Hello, server!');
};
socket.onmessage = function(event) {console.log('收到服务器消息: ' + event.data);
};
socket.onclose = function() {console.log('连接已关闭');
};

3. 响应式布局

px：像素，相对长度单位，它的大小取决于屏幕的分辨率，是一个固定值，不能够自适应。
em：相对长度的单位，相对于当前对象内文本的字体尺寸，未设置则默认是浏览器默认字体尺寸。
rem：CSS3 中新增的一个相对长度单位，相对于根元素的 font-size 字体大小，根元素字体大小未设置，使用浏览器默认字体大小。
vw：相对于视口的宽度。视口被均分为100单位的 vw。
vh：相对视口高度，视口被均分为100单位的 vh。
vmin：相对于视口宽度或高度中较小的那个。其中最小的那个被均分为100单位的 vmin。
vmax：相对于视口宽度或高度中较大的那个。其中最大的那个被均分为100单位的 vmax。

(1)在移动端网页开发中，页面要做成响应式的，可使用 rem 配合媒体查询实现。
原理： 通过媒体查询，能够在屏幕尺寸发生改变时，重置 html 根元素的字体大小；页面中的元素都是使用rem 为单位设置的尺寸，因此只要改变根元素字体大小，页面中的其他元素的尺寸就自动跟着修改。
(2)利用 vw 和rem实现响应式。
原理： 由于 vw 被更多浏览器兼容之后，在做移动端响应式页面时， 通常使用 vw 配合 rem 。
原理是使用vw设置根元素 html 字体的大小，当窗口大小发生改变，vw 代表的尺寸随着修改，无需加入媒体查询，页面中的其他元素仍使用rem为单位，就可实现响应式。

// 【(1)只使用rem示例】，需要一直通过媒体查询分段设置html根元素的字体大小。
// 下面例子中，屏幕大于等于1025px，就一直根据16px来计算了。
html {font-size: 16px; /* 默认大小 */
}@media (max-width: 600px) {html {font-size: 14px; /* 小屏幕设备 */}
}@media (min-width: 601px) and (max-width: 1024px) {html {font-size: 15px; /* 中等屏幕设备 */}
}@media (min-width: 1025px) {html {font-size: 16px; /* 大屏幕设备 */}
}//页面代码
div{ width: 10rem;}

//【(2)rem+vw结合示例】，不需要在多个断点处设置多个媒体查询
html {font-size: calc(16px + 0.5vw); /* 基于视口宽度动态调整 */
}@media (max-width: 600px) {html {font-size: 14px; /* 小屏幕设备 */}
}

HTML 部分

简述 HTML5 有哪些新特性？
HTML5 的语义化标签有哪些，使用语义化标签的好处是什么？（语义化标签）
说说 <canvas> 元素的作用和使用场景。（<canvas> 元素）
<video> 和 <audio> 标签的常见属性有哪些？（音视频标签）
如何在 HTML 中实现文件上传功能？（文件上传）
简述 HTML 中 meta 标签的作用和常见用法。（meta 标签）
如何在 HTML 中实现响应式图片？（响应式图片）
说说 <datalist> 标签的用途。（<datalist> 标签）
如何优化 HTML 代码的性能？（性能优化）
简述 HTML 中 noscript 标签的作用。（noscript 标签）
如何在 HTML 中创建一个表格并设置表头和单元格样式？（表格创建）
说说 HTML 中 iframe 的优缺点。（iframe 标签）
如何在 HTML 中实现锚点链接？（锚点链接）
简述 HTML 中 web storage（localStorage 和 sessionStorage）的区别和使用方法。（web storage）
如何在 HTML 中实现多列布局？（多列布局）
说说 HTML 中 form 表单的 enctype 属性有哪些取值和用途。（表单 enctype 属性）
如何在 HTML 中实现拖放功能？（拖放功能）
简述 HTML 中 keygen 标签的作用（虽然已被弃用）。（keygen 标签）
如何在 HTML 中创建一个无序列表和有序列表，并设置列表样式？（列表创建）
说说 HTML 中 ruby、rt 和 rp 标签的作用。（ruby 相关标签）
如何在 HTML 中实现模态框（弹出框）？（模态框实现）
简述 HTML 中 wbr 标签的用途。（wbr 标签）
如何在 HTML 中实现分页功能？（分页功能）
说说 HTML 中 output 标签的作用。（output 标签）
如何在 HTML 中设置页面的标题和图标？（页面标题和图标）

CSS 部分

简述 CSS 盒模型的组成部分。（盒模型）
如何清除浮动，有哪些方法？（清除浮动）
说说 CSS 中的定位方式有哪些，以及它们的区别。（定位方式）
如何实现水平和垂直居中，有哪些常见方法？（元素居中）
简述 CSS 中的 flexbox 布局和它的主要属性。（flexbox 布局）
说说 CSS 中的 grid 布局和它的主要属性。（grid 布局）
如何使用 CSS 实现响应式布局？（响应式布局）
简述 CSS 中的选择器有哪些，优先级是如何计算的？（选择器和优先级）
说说 CSS 中的伪类和伪元素有哪些，以及它们的区别。（伪类和伪元素）
如何使用 CSS 实现动画效果，有哪些方法？（动画效果）
简述 CSS 中的过渡效果和如何使用。（过渡效果）
说说 CSS 中的背景属性有哪些，如何实现背景渐变？（背景属性和渐变）
如何使用 CSS 实现文本溢出省略号效果？（文本溢出省略）
简述 CSS 中的字体属性有哪些，如何使用自定义字体？（字体属性）
说说 CSS 中的 box-shadow 和 text-shadow 属性的用法。（阴影属性）
如何使用 CSS 实现三角形效果？（三角形效果）
简述 CSS 中的 transform 属性有哪些取值和用途。（transform 属性）
说说 CSS 中的 opacity 和 rgba 的区别。（透明度）
如何使用 CSS 实现多列文本布局？（多列文本布局）
简述 CSS 中的 filter 属性的作用和常见用法。（filter 属性）
说说 CSS 中的 calc() 函数的用途。（calc() 函数）
如何使用 CSS 实现粘性定位（sticky）？（粘性定位）
简述 CSS 中的 will-change 属性的作用。（will-change 属性）
说说 CSS 中的 mix-blend-mode 属性的用途。（混合模式）
如何使用 CSS 实现等高布局？（等高布局）
简述 CSS 中的 perspective 属性的作用。（透视属性）
说说 CSS 中的 backface-visibility 属性的用途。（背面可见性）
如何使用 CSS 实现滚动动画效果？（滚动动画）
简述 CSS 中的 clip-path 属性的作用和用法。（裁剪路径）
说说 CSS 中的 shape-outside 属性的用途。（形状外边距）

HTML 和 CSS 综合部分

如何实现一个响应式的导航栏，结合 HTML 和 CSS？（响应式导航栏）
简述如何使用 HTML 和 CSS 实现一个卡片式布局。（卡片式布局）
说说如何使用 HTML 和 CSS 实现一个轮播图效果。（轮播图效果）
如何使用 HTML 和 CSS 实现一个下拉菜单？（下拉菜单）
简述如何使用 HTML 和 CSS 实现一个瀑布流布局。（瀑布流布局）
说说如何使用 HTML 和 CSS 实现一个汉堡菜单（移动端菜单）。（汉堡菜单）
如何使用 HTML 和 CSS 实现一个选项卡切换效果？（选项卡切换）
简述如何使用 HTML 和 CSS 实现一个折叠面板效果。（折叠面板）
说说如何使用 HTML 和 CSS 实现一个进度条效果。（进度条效果）
如何使用 HTML 和 CSS 实现一个模态对话框（弹窗）？（模态对话框）
简述如何使用 HTML 和 CSS 实现一个侧边栏菜单。（侧边栏菜单）
说说如何使用 HTML 和 CSS 实现一个粘性页脚（始终在底部）。（粘性页脚）
如何使用 HTML 和 CSS 实现一个网格布局的图片画廊？（图片画廊）
简述如何使用 HTML 和 CSS 实现一个 3D 翻转效果的卡片。（3D 翻转卡片）
说说如何使用 HTML 和 CSS 实现一个响应式的表格。（响应式表格）
如何使用 HTML 和 CSS 实现一个渐变边框效果？（渐变边框）
简述如何使用 HTML 和 CSS 实现一个波浪动画效果。（波浪动画）
说说如何使用 HTML 和 CSS 实现一个打字机效果的文本。（打字机效果）
如何使用 HTML 和 CSS 实现一个可折叠的侧边栏？（可折叠侧边栏）
简述如何使用 HTML 和 CSS 实现一个饼图效果。（饼图效果）
说说如何使用 HTML 和 CSS 实现一个鼠标悬停放大图片效果。（图片放大效果）
如何使用 HTML 和 CSS 实现一个动画加载图标？（加载图标）
简述如何使用 HTML 和 CSS 实现一个响应式的表单。（响应式表单）
说说如何使用 HTML 和 CSS 实现一个视差滚动效果。（视差滚动）
如何使用 HTML 和 CSS 实现一个立体按钮效果？（立体按钮）
简述如何使用 HTML 和 CSS 实现一个线条动画效果。（线条动画）
说说如何使用 HTML 和 CSS 实现一个卡片翻转效果。（卡片翻转）
如何使用 HTML 和 CSS 实现一个可拖动的元素？（可拖动元素）
简述如何使用 HTML 和 CSS 实现一个彩虹渐变文本效果。（彩虹渐变文本）
说说如何使用 HTML 和 CSS 实现一个模糊背景效果。（模糊背景）
如何使用 HTML 和 CSS 实现一个旋转木马效果。（旋转木马效果）
简述如何使用 HTML 和 CSS 实现一个水波动画效果。（水波动画）
说说如何使用 HTML 和 CSS 实现一个呼吸灯效果的按钮。（呼吸灯按钮）
如何使用 HTML 和 CSS 实现一个闪烁文本效果。（闪烁文本）
简述如何使用 HTML 和 CSS 实现一个弹性卡片效果。（弹性卡片）
说说如何使用 HTML 和 CSS 实现一个倾斜卡片布局。（倾斜卡片布局）
如何使用 HTML 和 CSS 实现一个发光文本效果。（发光文本）
简述如何使用 HTML 和 CSS 实现一个动态网格布局。（动态网格布局）
说说如何使用 HTML 和 CSS 实现一个涟漪效果的按钮。（涟漪按钮）
如何使用 HTML 和 CSS 实现一个火焰动画效果。（火焰动画）
简述如何使用 HTML 和 CSS 实现一个收缩展开的列表。（收缩展开列表）
说说如何使用 HTML 和 CSS 实现一个折纸效果的卡片。（折纸卡片）
如何使用 HTML 和 CSS 实现一个烟雾动画效果。（烟雾动画）
简述如何使用 HTML 和 CSS 实现一个闪烁边框效果。（闪烁边框）
说说如何使用 HTML 和 CSS 实现一个立体导航栏效果。（立体导航栏）