随笔分类 - html
摘要：form中button未指明type时，默认type为submit 遇到了一个奇怪的现象：一个按钮打开一个Bootstrap模态框，模态框有几个表单字段和两个按钮，两个按钮可以关闭模态框，点击其中一个按钮关闭模态框后页面居然刷新了。 仔细检查后发现点击的按钮未指明type，浏览器把按钮type默认为
阅读全文
摘要：在一个英文博客上看到用css实现的时间线，看着还是很简单的，写个demo记录下。 <style> .events::before { content: ""; position: absolute; top: 0; height: 100%; width: 1px; left: 50%; backg
阅读全文
摘要：找好用的前端验证组件过程中发现了parsley。大致看了下说明文档，支持required、url、email、长度、范围、正则验证，基本上够用了，而且支持中文，本身没有css方便配合其它css框架使用，样式也是很好定义。简直非常好用了。结合bootstrap写个demo记录下。 <!DOCTYPE
阅读全文
摘要：最近遇到了一个问题：使用firefox浏览切换2层iframe下的某个页面后iframe内容未更新，Chrome和Edge浏览器并无这个问题。在这个项目中，最外层的iframe用于隐藏url，里层的iframe用于给不同参数的url提供一个统一地址以便于权限路由等控制。 由于项目比较复杂，用简单的代
阅读全文
摘要：<style> .parent { display: grid; grid-template-columns: 25% 75%; /* grid-template-columns: 1fr 3fr; */ /* 同上 */ height: 100px; } .child { border: 1px
阅读全文
摘要：最近要做一个页面：在图片上特定区域根据数值显示不同的颜色。 涉及到图片和绘图，细数下可能的解决方案：canvas、svg。由于区域并不规则且需要根据区域交互，考虑svg的方案，使用echarts画图，并找到了例子：Examples - Apache ECharts 找几个案例复习下svg的用法，以下
阅读全文
摘要：HTML5 dialog标签简单使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1
阅读全文
摘要：之前有一天看到了这样的一段代码，居然可以使用dom的id直接调用方法和获取属性，真是刷新了我的认知了。 <div> <p id="content">aa</p> <button onclick="console.log(content.innerText)">打印内容</button> </div>
阅读全文
摘要：最近领导给了个需求：一个web页面header和footer的部分不能随浏览器zoom in/out 改变样式及字体大小。 分析了需求和查阅相关资料后，写个demo，实现了整个页面不随ctrl+(+/-) 组合键或者ctrl+鼠标滚轮 缩放的效果，对于浏览器工具/设置的缩放没有效果。 键盘/鼠标事件
阅读全文
摘要：SVG 使用XML描述2D图形 SVG中的元素和HTML元素一样，在输出图形前需要经过浏览器引擎的解析、布局计算和生成DOM树（SVG 元素太多时非常消耗性能），可以添加事件 SVG 对象的属性发生变化，浏览器自动重现图形 SVG绘制矢量图形，不依赖于终端设备的像素，可以随意放大缩小不会失真 适合场
阅读全文
摘要：SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。 SVG是W3C制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。 SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图
阅读全文
摘要：HTML <canvas> 标签用于通过脚本（通常是 JavaScript）动态绘制图形。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" cont
阅读全文