前端编程从零开始—html

10/14 13:38
阅读数 9

今天分享下”前端编程从零开始—html“这篇文章,文中根据实例编码详细介绍,或许对大家的编程之路有着一定的参考空间与使用价值,需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 前边一章节看了了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是字符的名子。下面是其中一些特殊字符,及其对应的实体:

 

  <:<>:>":"':&apos;&:&?:?#:&num;§:§¥:¥$:&dollar;£:£¢:¢%:&percnt;*:$ast;@:&commat;^:&Hat;±:±空格:http://www.qlyl1688.com/

 

  注意,上面最后一个特殊字符是空格,它也有对应的实体表示法。

 

  字符的数字表示法和实体表示法,都可以表示正常情况无法输入的字符,逃脱了浏览器的限制,所以英语里面称为“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;amp;lt;h1&amp;amp;gt;这类的标签并不足够,还是需要适当的编号以供区分

 

  标题不应该越级,比如h1下面直接写h3。虽然这样不会报错,但会导致文章失去清晰的章节结构。

 

  默认情况下,浏览器会粗体显示标题。h1的字号比h2大,h2比h3大,以此类推。

 

  (9)<hgroup>

 

  如果主标题包含多级标题(比如带有副标题),那么可以使用<hgroup>标签,将多级标题放在其中:

 

  注意,<hgroup>只能包含<h1>-<h6>,不能包含其他标签。

今天的文章就分享到这啦,内容转自divcss5平台,下篇文章再见!
 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部