随笔分类 - (新) HTML5
摘要:前言 Scrollbar 能 styling 的东西不多 (尤其是 IOS 基本上只能 display:none 而已),但有时候我们不得不 styling。 这里记入我自己在项目中修改过的 scrollbar 经历。 参考 can i use webkit-scrollbar MDN – ::-w
阅读全文
摘要:前言 虽然现在的 Email Client 有在进步, 但是比起 browser 还是差太远了. 假如你用 HTML5 + CSS3 的方式去写 Email Template 的话是不行的. 这篇特地学习一下如何写好 Email Marketing HTML Template. 参考 Youtube
阅读全文
摘要:前言 之前写过 HTML & CSS – Responsive Image 响应式图片 (完整版), 里面解释了原理和一些具体做法, 但是并不是以真实场景作为例子带入. 由于 RWD Image 挺复杂, 所以特地再写一篇以实战的角度来解释. 建议先阅读之前的相关文章: CSS – RWD (Res
阅读全文
摘要:前言 之前介绍 Native Form 的时候有提及过 method="dialog", 但由于它太新了, 所以没去研究. 这篇就介绍一下. Dialog 也好 Modal 也好, 都有人叫, 我的理解是 Modal 更抽象一点, Dialog 按 Material Design, 应该是要有 ac
阅读全文
摘要:前言 Table (表格) 历史悠久, 它有许多独特的默认样式, 它也是最早的布局方案方案哦 (现在依然有用 table 来做布局的, 比如 email template). 这篇来介绍一下基本的 table styling. 参考 Youtube – Styling HTML tables wit
阅读全文
摘要:参考 Youtube – #3 JavaScript Loading Strategies (async and defer) | JavaScript Full Tutorial no async no defer 当游览器 parse HTML 遇到 <script src> 时, 它会去 do
阅读全文
摘要:前言 以前写过 form 表单, 但很不齐全, 这篇想做一个大整理. 主要讲讲在网站中使用原生 Form 的功能, 不足和扩展. 前端是原生的 HTML/JS, 后端是 ASP.NET Core Razor Pages. Simplest Form Overview form 的职责是让 user
阅读全文
摘要:前言 ul > li 经常会用到, 它原本的 style 很丑, 这篇介绍如果修改它. 以前学 W3Schools 的时候也有记入过: HTML – W3Schools 学习笔记 参考: Youtube – HTML & CSS for Beginners Part 17: How to Creat
阅读全文
摘要:前言 世界上有很多语言的阅读方向是不同的. 英文 中文 (以前才有竖排文字, 现在中文和英语一样了) 阿拉伯文 (Arabic) 面对不同的语言, HTML 和 CSS 就需要不同的写法. 虽然我没有做过类似的项目, 但是知识还是要有的, 正所谓 "没吃过猪肉,也见过猪跑" 嘛. 参考: HTML
阅读全文
摘要:前言 HTML tag 有 100 多个, 有些是功能形的, 非用不可, 有些是为了语义化对 screen reader 友好 (给眼睛有残缺的人也可以获取清晰的网站信息). 语义化是很重要的, 有些人写 HTML 满满都是 div, 出来的效果用眼睛看确实没有区别. 但是用 screen read
阅读全文
摘要:前言 之前就有写过关于 Retina 和 Responsive Image 响应式图片 (responsive image) Retina 显示屏 但写的太烂了, 所以有了后来的 屏幕, 打印, 分辨率, 物理像素, 逻辑像素, Retina, DPI, PPI 是什么? 和这一篇. 参考: 阮一峰
阅读全文
摘要:前言 程序员就爱 hot key, 就爱 shortcut. 当然这里指的是不牺牲安全和结果的情况下用尽可能少的力气去做事情, 而不是那种 shortcut 了以后会翻车的. Emmet 就是专门写 HTML 自动补全的语法, VS Code 自带这个能力, 所以不需要安装插件哦. 参考: Writ
阅读全文
摘要:前言 学完了 w3school 就要练练手了. 这篇是记入我学习的过程, 和知识点. update: 2022-02-27 用文章来表达太难了, 用视频比较合理. 所以我就没有继续写了. 这里记入几篇教程: One Page Full Website Project For Practice | H
阅读全文
摘要:有用链接: HTML Attribute Reference (查看所有 Attributes) HTML Paragraphs Link to W3Schools <p> 里面 double/multiple space 最终会变成 1 space, 如果要 multiple 就用 space 的
阅读全文
摘要:有些是市场的规范, 有些是我的规范 Tag Name Lower Case 参考: W3Schools Attributes Name Lower Case 参考: W3Schools Always Quote Attribute Values 参考: W3Schools Always Double
阅读全文
摘要:Void Elements 需要 end slash? 这些是 void elements, 它们没有 end tag, 也没有 content. 至于关闭时是 ends with > 还是 />, 其实 W3C 都可以. 但 MDN, W3Schools, Google 的例子都是没有 slash
阅读全文