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

前端开发知识梳理 - HTMLCSS

article 2025/2/7 11:51:00

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 中设置页面的标题和图标？（页面标题和图标）