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="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设置新窗口打开或者其他方式

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>

Table of contents


回到顶部

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

Site updated at 2024-10-26 09:00