这是我参与「第四届青训营 」笔记创作活动的第1天
自动生成的HTML框架里面写了什么？
在VSCode中新建一个HTML文档，输入!回车，就会自动生成一个HTML框架，但这个框架中的每一个标签是什么？为什么要写？怎么用的？这些问题一直被我忽略，本文的第一个章节就来看看这里面到底写了什么。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>
第一个陌生人: <! DOCTYPE html>
- 为什么它要放在HTML文档的第一行？
- 有什么作用？不写会怎么样？
- 除了HTML，还有什么文档类型？
出现这个标签是有一些历史原因的，简单来说，就是在浏览器百家争鸣的时期，Web标准尚未达成一致，导致每一个浏览器都有自己的标准，此时Web开发者就需要在HTML文档顶部添加doctype来告诉浏览器要以哪种方式渲染文档：
- 完全标准模式，W3C规定
- 怪异(Quirks)模式
- 几乎标准模式
在HTML5时代，各大浏览器都已经采用了W3C所规定的完全标准模式，所以现在书写<! DOCTYPE html>只是告诉浏览器请以完全标准模式渲染我的HTML。
HTML 4.01 中的Doctype语法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
此网页为"英文"，是否要翻译？ lang属性
浏览器是怎么知道这个页面需要翻译的？
lang是一个全局属性，可以写在任何标签里，它用来确定元素语言。
lang接收一个参数，格式为用于定义语言的标签(BCP47)，从这个标准文档中可以看到表示简体中文的标签为zh-CN，表示香港地区的繁体中文zh-HK，表示台湾地区繁体中文zh-TW。当浏览器看到lang的参数，就能知道当前网页所使用的语言，再跟宿主机的系统语言对比，就能知道你需不需要翻译啦。
如果你的页面中书写的是简体中文，记得把默认的lang="en"修改为lang="zh-CN"，这样用户体验会更好。
HTML也有头？
HTMLhead标签主要用来配置文档的相关配置信息(元数据Meta)，比如说文档的标题，网页的图标，引用的样式/字体/脚本等。
元数据
<meta charset="UTF-8" />：文档的字符编。
<meta http-equiv="X-UA-Compatible" content="IE=edge" />：IE兼容配置，告诉IE8/9及以后的版本都会以最高版本IE来渲染页面。
<meta name="viewport" content="width=device-width, initial-scale=1.0" />：设置视图宽度为设备显示宽度，默认缩放为1倍。
当然，除了上面三个，还有很多元数据，比如：author, description, keywords等等，具体可以查阅MDN。
<title>
不必多说，这就是显示在tab上的标题。
原来还有这么多标签啊！
语义化成为书写HTML的趋势。
书写语义化HTML有很多好处：
- 提升代码可读性
- 提升代码可维护性
- SEO友好
- 提升可访问性，无障碍性
为了写出语义化的HTML文档，就必须知道足够多的HTML元素。 下面罗列了了一些实用但却被我忽略的HTML元素：
- <address>：提供个人或组织的联系信息，其中的内容可以为：电话/邮箱/地址等等。
- <aside>: 表示一个和其余页面内容几乎无关的部分，比如说侧边栏或者标注框。
- <blockquote>： 块级引用元素。
- <cite>：表示对一个作品的引用。
- <code>：代码块。
- <datalist>：包含一组
option元素，与表单配合使用，实现既可输入也可选择的表单。 - <del>：表示一些被从文档中删除的文字内容。
- <details>：创建一个组件，仅在被切换成展开状态时，它才会显示内含的信息。
- <fieldset>：对表单中的控制元素进行分组。
- <kbd>：产生一个行内元素，显示键盘按键。
- <legend>：表示其父元素
dieldset的内容标题。 - <mark>：标记文本元素，如突出显示和高亮。
- <meter>：显示已知范围的标量值或者分数值。类似于一个进度条。
- <nav>：表示页面中的导航部分。
- <object>：HTML 嵌入对象元素，表示引入一个外部资源，比如：PDF。
- <pre>：显示预定义格式文本，会按照文本的原始排版显示。
- <progress>：进度条。
- <sup>：上角标。
- <sub>：下角标。
- <var>：表示数学表达式或编程上下文中的变量名称，通常使用当前字体的斜体形式显示。
开始书写语义化HTML文档
那么多的HTML标签已经能否覆盖绝大多数的语义，所以以后再写HTML时，不妨想一想：这个语义是否有对应的HTML标签？
如果你有任何评论或建议，欢迎在评论区留言～
作者：邱扬 Kelvin
日期：2022年7月24日
