《Head First HTML与CSS》笔记——4 Web镇之旅

前情提要

前几章的内容只是在自己的计算机上创建HTML页面,所有的链接都在自己的计算机上。这一章鼓励将这些Web页面发布到互联网上。

通过托管将本地Web页面发布到互联网

需要:1.域名 2.托管公司

这里,笔者在腾讯云租用一个服务器,以便后续的学习。由于还没有备案成功,所以网页还不能使用。。。

关于<a>元素

相对路径和绝对路径

  1. 在<a>元素的href属性中,可以放入相对路径。不过后台的浏览器会根据这个相对链接和所单击页面的路径创建一个绝对路径。所以,所有的Web服务器看到的都是绝对路径。
  2. 如果向浏览器请求一个目录而不是文件,比如:
http://www.starbuzzcoffee.com/

Web服务器接到一个类似这样的请求时,它会尝试查找这个目录的一个默认文件,通常默认文件名为“index.html”或"default.html",这取决于托管公司使用哪种Web服务器。

链接到其他网站

通过<a>元素可以实现插入链接地址的功能,<a>元素中的title属性,提供了一些信息,当鼠标放在链接上时可以看到:

在这里插入图片描述

  • 通常建议title属性值与所链接的Web页面的<title>元素值相同。不过这并非一个严格的要求。
  • 对大多数浏览器,鼠标移动到一个链接上,标题会显示为一个工具提示。对于有视力障碍的人来说,浏览器可能会大声读出链接标题。
    在这里插入图片描述

使用id属性,为<a>元素创建目标

<a>元素中的id属性是一个重要的属性,它有一些特殊的特性。我们现在只需要知道一点——它是一种唯一标识元素的方法。带id的元素有一个特殊的特性:你可以直接链接这些元素。

方法:

  1. 找到页面中你希望创建锚点的位置,可以是页面上的任何文本,不过通常是标题。
  2. 为目标选择一个标识符名,如"coffee",并在元素的开始标记中插入一个id属性。

举例:
假如我们要连接到Starbuzz页面上的Chai Tea,按照上述步骤:
在这里插入图片描述
使用id链接到元素:
要链接到页面中一个特定目标,只需要在链接最后加一个#,再加上目标标识符(id属性值)。所以,如果想从任何Starbuzz Coffee Web页面链接到“chai"目标,可以这样写<a>元素:

<a href = "index.html#chai">See Chai Tea</a>
  • 所有元素中,属性的顺序都不重要。
  • 可以为任何元素增加title属性。
  • 同样,也可以为任意元素增加id属性。
  • 也可以链接到一个链接,即,在目标中为一个<a>元素增加id属性。
  • id属性能够区分大小写。
  • <a>元素能够由文字和图像创建链接,甚至可以从块元素(<p>和<blockquote>)中创建链接。

总结

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值