HTML（超文本标记语言） | MDN
W3Schools - HTML Tutorial
WHATWG - HTML Standard
WHATWG - HTML Conformance Checkers
W3C - CSS Validation Service
HTML（HyperText Markup Language，超文本标记语言）是一种用来结构化 Web 网页及其内容的标记语言。英国计算机科学家 Tim Berners-Lee（蒂姆·伯纳斯-李）于 1989 年在 CERN（European Organization for Nuclear Research，欧洲核子研究组织）工作时提出了 World Wide Web（万维网）和 HTML，并于 1994 年创建 W3C（World Wide Web Consortium，万维网组织）以推动 Web 技术发展和标准化。
1997 年，W3C 发布了 HTML4，并在此后专注于发展 XHTML —— 一种基于 XML（Extensible Markup Language，可扩展标记语言）的 HTML 标准。然而，XHTML 的严格性（例如强制的 XML 语法规则）对开发者而言较为苛刻，未被广泛接受。2004 年，由于对 W3C 推广 XHTML 的不满，来自苹果、Mozilla 和 Opera 等公司的开发者成立了 WHATWG（Web Hypertext Application Technology Working Group，网络超文本应用技术工作组）。WHATWG 开始开发一个更加实用的、面向现代 Web 的 HTML 标准，这便是 HTML5 的雏形。WHATWG 的 HTML5 草案很快获得浏览器厂商支持，而 W3C 后来也开始参与 HTML5 的制定。2014 年，W3C 正式发布了 HTML5 作为推荐标准，但 WHATWG 已将 HTML5 转变为一个“Living Standard（活标准）”，持续更新而非固定版本。WHATWG 的“活标准”模式使规范能够快速适应技术变化，而 W3C 传统的“版本发布”方式显得较慢。W3C 逐渐失去了对 HTML 规范的主导权。2019 年，W3C 和 WHATWG 达成协议：停止发布独立的 HTML 标准，支持 WHATWG 的 HTML Standard 作为唯一的规范来源。自此，WHATWG 成为 HTML 和 DOM 标准 的唯一维护机构。
MDN（Mozilla Developer Network）是一个由 Mozilla 组织维护的开放性开发者资源平台，提供了丰富的文档、教程和工具，主要涵盖 Web 技术、开发语言和相关生态系统。提供 HTML、CSS、JavaScript、HTTP、API 和 Web 标准等详细文档。汇集了最佳实践、开发教程和示例代码。开发者可以学习如何构建高效、现代化的网站和 Web 应用。
<!DOCTYPE html> <!-- 文档类型声明。 -->
<!-- Opening tag + Content + Closing tag = Element, 开始标签 + 内容 + 结束标签 = 元素；Attribute /əˈtrɪbjuːt/ 属性。 -->
<!-- Nesting elements, 嵌套元素；Void elements, 空元素。 -->
<html lang="zh-cn"> <!-- 也称作根元素，包含 lang 属性（language），声明页面的主要语种。 -->
<head> <!-- 包含提供给搜索引擎的页面描述、用于设置页面样式的 CSS 和字符集声明等。 -->
<title>HTML demo</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
<head>
<meta charset="UTF-8"> <!-- 声明文档的字符编码。 -->
<!-- http-equiv 属性（http 响应头、http 文件头）定义了一个编译指示指令。equivalent /ɪˈkwɪvələnt/, 对应的事物。包括：
content-security-policy
content-type
default-style
x-ua-compatible: extensible, 扩展的；user agent 用户代理；compatible 兼容性。content 属性必须具有值 "IE=edge"。
refresh -->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta http-equiv="refresh" content="30">
<!-- SEO (Search Engine Optimization, 搜索引擎优化) -->
<meta name="description" content="HTML">
<meta name="keywords" content="html head body">
<meta name="author" content="d">
<!-- <base> 元素，指定用于一个文档中包含的所有相对 URL 的根 URL。 -->
<!-- href 属性（hypertext reference, 超文本引用） -->
<!-- target 属性：_self (default) _blank _parent _top -->
<base href="https://www.hjranch.cn/" target="_self">
<title>HTML practice</title>
<!-- rel 属性（relationship） -->
<link rel="stylesheet" href="./css.css">
<link rel="icon" href="../images/favicon.ico">
<script>
document.write("Hello World!")
</script>
<script src="./javascript.js"></script>
<style type="text/css">
h1 {
color: rgb(221, 30, 30);
}
h3 {
color: blue;
}
</style>
</head>
<!-- Doctype, 文档类型声明。 -->
<!DOCTYPE html>
<!-- Opening tag + Content + Closing tag = Element, 开始标签 + 内容 + 结束标签 = 元素；Attribute /əˈtrɪbjuːt/, 属性。 -->
<!-- Nesting elements, 嵌套元素；Void elements, 空元素。 -->
<!-- <html> 元素，也称作根元素，包含 lang 属性（language），声明页面的主要语种。 -->
<html lang="zh">
<!-- block-level elements, 块级元素；inline-level elements, 行级元素。 -->
<body>
<!--division-->
<div>
<!--paragragh [ˈpærəɡræf]-->
<p>Hello World!</p>
<!--header-->
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4 style="transform: rotate(90deg); writing-mode: vertical-lr;">h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>我的母亲有 <span style="color:blue">蓝色</span> 的<span style="transform: rotate(90deg); writing-mode: vertical-lr;">眼<span>睛。</p>
<!--anchor [ˈæŋkər] 锚 break-->
<a href="https://www.baidu.com">baidu</a><br>
<!--horizontal [ˌhɔːrɪˈzɑːnt(ə)l] rule 水平线-->
<hr>
</div>
<!--文本格式化-->
<div>
<!--文本格式化标签-->
<div>
<!--bold 粗体-->
<b>b should be the last choice.</b>
<!--emphasized [ˈemfəsaɪzd] 加重-->
<em>em is not recommended!</em>
<!--italic [ɪˈtælɪk] 斜体-->
<i>i</i>
<small>small</small>
<strong>strong is not recommended!</strong>
<!--subscripted [ˈsʌbskrɪptɪd] 下标-->
<sub>sub</sub>
<!--superscripted [ˈsuːpərskrɪptɪd] 上标-->
<sup>sup</sup>
<!--inserted-->
<ins>ins</ins>
<!--deleted-->
<del>del</del>
</div>
<!--“计算机输出”标签-->
<div>
<code>code print("Hello World")</code>
<!--keyboard-->
<kbd>kbd</kbd>
<!--sample-->
<samp>samp</samp>
<!--variable-->
<var>var</var>
<!--preformatted 预定义格式-->
<pre>
pre
code kbd samp and var are not recommended, CSS is a better choice!
</pre>
</div>
<!--引文、引用及标签定义-->
<div id="quotation" style="background-color:#efe92040;">
<div>
<!--abbreviation [əˌbriːviˈeɪʃn]-->
<abbr title="World Wide Web">WWW</abbr>
<address>China</address>
<!--direction of text display-->
<bdo dir="rtl">right to left</bdo>
</div>
<div>
<h1>About WWF</h1>
<p>Here is a quote from WWF's website:</p>
<!--block quotation citation [saɪˈteɪʃ(ə)n] 引用 定义作品的标题-->
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The worlds leading conservation
organization,
WWF works in 100 countries and is supported by 1.2 million members in the United States and close to
5
million globally.
</blockquote>
</div>
<div>
<p>WWF's goal is to:
<!--quotation-->
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.
</p>
</div>
<!--defines a definition term-->
<dfn>dfn is not recommended!</dfn>
</div>
</div>
<!--图像-->
<div>
<!--image [ˈɪmɪdʒ] source alter [ˈɔːltər] 替用-->
<img src="https://pics4.baidu.com/feed/f603918fa0ec08fa3fa2432313612e6654fbda2a.jpeg@f_auto?token=41a3c801c2261f7e4b43c6c5ee804c8a"
alt="Xilingol" usemap="#Xilingol" width="320" height="210" /><br>
<map name="Xilingol">
<area shape="circle" coords="107 105 20"
href="https://pic.rmb.bdstatic.com/6b31daf21c8f108be7d168061038d454.jpeg" alt="Xilin River">
</map>
</div>
<!--表格-->
<div>
<table border="1">
<caption>table is not the best choice for website layout.</caption>
<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<thead>
<!--table row-->
<tr>
<!--table header cell-->
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tfoot>
<tr>
<!--table data cell-->
<td>3,1</td>
<td>3,2</td>
<td>3,3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td rowspan="2">1,1</td>
<td>1,2</td>
<td>1,3</td>
</tr>
<tr>
<td colspan="2">2,2</td>
</tr>
</tbody>
</table>
</div>
<!--列表-->
<div id="list" style="background-color:#EEEEEE;">
<!--unordered list-->
<ul class="a">
<!--list item-->
<li>milk</li>
<li>coffee</li>
<li>tea</li>
</ul>
<!--ordered list-->
<ol type="a" start="5">
<li>milk</li>
<li>coffee</li>
<li>tea</li>
</ol>
<!--definition list-->
<dl>
<!--definition term-->
<dt>Coffee</dt>
<!--definition description-->
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</div>
<!--表单-->
<div>
<form action="">
Name: <input type="text" name="name"><br>
Password: <input type="password" name="pwd"><br>
<input type="radio" name="sex" value="male">男<br>
<input type="radio" name="sex" value="female">女<br>
<input type="checkbox" name="vehicle" value="Bike">我喜欢自行车<br>
<input type="checkbox" name="vehicle" value="Car">我喜欢小汽车<br>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
<textarea rows="10" cols="30">
我是一个文本框。
</textarea>
<h3>发送邮件到 someone@example.com:</h3>
<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>
<button type="button" onclick="alert('Hello World!')">click!</button>
</div>
<!--框架-->
<div>
<iframe loading="lazy" src="HTML5.html" frameborder="0" width="400" height="200"></iframe>
</div>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
<video width="320" height="200" controls>
<source
src="http://vd3.bdstatic.com/mda-njf5kvbp51m4gja5/360p/h264/1665892677815883561/mda-njf5kvbp51m4gja5.mp4"
type="video/mp4">浏览器不支持video标签
</video>
<audio controls>
<source
src="https://m704.music.126.net/20221016143045/35e12a04d7e86409aadfe57526b88be8/jdyyaac/obj/w5rDlsOJwrLDjj7CmsOj/4399650052/36f6/2c81/994b/48e53d9a4a312f4f115e6444dc95eeb3.m4a?_authSecret=00000183df65f98e0a370aaba0599b79"
type="audio/mpeg">浏览器不支持audio标签
</audio>
<form action="demo-form.php" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
</body>
</html>