规范指南

  • 谷歌 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="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=***

属性说明
methodget 或者 post
action搜索程序的网址路径
target_blank 或者其他 target设置新窗口打开或者其他方式

相关文档

demo

讨论区:

当图片无法显示时使用备用图片(可以用于解决部分浏览器不支持webP格式图片不显示图片的问题)

<img src="images/1.webp" alt="" onError="this.src='images/1.jpg'">

使用 onError 属性,当图片 1.webp 加载失败或者无法无法解析时显示指定图片 1.jpg

表格

  • td
  • colspan 行合并
  • rowspan 列合并

回到顶部

Copyright © 2017-2024 1px.run (像素教程) Distributed by an MIT license.