HTML5 超链接 (自学第三天)

HTML 链接


HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

HTML 超链接(链接)

HTML使用标签 <a>来设置超文本链接,是可以从一个页面指向另一个目的端的链接。

超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时,箭头会变为一只小手。

在标签 <a> 中使用了 href 属性来描述链接的地址。

默认情况下,链接将以以下形式出现在浏览器中:

  • 一个未访问过的链接显示为蓝色字体并带有下划线
  • 访问过的链接显示为紫色并带上下划线
  • 点击链接时,链接显示为红色并带上下划线

注意:如果为这些超链接设置了 CSS 样式,展示样式会根据 CSS 的设定来显示

HTML 空链接

HTML 空链接:指指向链接后,鼠标变成手形,但单击后仍停留在当前页面。

临时加的空链接,主要为了能更好的看到最终的效果。

基本语法:

<a href="#">链接文字</a>

其中“ # ”表示空链接。

HTML 链接 - target 属性

使用 Target 属性,你可以定义被链接的文档在何处显示(在新的窗口打开,还是在原有的窗口中打开)。

下面的这行会在新窗口打开文档:

实例

<a href="#" target="">xxxx</a>

<p>如果你将 target 属性设置为 "_blank", 链接将在新窗口打开。</p>

提示:默认的被链接文档会在原有的窗口中打开的。如果将 target 属性设置为 "_blank" 则文档就会在新窗口打开。

如何使用 CSS

CSS 是在 HTML 4 开始使用的,是为了更好的渲染 HTML 元素而引入的.

CSS 可以通过以下方式添加到 HTML 中:

  • 内联样式- 在 HTML 元素中使用 "style" 属性
  • 内部样式表 -在 HTML 文档头部 <head> 区域使用 <style> 元素 来包含 CSS
  • 外部引用 - 使用外部 CSS 文件

最好的方式是通过外部引用 CSS 文件.

内联样式

HTML样式实例 - 背景颜色

背景色属性(background-color)定义一个元素的背景颜色:

Example

<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>

内部样式表

当单个文件需要特别样式时,就可以使用内部样式表。你可以在 <head> 部分通过 <style> 标签定义内部样式表:

实例

<head>

<style type="text/css">

body {background-color:yellow;}

p {color:blue;}

</style>

</head> 

外部样式表

当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观。

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head> 

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值