flex布局下两端对齐，不满左对齐
弹性布局多列换行居左布局
解决方案一
问题情境：
在flex布局下，多行排列，如何让flex布局最后一行没有排满时，向左对齐排列且与上面的行间距相同。
实现效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
li {
list-style: none;
}
.Lis ...
vue3 使用 html5-qrcode 实现扫描二维码功能
1. 安装
npm安装
npm install --save-dev html5-qrcode
或直接引入
<script src="https://unpkg.com/html5-qrcode" type="text/javascript">
2. 引入
根据需求自定义渲染 QR scanning UI 的容器。
<div id="reader" width="600px"></div>
引入 Html5Qrcode
// 简单模式（使用默认用户界面）
import {Html5QrcodeScan ...
这些年没来得及学习的一些 HTML5 标签
认识并学习下还没来得及学习的一些 HTML5 标签
<ruby> 标签
HTML <ruby> 元素被用来展示东亚文字注音或字符注释。
比如:
<ruby>兄弟<rt>xiongdi</rt></ruby>
<rt> 元素包含字符的发音，字符在 ruby 注解中出现，它用于描述东亚字符的发音。这个元素始终在 <ruby> 元素中使用。
如果需要将每个字和上 ...
新的HTML标签<search>详解
目录如何运作看法本文介绍了一种新的HTML元素搜索方法，并提供了一个实用的工具来帮助开发者快速找到所需的元素。这对于那些需要处理大量HTML元素的开发者来说是非常有用的。文章还通过提供一些常见元素的用法示例，帮助开发者更好地理解和应用这些元素。在众多元素中找到特定的元素。为了解决这个问题，文章介绍了一种新的 ...
【Web前端HTML5&CSS3】10-高度塌陷与BFC
笔记来源：尚硅谷 Web 前端 HTML5&CSS3 初学者零基础入门全套完整版
目录高度塌陷与 BFC1. 高度塌陷2. BFC3. clear4. after5. clearfix
高度塌陷与 BFC
1. 高度塌陷
在浮动布局中，父元素的高度默认是被子元素撑开的
当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高 ...
html form表单基础入门案例讲解
目录一，表格标签–1，概述–2，总结二，表单标签–1，测试–2，总结–3，form提交数据三，form表单的练习四，CSS-1，概述-2，语法-3，入门案例五，选择器总结一，表格标签
向网页中加入表格
–1，概述
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 表格标签</title>
</head>
<body>
<!-- ...
HTML5实现DTMF（电话拨号按键信号）解码、编码，代码简单易于移植
目录一、前言1.1 HTML5实现DTMF的一些动机1.2 一些有效场景(1) 10086(2) 软电话(3) 小玩具二、DTMF频率按键对照表三、DTMF信号解码 得到按键值3.1 先学会手工解码3.2 了解一些原理(1) 调整PCM采样率基本不会干扰到DTMF信号(2) 降低采样率有利于识别DTMF信号(3) 普通话音很难刚好凑成DTMF信号3.3 实现软件解码(1) 降低PCM的 ...
几款流行的HTML5 UI 框架比较
手机HTML5开发，大部分都使用现有的框架，这里简单比较几个流行的UI 框架。作者（启明星工作室 http://www.dotnetcms.org） 比较一下几款流行的HTML5框架，个人意见，仅供参考。
（1）MUI
网址： http://dev.dcloud.net.cn/mui/
优点：MUI是数字dclound推出的一款流行框架，个人感觉,这是目前最好的 ...
JavaScript实现form提交，回车提交URL地址伪静态 原创
文本框（input element）里输入内容后，直接Enter回车键提交表单（form），是很方便的，也很人性化，便于用户使用。比如一个搜索框，希望输入完关键词之后直接按回车键立即提交表单，但如果不使用form提交，用JavaScript来实现提交动作，而且提交URL地址伪静态化，不想带问号和搜索关键词，搜索框内enter回车键自动提交，那 ...
html中的form不提交（排除）某些input 原创
在Html的form点击提交时，form内所有Input filed的内容，只要是有name属性的，并且没有disabled属性的，都会被提交，即通过网络发送到指定的URL。这是正常情况，如果有不想提交的input属性呢？
一、使用disabled属性
添加disabled属性是比较常用的方法。
<input type="hidden" name="name" value="" disabled>
但是添加了该 ...
Cookie的secure属性引起单点登录中的循环登录问题
目录一、单点登录简单介绍1.1 基本概念1.2 基本实现原理二、循环登录问题三、从一次正常登录流程说起四、循环登录产生的根本原因五、清除浏览器缓存的底层原理及解决方法5.1 清除浏览器缓存的底层原理5.2 其他解决办法六、扩展: Cookie 的端口不隔离性七、总结在实施单点登录（SSO）时，可能会遇到循环登录问题，导致用户无 ...
HTML5 知识笔记
一、HTML5 基本结构
（一）文档声明
：跟浏览器说这个网页是按 HTML5 标准写的。以前 HTML 4.01 的声明很麻烦，HTML5 的简单多了，写代码更方便。
（二） 根元素
： 是整个网页的“大盒子”，所有网页内容都在它里面。lang 用来写网页的语言，比如 zh - CN 就是中文（中国大陆）。这对搜索引擎和读屏软件有帮助，它们能更好 ...
HTML5基础笔记
一、HTML5核心基础格式
HTML5文档结构组成
1. 文档声明： <!DOCTYPE html> ，用于告诉浏览器文档类型为HTML5，位于文档第一行。
2. 根标签： <html> ，是所有HTML标签的根节点。
3. 头部区域： <head> ，存放页面元数据，不直接显示在页面上，包含字符编码、视口设置、页面 ...
不用 Typora 的 html 导出功能，手搓纯 HTML5 转换器
不用 Typora 的 html 导出功能，手搓纯 HTML5 转换器
原创 夏群林 2025.12.23
一、缘起
我日常工作使用 Typora， 一款很好的 Markdown 编辑器。建网站，写博文，用 Typora 打底稿。然后导出成 html 格式文件，所见即所得，一个静态网站就成了！
不过，Typora 自带的 HTML 导出功能存在核心缺陷：夹带 Typora 编辑器 UI 冗 ...
HTML5介绍（HTML5特性、HTML5功能） - 指南
pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", monospace !important; font-size: 14px !important; line-height: 1.6 !important; padding: 16px !important; margin: 16px 0 !importan ...
响应式带验证的注册表单html+css+javascript
目录注册表单具有以下特点html+css+javascript代码总结一个现代化、交互友好的注册表单，具有完整的验证功能和精美的 UI 设计。这个表单将包含常见的注册字段，如姓名、电子邮件、密码等，并添加适当的验证和反馈机制。
注册表单具有以下特点
现代化 UI 设计：采用了卡片式布局、渐变背景和精心设计的色彩方案，符合 Awwwa ...
CSS实现0.5px（物理像素）的细边框的5种方法
目录引言为什么需要0.5px边框？5种实现方案及代码示例1. transform缩放（最常用）2. 直接使用0.5px（iOS支持）3. 线性渐变模拟（单边边框）4. viewport缩放（激进方案）5. SVG绘制（矢量精准）方案对比与选型建议终极解决方案（结合JS）结语引言
在移动端开发中，设计师常常要求实现0.5像素（物理像素）的细边框，但在标准C ...
CSS计数器-自动化文档中的自动编号
目录CSS 计数器的优势实际应用场景编号章节列表项编号标题和脚注编号使用计数器自动编号嵌套计数器CSS 计数器属性总结CSS 计数器是CSS 中一个强大但经常被忽视的功能。它们允许开发者创建和管理计数器，这些计数器可以在文档中自动递增，非常适合用于编号章节、列表项或其他文档元素。在本文中，我们将深入探讨 CSS 计数器 ...
HTML5扩展itemscope, itemtype, itemprop微数据的解释和应用
目录一、微数据是？二、微数据语法三、微数据的力量四、一些词汇表介绍五、浏览器支持六、丰富网页摘要应用七、总结一、微数据是？
一个页面的内容，例如人物、事件或评论不仅要给用户看，还要让机器可识别。而目前机器智能程度有限，要让其知会特定内容含义，我们需要使用规定的标签、属性名以及特定用法等。举个简单例子 ...
从加载到渲染的全链路提速的网站打开速度前端优化
目录性能问题诊断加载优化1. 资源加载策略优化2. 图片优化3. 代码分割和懒加载渲染优化1. 虚拟列表实现2. 状态管理优化3. 缓存策略性能监控优化成果写在最后"网站太慢了，用户都在抱怨！"上周，我接手了一个正在运行的电商网站，首屏加载时间竟然长达 8 秒。作为一个对性能有执念的前端开发者，这个数字让我夜不能寐。经过 ...
