HTML 文件中最重要的应用之一就是超链接。—— 当鼠标单击一些文字、图片或其他网页元素时,浏览器会根据其指示载入一个新的页面或跳转到页面的其他位置。

    超链接除了可链接文本外,也可链接各种媒体,如声音、图像、动画,通过它们,可享受丰富多彩的多媒体世界。

4.1 URL 的概念

  4.1.2 URL 的类型

     超链接的 URL 可以分为两种类型 —— “绝对 URL” 和 “相对 URL”

     (1)绝对 URL:一般用于访问不是同一台服务器上的资源。

     (2)相对 URL:是指访问同一台服务器上相同文件夹或不同文件夹中的资源。(如果访问相同文件夹中的文件,只需要写文件名即可;如果访问不同文件夹中的资源,URL 以服务器的根目录为起点,指明文档的相对关系,由文件夹名和文件名两部分构成)

    实例:

       <a href="http://www.webDesign.com/index.html">绝对URL</a>
       <a href="02.html">相同文件夹的 URL</a>
       <a href="../pages/03.html">不同文件夹的 URL</a>

4.2 超链接标记 <a>

    超链接最重要的有两个要素:设置为超链接的“网页元素”和超链接指向的“目标地址”。

    <a href=URL>网页元素</a>

  4.2.1 设置文本和图片的超链接

     设置超链接的网页元素通常使用文本和图片。

     文本超链接和图片超链接是通过 <a></a> 标记来实现的,将文本或图片放在 <a>标记和 </a>标记之间,即可建立超链接。

  4.2.2 建立指向不同目标类型的超链接

     除了 .html 类型的文件外,超链接所指向的目标类型还可以上其他各种类型,包括图片文件、声音文件、视频文件、Word、其他网站、FTP服务器等。

     (1)链接到各种类型的文件

        超链接 <a>标记的 href 属性指向链接的目标,目标可以是各种类型的文件。

        如果是浏览器能够识别的类型,会直接在浏览器中显示;如果是浏览器不能识别的类型,在 IE 浏览器中会弹出“文件下载”对话框。

     (2)链接到其他网站或 FTP 服务器

  4.2.3 设置以新窗口显示超链接页面

     如果要在单击某个链接以后,打开一个新的浏览器窗口,在这个新窗口中显示目标页面,需要使用 <a>标签的 target 属性。(属性值要设置为 _blank)

  4.2.4 链接到同一个页面的不同位置

     <a href="#C4">查看 第 4 章。</a>

     <h2><a name="C4">第 4 章</a></h2>

4.3 创建热点区域

    在浏览网页时,读者会发现,有时,当单击一张图片的不同区域时,会显示不同的链接内容,这就是图片的热点区域。

    所谓图片的热点区域,就是将一个图片划分成若干个链接区域,当访问者单击不同的区域,会链接到不同的目标页面。

    在 HTML5 中,可以为图片创建3种类型的热点区域:矩形、圆形和多边形。创建热点区域使用 <map> 和 <area> 标记,语法格式如下:

      <img src="图片地址" usemap="#名称">
      <map name="名称">
        <area shape="rect" coords="10,10,100,100" href="#">
        <area shape="circle" coords="120,120,50" href="#">
        <area shape="poly" coords="78,13,81,14,53,32,86,38" href="#">
      </map>

    在上面的语法格式中,需要注意以下几点:

      ……

4.4 创建浮动框架

    HTML5 中已经不支持 frameset 框架,但是它仍然支持 iframe 浮动框架的使用。

    浮动框架可以自由控制窗口大小,可以配合表格随意地在网页中的任何位置插入窗口,—— 实际上就是在窗口中再创建一个窗口。

    使用 iframe 创建浮动框架的格式如下:

       <iframe src="链接对象">

    实例:

       <iframe src="http://www.baidu.com"></iframe>

    默认情况下,浮动框架的宽度和高度为 220*120。如果需要调整浮动框架的尺寸,应该使用 CSS样式(在 head 标记部分增加如下代码):

<style>
iframe{
  width:600px;   //宽度
  height:800px;   //高度
  border:none;   //无边框
</style>

    在 HTML5 中,iframe 仅支持 src 属性,再无其他属性。

第 4 章 用 HTML5 建立超链接的更多相关文章

  1. 学习笔记 第七章 使用CSS美化超链接

    第7章  使用CSS美化超链接 学习重点 认识超链接 熟悉伪类 定义超链接样式 能够灵活设计符合页面风格的链接样式 7.1  定义超链接 在HTML5中建立超链接需要两个要素:设置为超链接的网页元素和 ...

  2. 【STM32H7教程】第6章 STM32H7工程模板建立(IAR8)

    完整教程下载地址:http://forum.armfly.com/forum.php?mod=viewthread&tid=86980 第6章   STM32H7工程模板建立(IAR8) 本章 ...

  3. 【STM32H7教程】第4章 STM32H7工程模板建立(MDK5)

    完整教程下载地址:http://forum.armfly.com/forum.php?mod=viewthread&tid=86980 第4章   STM32H7工程模板建立(MDK5) 本章 ...

  4. 学习笔记 第十二章 CSS3+HTML5网页排版

    第12章   CSS3+HTML5网页排版 [学习重点] 正确使用HTML5结构标签 正确使用HTML5语义元素 能够设计符合标准的网页结构 12.1  使用结构标签 在制作网页时,不仅需要使用< ...

  5. 4.html5中超链接

    html中超链接都是通过<a>标签实现的,html5也不例外,这里就来探讨一下<a>标签. <a>元素属于文本元素,有一些私有属性或者叫局部属性.那么,相对应的还有 ...

  6. 第一章:HTML5的基础

    HTML5基础 1.DoctYpe声明 <!DCTYPE html>必须放在第一行. <title> <title> 百度</title> <me ...

  7. HTML建立超链接

      链接是HTML文档的最基本特征之一.超文本链接英文名为hyperlink,它能够让浏览器在各个独立的页面之间方便地跳转.超链接有外部链接.电子邮件链接.锚点链接等. a标签   网页中<a& ...

  8. 第一章 用HTML5中的结构元素构建网站

    1.当一个容器需要直接定义样式或通过脚本定义行为时,推荐使用div元素而非section元素. 2.section是需要标题的,而nav或aside没有标题也是可以的. 3.html5轮廓工具 htt ...

  9. java jxl excel 导入导出的 总结(建立超链接,以及目录sheet的索引)

    最近项目要一个批量导出功能,而且要生成一个单独的sheet页,最后后面所有sheet的索引,并且可以点击进入连接.网上搜索了一下,找到一个方法,同时把相关的excel导入导出操作记录一下!以便以后使用 ...

随机推荐

  1. gawk命令详解

    GNU awk: sort.cut.uniq.wc等参考: https://blog.csdn.net/lk07828/article/details/46324807 https://blog.cs ...

  2. 集成算法——Ensemble learning

    目的:让机器学习效果更好,单个不行,群殴啊! Bagging:训练多个分类器取平均 Boosting:从弱学习器开始加强,通过加权来进行训练 (加入一棵树,比原来要强) Stacking:聚合多个分类 ...

  3. 基于 Python 和 Pandas 的数据分析(3) --- 输入/输出 基础

    这一节, 我们要讨论 Pandas 的输入与输出, 并且应用在现实的实际例子中. 为了得到大量的数据, 向大家推荐一个网站 Quandl. Quandl 有很多免费和付费的资源. 这个网站最大的优势在 ...

  4. Centos6.8安装nginx(一)

    在这里对nginx的安装简单的做个记录,后续有时间的话在详细补充. 1.yum安装g++: yum install -y gcc gcc-c++ [enter] 2.下载必需的依赖库:zlib(为了g ...

  5. 堆+建堆、插入、删除、排序+java实现

    package testpackage; import java.util.Arrays; public class Heap { //建立大顶堆 public static void buildMa ...

  6. JAVA创建子进程并处理waitFor() 阻塞问题

    虽然很想休息,但是想想还是要把今天学的东西记下来,不然以后再用还是新知识. 新建一个线程类读取子进程的汇报信息和错误信息,避免阻塞 class StreamGobbler extends Thread ...

  7. 全排列问题Ⅱ(Java实现)

    题目: 给定一个可包含重复数字的序列,返回所有不重复的全排列. 示例: 输入: [1,1,2] 输出: [ [1,1,2], [1,2,1], [2,1,1] ]这个问题和我的上一篇问题分析的手法一样 ...

  8. Day3-scrapy爬虫下载图片自定义名称

    学习Scrapy过程中发现用Scrapy下载图片时,总是以他们的URL的SHA1 hash值为文件名,如: 图片URL:http://www.example.com/image.jpg 它的SHA1 ...

  9. FreeBSD之基本配置

    1. 设置IP地址.网关ee /etc/rc.conf ifconfig_em0="inet 192.168.21.173 netmask 255.255.255.0"   #设置 ...

  10. WCF初见之SQL数据库的增删改查

    1.首先要连接数据库,自然要有数据库啦,创建一个数据库表Login,并插入一个数据: --创建数据库表login CREATE TABLE Login ( UName VARCHAR(20) PRIM ...