今天分享下”前端编程从零开始—html“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 前边一章节看了了HTML的简便详细介绍，大家融合以前JavaScript之中相关DOM的章节，早已可以看得出来这也是一种以标识 属性呈现网页内容的语言表达（尽管并不可以算得上编程语言），在基本新手入门这一一部分里边，大家最先来看看一般置放在标签内的部分：包括URL（）、字符编码（），以及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 也可以使用这两个简写，比如等同于这时。相当于根目录的当前目录，即根目录本身。
标签指定网页内部的所有相对 URL 的计算基准。整张网页只能有一个标签，而且只能放在里面。它是单独使用的标签，没有闭合标签，下面是一个例子：
标签的href属性给出计算的基准网址，target属性给出如何打开链接的说明（后面讲到链接，会有更详细的说明）。已知计算基准是那么相对 URL foo.html，就可以转成绝对 URL
注意，标签必须至少具有href属性或target属性之一：
一旦设置了，就对整个网页都有效。如果要改变某个链接的行为，只能用绝对链接替代相对链接。尤其需要注意锚点，这时锚点也是针对计算的，而不是针对当前网页的 URL。
网页包含了大量的文字，浏览器必须知道这些文字的编码方法，才能把文字还原出来。
一般情况下，服务器向浏览器发送 HTML 网页文件时，会通过 HTTP 头信息，声明网页的编码方式：
上面代码中，HTTP 头信息的Content-Type字段先声明，服务器发送的数据类型是text/html（即 HTML 网页），然后声明网页的文字编码是UTF-8。
网页内部也会再用标签，再次声明网页的编码：
网页可以使用不同语言的编码方式，但是最常用的编码是 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 标签本身不能使用码点表示，否则浏览器会认为这是所要显示的文本内容，而不是标签。比如，
一旦写成
或者
，浏览器就不再认为这是标签了，而会当作文本内容将其显示为
。
数字表示法的不方便之处，在于必须知道每个字符的码点，很难记忆。为了能够快速输入，HTML 为一些特殊字符，规定了容易记忆的名字，允许通过名字来表示它们，这称为实体表示法（entity）。
实体的写法是&name;，其中的name是字符的名子。下面是其中一些特殊字符，及其对应的实体：
<：<>：>"："’：’&：&?：？#：#§：§￥：￥KaTeX parse error: Expected 'EOF', got '&' at position 2: ：&̲dollar;￡：￡￠：￠%：…ast;@：@^：^±：±空格：http://www.qlyl1688.com/
注意，上面最后一个特殊字符是空格，它也有对应的实体表示法。
字符的数字表示法和实体表示法，都可以表示正常情况无法输入的字符，逃脱了浏览器的限制，所以英语里面称为“escape”，中文翻译为“字符的转义”。
HTML 标签的名称都带有语义（semantic），使用时应该尽量符合标签的语义，不要用错误语义的标签。语义良好的网页，天然具有良好的结构，对于开发者易读易写，容易维护，也能帮助计算机更好地处理网页内容。
HTML 标签的一个重要作用，就是声明网页元素的性质，使得用户只看标签，就能了解这个元素的意义，阅读 HTML 源码就能了解网页的大致结构。这被称为 HTML 的语义原则。
下面就是一个典型的语义结构的网页：
只看上面的代码，就可以知道，页面分成页眉（
编写 HTML 网页，第一步就是写出语义结构的网页骨架。
（1）
如果用在网页的头部，就称为“页眉”。网站导航和搜索栏通常会放在
如果
由于
（2）
上面代码中，版权信息放在
（3）
标签表示页面的主体内容，一个页面只能有一个：
上面代码就是最典型的页面结构。
注意，是顶层标签，不能放置在
另外，功能性区块（比如搜索栏）不适合放入，除非当前页面就是搜索页面。
（4）
到
）：
一个网页可以包含一个或多个
（5）
下面是网页级别的
下面是文章评注的例子：
（6）
上面代码中，
一般来说，
——
标签。多个
可以放置在同一个
里面，一个
里面也可能包含多个
，这取决于
和
在当前页面的含义。
（7）
一般来说，
（8）
-
HTML 提供了6个标签，用来表示文章的标题。按照标题的等级，一共分成六级：
：一级标题
：二级标题
：三级标题
：四级标题
：五级标题
：六级标题
是最高级别的标题，
是最低级别的标题。下一级标题都是上一级标题的子标题，比如，一个
后面可以有多个
，每个
后面又可以有多个
：
上面代码，通过章节标题，清晰地表明了文章的主体结构。具体的内容，就可以写在章节标题的下面：
事实上仅仅是使用&lt;h1&gt;这类的标签并不足够，还是需要适当的编号以供区分
标题不应该越级，比如h1下面直接写h3。虽然这样不会报错，但会导致文章失去清晰的章节结构。
默认情况下，浏览器会粗体显示标题。h1的字号比h2大，h2比h3大，以此类推。
（9）<hgroup>
如果主标题包含多级标题（比如带有副标题），那么可以使用
标签，将多级标题放在其中：注意，
只能包含
878
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
