zoukankan      html  css  js  c++  java
  • 第 4 章 用 HTML5 建立超链接

        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 属性,再无其他属性。

  • 相关阅读:
    node.js系列:(调试工具)node-inspector调试Node.js应用
    NodeJs系列一:神奇的nodejs
    [原创] JavaScript实现简单的颜色类标签云
    jquery实现图片上传前本地预览
    前端制作入门知识
    解决pycharm中加载本地网页,弹出“requested without authorization”提示框不能加载网页的问题
    Mac中的Python安装selenium,结合chrom及chromdriver使用
    面试题(一)
    Python脚本之——API自动化框架总结
    红日ATT&CK红队评估实战靶场1
  • 原文地址:https://www.cnblogs.com/zhangchaoran/p/8136948.html
Copyright © 2011-2022 走看看