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 其实没有区分大小写, 但是绝大部分的人都会使用小写.

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 , or ?

What is the difference between , , and ?

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

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

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

document.querySelector('textarea').value = `abc
d`; // ok
document.querySelector('textarea').value = `abc
d`; // ok
document.querySelector('textarea').value = `abc
d`; // ok

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

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