随笔分类 -  html

1 2 下一页
html语意话
css 媒体查询（Chrome 104）
摘要：<div></div> div { width: 100px; height: 100px; } @media (width <= 400px) { /* 屏幕宽度 小于等于400px 时 */ div { background-color: red; } } @media (400px <= wi 阅读全文
posted @ 2022-08-12 08:47 Ajanuw 阅读(54) 评论(0) 推荐(0)
WEB 面向开发者的结构化数据
摘要：通常用于google搜索 See also: video 探索搜索库 阅读全文
posted @ 2020-12-22 15:02 Ajanuw 阅读(64) 评论(0) 推荐(0)
SMS OTP 表单最佳做法 (短信验证)
摘要：<form action="/verify-otp" method="POST"> <input type="text" inputmode="numeric" autocomplete="one-time-code" pattern="\d{6}" required> </form> naviga 阅读全文
posted @ 2020-12-17 11:35 Ajanuw 阅读(251) 评论(0) 推荐(0)
js 动态修改页面文本字体
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Docum 阅读全文
posted @ 2020-11-08 10:48 Ajanuw 阅读(1106) 评论(0) 推荐(0)
在浏览器上播放m3u8视频
摘要：在edge上有效 使用 "video.js" 阅读全文
posted @ 2020-03-27 23:16 Ajanuw 阅读(3741) 评论(0) 推荐(0)
html 布局，上下各100px,中间自适应
摘要：flex 绝对定位 grid 阅读全文
posted @ 2020-03-13 17:25 Ajanuw 阅读(406) 评论(0) 推荐(0)
WEB 使用lazysizes延迟加载图像
摘要："原文" "Native lazy loading for the web" Example 阅读全文
posted @ 2020-03-07 20:09 Ajanuw 阅读(390) 评论(0) 推荐(0)
WEB 用视频替换GIF动画
摘要："原文" "download ffmpeg" gif to video 转化后文件大小大大降低 用视频替换GIF img 浏览器不会猜测哪个 重要。例如，如果您首先指定MP4视频，并且浏览器支持WebM，则浏览器将跳过WebM 首先使用WebM，请先指定它！ 阅读全文
posted @ 2020-03-07 19:54 Ajanuw 阅读(192) 评论(0) 推荐(0)
web项目如何使用Material Icons
摘要：使用文档链接 图标库 最简单的使用方法 引入 <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Ico 阅读全文
posted @ 2019-03-02 21:47 Ajanuw 阅读(1828) 评论(0) 推荐(0)
浏览器打开exe文件
摘要：` regedit` 打开注册表，然后 自定义协议 自定义协议注册表.reg 打开后导入 设置好后浏览器访问 阅读全文
posted @ 2018-07-31 12:58 Ajanuw 阅读(1597) 评论(0) 推荐(0)
web 常用开发工具
摘要：he把字符转化为实体字符 Clipboard_API 访问剪贴板 pinyin 将汉字转化为拼音 pinyinjs 汉字与拼音互转的小巧web工具库 localforage 浏览器缓存数据库 handsontable 电子表格的数据网格编辑器 Excel Wordnik API 请求定义，例句，拼写 阅读全文
posted @ 2018-06-19 11:55 Ajanuw 阅读(684) 评论(1) 推荐(1)
自定义元素 v1：可重用网络组件
摘要：google文档 "https://developers.google.cn/web/fundamentals/web components/customelements" 兼容性 "https://caniuse.com/ search=custom" shadow DOM "https://de 阅读全文
posted @ 2018-02-06 20:15 Ajanuw 阅读(206) 评论(0) 推荐(0)
创建出色的表单
摘要："https://developers.google.cn/web/fundamentals/design and ux/input/forms/" Constraint Validation API "https://dev.w3.org/html5/spec preview/constraint 阅读全文
posted @ 2018-02-02 13:30 Ajanuw 阅读(168) 评论(0) 推荐(0)
搜索优化
摘要：搜索优化 "https://developers.google.cn/web/fundamentals/discovery/search optimization/" 阅读全文
posted @ 2018-02-01 09:14 Ajanuw 阅读(179) 评论(0) 推荐(0)
h5 打造全屏体验 element.requestFullscreen()
摘要：google打造全屏体验 "https://developers.google.cn/web/fundamentals/native hardware/fullscreen/" 以前github上的 "https://github.com/januwA/over/blob/master/h5%E5% 阅读全文
posted @ 2018-02-01 08:34 Ajanuw 阅读(541) 评论(0) 推荐(0)
响应用户界面
摘要：响应用户界面 "https://developers.google.cn/web/fundamentals/design and ux/responsive/" CSS 媒体查询用于自适应设计 "https://developers.google.cn/web/fundamentals/design 阅读全文
posted @ 2018-01-29 17:56 Ajanuw 阅读(177) 评论(0) 推荐(0)
动画
摘要：动画 "https://developers.google.cn/web/fundamentals/design and ux/animations/" element.classList 来进行css 动画 transitionend 事件，可以侦听元素css事件 使用 JavaScript 和 阅读全文
posted @ 2018-01-29 16:57 Ajanuw 阅读(183) 评论(0) 推荐(0)
使用 tabindex 改变Tab 键顺序
摘要：使用 tabindex原文 "https://developers.google.cn/web/fundamentals/accessibility/focus/using tabindex" 在表单上使用该特性可提供体验。 Tab 键顺序将以大于 0 的最小值为起点，从小到大排序 对焦点进行样式化 阅读全文
posted @ 2018-01-29 13:55 Ajanuw 阅读(495) 评论(0) 推荐(0)
可访问性(Accessibility) => 无障碍功能
摘要：了解无障碍功能及其范围和影响可令您成为更出色的网络开发者 "https://developers.google.cn/web/fundamentals/accessibility/" ARIA 简介 "https://developers.google.cn/web/fundamentals/acc 阅读全文
posted @ 2018-01-29 10:40 Ajanuw
html 预览图片
摘要：MDN 文档 首先你需要让用户上传图片 <input type="file" accept="image/*" id="upfile" /> 默认会让用户在 相册 或则 摄像头 中选择，如果加上 capture="camera" 则默认打开摄像头 当上传图片时，先在本地预览图片 document.q 阅读全文
posted @ 2017-12-20 19:51 Ajanuw 阅读(133) 评论(0) 推荐(0)

1 2 下一页