HTML 笔记
规范指南
- 谷歌 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/dida/" />
- 相关文档
- 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 值 | 设置新窗口打开或者其他方式 |
input type=”file”
限制文件格式（只是默认筛选，使用中还是可以改成全部类型）
可以按文件类型限定或者按文件格式限定
- 文件类型：
audio/*：任何音频video/*：任何视频image/*：任何图片
- 文件格式：
.pdf：pdf- 以此类推，只需填写对应的格式后缀即可
如果需要设置多个可以用英文逗号 , 间隔开
<input type="file" accept="image/png, .txt" />
input type=”date” type=”time” type=”datetime” type=”datetime-local”
| 时间输入框 | type 值 | 效果演示 | 代码 |
|---|---|---|---|
| 输入或者选择日期 | type=”date” | <input type="date"> | |
| 输入或者选择时间 | type=”time” | <input type="time"> | |
| 输入日期和时间 | type=”datetime” | <input type="datetime"> | |
| 输入或者选择日期和时间 | type=”datetime-local” | <input type="datetime-local"> |
type=”text”
| 内容输入框 | type 值 | 效果演示 | 代码 |
|---|---|---|---|
| 默认文本输入（所有类型） | type=”text” | <input type="text"> | |
| 输入密码（输入内容不显示明文） | type=”password” | <input type="password"> | |
| 搜索（输入内容后有清除按钮） | type=”search” | <input type="search"> | |
| 输入电话号码 | type=”tel” | <input type="tel"> |
Numbers
| 数值输入框 | type 值 | 效果演示 | 代码 |
|---|---|---|---|
| 输入数值 | type=”number” | <input type="number"> | |
| 输入数值（只能输入数字，可以上下键加减）（滑轮） | type=”range” | <input type="range"> |
相关文档
demo
当图片无法显示时使用备用图片（可以用于解决部分浏览器不支持webP格式图片不显示图片的问题）
<img src="images/1.webp" alt="" onError="this.src='images/1.jpg'">
使用 onError 属性，当图片 1.webp 加载失败或者无法无法解析时显示指定图片 1.jpg
表格
- td
- colspan 行合并
- rowspan 列合并
有序列表 ol 前面的数字从 0 开始
在<ol>标签中添加 start="0" 参数
示例代码：
<ol start="0">
<li>我们从0开始</li>
<li>我们从0开始</li>
<li>我们从0开始</li>
</ol>