HTML5快速起步

备注

我准备快速学习HTML5和 CSS ，为后续 JavaScript => React => Next.js 全栈技术提供基础

HTML5是一项 实践 中的 活 的技术:

和 XHTML 这项革新(但由于严格而不兼容旧技术)但失败但标准不同， HTML5 是多个浏览器的开发公司在工程实践中实现的工业级标准(我的理解)，也就是得到主流浏览器支持的事实标准
通过主要浏览器公司(Opera、Mozilla和 Apple )组建的 WHATWG(Web Hypertext Application Technology Working Group, Web超文本应用技术工作组) 早期规范 Web Application 1.0 和 Web Forms 2.0 基础上，W3C废弃了 XHTML 2 标准，将 HTML5 改造为正式标准
HTML5 最大的特点是向后兼容，致力于确保 让互联网上的HTML成为活着的语言 :即使早期的设计存在不合理和混乱的实现， HTML5 (现实中的浏览器)也会支持古老的(废弃的)标准。这让互联网上的信息能够尽可能的永存!
不过，虽然 HTML5 承诺向后兼容，但是我们现在编写 HTML5 还是要尽可能采用先进的现代标准

简明的 `HTML5` 案例

以下是一个非常简洁并且可以手工输入完成的 HTML5 文档，所有复杂的页面都可以从这个简单的HTML衍生出来:

非常简单的HTML5案例

<!DOCTYPE html>                                  <!--文档声明表明文档标记遵循HTML5标准-->
<html lang="en">                                 <!--页面语言，搜索引擎用来过滤搜索结果，并且对于屏幕阅读器也有用(可在不同区块指定lang属性-->
<html>
<head>
    <meta charset="utf-8">                       <!--字符编码，推荐使用utf-8，可支持任何非英语字符-->
    <title>A Tiny HTML Document</title>          <!--标题在HTML格式电子邮件，标题会显示在邮件标题中-->
    <link href="styles.css" rel="stylesheet">    <!--样式表, CSS是网页中唯一可用的样式表语言-->
    <script src="scripts.js"></script>           <!--JavaScript是唯一被浏览器广泛支持的HTML脚本语言，引用外部JavaScript文件-->
</head>

<body>
    <p>Let's rock the browser, HTML5 style.</p>  <!--在body中真正显示的内容-->
</body>
</html>

HTML5不区分大小写
属性值中只要不包含受限字符(如 > , = 或空格)，就可以不加引号

虽然HTML5的语法非常松散(同一个内容可以有多种编写格式)，但是建议使用统一且规范的约定(尽管不是必须):

包含可选的 <html> / <body> 和 <head> 元素(规范并不强求)
标签全部小写
为属性值加引号(避免无效字符破坏页面)

`HTML5` 剔除的元素

HTML5 官方标准剔除了少量元素: 虽然这些元素依然得到浏览器的支持

表现性元素 例如 <big> / <center> / <font> / <tt> / <strike>> ，这些为页面添加样式的元素已经全部由 CSS 样式表来处理
已经摒弃的HTML框架 也就是早期在浏览器窗口中显示多个页面的方式，由于框架存在严重的可访问性问题(难以适应搜索引擎、辅助软件和移动设备)。不过 <iframe> 元素(可以将一个页面放在另一个网页中)得到保留(实现在页面中包含YouTube窗口、广告和google搜索框等)

`HTML5` 改变的元素

有些旧的元素已经不再是原来的用途，而是随着 HTML5 标准的确立有了新的含义:

<small> 表示"附属细则"(small print)
<hr> 表示主题转换，不过还是能够兼容旧格式提供两个区块间画一条线
还有一些我感觉区别细微就不再列出，有待后续实践中再补充

标准化的元素

<embed> 向页面中加入插件的通用方法
<wbr> 某个词太长一行放不下，浏览器会在 <wbr> 标注的地方换行断开

HTML注释

HTML注释采用如下语法( XML 也采用同样方法):

html注释方法

<!-- I am a comment! -->

<!-- I am multi lines

    comment! -->

HTML浏览器支持特性

由于 HTML5 支持的最终实现取决于浏览器，所以最终开发者需要确认不同浏览器是否支持某个标准特性。 caniuse网站提供了HTML特性是否得到不同浏览器支持的查询功能。

浏览器装机情况

statcounter GlobalStats 提供了不同浏览器的市场占用率，并且能够通过 Edit Chat Data 选择展示的数据范围，例如按照浏览器版本，国别等视角。这对于WEB开发者兼容性取舍具有参考价值。

Modernizr检测功能

Modernizr 提供了检测浏览器对多种HTML5以及相关功能的支持情况，下载该网站提供的 Development version Modernizr工具，能够知道浏览器具体支持的功能。(我还没有实践，记录待后续实践)

参考

HTML5秘籍(第二版)