HTML 入门-上
前言
学习阮一峰老师的 HTML 教程。
1. HTML 简介
浏览器的网页开发，涉及三种技术：HTML、CSS 和 JavaScript。HTML 语言定义网页的结构和内容，CSS 样式表定义网页的样式，JavaScript 语言定义网页与用户的互动行为。HTML 语言是网页开发的基础，CSS 和 JavaScript 都是基于 HTML 才能生效，即使没有这两者，HTML 本身也能使用，可以完成基本的内容展示。
在我看来，这三门语言中 HTML 是更底层的语言，它简单而有效，比如我的 markdown 笔记中使用 html 语言给文本高亮，可以不用担心部署到博客网站上后，样式能不能渲染出来。
一个 html 编写的网页模板：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>网页标题</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>html 语言忽略缩进和空格。网页的样式效果，比如内容的缩进和换行，主要靠 CSS 来实现。
它使用“标签”作为管理文本内容的基本单位。标签名对大小写不敏感，标签通常成对出现，将文本内容锁在这对标签中。
标签的别名是元素。元素的概念是从标签中抽象出来的，类似数据结构和它的具体实现。元素分为块级元素和行内元素。块级元素会占据网页的一整行，比如 <p></p> ，行内元素在块级元素中为文本添加样式，比如给文本加粗的 b 元素。
html 的注释如下，可以跨行：
<!-- 这是一个注释 -->2. URL 简介
URL 是“统一资源定位符”（Uniform Resource Locator）的首字母缩写，中文译为“网址”，表示各种资源的互联网地址。
所谓资源，可以简单理解成各种可以通过互联网访问的文件，比如网页、图像、音频、视频、JavaScript 脚本等等。只有知道了它们的 URL，才能在互联网上获取它们。
URL 模板：
https://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#anchor- 协议（scheme）是浏览器请求服务器资源的方法，如
https://、邮件地址协议mailto: - 主机（host）是资源所在的网站名或服务器的名字，如
www.example.com，也可以是 IP 地址 - 端口（port）用于主机上区分不同的网络服务或应用程序，范围是0到65535，如 https 端口为 80
- 路径（path）是资源在网站的位置，比如
/path/to/myfile.html。路径可以指向目录，比如/fool/，此时服务器会默认定位到/fool/index.html - 查询参数（parameter）是提供给服务器的额外信息。多组参数之间使用
&连接，比如key1=value1&key2=value2 - 锚点（anchor）是网页内部的定位点，使用
#加上锚点名称。浏览器加载页面以后，会自动滚动到锚点所在的位置
URL 的各个组成部分，只能使用以下这些字符。
- 26个英语字母（包括大写和小写）
- 10个阿拉伯数字
- 连词号（
-） - 句点（
.） - 下划线（
_）
此外，还有18个字符属于 URL 的保留字符。使用保留字符时浏览器会进行转义，既不属于合法字符、也不属于保留字符的其他字符（比如汉字）也会被浏览器转义。这解释了为什么转发给别人的链接可能是一大长串十六进制数。
!：%21#：%23$：%24&：%26'：%27(：%28)：%29*：%2A+：%2B,：%2C/：%2F:：%3A;：%3B=：%3D?：%3F@：%40[：%5B]：%5D
URL 有绝对地址和相对地址，类似文件的绝对路径和相对路径。正如文件系统有一个根目录 /，URL 也有根目录，由 <base> 确定。<base> 标签的 href 属性给出计算的基准网址，target 属性给出如何打开链接的说明。
<head>
<base href="https://www.example.com/files/" target="_blank">
</head>3. 元素的属性
网页元素的属性（attribute）可以定制元素的行为，元素属性的写法是 HTML 标签内部的“键值对”。
属性名与标签名一样，不区分大小写。有些属性是布尔属性，只有“打开”和“关闭”两种情况。这时属性值可以省略，只要添加了属性名，就表示打开该属性。
以下是常见的全局属性：
id属性是元素在网页内的唯一标识符class属性用来对网页元素进行分类。如果不同元素的class属性值相同，就表示它们是一类的。元素可以同时具有多个 class，它们之间使用空格分隔title属性用来为元素添加附加说明。鼠标悬浮在元素上面时，会将title属性值作为浮动提示，显示出来tabindex属性指定用户按下 Tab 键的时候，网页焦点转移的顺序。没有鼠标的情况下，可以使用 Tab 键，遍历网页元素accesskey属性指定网页元素获得焦点的快捷键。accesskey属性的字符键，必须配合功能键一起按下才会生效style属性用来指定当前元素的 CSS 样式hidden属性表示当前的网页元素不必在浏览器中显示。注意，CSS 的可见性设置高于hidden属性lang属性指定网页元素使用的语言dir属性表示文字的阅读方向，有从左到右和从右到左两个方向translate属性只用于文本元素，用来指示翻译软件，不翻译该文本contenteditable属性允许用户编辑内容。HTML 网页的内容默认是用户不能编辑spellcheck属性表示浏览器是否打开拼写检查。对于不可编辑的元素，该属性无效data-属性用于放置自定义数据。如果没有其他属性或元素合适放置数据，就可以放在data-属性。data-属性只能通过 CSS 或 JavaScript 利用- 事件处理属性（event handler）用来响应用户的动作。这些属性的值都是 JavaScript 代码
4. 字符编码
网页可以使用不同语言的编码方式，但是最常用的编码是 UTF-8。UTF-8 编码是 Unicode 字符集的一种表达方式。
每个字符有一个 Unicode 号码，称为码点（code point）。如果知道码点，就能查到这是什么字符。HTML 允许使用 Unicode 码点表示字符，浏览器会自动将码点转成对应的字符。
字符的码点表示法是 &#N;（十进制，N 代表码点）或者 &#xN;（十六进制，N 代表码点）。使用码点可以突破键盘能输出的字符限制，输出所有 Unicode 字符。
<p>hello</p>
<!-- 等同于 -->
<p>hello</p>
<!-- 等同于 -->
<p>hello</p>注意，HTML 标签本身不能使用码点表示，否则浏览器会认为这是所要显示的文本内容，而不是标签。比如，<p> 一旦写成 <p> 或者 <p>，浏览器就不再认为这是标签了，而会当作文本内容将其显示为 <p>。
码点表示法的不方便之处，在于必须知道每个字符的码点，很难记忆。为了能够快速输入，HTML 为一些特殊字符，规定了容易记忆的名字，允许通过名字来表示它们，这称为实体表示法。
实体的写法是 &name;，其中的 name 是字符的名字。下面是其中一些特殊字符，及其对应的实体。
<：<>：>"："'：'&：&©：©#：#§：§¥：¥$：$£：£¢：¢%：%*：$ast;@：@^：^±：±- 空格：
5. 语义结构
HTML 标签的名称都带有语义（semantic），使用时应该尽量符合标签的语义，不要用错误语义的标签。
一个典型的语义结构的网页：
<body>
<header>页眉</header>
<main>
<article>
<h1>文章标题</h1>
<p>文章内容</p>
</article>
</main>
<aside>侧边栏</aside>
<footer>页尾</footer>
</body>以下是常用的标签：
<header>标签用在网页的头部，就称为“页眉”。网站导航和搜索栏通常会放在<header>里面。<header>用在文章的头部，则可以把文章标题、作者等信息放进去<footer>标签表示网页、文章或章节的尾部。如果用于整张网页的尾部，就称为“页尾”，通常包含版权信息或者其他相关信息<main>标签表示页面的主体内容，一个页面只能有一个<main><article>标签表示页面里面一段完整的内容，即使页面的其他部分不存在，也具有独立使用的意义，通常用来表示一篇文章或者一个论坛帖子<aside>标签用来放置与网页或文章主要内容间接相关的部分。网页级别的<aside>，可以用来放置侧边栏，但不一定就在页面的侧边；文章级别的<aside>，可以用来放置补充信息、评论或注释<section>标签表示一个含有主题的独立部分，通常用在文档里面表示一个章节。<section>很适合幻灯片展示的页面，每个<section>代表一个幻灯片<nav>标签用于放置页面或文档的导航信息。一个页面可以有多个<nav>，比如一个用于站点导航，另一个用于文章导航<h1>~<h6>标签表示文章的标题，一共有六个等级<hgroup>标签适用于主标题包含多级标题（比如带有副标题），将多级标题放在其中
看到 <section> 标签时候，我记得 Obsdian 中制作 PPT，也是基于 markdown 文件转换而来的。每张“幻灯片”内容之间用 section 分割。
6. 文本标签
网页的主要功能是文本展示。所以，HTML 提供了大量的文本处理标签。
以下是常见的文本标签：
<div>标签表示一个区块（division）。它没有语义，如果网页需要一个块级元素容器，又没有其他合适的标签，就可以使用这个标签<p>是块级元素，代表文章的一个段落（paragraph）。不仅是文本，任何想以段落显示的内容，比如图片和表单项，都可以放进<p>元素<span>是行内标签，不带有任何语义。它通常用作 CSS 样式的钩子，如果需要对某些行内内容指定样式，就可以把它们放置在<span><br>标签产生换行效果。注意，块级元素的间隔，不要使用<br>来产生，而要使用 CSS 指定<wbr>标签表示一个可选的断行。如果一行的宽度足够，则不断行；如果宽度不够，需要断行，就在<wbr>的位置的断行<hr>[1]用来在一篇文章中分隔两个不同的主题，表现为一根水平线<pre>是块级元素，表示保留原来的格式（preformatted），即浏览器会保留该标签内部原始的换行和空格<strong>[2]是行内元素，表示它包含的内容具有很强的重要性，需要引起注意。浏览器会以粗体显示内容<em>[3]是行内标签，表示强调（emphasize），浏览器会以斜体显示它包含的内容<sub>标签将内容变为下标，<sup>标签将内容变为上标。它们都是行内元素<u>标签是行内元素，表现为一根下划线，提醒用户这里可能有问题，基本上只用来表示拼写错误<s>标签是行内元素，为内容加上删除线<blockquote>是块级标签，表示引用他人的话<cite>标签表示引言出处或者作者，浏览器默认使用斜体显示这部分内容<q>是行内标签，也表示引用。它与<blockquote>的区别，就是它不会产生换行。注意，浏览器默认会斜体显示<q>的内容，并且会自动添加半角的双引号<code>标签是行内元素，表示计算机代码。要表示多行代码，<code>标签必须放在<pre>内部<mark>是行内标签，表示突出显示的内容。Chrome 默认是黄色高亮背景<small>是行内标签，将内容以小一号的字号显示。它通常用于文章附带的版权信息或法律信息<time>是行内标签，为跟时间相关的内容提供机器可读的格式<data>标签与<time>类似，也是提供机器可读的内容，但是用于非时间的场合<address>标签是块级元素，表示某人或某个组织的联系方式。通常<address>会放在<footer>里面<abbr>标签是行内元素，表示标签内容是一个缩写。它的title属性给出缩写的完整形式，或者缩写的描述。鼠标悬停在该元素上方时，title属性值作为提示而显示出来<ins>标签是一个行内元素，表示原始文档添加（insert）的内容。<del>与之类似，表示删除（delete）的内容。它们通常用于展示文档的删改。<dfn>是行内元素，表示标签内容是一个术语（definition），本段或本句包含它的定义。为了脚本操作的方便，可以把术语的定义写入<dfn>标签的title属性<ruby>标签表示文字的语音注释，主要用于东亚文字，比如汉语拼音和日语的片假名。它默认将语音注释，以小字体显示在文字的上方<bdo>标签是行内元素，表示文字方向与网页主体内容的方向不一致<bdi>标签用于不确定文字方向的情况，由浏览器自行决定
尾声
学习 HTML 语言的过程，很像是在学习 markdown 语法。HTML 增加了许多对网页结构的控制，并给网页划分出许多有名有姓的区域。
大一时候学过 HTML，但当时面对厚厚的一本教材，实在没多少心思读下去，最后也是草草结课。再往后，直到现在才正儿八经的学习一遍。