前言

要通过 MDN 系统学习 Web 了。通过本文记录一些学习 HTML 时的一些有意思的点，方便之后回顾。因为之前有简单学过HTML，所以这次学习就单单过过练习，对于熟悉的部分就快点过了。

参考链接：

https://developer.mozilla.org/zh-CN/docs/learn/Front-end_web_developer

https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Getting_started

正文

对于布尔属性来说他们只能拥有与属性名相同的属性值。以下两种形式完全相同。

1	<input type="text" disabled="disabled">

1 2	<!-- 使用disabled属性来防止终端用户输入文本到输入框中 --> <input type="text" disabled>

属性值可以用单引号或者双引号包括。Both都是合法的。有点python字符串的味道，可以通过使用两种引号达成嵌套的目的。

1	<a href="http://www.example.com" title="你觉得'好玩吗'？">示例站点链接</a>

HTML文档开头的<!DOCTYPE html> 是历史遗留，过去为了检测错误之类的标记，蛮复杂的，但是这些都过时了，只需要知道 <!DOCTYPE html> 是最短有效的文档声明。

HTML元素中的连续空格都会被视作1个。

HTML中有些字符是特殊字符会被渲染，所以如果想表达这些字符时要使用引用。我这里在markdown里如果直接输入引用会直接被转成原义字符……我在 & 前面加了 \ 符号就好了。

原义字符	等价字符引用
<	<
>	>
“	"
‘	'
&	&

<head>元素中的元素可以提供一些文档信息，例如作者等。包括一些描述等可以用于SEO。

如果你看到类似下面的代码。

<meta property="og:type" content="website">
<meta property="og:title" content="Haulyn5 的博客">
<meta property="og:url" content="http://haulyn5.xyz/index.html">
<meta property="og:site_name" content="Haulyn5 的博客">
<meta property="og:locale" content="zh_CN">
<meta property="article:author" content="Haulyn5">
<meta name="twitter:card" content="summary">

这是 Facebook 编写的元数据协议 Open Graph Data 。在Facebook中引用连接时，如果页面中有类似的信息可以提供一些高级功能。

MDN link 元素：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/link

参考 https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals ，每个文档应当只使用一次 h1 , 而这是顶级标题。在可用的六个标题级别中，应该在每页使用不超过三个，太多的层级会带来混乱并难以导航。

和的区别：虽然展示起来效果都一样，但是em有强调的意思，而i则是单纯的italic斜体。使用屏幕阅读器时，em可以使用不同的语调。类似的 strong 和 b 有着类似的关系。

迄今为止我们已经讨论的元素都是意义清楚的语义元素。, , 的情况却有点复杂。它们出现于人们要在文本中使用粗体、斜体、下划线但CSS仍然不被完全支持的时期。像这样的元素，仅仅影响表象而且没有语义，被称为表象元素（presentational elements）并且不应该再被使用。因为正如我们在之前看到的，语义对可访问性，SEO（搜索引擎优化）等非常重要。

HTML5用新的语义规则重新定义了,和,稍微有点混乱。

这里是最好的经验法则：使用,, 来传达传统意义上的粗体，斜体或下划线是合适的，没有其他元素更适合这样用了。然而，始终拥有可访问性的思维模式是至关重要的。斜体的概念对人们使用屏幕阅读器是没有帮助的，对使用其他书写系统而不是拉丁文书写系统的人们也是没有帮助的。

关于使用的区别这里直接引用了https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals，因为说明的非常清楚。

超链接引用文档片段：为你想要连接的地方加个id。然后你可以在文档URL末端加上井号和id来引用这个片段。

<h2 id="More">More content</h2>
<!-- 上面是文档 blog.html 的内容 -->

<p>Want to see more? Click <a href="blog.html#More">here</a>.</p>

MDN 建议：不要将URL作为链接文本的一部分，首先看上去比较难看，其次屏幕阅读器会一个字母一个字母读。（感觉我的很多博文都违背了许多MDN的建议hhh，主要 Typora 粘贴连接舒服啊）

电子邮件链接：使用 mailto，下面的链接看上去像这样 Send email to me

1	<a href="mailto:haulyn5@gmail.com">Send email to me</a>

你可以在这个链接看到有关电子邮件超链接的更多细节：https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#%E7%94%B5%E5%AD%90%E9%82%AE%E4%BB%B6%E9%93%BE%E6%8E%A5

上标和下标可以参考MDN的代码：

1 2	<p>咖啡因的化学方程式是 C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>。</p> <p>如果 x<sup>2</sup> 的值为 9，那么 x 的值必为 3 或 -3。</p>

但是好像实际使用的时候还是会用mathjax公式。

span 是一个内联的（inline）无语义元素，最好只用于无法找到更好的语义元素来包含内容时，或者不想增加特定的含义时。

div 是一个块级无语义元素，应仅用于找不到更好的块级元素时，或者不想增加特定的意义时。

span 和 div 标签在现在的 Web 开发中非常常见。但是他们是没有语义的，MDN推荐优先考虑有语义的标签。其次，二者区别在于 span 是内联的，而div是块级的，就像 p 标签一样。