网站搭建(二)

现在你了解了基本的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>

网站搭建(一)

发表评论