规范指南
- 谷歌 HTML/CSS 样式指南 https://google.github.io/styleguide/htmlcssguide.html
- Can I use Search https://caniuse.com/ HTML、CSS、JavaScript相关属性对于浏览器兼容性的查询
Head 标签
多语言标记
x-default表示默认
<link rel="alternate" hreflang="en" href="https://1px.run/">
<link rel="alternate" hreflang="es" href="https://1px.run/es/">
<link rel="alternate" hreflang="x-default" href="https://1px.run/">
当前文档语言
标准用法
<html lang="en">
不推荐的用法
<meta http-equiv="Content-Language" content="en">
相关链接
- Hreflang：初学者的简易指南： https://ahrefs.com/blog/zh/hreflang-tags/
link rel
<link rel="canonical" href="https://1px.run/" />
<link rel="next" href="https://1px.run/page/2/" />
- 相关文档
- HTML rel Attribute：https://www.w3schools.com/tags/att_link_rel.asp
表单
Form
<form method="get" action="http://1px.run/search" target="_blank">
...
<input type="radio" id="open" name="state" value="open" checked="checked">
<input type="radio" id="closed" name="state" value="closed">
<input type="text" name="q" class="search-input ant-input" placeholder="回车搜索">
</form>
# 添加 radio 时
http://1px.run/search?q=***&state=open
# 不添加 radio 时
http://1px.run/search?q=***
| 属性 | 值 | 说明 |
|---|---|---|
method | get 或者 post | – |
action | 搜索程序的网址路径 | – |
target | _blank 或者其他 target 值 | 设置新窗口打开或者其他方式 |
相关文档
demo
当图片无法显示时使用备用图片（可以用于解决部分浏览器不支持webP格式图片不显示图片的问题）
<img src="images/1.webp" alt="" onError="this.src='images/1.jpg'">
使用 onError 属性，当图片 1.webp 加载失败或者无法无法解析时显示指定图片 1.jpg