HTML基础知识——URL、文本标签、链接标签、图片标签、列表标签

目录

URL(统一资源定位符)

概述

网址的组成部分

协议

主机

端口

路径

查询参数

锚点

文本标签

示例:

链接标签

示例:

图片标签

示例:

列表标签

示例:

URL(统一资源定位符)

概述

URL 是“统一资源定位符”(Uniform Resource Locator)的首字母缩写,中文译为“网址”,表示各种资源的互联网地址。下面就是一个典型的 URL。

https://www.example.com/path/index.html

所谓资源,可以简单理解成各种可以通过互联网访问的文件,比如网页、图像、音频、视频、JavaScript 脚本等等。只有知道了它们的 URL,才能在互联网上获取它们。

只要资源可以通过互联网访问,它就必然有对应的 URL。一个 URL 对应一个资源,但是同一个资源可能对应多个 URL。

URL 是互联网的基础。互联网之所以“互联”,就是因为网页可以通过“链接”(link),包含其他 URL。用户只要点击,就可以从一个 URL 跳转到另一个 URL,前往不同的网站。

网址的组成部分

URL 由多个部分组成。下面是一个比较复杂的 URL,实际的 URL 通常不会有这么多部分。

https://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#anchor
协议    主机名           端口  路径                 查询参数                  锚点

我们看看,这个 URL 的各个部分:

协议

协议(scheme)是浏览器请求服务器资源的方法,上例是https://的部分,表示使用 HTTPS 协议。

互联网支持多种协议,必须指明网址使用哪一种协议,默认是 HTTP 协议。也就是说,如果省略协议,直接在浏览器地址栏输入www.example.com,那么浏览器默认会访问http://www.example.com。HTTPS 是 HTTP 的加密版本,出于安全考虑,越来越多的网站使用这个协议。

HTTP 和 HTTPS 的协议名称后面,紧跟着一个冒号和两个斜杠(://)。其他协议不一定如此,邮件地址协议mailto:的协议名后面只有一个冒号,比如mailto:[email protected]

主机

主机(host)是资源所在的网站名或服务器的名字,又称为域名。上例的主机是www.example.com

有些主机没有域名,只有 IP 地址,比如192.168.2.15。这种情况常常出现在局域网。

端口

同一个域名下面可能同时包含多个网站,它们之间通过端口(port)区分。“端口”就是一个整数,可以简单理解成,访问者告诉服务器,想要访问哪一个网站。HTTP 协议的默认端口是80,如果省略了这个参数,服务器就会返回80端口的网站。

端口紧跟在域名后面,两者之间使用冒号分隔,比如www.example.com:80

常见的端口以及对应的协议:

20 ftp 21 ftp 22 SSH 23 talent 25 smtp 53 DNS 67 68 DHCP 80 http 110 pop3 443 https 389 ladp 3306 mysql 1433 sqlserver 1521 oracle 3389 window远程桌面 6379 redis(nosql数据库)

路径

路径(path)是资源在网站的位置。比如,/path/index.html这个路径,指向网站的/path子目录下面的网页文件index.html

互联网的早期,路径是真实存在的物理位置。现在由于服务器可以模拟这些位置,所以路径只是虚拟位置。

路径可能只包含目录,不包含文件名,比如/foo/,甚至结尾的斜杠都可以省略。这时,服务器通常会默认跳转到该目录里面的index.html文件(即等同于请求/foo/index.html),但也可能有其他的处理(比如列出目录里面的所有文件),这取决于服务器的设置。一般来说,访问www.example.com这个网址,很可能返回的是网页文件www.example.com/index.html

查询参数

查询参数(parameter)是提供给服务器的额外信息。参数的位置是在路径后面,两者之间使用?分隔,上例是?key1=value1&key2=value2

查询参数可以有一组或多组。每组参数都是键值对(key-value pair)的形式,同时具有键名(key)和键值(value),它们之间使用等号(=)连接。比如,key1=value就是一个键值对,key1是键名,value1是键值。

多组参数之间使用&连接,比如key1=value1&key2=value2

锚点

锚点(anchor)是网页内部的定位点,使用#加上锚点名称,放在网址的最后,比如#anchor。浏览器加载页面以后,会自动滚动到锚点所在的位置。

文本标签

是一个通用标签,表示一个区块(division)。它没有语义,如果网页需要一个块级元素容器,又没有其他合适的标签,就可以使用这个标签。

它的最常见用途就是提供 CSS 的钩子,用来指定各种样式。所以在早期,下面层层包裹的

就很常见。

 
   
     

文章标题

   
 

上面代码读起来很费力,因为不带有语义。后来,HTML 5 就提出了语义标签,改进了上面的代码。

 
   
     

文章标题

   
 

是无语义的块级元素。下面的例子使用
,将图像和文字组合在一起,构成一个警告区块。

 警告  

小心

只要样式上需要多个块级元素组合在一起,就可以使用

。但是,这应该是最后的措施,带有语义的块级标签(比如