HTML5基础入门一天学完
HTML
什么是HTML
HTML：Hyper Text Markup Language（超文本编辑语言）
HTML的发展史
HTML5优势
世界知名浏览器厂商对HTML5的支持
市场的需求
跨平台
W3C标准
W3C
World Wide Web Consortium
成立于1944年，Web技术领域最权威和最具影响力的世界中立机构。
W3C标准包括
结构化标准语言（HTML,XML）
表现 ...
通过HTML5 Video来优化动态GIF
网页中的动态GIF图片是非常受欢迎的，因为它们相比静态图片更生动，相比网页视频更简单。但是GIF图片通常具有较大的体积，就导致网页加载速度变慢，内存使用增加。通过使用html video，可以使浏览器中的GIF图片在减少98%体积的情况下，仍然具有相对较高的质量。
我们注意到这篇文章是Google Web Fu ...
关于HTML的语义化标签和无语义化标签
什么是HTML语义化标签
语义化的标签，旨在让标签有自己的含义，让浏览器认识这个标签所传达的信息，是干什么的有什么作用。 比如：h1标题标签的语义是用它来标识网页或其他部分最重要的标题。 然而span 标签责没有独特的含义。
常用的语义化标签
header元素
是HTML5中新增的语义化标签，用于定义文档的页眉（介绍信息）。
n ...
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 ...
