《HTML & CSS设计与构建网站》第四章学习小结

最新推荐文章于 2024-06-21 19:24:17 发布

花卷在努力

最新推荐文章于 2024-06-21 19:24:17 发布

阅读量425

点赞数

本文链接：https://blog.csdn.net/weixin_42422707/article/details/80634730

版权

链接是网络的主要特色，因为链接允许你从一个网页跳转到另一个网页——实现了人们在网上浏览和冲浪的想法。

一般情况下，会遇到这样几种链接：

1.从一个网站指向另一个网站的链接。

2.从一个网页指向同一网站内部另一个网页的链接。

3.从网页的一个位置指向同一网页内另一个位置的链接。

4.在新的浏览器窗口打开的链接。

5.启动你的电子邮件程序并为其添加收件人的链接。

（一）编写链接

1.指向其他网站的链接

链接是由<a>元素建立的。用户可以单击位于起始标签<a>和结束标签</a>直接的任何内容。使用href 特性来指定要链接到的页面

如：<a href="http://www.imdb.com">IMDB</a>

其中http://www.imdb.com为链接的目标页面地址。IMDB为用户单击的文本。默认情况下，链接文本在浏览器中显示为蓝色并带有下划线。

如果链接指向其他网站的链接，那么href特性的值必须是另一网站的完整web地址，也就是所谓的绝对URL（绝对URL：以网站的域名开头，域名后面可以指定具体页面的路径。如果没有指定具体页面，网站将会显示主页。）

2.指向同一网站中其他页面的链接

当链接指向同一网站中的其他页面时，就没必要在URL中指定域名，这时我们采用简短的相对URL。

如：<a href="index.html">Home</a>

<a href="movies.html">Movies</a>

3.EMAIL链接

用<a>元素建立email链接。email链接的href特征值以mailto：开始，然后添加一个收件人的email地址。单击email链接会启动网站用户计算机上的email程序，并自动添加链接中指定的email地址为收件人。

如： <a href="mailto:444694322@qq.com">Email lena</a>

4.在新窗口中打开链接

如果希望在新窗口打开链接，就要用到<a>标签的target特性，并把这个特性的值设置为_blank。

如：<a href ="http://www.baidu.com" target="_blank">Internet Movie Database</a>

5.链接到当前页面的某个特定位置

首先确定链接所要到达的目标位置，然后需要使用id特性，比如：<h1 id="top">hello</h1>。id特征的值必须以字母或者下划线开头。并且在同一个页面中，不允许出现两个相同的id特征值。

要链接到一个使用了id特性的元素，你还要使用到<a>元素，不同的是它的href特征值以#开头，后面的跟着你所要链接元素的id特征值。如：<a href="#top">Top</a>

6.链接到其他页面的某个位置

只要你所链接的目标页面中包含id特性，这样一来，只要<a>元素中href的值依次包含页面的地址（绝对URL或者相对URL），#符号以及目标元素的id特性值就可以了。

Let's do it！

<html>
<head>
<title>Links</title>
</head>
<body>
<h1 id=“top”>Film Folk</h1>
<h2>Festival Diary</h2>
<p>Here are some of the film festivals we will be attending this year
<br />Please<a href=“mailto:filmfolk@example.org”>contact us</a>
if you would like more information.</p>
<h3>January</h3>
<p><a href=“http://www.sundance.org”>
Sundance Film Festival</a><br />
Park city.Utah.USA<br />
20-30January 2011</p>
<h3>February</h3>
<p><a href=“http://www.sundance.org”>
Tropfest</a><br />
<!—- additional content —->
<p><a href=“about.html”>About Film Folk</a></p>
<p><a href=“#top”>Top of page</a></p>
</body>
</html>