> For the complete documentation index, see [llms.txt](https://lizh.gitbook.io/knowledge/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lizh.gitbook.io/knowledge/html-xi-lie/00html-ji-chu-zhi-shi.md).

# HTML基础知识

## Web标准

### Web标准的三个规范

#### 结构（Structure）

* \*\*HTML：\*\*HTML英语意思是：Hypertext Marked Language，即超文本标记语言,使用HTML语言描述的文件，需要通过 WWW 浏览器显示出效果。是一种最为基础的语言。所谓超文本，因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。所谓标记，就是它采用了一系列的指令符号来控制输出的效果，这些指令符号用“<标签名字属性>”来表示。
* \*\*XHTML：\*\*XHTML 是 HTML 向 XML 的过渡语言，删除了部分表现层的标签，标准要求提高，有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个"/"来关闭它。
* \*\*XML：\*\*XML（eXtensible Markup Language）即可扩展标记语言，最初设计的目的是弥补 HTML 的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。XML 是一种简单的数据存储语言，使用一系列简单的标记描述数据，而这些标记可以用方便的方式建立，虽然 XML 占用的空间比二进制数据要占用更多的空间，但 XML 极其简单易于掌握和使用。

#### 表现（Behaivor）

表现标准语言主要包括 CSS（Cascading Style Sheets）层叠式样式表，通过 CSS 样式表，W3C 创建 CSS 标准的目的是以 CSS 取代HTML 表格式布局、帧和其他表现的语言，通过 CSS 样式可以使页面的结构标签更具美感、网页外观更加美观。

#### 行为（Presentation）

行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化。

标准主要包括：**ECMAScript(核心)，DOM（文档对象模型），BOM（浏览器对象模型）。**

* **ECMAScript(核心)：** ECMAScript 是一个语言标准，javascript 则是基于这个标准实现的脚本语言。

  ECMAScript 是一种可以在宿主环境中执行计算并能操作可计算对象的基于对象的程序设计语言。ECMAScript 最先被设计成一种 Web 脚本语言，用来支持 Web 页面的动态表现以及为基于 Web 的客户机—服务器架构提供服务器端的计算能力。但作为一种脚本语言， ECMAScript 具备同其他脚本语言一样的性质，即“用来操纵、定制一个已存在系统所提供的功能，以及对其进行自动化”。
* **DOM（文档对象模型）：** DOM全称 Document Object Model，即文档对象模型，它允许脚本(js)控制 Web 页面、窗口和文档。

  DOM 标准分为 ：核心DOM，针对任何结构化文档的标准模型；XML DOM，针对 XML 文档的标准模型；HTML DOM，针对 HTML 文档的标准模型。
* **BOM（浏览器对象模型）:** BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

  常见的BOM对象有：

  \*\*window：\*\*代表整个浏览器窗口（window是BOM中的一个对象，并且是顶级的对象）；

  \*\*Navigator ：\*\*代表浏览器当前的信息，通过 Navigator 我们可以获取用户当前使用的是什么浏览器；

  **Location：** 代表浏览器当前的地址信息，通过 Location 我们可以获取或者设置当前的地址信息；

  \*\*History：\*\*代表浏览器的历史信息，通过 History 我们可以实现上一步/刷新/下一步操作（出于对用户的隐私考虑，我们只能拿到当前的浏览记录，不能拿到所有的历史记录）；

  \*\*Screen：\*\*代表用户的屏幕信息。

### Web标准之可访问性、可用性、可维护性

\*\*可用性（Usability）：\*\*产品是否容易上手，用户能否完成任务，效率如何，以及这过程中用户的主观感受可好，是从用户的角度来看产品的质量。可用性好意味着产品质量高，是企业的核心竞争力

\*\*可访问性（Accessibility）：\*\*Web 内容对于残障用户的可阅读和可理解性

\*\*可维护性（Maintainability）：\*\*一般包含两个层次，一是当系统出现问题时，快速定位并解决问题的成本，成本低则可维护性好。二是代码是否容易被人理解，是否容易修改和增强功能。

### Web标准的优点

* \*\*代码的效率：\*\*在HTML文件中使用最精简的代码，而把样式和页面布局信息包含进 CSS 文件中；则放在服务器上的文件越小，下载文件需要的时间就越短。
* \*\*易于维护：\*\*页面的样式和布局信息保存在单独的 CSS 文件中，如果你想改变站点的外观时，仅需要在单独的 CSS 文件中做出更改可。整站统一 css 则可带来巨大的便利。
* \*\*可访问性：\*\*上网用户中那些视力受损的人，通过屏幕阅读器使用键盘命令将网页的内容读给他们听。以语义化的HTML（结构和表现相分离的HTML）编写的网页文件，就可以让此类用户更容易导航，且网页文件中的重要信息也更有可能被这些用户找到。
* \*\*设备兼容性：\*\*纯HTML，无附加样式信息，可以针对具有不同特点（如屏幕尺寸等）的设备而被重新格式化，只需要引用一套另外的样式表即可。同时，CSS 本身也可以让你为不同的呈现方式和媒体类型（如在屏幕上阅读网页，打印网页，在移动设备上阅读网页等）规定不同的样式表。
* \*\*网络爬虫/搜索引擎：\*\*搜索引擎使用“爬虫”，解析你的网页。语义化的HTML能更准确更快速的被解析，从而知道哪些才是重要的内容，那么你的网页在搜索结果中的排名就会大受影响

## HTML的lang属性，用"zh" 还是"zh-cn"？

“zh” 是中文，代表的是宏语言（Macrolanguage），单独使用表示 "中文” 整体，可以是方言、文言文、简体、繁体等单独一种，也可以是任意组合的混合内容。

“zh-CN” 理论上表示的是 “中文 (中国大陆)”，因为中国大陆的官方语言是 “普通话 (简体)”。所以，“zh” 的局限性就体现出来了：比如“尋尋覓覓，冷冷清清，悽悽慘慘戚戚”，用 “zh-CN” 描述没法表达出繁體和文言文，但描述成 “zh-TW” 则成了 “中文 (繁體, 台灣)”，虽然指明了 繁体，但还是没能体现出文言文，同时还丢失了 “中国大陆”。

针对这种情况，按照 [BCP 47 规范](https://www.w3.org/International/articles/language-tags/)，应该使用独立语种更精确地描述：

```shell
cmn 普通话（官话、国语）
wuu 吴语（江浙话、上海话）
czh 徽语（徽州话、严州话、吴语-徽严片）
hak 客家语
yue 粤语（广东话）
nan 闽南语（福建话、台语）
cpx 莆仙话（莆田话、兴化语）
cdo 闽东语
mnp 闽北语
zco 闽中语
gan 赣语（江西话）
hsn 湘语（湖南话）
cjy 晋语（山西话、陕北话）
```

语言文字标签书写顺序：

language - extlang - script - region - variant - extension - privateuse

语言文字种类 - 扩展语言文字种类 - 书写格式 - 国家和地区 - 变体 - 扩展 - 私有

**大小写约定：** language 是小写的，region 是大写的，script 以首字母大写开始。 这只是个惯例！您可以按照自己喜欢的方式进行书写，除非您受到所使用系统规则的约束。 对于 HTML 和 XML 语言标记，大小写应该无关紧要。

```shell
language:
zh 中文
fr 法语
es 西班牙语

language-extlang:
zh-lzh 中文 (文言文)
sgn-csl 手语 (中国大陆)

language-script:
cmn-Hans 普通话 (简体)
yue-Hant 粤语 (繁体)

language-region:
zh-CN 中文 (简体, 中国大陆)
en-US 英语 (美国)

language-script-region：
cmn-Hans-CN 普通话 (简体, 中国大陆)
cmn-Hant-TW 普通话 (繁体, 台湾)

language-script-variant:
zh-Latn-pinyin 汉语拼音（例：nǐ，拉丁字母形式）
zh-Bopo-pinyin 注音拼音（例：ㄋ丨ˇ，罗马字形式，中国大陆 1958 年以前使用，台湾目前使用）

常见的一般有 language、language-script 和 language-region 三种。
```

？？Hans 是 han simplified 简写？Hant 是 hans Traditional 简写？?

`cmn、wuu、yue` 等 2005 年确定的 extlang 标记已于 2009 年提升为 language 标记，维基百科中 `吴语、粤语` 等页面均已使用最新的标准写法。

以下以 `zh` 开头的写法已被废弃并不再推荐使用，请直接去掉 `zh-` 前缀并使用 `cmn、wuu、yue` 等代替即可：

```shell
zh-Hans, zh-Hans-CN, zh-cmn, zh-cmn-Hans, zh-wuu, zh-yue, zh-gan....
类似还有 zh-Hans-HK、zh-Hans-MO、zh-Hans-TW、zh-Hant
```

废弃可能原因：在语言学的分类上，中国语言学者多认为 `吴语、粤语、闽语` 等是汉语的方言，而西方学者多认为这些语言是一门和 `普通话` 同级关系的单独语种。

中国大陆常见划分：

```shell
1. 汉藏语系
   1.1. 汉语族
        1.1.1. 汉语
   1.2. 藏缅语族
   1.3. 苗瑶语族
   1.4. 壮侗语族

“汉语族”仅包含“汉语”一门语言，“吴语”“客家语”“粤语”“闽语”等均归属于“汉语”的不同方言。
```

西方常见划分：

```shell
1. 汉藏语系
   1.1. 汉语族
        1.1.1. 普通话（官话、国语）
        1.1.2. 吴语（江浙话、上海话）
        1.1.3. 徽语（徽州话、严州话、吴语-徽严片）
        1.1.4. 客家语
        1.1.5. 粤语（广东话）
        1.1.6. 闽南语（福建话、台语）
        1.1.7. 莆仙话（莆田话、兴化语）
        1.1.8. 闽东语
        1.1.9. 闽北语
        1.1.10. 闽中语
        1.1.11. 赣语（江西话）
        1.1.12. 湘语（湖南话）
        1.1.13. 晋语（山西话、陕北话）
   1.2. 藏缅语族
   1.3. 苗瑶语族
   1.4. 壮侗语族

“汉语族”包含“普通话”“吴语”“徽语”“客家话”“粤语”等多种语言。
```

**重点来了！**

以下两种写法均正确，后者描述更精准，但大部分程序和操作系统都只能识别前者，使用新标准可能会造成无法匹配浏览器用户定义字体、网页翻译、程序语言自动切换等功能，**为了兼容性的考量，推荐使用前者**：

```shell
zh-CN 中文 (简体, 中国大陆)  -> cmn-Hans-CN 普通话 (简体, 中国大陆)
zh-SG 中文 (简体, 新加坡)    -> cmn-Hans-SG 普通话 (简体, 新加坡)
zh-HK 中文 (繁体, 香港)     -> yue-Hant-HK 粤语 (繁体, 香港)
zh-MO 中文 (繁体, 澳门)     -> yue-Hant-MO 粤语 (繁体, 澳门)
zh-TW 中文 (繁体, 台湾)     -> cmn-Hant-TW 普通话 (繁体, 台湾)
```

简体中文页面默认或书面语均标记为 “cmn (普通话)”，全文使用地方方言表达时，使用相应语言文字标签标记：

```shell
“你” “我们” 用 cmn-Hans 普通话 (简体)
“侬” “啊啦” 用 wuu-Hans 吴语 (简体)
“你” “我哋” 用 yue-Hans 粤语 (简体)
```

一般情况不用 region 选项，但如果要针对特定地区特定用语的友好性，则应设置区域：

```shell
“消息” “黄梨” “自行车” 用 cmn-Hans-SG 普通话 (简体, 新加坡)
“消息” “菠萝” “自行车” 用 cmn-Hans-CN 普通话 (简体, 中国大陆)
“消息” “菠蘿” “自行車” 用 cmn-Hant-CN 普通话 (繁体, 中国大陆)
“訊息” “菠蘿” “单车”   用 cmn-Hant-HK 普通话 (繁体, 香港)
“訊息” “鳳梨” “腳踏車” 用 cmn-Hant-TW 普通话 (繁体, 台湾)

“analyse” “color” “elevator” 用 en-US 英语 (美国)
“analyze” “colour” “lift”    用 en-GB 英语 (英国)
```

**最后来回答下问题：**”zh“ 表示中文，”zh-CN“ 表示 “中文（中国）"。两者有细微的差别：后者特指在中国大陆使用的中文。如果网页面向多个国家（如：新加坡），可用 "zh"；如果只是面向中国大陆，用 "zh-CN"。