前面一章节看过了HTML的简单介绍，我们结合之前JavaScript当中有关DOM的章节，已经能够看得出来这是一种以标签+属性展现网页内容的语言（虽然并不能算是编程语言），在基础入门这个部分里面，我们首先来看看一般放置在<head>标签内的部分：包括URL（<base>）、字符编码（<meta>），以及HTML基本的语义结构。
URL 是“统一资源定位符”（Uniform Resource Locator）的首字母缩写，中文译为“网址”，表示各种资源的互联网地址。下面就是一个典型的 URL：
所谓资源，可以简单理解成各种可以通过互联网访问的文件，比如网页、图像、音频、视频、JavaScript 脚本等等。只有知道了它们的 URL，才可能在互联网上获取它们。
只要资源可以通过互联网访问，它就必然有对应的 URL。一个 URL 对应一个资源，但是同一个资源可能对应多个 URL。
URL 是互联网的基础。互联网之所以“互联”，就是因为网页可以通过“链接”（link），包含其他 URL。用户只要点击，就可以从一个 URL 跳转到另一个 URL，前往不同的网站。
URL 由多个部分组成。下面是一个比较复杂的 URL，实际的 URL 通常不会有这么多部分。
我们看看，这个 URL 的各个部分。
（1）协议
协议（scheme）是浏览器请求服务器资源的方法，上例是https://的部分，表示使用 HTTPS 协议。
互联网支持多种协议，必须指明网址使用哪一种协议，默认是 HTTP 协议。也就是说，如果省略协议，直接在浏览器地址栏输入那么浏览器默认会访问 是 HTTP 的加密版本，出于安全考虑，越来越多的网站使用这个协议。
而事实上，各大浏览器都开始考虑将HTTPS作为默认访问协议了，比如的Chrome以及Safari，在2019年全面的将所有HTTP协议站点标记为“不安全”：
HTTP 和 HTTPS 的协议名称后面，紧跟着一个冒号和两个斜杠（：//）。其他协议不一定如此，邮件地址协议mailto:的协议名后面只有一个冒号，比如mailto:foo@example.com。
（2）主机
主机（host）是资源所在的网站名或服务器的名字，又称为域名。上例的主机是
有些主机没有域名，只有 IP 地址，比如192.168.2.15。这种情况常常出现在局域网。
事实上，如果是HTTPS站点，一般不可能出现使用IP地址访问的情况，因为这种协议是以证书为访问保障的，而证书是需要以域名为访问标的的，贸然换成IP访问，会出现与证书不相符的情况出现：
（3）端口
同一个域名下面可能同时包含多个网站，它们之间通过端口（port）区分。“端口”就是一个整数，可以简单理解成，访问者告诉服务器，想要访问哪一个网站。默认端口是80，如果省略了这个参数，服务器就会返回80端口的网站。
端口紧跟在域名后面，两者之间使用冒号分隔，比如。
（4）路径
路径（path）是资源在网站的位置。比如，/path/index.html这个路径，指向网站的/path子目录下面的网页文件index.html。
互联网的早期，路径是真实存在的物理位置。现在由于服务器可以模拟这些位置，所以路径只是虚拟位置。
路径可能只包含目录，不包含文件名，比如/foo/，甚至结尾的斜杠都可以省略。这时，服务器通常会默认跳转到该目录里面的index.html文件（即等同于请求/foo/index.html），但也可能有其他的处理（比如列出目录里面的所有文件），这取决于服务器的设置。一般来说，访问这个网址，很可能返回的是网页文件
（5）查询参数
查询参数（parameter）是提供给服务器的额外信息。参数的位置是在路径后面，两者之间使用？分隔，上例是？key1=value1&key2=value2。
查询参数可以有一组或多组。每组参数都是键值对（key-value pair）的形式，同时具有键名（key）和键值（value），它们之间使用等号（=）连接。比如，key1=value1就是一个键值对，key1是键名，value1是键值。
多组参数之间使用&连接，比如key1=value1&key2=value2。
（6）锚点
锚点（anchor）是网页内部的定位点，使用#加上锚点名称，放在网址的最后，比如#anchor。浏览器加载页面以后，会自动滚动到锚点所在的位置。
锚点名称通过网页元素的id属性命名，具体内容可以参考后后续的章节。
URL 的各个组成部分，只能使用以下这些字符：
26个英语字母（包括大写和小写）10个阿拉伯数字连词号（-）句点（。）下划线（_）
此外，还有18个字符属于 URL 的保留字符，只能在给定的位置出现。比如，查询参数的开头是问号（？），也就是说，问号只能出现查询参数的开头，出现在其他位置就是非法的，会导致网址解析错误。网址的其他部分如果要使用这些保留字符，必须使用它们的转义形式。
URL 字符转义的方法是，在这些字符的十六进制 ASCII 码前面加上百分号（%）。下面是这18个字符及其转义形式：
！：%21#：%23$：%24&：%26'：%27（：%28）：%29*：%2A+：%2B,：%2C/：%2F:：%3A;：%3B=：%3D?：%3F@：%40[：%5B]：%5D
举例来说，有一个网页的 URL 是foo?bar.html，即文件里面包含一个问号，那么需要写成foo%3Fbar.html。
URL 的合法字符，其实也可以采用这种转义方法，但是不建议使用。比如，字母a的十六进制 ASCII 码是61，转义形式后就是%61。因此，又可以写成浏览器一样识别。
值得注意的是，空格的转义形式是%20。对于那些包含空格的文件名，这个转义是必须的。
既不属于合法字符、也不属于保留字符的其他字符（比如汉字），理论上不需要手动转义，可以直接写在 URL 里面，比如中国。html，浏览器会自动将它们转义，发给服务器。转义方法是使用这些字符的十六进制 UTF-8 编码，每两位算作一组，然后每组头部添加百分号（%）。
举例来说，汉字中的 UTF-8 十六进制编码是e4b8ad，每两个字符一组，URL 转义后就为%e4%b8%ad。也就是说，URL 里面凡是有汉字中的地方，都要写成%e4%b8%ad。因此，访问中国。html这个网址，需要写成下面的样子：
上面代码中，中的转义形式是%e4%b8%ad，国是%e5%9b%bd。
URL 分成两种：绝对 URL 和相对 URL。
绝对 URL 指的是，只靠 URL 本身就能确定资源的位置。这意味着，URL 必须带有资源的完整信息，包含协议、主机、路径等部分。前面的例子都是绝对 URL。
相对 URL 指的是，URL 不包含资源位置的全部信息，必须结合当前网页的位置，才能定位资源。比如，当前网页的 URL 是该网页上面有一个资源，URL 指向a.html，这个就是相对 URL。因为只知道a.html，并不能定位资源。浏览器假定，a.html与当前网址在同一个子目录下面，从而得到绝对 URL
相对 URL 如果以斜杠（/）开头，就表示网站的根目录。否则，必须以当前目录为起点，推算资源的位置。比如，相对 URL /foo/bar.html表示网站根目录的子目录foo，foo/bar.html表示在当前目录的foo子目录。
URL 还可以使用两个特殊简写，表示特定位置：
。：表示当前目录，比如当前目录下的a.html文件）：表示上级目录，比如上级目录下的a.html文件）
这两种简写可以多个连用，比如/表示上两级目录。
绝对 URL 也可以使用这两个简写，比如等同于这时。相当于根目录的当前目录，即根目录本身。
<base>标签指定网页内部的所有相对 URL 的计算基准。整张网页只能有一个<base>标签，而且只能放在<head>里面。它是单独使用的标签，没有闭合标签，下面是一个例子：
<base>标签的href属性给出计算的基准网址，target属性给出如何打开链接的说明（后面讲到链接，会有更详细的说明）。已知计算基准是那么相对 URL foo.html，就可以转成绝对 URL
注意，<base>标签必须至少具有href属性或target属性之一：
一旦设置了<base>，就对整个网页都有效。如果要改变某个链接的行为，只能用绝对链接替代相对链接。尤其需要注意锚点，这时锚点也是针对<base>计算的，而不是针对当前网页的 URL。
网页包含了大量的文字，浏览器必须知道这些文字的编码方法，才能把文字还原出来。
一般情况下，服务器向浏览器发送 HTML 网页文件时，会通过 HTTP 头信息，声明网页的编码方式：
上面代码中，HTTP 头信息的Content-Type字段先声明，服务器发送的数据类型是text/html（即 HTML 网页），然后声明网页的文字编码是UTF-8。
网页内部也会再用<meta>标签，再次声明网页的编码：
网页可以使用不同语言的编码方式，但是最常用的编码是 UTF-8。UTF-8 编码是 Unicode 字符集的一种表达方式。这个字符集的设计目标是包含世界上的所有字符，目前已经收入了十多万个字符。
每个字符有一个 Unicode 号码，称为码点（code point）。如果知道码点，就能查到这是什么字符。举例来说，英文字母a的码点是十进制的97（十六进制的61），汉字“中”的码点是十进制的20013（十六进制的4e2d）。
由于下面的原因，不是每一个 Unicode 字符都能直接在 HTML 语言里面显示：
（1）不是每个 Unicode 字符都可以打印出来，有些没有可打印形式，比如换行符的码点是十进制的10（十六进制的A），就没有对应的字面形式。
（2）小于号（<）和大于号（>）用来定义 HTML 标签，其他需要用到这两个符号的场合，必须防止它们被解释成标签。
（3）由于 Unicode 字符太多，无法找到一种输入法，可以直接输入所有这些字符。换言之，没有一种键盘，有办法输入所有符号。
（4）网页不允许混合使用多种编码，如果使用 UTF-8 编码的同时，又想插入其他编码的字符，就会很困难。
HTML 为了解决上面这些问题，允许使用 Unicode 码点表示字符，浏览器会自动将码点转成对应的字符。
字符的码点表示法是&#N;（十进制，N代表码点）或者（十六进制，N代表码点），比如，字符a可以写成a（十进制）或者a（十六进制），字符中可以写成中（十进制）或者中（十六进制），浏览器会自动转换它们：
上面代码中，字符可以直接表示，也可以使用十进制码点或十六进制码点表示。
注意，HTML 标签本身不能使用码点表示，否则浏览器会认为这是所要显示的文本内容，而不是标签。比如，<p>一旦写成<p>或者<p>，浏览器就不再认为这是标签了，而会当作文本内容将其显示为<p>。
数字表示法的不方便之处，在于必须知道每个字符的码点，很难记忆。为了能够快速输入，HTML 为一些特殊字符，规定了容易记忆的名字，允许通过名字来表示它们，这称为实体表示法（entity）。
实体的写法是&name;，其中的name是字符的名子。下面是其中一些特殊字符，及其对应的实体：
<：<>：>"："'：'&：&?：？#：#§：§￥：￥$：$￡：￡￠：￠%：%*：$ast;@：@^：^±：±空格：
注意，上面最后一个特殊字符是空格，它也有对应的实体表示法。
字符的数字表示法和实体表示法，都可以表示正常情况无法输入的字符，逃脱了浏览器的限制，所以英语里面称为“escape”，中文翻译为“字符的转义”。
HTML 标签的名称都带有语义（semantic），使用时应该尽量符合标签的语义，不要用错误语义的标签。语义良好的网页，天然具有良好的结构，对于开发者易读易写，容易维护，也能帮助计算机更好地处理网页内容。
HTML 标签的一个重要作用，就是声明网页元素的性质，使得用户只看标签，就能了解这个元素的意义，阅读 HTML 源码就能了解网页的大致结构。这被称为 HTML 的语义原则。
下面就是一个典型的语义结构的网页：
只看上面的代码，就可以知道，页面分成页眉（<header>）、主体（<main>）、页尾（<footer>）三个部分，实际页面如下：
编写 HTML 网页，第一步就是写出语义结构的网页骨架。
（1）<header>
<header>标签可以用在多个场景，既可以表示整个网页的头部，也可以表示一篇文章或者一个区块的头部。
如果用在网页的头部，就称为“页眉”。网站导航和搜索栏通常会放在<header>里面：
如果<header>用在文章的头部，则可以把文章标题、作者等信息放进去：
由于<header>可以用在多种场景，所以一个页面可能包含多个<header>，但是一个具体的场景里面只能包含一个，比如网页的页眉只能有一个。另外，<header>里面不能包含另一个<header>或<footer>。
（2）<footer>
<footer>标签表示网页、文章或章节的尾部。如果用于整张网页的尾部，就称为“页尾”，通常包含版权信息或者其他相关信息：
上面代码中，版权信息放在<footer>里面。
<footer>也可以放在文章里面：
<footer>不能嵌套，即内部不能放置另一个<footer>，也不能放置<header>。
（3）<main>
<main>标签表示页面的主体内容，一个页面只能有一个<main>：
上面代码就是最典型的页面结构。
注意，<main>是顶层标签，不能放置在<header>、<footer>、<article>、<aside>、<nav>等标签之中。
另外，功能性区块（比如搜索栏）不适合放入<main>，除非当前页面就是搜索页面。
（4）<article>
<article>标签表示页面里面一段完整的内容，即使页面的其他部分不存在，也具有独立使用的意义，通常用来表示一篇文章或者一个论坛帖子。它可以有自己的标题（<h1>到<h6>）：
一个网页可以包含一个或多个<article>，比如包含多篇文章。
（5）<aside>
<aside>标签用来放置与网页或文章主要内容间接相关的部分。网页级别的<aside>，可以用来放置侧边栏，但不一定就在页面的侧边；文章级别的<aside>，可以用来放置评论或注释。
下面是网页级别的<aside>的例子：
下面是文章评注的例子：
（6）<section>
<section>标签表示一个含有主题的独立部分，通常用在文档里面表示一个章节，比如<article>可以包含多个<section>。<section>总是多个一起使用，一个页面不能只有一个<section>：
上面代码中，<article>包含了两个<section>，代表两章。
<section>很适合幻灯片展示的页面，每个<section>代表一个幻灯片。
一般来说，<section>都应该有标题，即包含<h1>——<h6>标签。多个<section>可以放置在同一个<article>里面，一个<section>里面也可能包含多个<article>，这取决于<section>和<article>在当前页面的含义。
（7）<nav>
<nav>标签用于放置页面或文档的导航信息：
一般来说，<nav>往往放置在<header>里面，不适合放入<footer>。另外，一个页面可以有多个<nav>，比如一个用于站点导航，另一个用于文章导航。
（8）<h1> - <h6>
HTML 提供了6个标签，用来表示文章的标题。按照标题的等级，一共分成六级：
<h1>：一级标题<h2>：二级标题<h3>：三级标题<h4>：四级标题<h5>：五级标题<h6>：六级标题
<h1>是最高级别的标题，<h6>是最低级别的标题。下一级标题都是上一级标题的子标题，比如，一个<h1>后面可以有多个<h2>，每个<h2>后面又可以有多个<h3>：
上面代码，通过章节标题，清晰地表明了文章的主体结构。具体的内容，就可以写在章节标题的下面：
事实上仅仅是使用&amp;lt;h1&amp;gt;这类的标签并不足够，还是需要适当的编号以供区分
标题不应该越级，比如h1下面直接写h3。虽然这样不会报错，但会导致文章失去清晰的章节结构。
默认情况下，浏览器会粗体显示标题。h1的字号比h2大，h2比h3大，以此类推。
（9）<hgroup>
如果主标题包含多级标题（比如带有副标题），那么可以使用<hgroup>标签，将多级标题放在其中：
注意，<hgroup>只能包含<h1>-<h6>，不能包含其他标签。
|
