JavaScript实现form提交，回车提交URL地址伪静态 原创
New
文本框（input element）里输入内容后，直接Enter回车键提交表单（form），是很方便的，也很人性化，便于用户使用。比如一个搜索框，希望输入完关键词之后直接按回车键立即提交表单，但如果不使用form提交，用JavaScript来实现提交动作，而且提交URL地址伪静态化，不想带问号和搜索关键词，搜索框内enter回车键自动提交，那 ...
html中的form不提交（排除）某些input 原创
New
在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）时，可能会遇到循环登录问题，导致用户无 ...
不用 Typora 的 html 导出功能，手搓纯 HTML5 转换器
不用 Typora 的 html 导出功能，手搓纯 HTML5 转换器
原创 夏群林 2025.12.23
一、缘起
我日常工作使用 Typora， 一款很好的 Markdown 编辑器。建网站，写博文，用 Typora 打底稿。然后导出成 html 格式文件，所见即所得，一个静态网站就成了！
不过，Typora 自带的 HTML 导出功能存在核心缺陷：夹带 Typora 编辑器 UI 冗 ...
响应式带验证的注册表单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 秒。作为一个对性能有执念的前端开发者，这个数字让我夜不能寐。经过 ...
CSS的filter属性添加各种图形效果使用示例
目录前言blur()函数brightness()函数contrast()函数drop-shadow()函数grayscale()函数hue-rotate() (en-US)函数invert() (en-US)函数opacity()函数saturate() (en-US)函数sepia() (en-US)函数组合函数1、brightness()和contrast()2、blur()和opacity()3、grayscale()、sepia()和saturate()总结CSS的filter属性用于给元素添 ...
html5
HTML5 浏览器支持
HTML5 浏览器支持
现代的浏览器都支持 HTML5。
此外，所有浏览器，包括旧的和最新的，对无法识别的元素会作为内联元素自动处理。
正因为如此，你可以 "教会" 浏览器处理 "未知" 的 HTML 元素。
甚至你可以教会 IE6 (Windows XP 2001) 浏览器处理未知的 HTML 元素。
将 HTML5 元素定义为块元素
HTML5 定了 ...
HTML5新增的9种不为人知的页面标签
目录HTML5新增标签分类结构性标签多媒体标签表单标签其他标签HTML5中9种不为人知的页面标签1．figure标签2．figcaption标签3．details标签4．mark标签5．progress标签6．meter标签7．menu标签8．command标签9．NAV标签总结HTML5新增的标签主要可以分为几类，以下是按照类别进行分点表示和归纳的
HTML5新增标签分类
结构性标 ...
HTML5的核心特性和应用场景
目录前言HTML5的概述1. 什么是HTML52. HTML5的发展历程HTML5的核心特性1. 新的语义元素2. 多媒体支持3. Canvas和SVG4. 本地存储HTML5的应用场景1. 响应式网页设计2. 移动应用开发3. 单页面应用SPAHTML5的挑战与局限1. 浏览器兼容性2. 安全性问题HTML5的未来发展趋势1. 新特性的不断引入2. 与其他技术的融合结语
前言
HTML5 ...
CSS3的核心特性和应用场景
目录前言CSS3的概述1. 什么是CSS32. CSS3的历史背景CSS3的核心特性1. 选择器的扩展2. 媒体查询3. 渐变与阴影4. 过渡与动画CSS3的应用场景1. 响应式网页设计2. 动画与用户体验3. 图形和视觉效果CSS3的挑战与局限1. 浏览器兼容性2. 性能问题CSS3的未来发展趋势1. 新特性的引入2. 与JavaScript的结合结语
前言
CSS3是现代Web开 ...
CSS核心概念解析：层叠、优先级与继承
目录一、CSS 的层叠规则什么是层叠？冲突规则理解优先级代码示例：优先级的比较二、继承在 CSS 中的作用什么是继承？理解继承的工作原理控制继承重设所有属性值三、理解层叠资源顺序优先级什么是层叠资源顺序？代码示例：层叠资源顺序的应用!important 的使用四、理解级联层的顺序什么是级联层？代码示例：级联层的顺 ...
CSS样式化美化网页table表格指南
目录一、典型的 HTML 表格二、样式化我们的表格1、基本样式2、间距和布局三、简单的排版1、字体和文本对齐2、颜色样式四、综合练习题题 1: 创建一个自定义的产品表格题 2: 设计一个学生成绩表格总结表格是网页设计中不可或缺的元素，用于展示数据和信息。通过CSS可以对表格进行美化和功能性强化，包括设置边框、背景色、文 ...
css特效 - 按钮hover文字上下滑动
目录核心代码html 代码css 部分代码完整代码如下html 页面css 样式页面渲染效果当鼠标悬浮按钮上方时，利用伪元素和定位来实现伪元素块上下滑入和滑出的交互效果。
此效果适用于较大的按钮入口，如主页 banner 处按钮，也可以放在当作首屏当作一个大 banner 作为视觉效果等场景。
核心代码部分，简要说明了写法思路；完整代 ...
让你的网页动起来:Javascript+CSS拖曳盒子指南
让我为大家带来一个小案例吧！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
...
前端常用的性能实用优化方法有哪些?
目录移动端性能优化：图片优化：1、CSS sprites2、压缩图片3、尽量避免重设图片大小4、图片尽量避免使用DataURL5、图片懒加载JavaScript相关优化1、把脚本放在页面底部2、使用外部JavaScript和CSS3、压缩JavaScript和CSS4、减少DOM操作5、js开销缩短解析时间6、v8编译原理（代码优化）7、v8内部优化8、对象优化(迎合v8进行 ...
padding、border会把div撑大的解决方法
目录盒子模型的组成：box-sizing下的盒子模型calc()的运用所有HTML元素都可以看作盒子。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。因为Div添加了padding、border，Div的实际宽度=Div的初始固定值+边距值+边框值
...
