• HTML——链接&图像


    一、链接

    1.新页面打开链接

    <a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
    

    2.本页面,name为"C4"处打开链接

    <p>
    <a href="#C4">查看 Chapter 4。</a>
    </p>
    
    <h2>Chapter 1</h2>
    <p>This chapter explains ba bla bla</p>
    
    <h2><a name="C4">Chapter 4</a></h2>
    <p>This chapter explains ba bla bla</p>
    

    3.跳出框架

    <a href="/index.html"
    target="_top">请点击这里!</a> 
    

    4.发送邮件链接

    <a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
    

    5.复杂的邮件链接

    <a href="mailto:someone@microsoft.com?cc=someoneelse@microsoft.com&bcc=andsomeoneelse2@microsoft.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">发送邮件!</a>
    

      

    二、图像

    1.图片背景

    <body background="/i/eg_background.jpg">
    <h3>图像背景</h3>
    <p>gif 和 jpg 文件均可用作 HTML 背景。</p>
    <p>如果图像小于页面,图像会进行重复。</p>
    </body>
    

    2.图片位置

    文本中位置:bottom(默认)、middle、top

    段落中浮动:left、right

    <p>图像 <img src="/i/eg_cute.gif" align="bottom"> 在文本中</p>
    

    3.图片替换文本

    <img src="/i/eg_goleft123.gif" alt="向左转" />
    

    4.图片链接  

    <a href="/example/html/lastpage.html">
      <img border="0" src="/i/eg_buttonnext.gif" />
    </a>
    

    5.创建图像映射

    img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性(根据浏览器),

    所以我们同时向 map 元素添加了 "id" 和 "name" 属性

    map该name元素,获取图片圆形区域,添加链接。

    <img
    src="/i/eg_planets.jpg"
    border="0" usemap="#planetmap"
    alt="Planets" />
    
    <map name="planetmap" id="planetmap">
    
    <area
    shape="circle"
    coords="180,139,14"
    href ="/example/html/venus.html"
    target ="_blank"
    alt="Venus" />
    
    <area
    shape="circle"
    coords="129,161,10"
    href ="/example/html/mercur.html"
    target ="_blank"
    alt="Mercury" />
    
    </map>
    

    6.把图像转换为图像映射

    <p>请把鼠标移动到图像上,看一下状态栏的坐标如何变化。</p>
    <a href="/example/html/html_ismap.html">
    <img src="/i/eg_planets.jpg" ismap />
    </a>
    

    图像标签:  

    <img> 定义图像。
    <map> 定义图像地图。
    <area> 定义图像地图中的可点击区域

      

      

      

      

  • 相关阅读:
    Docker运行python容器
    SharePoint Online 创建门户网站系列之定制栏目
    SharePoint Online 创建门户网站系列之创建栏目
    SharePoint Online 创建门户网站系列之图片滚动
    SharePoint Online 创建门户网站系列之导航
    SharePoint Online 创建门户网站系列之首页布局
    SharePoint Online 创建门户网站系列之母版页
    SharePoint Online 创建门户网站系列之准备篇
    SharePoint 2013 数据库中手动更新用户信息
    SharePoint 2013 新建项目字段自动加载上次保存值
  • 原文地址:https://www.cnblogs.com/congyue-pepsi/p/5655611.html
Copyright © 2020-2023  润新知