HTML 是 HyperText Markup Langulage,关于 HTML ,MDN 上的第一句话:
HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content.Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).
这里其实传达了一个最核心的思想,HTML 关心的是意义、结构以及内容,至于好不好看,能实现什么功能,那个是 CSS 与 JavaScript 才需要关心的。
换而言之,虽然 HTML 的各类标签默认提供了各式各样的样式,比如 <strong> 标签的加粗,<a> 标签的颜色、下划线还有点击跳转,就算 <body> 也有默认的 8 px 的 margin
…… 但是这些 HTML 其实都觉得没太大所谓的,默认是这样,你想改成什么样都行。真正需要我们花点心思的是如何用标签准确地表达意义和构建结构。
在我刚接触 HTML 的时候,常常特别懵,比如,我就很不明白 <b> 和 <strong> 不是一样的东西吗?造成两个来有什么特别的意义吗?再比如,我会觉得<header> <footer> 这些标签不用也形,反正给 <div> 设置一个 class 就可以,省的自己还要去背那么多标签名。
之所以会这么想事儿,就是因为我并不理解 HTML,我把它当做我们聊天用的表情一样,只管它看起来怎么样,并且只要用那么几个习惯用的就可以了。
可是,到了今天我确实知道自己错了,一开始还以为 HTML 就是一副吊儿郎当的样子,现在才知道,真正的 HTML 其实严谨的可怕,比如,<b> <strong> 这两个标签,虽然看起来效果一模一样,但是 <b> 表达的只是物理状态,仅仅是为了更让人注意;而 <strong> 表达的是逻辑状态,常常会附加有强烈的情感,比如,你想骂人,你就可以把它用上 ……
甚至,为了更准确表达,有时候在显示效果与语义表达上做选择的时候,在 HTML 中就是要优先考虑语义上的准确性。
比如我们在 W3school 中常常可以看到这样的按钮:
乍一看,以为它就是个 <button>,可实际上呢:
人家就是用的 <a>,于是我们可以得到:
对于 <button> 来说,更重要的是有“弹出效果”, 而一切网页的跳转,用的都是 <a> ……
总结下来,我们在学习 HTML 的时候,可能有点反直觉的,我们最应该关心的是书写规范,所以,W3school 告诉我们:
虽然,有时候可以不关闭标签;
虽然,HTML5支持 attributes 名字的大小写;
虽然,标签名也可以大写
但是,请别这么做 ……
最后,借用大神的话:
html 是没有块级元素(block)与内联(inline)元素的区分的,在 css 中才区分