HTML 规范小细节总结

Published by powerfulyang on Jul 19, 2023

如何关闭密码输入框的 autocompolete

如何关闭表单的自动填充

https://www.zhangxinxu.com/wordpress/2022/09/css-autofill-html-autocomplete-off/

如果你希望在网页中关闭表单的自动填充，可以在表单元素或输入框元素中添加 autocomplete="off" 属性，例如：

html
1<form autocomplete="off">
2  ...
3</form>

或者

html
1<input type="text" autocomplete="off">

这将会告诉浏览器不要对这个表单或输入框进行自动填充。

各家浏览器不同的表现

https://caniuse.com/?search=autocomplete 看看各个浏览器的百花齐放(真是谢谢)

  • Chrome浏览器在用户使用了自动填充功能的情况下，autocomplete="off" 无效。
  • Safari浏览器在 username，email 和 password文本框的时候，关闭自动填充无效。
  • Firefox浏览器则是在登录表单中无法使用autocomplete="off"关闭自动提示。

密码使用 autocomplete="off" 好像不太管用

如果你想要禁止浏览器自动填充密码，可以在密码输入框的元素中添加 autocomplete="new-password" 属性。这通常在创建新的用户账户或更改密码时使用，以确保用户手动输入他们的密码。这是一个例子：

html
1<input type="password" autocomplete="new-password">

这个 autocomplete="new-password" 属性会告诉浏览器不要自动填充这个密码输入框。注意，不是所有的浏览器都会严格遵守这个设置，尤其是一些旧的浏览器版本，因此在用户体验方面可能会有一些差异。

另外，有一种常用的方法可以防止所有浏览器的自动填充，那就是在页面加载时动态创建输入元素。因为大多数的浏览器是在页面加载完成后立即进行自动填充的，所以如果输入元素是在页面加载后动态添加的，那么浏览器通常就不会自动填充这些元素。当然，这种方法可能会增加一些额外的开发复杂度。

这些是一些常见的防止密码自动填充的方法，你可以根据你的具体需求来选择合适的方法。

autocomplete支持的属性值

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

属性值释义
off浏览器不再自动填入或选择值。
name输入框期待是人物全名。如果不是全名，还可以使用下面这些属性值。honorific-prefix（前缀或抬头，如”Mrs.”, “Mr.”, “Miss”, “Ms.”, “Dr.”, 或”Mlle.”）、given-name（给定名字或开始名）、additional-name（中间名）、family-name（家庭名或最后名）、honorific-suffix（名字后缀，如”Jr.”, “B.Sc.”, “PhD.”, “MBASW”, 或”IV”）、nickname（昵称）
email邮箱地址
username用户名或账号名
new-password新密码。浏览器可能会出现自动生成的随机密码选项。
current-password用户当前密码
one-time-code用来验证用户信息的一次性代码，例如手机验证码
organization-title工作抬头，或者个人在组织中的级别。像是高级前端开发工程师这种。
organization组织名称。
street-address街道地址，无需包含国家或城市信息。
address-line1 address-line2 address-line3每一行的街道地址，只有当上面的street-address不存在的情况下，这些才有用。
address-level4颗粒度最细的地址，共四级。
address-level3至少包括三层行政级别。
address-level2地址中需要出现两个行政管理级别。
address-level1地址最前面的行政级别，在中国就是指省了。
country国家或地区代码。
country-name国家或地区名称。
postal-code邮政编码。
cc-name打印在支付工具（如信用卡）上或与之相关联的全名。
cc-additional-name信用卡等支付工具上的开始名（相当于中文名字的名，老外的名在前面，叫做first name也叫given name）。
cc-family-name信用卡等支付工具上的中间名
cc-family-name信用卡等支付工具上的家族名（相当于中文名字的姓）
cc-number识别付款方式的信用卡号或其他号码，如帐号。
cc-exp付款方式到期日，通常格式为“MM/YY”或“MM/YYYY”。
cc-exp-month付款方式到期的年份。
cc-exp-month付款方式到期的月份。
cc-csc支付工具的安全代码；在信用卡上，这是卡背面的三位数验证码。
cc-type支付工具的类型（如“Visa”或“Master Card”）。
transaction-currency进行交易的货币。
transaction-amount以“交易货币”为指定货币的付款单交易金额。
language首选语言，使用 BCP 47 语言标签 中给定的合法值。
bday完整的出生日期。
bday-day出生日期所在月份的日期。
bday-month出生日期所在的月份。
bday-year出生的年份
sex性别认同……
tel完整的手机号码，包括国家的编码。如果手机号码分多个输入框填写，可以使用下面这些值：tel-country-code（国家编码，中国是0086）、tel-national（不含国家代码的整个电话号码，要包括省内区号，例如021-xxx88250）、tel-area-code（区号）、tel-local（电话或手机号码不含区号的部分）
tel-extension电话号码中的电话分机代码，如酒店的房间或套房号码或公司的办公室分机。
impp即时消息协议端点的URL，例如“xmpp:username@example.net”.
urlURL网址，例如主页或公司网站地址
photo代表人、公司或其他信息的图片的URL地址。

自动填充样式的重置

CSS :autofill伪类可以匹配已经自动填充的输入框，因此，可以用来重置自动填充时候的高亮背景色。 因为是背景色，很多开发人员自然而然会想到使用类似下面的代码进行重置：

css
1:-webkit-autofill { background-color: transparent; }
2:autofill { background-color: transparent; }

结果很遗憾，上面的代码并不能重置系统的自动填充背景色。

其实仔细一想就好理解了，既然浏览器要保证输入框高亮背景色能够显示，肯定是不可能被普普通通一个CSS背景样式就被重置的。

所以这里，想要让自动填充的高亮背景色不显示，需要使用其他方法，目前业界用的比较多的就是使用巨大的box-shadow内阴影进行覆盖，代码示意：

css
1:-webkit-autofill { box-shadow: inset 0 0 0 2000px #fff; }
2:autofill { box-shadow: inset 0 0 0 2000px #fff; }

此时，自动填充带来的高亮背景色就不可见了。

关于 cursor: pointer 在移动端的表现

https://stackoverflow.com/a/44599972

会导致 -webkit-tap-highlight-color 生效，比如错误给元素设置 cursor: pointer 导致 the Blue highlighting of elements。

关于域名的库

https://www.npmjs.com/package/psl

Parse domain based on Public Suffix List. Returns an Object with the following properties:

  • tld: Top level domain (this is the public suffix).
  • sld: Second level domain (the first private part of the domain name).
  • domain: The domain name is the sld + tld.
  • subdomain: Optional parts left of the domain.

获取域名的相关信息，比如取 cookie 时用到。

cookie 中 domain.com 和 .domain.com 的区别

详见 https://powerfulyang.com/post/39#hostonly-%E5%92%8C-session-cookie

在Cookie中，domain.com和.domain.com有细微但重要的区别。这主要涉及到这些Cookie可以被哪些子域访问。

  1. domain.com：如果Cookie的域被设置为domain.com，那么该Cookie只能被完全限定的域名domain.com访问。也就是说，仅仅是domain.com的页面可以读取该Cookie，而像www.domain.com或blog.domain.com这样的子域则无法访问该Cookie。
  2. .domain.com：如果Cookie的域被设置为.domain.com（注意域名前的点），那么该Cookie可以被domain.com及其所有子域访问。也就是说，domain.com、www.domain.com、blog.domain.com等等都能读取该Cookie。

这种区别尤其在设置跨子域Cookie时非常重要，如需在所有子域中共享Cookie，那么应使用.domain.com这种形式。

关于拖拽效果的实现

如果你想处理用户按下鼠标并移动的事件（例如实现拖拽效果），你需要结合使用 mousedown、mousemove 和 mouseup 事件。

以下是一个简单的例子，演示如何使用这些事件来跟踪鼠标按下并移动的操作：

  1. 首先，监听 mousedown 事件，以便知道用户何时开始按下鼠标。
  2. 在 mousedown 事件触发时，开始监听 mousemove 事件。这样，只有当鼠标被按下时，你才会收到移动的更新。
  3. 最后，当 mouseup 事件发生时，停止监听 mousemove 事件，因为用户已经释放了鼠标。

这是一个基本的实现：

javascript
1let isMouseDown = false;
2
3document.addEventListener('mousedown', function(event) {
4    // 设置标记，表示鼠标已经按下
5    isMouseDown = true;
6
7    // 开始监听鼠标移动事件
8    document.addEventListener('mousemove', onMouseMove);
9});
10
11document.addEventListener('mouseup', function(event) {
12    // 重置标记，表示鼠标已经释放
13    isMouseDown = false;
14
15    // 停止监听鼠标移动事件
16    document.removeEventListener('mousemove', onMouseMove);
17});
18
19function onMouseMove(event) {
20    if (!isMouseDown) return; // 只有当鼠标被按下时，才处理鼠标移动事件
21
22    // 在此处处理鼠标移动的逻辑，例如更新元素的位置等
23    console.log(`Mouse is moving at (${event.clientX}, ${event.clientY})`);
24}

在上述代码中，只有当用户按下鼠标并移动时，我们才会处理 mousemove 事件。当用户释放鼠标时，我们停止处理这个事件。

img element

alt 属性

img 标签中的 alt 属性代表“替代文本”（alternative text）。以下是关于它的一些基本知识：

  1. 目的：alt 属性为图像提供了文本描述。这个描述可以被屏幕阅读器读出，使内容对视觉障碍的人更加无障碍。

  2. 搜索引擎优化 (SEO)：搜索引擎使用 alt 文本来理解图像的内容，这有助于提高网页的SEO价值。

  3. 备用: 如果出于某种原因图像无法显示（例如，如果图像源损坏或浏览器中禁用了图像），则会显示 alt 文本。

  4. HTML 校验：为了网页符合HTML标准，所有的 <img> 标签都应该有一个 alt 属性，即使它是空的。一个空的 alt（例如 alt=""）表示该图像纯粹是装饰性的，不提供与内容相关的信息。

  5. 如何使用：

    html
    1<img src="image.jpg" alt="此处放图像的描述">

  6. 良好的做法：在编写 alt 文本时，要简洁并确保描述准确地代表了图像的内容和功能。如果图像中包含重要的文本，那么该文本应包含在 alt 属性中。例如，如果图像是一个写着“提交”的按钮，alt 文本可能是“提交按钮”。

  7. 装饰性图像：对于不为内容提供额外信息的图像（纯装饰性），最好使用空的 alt 属性（alt=""）。这样，屏幕阅读器通常会跳过它们，避免不必要的噪音。

考虑到 alt 属性不仅仅是技术要求，而是为网站上的所有访客提供更好的用户体验的机会，这总是一个好主意。

iOS 拍照图片旋转的问题

https://feihu.me/blog/2015/how-to-handle-image-orientation-on-iOS/

iPhone上的情况

作为智能手机的重要组成部分，形形色色的传感器自然必不可少。在iOS的设备中也是包含了这样的方向传感器，它也采用了同样的方式来保存照片的方向信息到EXIF中。但是它默认的照片方向并不是竖着拿手机时的情况，而是横向，即Home键在右侧，如下：

iPhone正常方向

如此一来，如果竖着拿手机拍摄时，就相当于对手机顺时针旋转了90度，也即上面相机图片中的最后一幅，那么它的Orientation值为6。

iPhone竖向