Vanson's Eternal Blog

HTML夯实基础

Html basic.png
Published on
/43 mins read/---

Html

浏览器

内核

内核名称主要开发者代表浏览器JavaScript引擎当前状态特点
BlinkGoogleChrome, Edge(新版), Opera(新版)V8主流高性能,Chromium系浏览器使用
WebKitAppleSafari, iOS浏览器JavaScriptCore主流iOS唯一允许的内核,苹果生态专属
GeckoMozillaFirefoxSpiderMonkey活跃开源,隐私友好,标准兼容性强
Trident微软IE 4-11Chakra淘汰已停止维护,兼容性差
EdgeHTML微软Edge(2015-2019)Chakra淘汰被Blink取代
PrestoOperaOpera(2013年前)Carakan淘汰轻量快速,已被Blink替代
KHTMLKDEKonqueror-历史WebKit的前身

渲染过程

用户访问页面的时候,浏览器网络线程进行网络通信获取HTML代码,然后进入渲染主线程的消息队列进行包装,得到渲染任务后按需交由渲染主线程进行渲染。

render-process-2025-07-04-13-24-10

网络 和 渲染。当用户在地址栏输入 URL 并按下回车键时,浏览器的网络线程会发送 HTTP 请求与服务器通信,获取 HTML 文档。

获取到 HTML 文档后,浏览器会将其封装成一个渲染任务,并将其传递给渲染主线程的消息队列。

在事件循环机制的作用下,渲染主线程取出消息队列中的渲染任务,开启渲染流程。

render-process-detail-2025-07-04-13-26-45

主要分为以下几个阶段:

  • 解析 HTML:生成 DOM 树。
  • 样式计算:计算每个 DOM 节点的最终样式。
  • 布局:计算每个节点的几何信息。
  • 分层:将页面划分为多个图层。
  • 生成绘制指令:为每个图层生成绘制指令集。
  • 分块:将每个图层划分为更小的块。
  • 光栅化:将每个块转换为位图。
  • 绘制:将位图绘制到屏幕上。

解析html-Parse HTML

生成DOM树和CSSOM树。html代码解析后生成DOM树,css代码解析后生成CSSOM树。

parse-html-2025-07-04-13-32-11

在解析过程中,为了提⾼解析效率,浏览器会启动⼀个预解析器率先下载和解析 CSS。

parse-html-2-2025-07-04-13-32-21

渲染主线程遇到 JS 时必须暂停⼀切⾏为,等待下载执⾏完后才能继续,预解析线程可以分担⼀点下载 JS 的任务,这里主要是因为JS可能会改变DOM树, 所以需要先解析,但如果声明是异步加载,那就不会暂停。

parse-html-3-2025-07-04-13-32-28

样式计算

将HTML解析获得的DOM树和CSSOM树对应起来,只有DOM与CSSOM对应起来才能进行布局。

recalculate-style-2025-07-04-13-33-42

布局

根据计算好的样式来生成布局树。布局树包含了之后渲染后呈现给我们的所有信息。

css-layout-2025-07-04-13-35-26

只能说布局树和可见内容是一一对应的,但是和DOM树并不一定一一对应。

1、display值为none的元素,只是不可见,但是依然会添加到DOM树中,而布局树中不会添加该元素。

css-layout-2-2025-07-04-13-37-14

2、before伪类添加的元素,由于不算做一个单独的元素,所以不会添加到DOM树中,但是会在布局中显示,所以会添加到布局树中。

css-layout-3-2025-07-04-13-37-20

3、浏览器在渲染过程中为了保持布局的连贯性和符合CSS规范会自动创建一些布局盒子:匿名行盒与匿名块盒,它们只会在布局树中添加,而不会影响DOM树。

css-layout-4-2025-07-04-13-37-27

分层-Layer

在现代浏览器中,为了优化渲染性能,渲染树会被分解成多个层(Layers)。每个层可以独立于其他层进行渲染和合成,这有助于减少绘制和合成的工作量。

html-layer-2025-07-04-13-39-58

跟堆叠上下文有关的属性,会影响分层,比如z-index,opacity、transform、filter,或者元素被设置为will-change,以及部分动画和过度效果可能也会被分为新的层。

opacity属性与堆叠上下文有关,因为当元素的opacity值小于1时,它将创建一个内部的堆叠上下文。这意味着,即使元素的z-index值较低,它的不透明部分仍然可以覆盖在其后面的元素的不透明部分。这可能导致一些不可预见的层叠效果,因为元素的不透明度会影响其在堆叠上下文中的行为。

例如,假设有两个元素A和B,A在B的上方,A的z-index值较高,但A的opacity为0.5,B的opacity为1。在这种情况下,A的不透明部分将覆盖B,但A的半透明部分将允许B的内容显示出来。这是因为A的半透明部分创建了一个内部堆叠上下文,而B的内容在这个内部堆叠上下文中显示。

堆叠上下文的层级规则如下:

  • 根元素(通常是HTML元素)形成一个堆叠上下文。
  • 定位元素(position属性为relative、absolute或fixed)可以形成新的堆叠上下文。
  • 元素的z-index属性可以指定其在堆叠上下文中的层级。
  • 某些CSS属性和值,如opacity、transform、filter等,可以创建新的堆叠上下文。

绘制-Paint

为分层结果的每⼀层⽣成如何绘制的指令,并不是真的绘制。

到这里渲染主线程的工作就结束了,剩下的任务交给其他线程完成。

分块-Tiling

这一步会将每⼀层分为多个小的区域。分块的目的是对分层结果进行进一步细分,通过只渲染用户可以看到的部分(即视口中的部分),浏览器可以更快地完成绘制工作。当用户滚动页面时,浏览器可以丢弃不在视口中的块,并重新绘制新进入视口的块。

以此来减少内存使用,提高渲染效率,优化重绘制,改善滚动性能。

html-tiling-2025-07-04-13-43-26

光栅化-Raster

光栅化将分块后的每个块都绘制成位图,优先处理靠近视口的块,以此提高渲染效率。这一过程需要GPU加速。

画-Draw

合成线程计算出每个位图在屏幕上的位置,交给GPU进行最终呈现。

html-draw-2025-07-04-13-45-10

html-fengong-2025-07-04-13-45-19

重排(Reflow)

重排是指当DOM树中的元素的几何属性(如宽度、高度、位置等)发生变化时,浏览器需要重新计算这些元素的布局。

这个过程非常耗时,因为它涉及到重新计算整个页面或部分页面的布局。

触发重排的操作

  • 修改元素的几何属性:如宽度、高度、边距、内边距等。
  • 添加或删除元素:如通过JavaScript动态添加或删除DOM元素。
  • 内容变化:如文本内容的增加或减少。
  • 样式变化:如改变元素的display、position等属性。
  • 浏览器窗口大小变化:如用户调整浏览器窗口大小。

重排的范围

  • 局部重排:只影响单个元素或部分元素的布局。
  • 全局重排:影响整个页面的布局。

减少重排

  • 批量修改DOM:尽量将多个DOM操作合并在一起,减少重排的次数。例如,使用documentFragment来批量添加元素。
  • 使用transform和opacity:这些属性不会触发重排,只会触发重绘或合成,性能更好。
  • 避免使用内联样式:内联样式会导致多次重排,建议使用外部样式表。内联样式通常直接在JavaScript中动态修改(例如 element.style.width = '200px'),这种操作容易导致分散的、不可预测的样式变更,从而可能引发多次重排。
  • 减少布局依赖:尽量减少元素之间的布局依赖,避免一个元素的改变导致多个元素的重排。

重绘(repaint)

重绘是指当元素的外观发生变化(如背景颜色、字体颜色等),但几何属性没有变化时,浏览器需要重新绘制这些元素。

重绘通常比重排的性能开销小,但频繁的重绘仍然会影响性能。

触发重绘的操作

  • 修改元素的外观属性:如背景颜色、字体颜色、边框颜色等。
  • 伪类变化:如:hover、:active等伪类触发时。
  • 透明度变化:如改变元素的opacity属性。
  • 动画效果:如CSS动画或JavaScript动画。

减少重绘

  • 使用CSS3硬件加速:通过transform、opacity等属性,将元素的渲染任务交给GPU,减少CPU的负担。
  • 避免使用复杂的CSS选择器:复杂的CSS选择器会增加浏览器的解析时间,导致重绘性能下降。
  • 使用will-change属性:提前告诉浏览器哪些元素可能会发生变化,让浏览器提前进行优化。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reflow and Repaint Example</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            transition: transform 0.5s, opacity 0.5s;
        }
    </style>
</head>
<body>
    <div class="box" id="box"></div>
    <button id="change">Change</button>
 
    <script>
        document.getElementById('change').addEventListener('click', function() {
            // 触发重排
            document.getElementById('box').style.width = '200px';
            // 触发重绘
            document.getElementById('box').style.backgroundColor = 'blue';
            // 使用transform和opacity减少重排和重绘
            document.getElementById('box').style.transform = 'translateX(100px)';
            document.getElementById('box').style.opacity = '0.5';
        });
    </script>
</body>
</html>
 

为什么transform效率高

因为 transform 既不会影响布局也不会影响绘制指令,它影响的只是渲染流程的最后一个「draw」阶段

由于 draw 阶段在合成线程中,所以 transform 的变化几乎不会影响渲染主线程。反之,渲染主线程无论如何忙碌,也不会影响 transform 的变化。

为什么 transform 能跳过布局和绘制?

硬件加速(GPU 加速)

  • 浏览器会将应用了 transform 或 opacity 的元素 提升为独立的合成层(Compositing Layer),交给 GPU 处理。
  • GPU 擅长并行计算矩阵变换(如平移、旋转、缩放)和透明度混合,速度远超 CPU 的软件渲染。

图层的独立性

  • 每个合成层与其他层隔离,修改 transform 或 opacity 时:
  • 不需要重新计算其他元素的布局(避免 重排)。
  • 不需要重新绘制该层的内容(避免 重绘)。
  • 只需在合成阶段重新组合图层即可。

Basic

HTML5 新特性

特性分类新特性描述
语义化标签<article><section><header><footer><nav><aside><main><figure><figcaption>
表单控件增强新输入类型(emailurlnumberdate等)、新表单属性(placeholderrequiredpatternautocomplete等)
多媒体支持<audio><video><source><track>
图形和绘图<canvas><svg>
拖放功能draggable属性、拖放事件
地理定位navigator.geolocation
本地存储localStoragesessionStorage
Web Workers后台线程运行JavaScript代码
Web Sockets全双工通信
应用缓存manifest属性、应用缓存文件
数据集data-*属性
CSS3支持新选择器和属性(border-radiusbox-shadowtext-shadowtransform等)
语义化属性pingpubdatetime
新API历史记录API、微数据

meta标签

用于定义文档的元数据(meta-information)的HTML元素。这些元数据不会显示在页面上,但会被浏览器(如何显示内容或重新加载页面)、搜索引擎(关键词)和其他web服务使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 声明文档使用的字符编码 -->
    <meta charset="utf-8">
    
    <!-- 为移动设备优化页面,控制页面的宽度、初始缩放比例、最大缩放比例、最小缩放比例和是否允许用户缩放 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    
    <!-- 提供页面的简短描述,通常用于搜索引擎结果页面(SERP) -->
    <meta name="description" content="这是一个示例网页,用于展示常见的HTML元数据标签及其用途。">
    
    <!-- 提供页面的关键词,用于搜索引擎优化(SEO) -->
    <meta name="keywords" content="HTML, CSS, JavaScript, SEO, 元数据">
    
    <!-- 提供页面的作者信息 -->
    <meta name="author" content="John Doe">
    
    <!-- 告诉搜索引擎是否索引页面和跟随链接 -->
    <meta name="robots" content="index, follow">
    
    <!-- 告诉IE浏览器使用最新的渲染引擎 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <!-- 优化iOS设备上的Web应用体验 -->
    <meta name="apple-mobile-web-app-title" content="示例网页">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
    
    <!-- 禁用Windows Phone上的点击高光效果 -->
    <meta name="msapplication-tap-highlight" content="no">
    
    <!-- 控制页面的缓存行为,防止页面被缓存 -->
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    
    <!-- 页面标题 -->
    <title>示例网页</title>
</head>
<body>
    <h1>欢迎来到示例网页</h1>
    <p>这是一个示例网页,用于展示常见的HTML元数据标签及其用途。</p>
</body>
</html>

其中 content 参数有以下几种

  • all:文件将被检索,且页面上的链接可以被查询;
  • none:文件将不被检索,且页面上的链接不可以被查询;
  • index:文件将被检索;
  • follow:页面上的链接可以被查询;
  • noindex:文件将不被检索;
  • nofollow:页面上的链接不可以被查询。

img标签的alt和title属性

特性alt 属性title 属性
用途替代文本,描述图像内容提供额外说明,显示为工具提示
显示方式图像加载失败时显示,被屏幕阅读器读取鼠标悬停时显示为工具提示
无障碍性必须提供,帮助视障用户理解图像内容可选,提供额外信息,但不是无障碍设计的核心部分
搜索引擎优化非常重要,帮助搜索引擎理解图像内容较低优先级,主要用于用户体验
是否必需必须提供(HTML 规范要求)可选

标签语义化

使用 <header>、<nav>、<main>、<section>、<article>、<footer>

  • 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
  • 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
  • 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
  • 便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化

Doctype

声明位于 HTML 文档的最顶部,用于定义文档的类型和规范。它的主要作用是告诉浏览器如何解析和渲染页面内容。正确的 <!DOCTYPE> 声明可以确保浏览器以标准模式(也称为严格模式)渲染页面,从而避免浏览器进入混杂模式(Quirks Mode)。

  • 推荐使用严格模式:通过在文档顶部添加正确的 <!DOCTYPE> 声明(如 <!DOCTYPE html>),确保浏览器以标准模式解析和渲染页面。
  • 避免混杂模式:混杂模式可能导致布局问题和兼容性问题,不推荐在现代网页开发中使用。

Doctype文档类型

  • HTML5:<!DOCTYPE html>(推荐使用,适用于现代网页开发)。
  • HTML 4.01:严格模式、过渡模式、框架集模式。
  • XHTML 1.0 和 1.1:严格模式、过渡模式、框架集模式。
  • HTML2 和 HTML3:较早的规范,现在几乎不再使用。

行内元素 和 块级元素

类型特性常见标签
行内元素不换行,按内容宽度显示 无法直接设置宽高, 只能包含文本或其他行内元素<span>, <a>, <strong>, <em>, <img>, <input>, <button>, <label>, <br>, <code>
块级元素独占一行,可以设置宽高能包含其他块级和行内元素<div>, <p>, <h1>-<h6>, <ul>, <ol>, <li>, <table>, <form>, <header>, <footer>, <section>
行内块元素不换行,但可设宽高兼具行内和块级特性<img>, <input>, <button>, <select>, <textarea>

img 的 srcset 属性的作⽤?

用于响应式图像加载,允许浏览器根据设备特性(如屏幕分辨率、视口宽度等)自动选择最合适的图像资源。

<img src="small.jpg " srcset="big.jpg 1440w, middle.jpg 800w, small.jpg 1x" />

表示浏览器宽度达到 800px 则加载 middle.jpg ,达到 1400px 则加载 big.jpg,像素比(dpr)为 1 的时候用 small.jpg

适配不同分辨率

  • 为高DPI屏幕(如Retina)提供高清图,普通屏幕提供标准图
  • 避免高分辨率设备下载过大的资源

响应式布局适配

  • 根据视口宽度匹配不同尺寸的图像
  • 节省带宽并提升加载速度
 
<img src="默认图.jpg" 
     srcset="
       图像1.jpg 1x,    /* 标准分辨率 */
       图像2.jpg 2x,    /* 2倍高清屏 */
       大图.jpg 1200w,  /* 视口≥1200px时加载 */
       中图.jpg 800w    /* 视口≥800px时加载 */
     "
     sizes="(max-width: 600px) 100vw, 50vw" 
     alt="示例">
 

Canvas 和 SVG 的区别?

对比维度CanvasSVG
图形类型位图(依赖分辨率,放大失真)矢量图(基于数学计算,无限缩放不失真)
DOM 支持单元素(整个画布是一个<canvas>节点,内部图形无独立DOM)多元素(每个图形是独立DOM节点,可通过JS直接操作)
事件处理不支持图形级事件(需手动计算坐标实现)支持图形级事件(如clickmouseover
渲染机制逐像素渲染,绘制后浏览器不跟踪状态(需手动重绘)基于DOM实时渲染,浏览器自动管理状态
性能特点适合高频重绘(如游戏、动画)适合静态或低频更新图形(如图标、地图)
存储格式可导出为.png/.jpg可保存为.svg文件或内联在HTML中
动态修改必须清除整个画布重新绘制直接修改DOM属性(如setAttribute
SEO/可访问性内容不可被搜索引擎或屏幕阅读器识别文本和结构可被索引,支持ARIA标签
典型场景- 游戏数据可视化(动态图表) 图像处理(滤镜、像素操作)- 图标/LOGO 地图可交互图表 响应式UI组件
代码示例javascript<br>ctx.fillRect(10, 10, 100, 50); // 无法单独修改xml<br><rect x="10" y="10" width="100" height="50" onclick="handleClick()"/>

选 Canvas 当:

  • 需要处理像素级操作(如游戏、图像编辑器)
  • 高频更新画面(>60fps动画)
  • 不需要与单个图形交互

选 SVG 当:

  • 需要响应式缩放(如地图、矢量图标)
  • 要求图形可交互(如点击、悬停效果)
  • 需要SEO或可访问性支持

HTML5的离线存储

允许网页应用在没有网络连接的情况下运行。这是通过一个名为manifest的文件实现的,该文件指定了哪些资源需要被缓存以便离线使用。以下是对HTML5离线存储的简述以及如何实现它的步骤:

工作原理

页面头部加入manifest属性:

在HTML文档的<html>标签中加入manifest属性,指向一个.manifest文件。例如:

<html manifest="cache.manifest">

创建manifest文件:

manifest文件是一个文本文件,它告诉浏览器哪些资源需要被缓存。文件内容分为几个部分:

  • CACHE MANIFEST:文件的开头必须包含这一行,它告诉浏览器这是一个缓存清单文件。
  • CACHE::这一部分列出需要缓存的资源。
  • NETWORK::这一部分列出不需要缓存的资源,这些资源始终从网络获取。
  • FALLBACK::这一部分指定备用资源,当请求的资源无法访问时,浏览器会使用这些备用资源。
CACHE MANIFEST
# 2021-06-26 14:01 V0.1.2.42634241855282310056  hash 以便做版本控制
# 默认部分,显式缓存这些文件
 
CACHE:
#需要缓存的列表,如字体、图片、脚本、css
./assets/images/favicons/32x32.png
./assets/fonts/VideoJS.eot
./assets/fonts/VideoJS.svg
./assets/fonts/VideoJS.ttf
./assets/fonts/VideoJS.woff
 
# 启动页资源
./index.html
 
NETWORK:
#不需要缓存的
*
 
FALLBACK:
#访问缓存失败后,备用访问的资源,第一个是访问源,第二个是替换文件
*.html /offline.html

离线存储的工作流程

  1. 首次访问:

    • 浏览器发现HTML头部有manifest属性,它会请求manifest文件。
    • 浏览器根据manifest文件的内容下载相应的资源,并进行离线存储。
  2. 后续访问:

    • 如果用户再次访问页面,浏览器会检查manifest文件是否有更新。
    • 如果manifest文件有更新,浏览器会重新下载清单中列出的资源并更新缓存。
    • 如果没有更新,浏览器会使用已缓存的资源,无需再次从网络下载。
  3. 离线访问:

    • 当用户处于离线状态时,浏览器会使用已缓存的资源来显示页面。
    • 如果请求的资源没有缓存,但有指定的备用资源(FALLBACK),浏览器会使用备用资源。

注意事项

  • 版本控制:通过在manifest文件中添加注释(如日期和版本号),可以方便地进行版本控制。当注释内容改变时,浏览器会认为manifest文件有更新,从而重新下载资源。
  • 更新缓存:用户必须重新访问页面,浏览器才会检查manifest文件的更新并更新缓存。
  • 清除缓存:用户可以通过浏览器的设置手动清除离线存储的缓存。
  • 通过这种方式,HTML5的离线存储功能可以显著提升用户体验,尤其是在网络不稳定或无网络的环

contenteditable 属性

contenteditable 是一个HTML全局属性,允许用户直接在浏览器中编辑元素的内容。

这个属性对于在网页上创建富文本编辑器或可编辑部分特别有用。当设置为 true 时,用户可以编辑元素的内容;

当设置为 false 时,内容不可编辑。

<div contenteditable="true">
  This content can be edited by the user.
</div>

使用场景

  • 富文本编辑器:创建类似于Google Docs或Medium的富文本编辑器。
  • 可编辑的用户界面:允许用户直接在页面上编辑内容,如评论、笔记等。
  • 动态内容编辑:在不刷新页面的情况下,允许用户编辑和更新内容。

注意事项

  • 安全性:由于用户可以直接编辑内容,需要注意防止跨站脚本攻击(XSS)。确保在将用户输入的内容显示到页面上之前进行适当的清理和验证。
  • 样式和格式:可以通过CSS和JavaScript来控制可编辑区域的样式和格式。
  • 事件处理:可以使用JavaScript监听和处理编辑事件,如 input、change 等。

figure 和 figcaption 标签的用途是什么?

<figure> 标签

用于封装媒体内容,如图像、图表、插图、代码片段、音频或视频等。

它是一个独立的流内容,通常与文档的主内容相关,但可以独立于主内容存在。

使用 <figure> 标签可以帮助搜索引擎更好地理解媒体内容的上下文。

<figcaption> 标签

<figcaption> 标签用于为 <figure> 标签中的媒体内容提供标题或说明。

它必须是 <figure> 标签的第一个或最后一个子元素。<figcaption> 标签的内容可以是简短的描述、标题或说明性文字,

有助于用户更好地理解媒体内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Figure and Figcaption Example</title>
</head>
<body>
    <h1>Figure and Figcaption Example</h1>
    <!-- figure 包含 figcaption -->
    <figure>
        <img src="image.jpg" alt="A beautiful landscape">
        <figcaption>A breathtaking view of nature.</figcaption>
    </figure>
    <figure>
        <video src="video.mp4" controls>
            Your browser does not support the video tag.
        </video>
        <figcaption>A short video of a nature walk.</figcaption>
    </figure>
    <figure>
        <pre><code>console.log("Hello, world!");</code></pre>
        <figcaption>A simple JavaScript console log statement.</figcaption>
    </figure>
</body>
</html>

随屏幕尺寸缩放的响应式图像

使用max-width和height属性

通过设置max-width为100%,并设置height为auto,可以确保图像的宽度会根据其父容器的宽度进行调整,同时保持图像的纵横比。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Image Example</title>
    <style>
        img {
            max-width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <h1>Responsive Image Example</h1>
    <div style="width: 50%;">
        <img src="image.jpg" alt="A responsive image">
    </div>
</body>
</html>

使用HTML5的picture元素

<picture>元素允许你为不同的屏幕尺寸提供不同的图像源。这在需要为高分辨率屏幕或不同设备提供特定图像时非常有用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Image Example</title>
</head>
<body>
    <h1>Responsive Image Example</h1>
    <picture>
        <source media="(min-width: 1200px)" srcset="large-image.jpg">
        <source media="(min-width: 768px)" srcset="medium-image.jpg">
        <source media="(min-width: 480px)" srcset="small-image.jpg">
        <img src="default-image.jpg" alt="A responsive image">
    </picture>
</body>
</html>

使用srcset属性

srcset属性允许你为图像提供多个不同分辨率的版本,浏览器会根据设备的屏幕分辨率自动选择合适的图像。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Image Example</title>
</head>
<body>
    <h1>Responsive Image Example</h1>
    <img src="image.jpg" 
         srcset="small-image.jpg 480w, medium-image.jpg 768w, large-image.jpg 1200w"
         sizes="(max-width: 480px) 480px, (max-width: 768px) 768px, 1200px"
         alt="A responsive image">
</body>
</html>

使用CSS背景图像

如果你的图像作为背景图像使用,可以通过CSS的background-size属性来实现响应式效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Background Image Example</title>
    <style>
        .responsive-background {
            width: 100%;
            height: 300px;
            background-image: url('image.jpg');
            background-size: cover;
            background-position: center;
        }
    </style>
</head>
<body>
    <h1>Responsive Background Image Example</h1>
    <div class="responsive-background"></div>
</body>
</html>

使用CSS的object-fit属性

object-fit属性可以控制图像如何适应其容器。这在需要保持图像纵横比的同时,确保图像完全覆盖容器时非常有用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Image with object-fit Example</title>
    <style>
        img {
            width: 100%;
            height: 300px;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <h1>Responsive Image with object-fit Example</h1>
    <div style="width: 50%;">
        <img src="image.jpg" alt="A responsive image">
    </div>
</body>
</html>

图片等比例铺满父级div

object-fit: cover

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Image with object-fit: cover</title>
    <style>
        .parent-div {
            width: 500px;
            height: 500px;
            border: 1px solid black;
        }
        .responsive-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    </style>
</head>
<body>
    <h1>Responsive Image with object-fit: cover</h1>
    <div class="parent-div">
        <img src="https://cdn.fcsaas.com/blog/mysql-basic-2025-07-04-13-21-15.png" alt="Responsive Image" class="responsive-image">
    </div>
 
</body><plasmo-csui id="aitdk-csui"></plasmo-csui></html>

object-fit: contain

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Image with object-fit: contain</title>
    <style>
        .parent-div {
            width: 500px;
            height: 500px;
            border: 1px solid black;
        }
        .responsive-image {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    </style>
</head>
<body>
    <h1>Responsive Image with object-fit: contain</h1>
    <div class="parent-div">
        <img src="https://cdn.fcsaas.com/blog/mysql-basic-2025-07-04-13-21-15.png" alt="Responsive Image" class="responsive-image">
    </div>
</body>
</html>
 

a标签的下载属性

download 属性是一个布尔属性,当该属性存在时,浏览器会尝试将链接的资源作为文件下载,而不是直接在浏览器中打开或导航到该资源。

这在用户需要下载文件时非常有用,例如下载文档、图片、视频等。

  • 文件名:download 属性可以指定下载文件的文件名。如果没有指定文件名,浏览器会使用链接的URL中的最后一部分作为文件名。
  • 文件类型:download 属性适用于任何类型的文件,包括但不限于文档、图片、音频、视频等。
  • 安全性:download 属性只能用于同源策略(Same-Origin Policy)下的资源。如果链接指向的是跨域资源,浏览器会忽略 download 属性。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Download Attribute Example</title>
</head>
<body>
    <h1>Download Attribute Example</h1>
    <p>Click the link below to download a PDF file:</p>
    <!-- 指定文件名 -->
    <a href="document.pdf" download="my-document.pdf">Download PDF</a>
</body>
</html>
 

datalist标签

<datalist> 元素用于为 <input> 字段提供预定义的选项列表。它提供自动完成功能,帮助用户轻松选择选项。

<datalist> 元素本身不会直接显示在页面上,而是通过与 <input> 元素关联来提供自动完成建议。

特性

  • 自动完成:<datalist> 提供的选项会在用户输入时自动显示,帮助用户快速选择。
  • 隐藏性:<datalist> 元素本身不会在页面上显示,但它的内容会通过自动完成功能呈现。
  • 灵活性:可以与多种类型的 <input> 元素(如 text、search、url、email 等)一起使用。
  • 兼容性:<datalist> 在现代浏览器中得到了广泛支持,但在一些旧版本浏览器中可能不支持。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Datalist Example</title>
</head>
<body>
    <h1>Datalist Example</h1>
    <form>
        <label for="browser">Choose your browser:</label>
        <input type="text" id="browser" name="browser" list="browsers">
        <datalist id="browsers">
            <option value="Chrome">
            <option value="Firefox">
            <option value="Safari">
            <option value="Edge">
            <option value="Opera">
        </datalist>
        <input type="submit">
    </form>
</body>
</html>
 

progress标签

<progress> 元素用于表示任务或流程的进度,提供完成百分比的视觉指示。它通常用于显示文件上传进度、任务完成情况等。

特性

  • value 属性:表示当前进度的值。
  • max 属性:表示进度的最大值。
  • 默认值:如果未指定 value 或 max 属性,<progress> 元素将显示为“不确定”状态,通常显示为动画效果。
  • 语义化:<progress> 元素提供了一种语义化的方式来表示进度,有助于屏幕阅读器等辅助技术更好地理解页面内容。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Progress Element Example</title>
</head>
<body>
    <h1>Progress Element Example</h1>
    <p>File upload progress:</p>
    <progress value="50" max="100"></progress>
    <p>Task completion progress:</p>
    <progress value="75" max="100"></progress>
    <p>Indeterminate progress:</p>
    <progress></progress>
</body>
</html>

创建适应不同屏幕尺寸的响应式视频

设置视频容器的样式:

  • 使用 max-width: 100%; 确保视频容器的宽度不会超过其父容器。
  • 使用 height: auto; 确保视频的高度会根据宽度自动调整,保持纵横比。

设置视频本身的样式:

  • 使用 width: 100%; 确保视频的宽度会充满其容器。
  • 使用 height: auto; 确保视频的高度会根据宽度自动调整,保持纵横比。

可选:

  • 使用 padding-top 或 padding-bottom 保持纵横比:
  • 通过设置容器的 padding-top 或 padding-bottom,可以确保视频在不同屏幕尺寸下保持固定的纵横比。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Video Example</title>
    <style>
        .video-container {
            position: relative;
            width: 100%;
            max-width: 100%;
            height: 0;
            padding-bottom: 56.25%; /* 16:9 aspect ratio */
        }
        .video-container video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <h1>Responsive Video Example</h1>
    <div class="video-container">
        <video src="video.mp4" controls>
            Your browser does not support the video tag.
        </video>
    </div>
</body>
</html>

如果视频的纵横比不是16:9,可以调整 padding-bottom 的值。例如,对于4:3的视频,padding-bottom 应设置为75%(3/4 = 0.75)。

HTML 中创建粘性/固定导航栏?

要创建粘性/固定导航栏,请使用 CSS 将导航栏的位置设置为固定并指定顶部或底部值。

<style>
  .navbar {
    position: fixed;
    top: 0;
    width: 100%;
  }
</style>
 
<div class="navbar">
  <!-- Navigation links -->
</div>
 

draggable 元素可拖动

要使 HTML 元素可拖动,可以使用 draggable 属性并将其设置为 true。

然后,你可以定义事件处理程序来控制拖放行为。以下是一个详细的步骤和示例代码,展示如何实现可拖动的 HTML 元素。

设置 draggable 属性:

  • 将 draggable 属性设置为 true,使元素可拖动。

定义拖放事件处理程序:

  • dragstart:当拖动开始时触发。
  • drag:在拖动过程中持续触发。
  • dragend:当拖动结束时触发。
  • dragover:当拖动的元素在目标元素上移动时触发。
  • drop:当拖动的元素在目标元素上释放时触发。

阻止默认行为:

  • 在 dragover 和 drop 事件中调用 event.preventDefault(),以允许元素被放置。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Draggable Element Example</title>
    <style>
        .draggable {
            width: 100px;
            height: 100px;
            background-color: #4CAF50;
            color: white;
            text-align: center;
            line-height: 100px;
            cursor: pointer;
            margin: 10px;
        }
        .dropzone {
            width: 200px;
            height: 200px;
            background-color: #f1f1f1;
            border: 3px dashed #ccc;
            text-align: center;
            line-height: 200px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <h1>Draggable Element Example</h1>
    <div class="draggable" draggable="true" id="draggable">Drag me!</div>
    <div class="dropzone" id="dropzone">Drop here</div>
 
    <script>
        // 获取可拖动的元素
        const draggable = document.getElementById('draggable');
        // 获取目标区域
        const dropzone = document.getElementById('dropzone');
 
        // 拖动开始时触发
        draggable.addEventListener('dragstart', (event) => {
            // 设置拖动的数据
            event.dataTransfer.setData('text/plain', 'Dragged data');
            // 可选:设置拖动时的反馈效果
            event.dataTransfer.effectAllowed = 'move';
        });
 
        // 拖动结束时触发
        draggable.addEventListener('dragend', (event) => {
            // 可选:清除拖动时的反馈效果
            event.dataTransfer.clearData();
        });
 
        // 拖动的元素在目标元素上移动时触发
        dropzone.addEventListener('dragover', (event) => {
            // 阻止默认行为,允许放置
            event.preventDefault();
            // 可选:设置放置时的反馈效果
            event.dataTransfer.dropEffect = 'move';
        });
 
        // 拖动的元素在目标元素上释放时触发
        dropzone.addEventListener('drop', (event) => {
            // 阻止默认行为
            event.preventDefault();
            // 获取拖动的数据
            const data = event.dataTransfer.getData('text/plain');
            // 更新目标区域的内容
            dropzone.textContent = `Dropped data: ${data}`;
        });
    </script>
</body>
</html>

src和href区别

特性hrefsrc
用途在当前文档和引用资源之间建立联系引用资源,替换当前元素的内容
加载方式并行加载,不会阻塞页面的其他资源阻塞加载,会暂停其他资源的下载和处理
适用元素<a><link><area><img><script><iframe><object><embed>
资源类型外部资源(如CSS文件、其他HTML页面)页面内容(如图像、脚本、框架)
示例<a href="https://www.example.com">Visit Example</a> <link rel="stylesheet" href="styles.css"><img src="image.jpg" alt="A beautiful landscape"> <script src="script.js"></script> <iframe src="https://www.example.com"></iframe>

iframe 有那些优点和缺点?

优点:

  • 可以在页面上独立显示一个页面或者内容,不会与页面其他元素产生冲突。
  • 可以在多个页面中重用同一个页面或者内容,可以减少代码的冗余。
  • 加载是异步的,页面可以在不等待 iframe 加载完成的情况下进行展示。
  • 方便地实现跨域访问

缺点:

  • 搜索引擎可能无法正确解析 iframe 中的内容
  • 会阻塞主页面的 onload 事件
  • 和主页面共享连接池,影响页面并行加载

iframe的优缺点

优点

  • 内容隔离:<iframe> 可以嵌入独立的 HTML 文档,内容与父页面完全隔离,不会相互干扰。
  • 跨域加载:可以加载外部网站的内容,实现跨域资源的嵌入。
  • 模块化:方便将复杂页面拆分为多个模块,每个模块通过 <iframe> 加载,便于管理和维护。
  • 减少页面加载量:主页面加载完成后,<iframe> 内容可以异步加载,提升用户体验。
  • 兼容性好:几乎所有现代浏览器都支持 <iframe>,并且在旧版本浏览器中也有良好的兼容性。

缺点

  • 性能问题:每个 <iframe> 都是一个独立的文档,会增加页面的加载时间和资源消耗。
  • 安全性问题:如果加载外部内容,可能会引入安全风险,如跨站脚本攻击(XSS)或恶意代码。
  • 用户体验:在某些情况下,<iframe> 内容的滚动条可能会与父页面的滚动条冲突,影响用户体验。
  • SEO 优化:搜索引擎可能无法完全索引 <iframe> 内容,对 SEO 不太友好。
  • 样式和脚本限制:虽然内容隔离是一个优点,但有时也可能导致样式和脚本无法跨 <iframe> 传递,增加了开发复杂性。