HTML – 冷知识

Void Elements 需要 end slash?

这些是 void elements,

它们没有 end tag, 也没有 content.

至于关闭时是 ends with > 还是 />, 其实 W3C 都可以. 但 MDN, W3Schools, Google 的例子都是没有 slash 的, 所以我的规范也是没有 slash.

但是 prettier 的 format 是有 slash 的. 原因是那样可以兼容 XHTML 和 XML. 有一个 GitHub issue 讨论到了这个点.

 

HTML is Not Case Sensitive, But Class Name is

HTML 其实没有区分大小写, 但是绝大部分的人都会使用小写.

 

HTML attribute auto change to lowercase?

Angular 的 attribute name 是 camelCase 的, 比如 routerLinkActive 但是用游览器 F12 查看会发现是 lowercase 的

本来以为是 Angular convert 的, 但用了 ASP.NET Core 发现也是同样的情况. 然后用了 Postman 去访问, 发现没有 convert. 

所以确定了是 browser 在作怪, 同时也发现 querySelector 匹配 attribute name 是不管大小写的哦

 

Id and Class Name Is Case Sensitive

class name 是区分大小写的

Id 是区分大小写的

 

Href, Base Href, Absolute Path and Relative Path

在没有 base href 的情况下 

href="/about.html" 是从 domain 走起.

href="../about.html" 往上走的 Relative Path

href="./about.html" 往 sibling 走的 Relative Path

href="detail.html" 往下走的 Relative Path

有时候 ./ 感觉不灵是因为我们经常用 folder + index.html 结构, 所以它看上去是 /about/ 但其实是 /about/index.html, 如果想去 contact 那么就得 ../ 而不是 ./, ./ 只能去到 index.html 的 sibling file (如果是 /about <-- 没有 end with / 就 ok)

有了 base href 之后, 所有 Relative Path 都受到影响. 除了 starts with slash 的 href="/about.html"

本来 Relative Path 是对着当前的页面的 path, 有了 base 之后就对着 base. 

参考: What are the recommendations for html <base> tag?

base href 常用来做 prefix 语言

 

Textarea New Line \r, \n or \r\n?

What is the difference between \r\n, \r, and \n?

In C#, what's the difference between \n and \r\n?

其实挺乱的, 经过我的测试 Windows Chrome 和 IOS Safari 13.3

写入的话, \r, \n, \r\n 都是可以的. 效果都一样

document.querySelector('textarea').value = `abc\rd`; // ok
document.querySelector('textarea').value = `abc\nd`; // ok
document.querySelector('textarea').value = `abc\r\nd`; // ok

取值的话, 出来的值一定是 \n

const value = document.querySelector('textarea').value;
const results = [value.includes('\r'), value.includes('\n'), value.includes('\r\n')]; // [false, true, false]

题外话 SQL Server 和 C#

ASP.NET Core Environment.NewLine 是 \r\n

C# 下面这样写的话是 \r\n

_db.Products.Add(new Product
{
    Name = @"Hello
    World"
});

如果不像乱的话, 建议改成写 "Hello\nWorld"

SQL 下面这样写的话是 \r\n

insert into Product ([Name]) values ('a
b
c');

建议改成 'a' + char(10) + 'b' + char(10) + 'c'

char(10) = \n

char(13) = \r

char(13) + char(10) = \r\n

 

<img> display none 会不会加载?

参考: Does "display:none" prevent an image from loading?

2023 年我测试 chrome 是会加载的, 不管 img 或 parent display none 还是会加载.

目前看到最好的办法是添加 lazy="loading"

注意: 如果是 opacity:0 或者 visibility:hidden 那么一定会加载, lazyload 只对 display:none 有效哦.