现在你了解了基本的HTML信息,我们可以更加深入的讨论了。本篇文章讲述“属性和标签链接”
HTML的属性
HTML属性可以使HTML元素携带更多的信息,每个HTML元素可以携带一个或多个属性
<h2 title="标题">显示的内容</h2>
title就是一个属性,注意在title和=,=和“之间没有空格。如果有多个属性,在不同属性中间会有一个空格,比如这样
<p title="标题" style="color:blue">HELLO</p>
属性你已经了解了,现在来探讨一下属性的应用——标签链接
标签链接
互联网( World Wide Web )最精髓的地方在于,它把一切文件,图片,网页,视频,音乐等等资源链接到了一起,一个HTML网页就可能链接了多种资源。就比如我博客的首页,上面有两张巨大的轮播图片,但如果我把这两个图片放到自己的服务器里让每个人访问,这样会非常占用带宽(最大1Mbps/S),可能几个人同时访问服务器就不能再提供其他功能了。于是我把它们存放在我的QQ空间里,每次你们访问主页,腾讯的服务器都会接收到一个调取资源的指令(偷笑),这样就做到了网站的优化。当然主流的方式还是使用CDN加速,一些专门的图床。我访客少(卑微),就暂时用这种方式了,不过十分有效。
我们可以通过 锚标签 链接一个HTML网页,就像这样
<a href="www.baidu.com">百度</a>
href属性指向的是一个超文本内容,他的值是Uniform Resource Locator (URL),href属性能指向的内容有
- 电子邮件地址(mailto:[email protected])
- 电话号码(tel:123456789)
- 文档或文件(提供指向资源的url)
- 同一个网页的不同位置
相对路径和绝对路径
绝对路径
一个绝对路径URL指向了一个固定的地址,比如https://www.baidu.com,和从哪个网页,哪里访问无关。一个绝对URL路径通常由以下几个部分组成:
- 通信协议:经常为http://或https://,也有 file:// 和 ftp://
- 域名:网站的名字(www.baidu.com)
- 路径:文件存放在网站的位置,这个部分也可以省略,如果你指向的只是这个网站的话
绝对路径URL给浏览器提供了一个得到资源的必要信息,一个绝对路径不会改变指向的内容,无论你使用的是手机还是电脑,从哪个网站发起的访问请求。
相对路径
相对路径通常指向的是同一个域名下的位置,当你想解决网站内多个网页的时候十分有用。
我在这里快速构建一个小型的网站内容
- 一个主要的index.html页(主页)
- 一个”关于“页面 about.html
- 一个目录页blogpost,里面存放了三个页面
- article1.html
- article2.html
- article3.html
如果我们想指向一个页面,就可以
<a href="about.html">About</a>
现在我们想链接到一篇文章
<a href="blogPost/article2.html">Article 2</a>
很简单吧,使用/可进行多级菜单,这样你点击Article 2 时会自动跳转到文章,Article 2也会加上一条下划线
这就是属性和标签链接 ,现在跳转到第一篇文章
<a href="2020/02/21/website-building-1/">网站搭建(一)</a>
网站搭建(一)