zoukankan      html  css  js  c++  java
  • HTML 基础 之 图像和超链接 学习笔记

    一. 图像标签

    语法:  <img src= "   " alt= "   "   .../>

    img 属性:

    HTML 路径:

    1.相对路径    2. 绝对路径

    绝对路径:从本地电脑盘符开始的地址

    相对路径:相对于网页文件保存位置的地址

    •  alt 属性:当图片无法正常显示时,用alt 中的文字内容代替图片显示。
    • width 与 height 属性 : 可以写 像素 或者 百分数。

    二 . 超链接标签

     语法: < a href="   " >内容</a>

    href 是链接地址

    点击 “内容”可以到达 href的链接,

    “内容”可以是 文字 , 图片。href 的链接 可以是 网址 ,图片。

    举例: 

    •    <a href = " xxx.jpg  "><img src = " xxxxx,jip"></a>                        点击名为“xxxxx.jpg”的图片到达名为“xxx.jpg”的图片。
    •   <a href = " www.4399.com  "><img src = " xxxxx,jip"></a>            点击名为“xxxxx.jpg”的图片到达4399小游戏网址。
    •  <a href = " www.4399.com  "><p>文字<p></a>                   点击“文字”这两个字,可以跳转到4399网址。
    • 空链接: <a href = " #  "><img src = " xxxxx,jip"></a>          在 href 属性中 放入 # , 那么点击图片会有链接,但是不跳转。

    属性:

    • target 属性 

     <a href = " xxx.jpg  " target = " _self "><img src = " xxxxx,jip"></a>  点击xxxxx.jpg 在当前窗口 跳转到 xxx.jpg 图片。

     <a href = " xxx.jpg  " target = " _blank "><img src = " xxxxx,jip"></a>  点击xxxxx.jpg 在  新的窗口 跳转到 xxx.jpg 图片。

    •  title 属性

      <a href = " xxx.jpg  " title = " 文字内容 "><img src = " xxxxx,jip"></a>  当光标 停留在  xxxxx.jpg 时,会显示“文字内容”。如果点击,则跳转页面。  

    • name 属性 
    • 定义锚(统一页面)

    就是说,当点击一个(图片 或 文字)时,会跳转到本页面的 其他内容,类似于文章目录功能。

    语法: 

    <a href=" # 锚名 ">操作的名字</a>

    <a name=" 锚名"></a>                   (这个名字不会显示在网页中)

     

    • 定义锚(不同页面) 

     语法:

    <a href=" 网页名称#锚名 ">操作的名字</a>

    <a name=" 锚名"></a>                   (这个名字不会显示在网页中)

    •  电子邮件链接

    <a href="mailto: 邮件地址">......</a> 

  • 相关阅读:
    Android 判断现在系统存储器是“手机存储”还是“SD存储”
    Android中Is library配置的作用
    [已解决]报错: Could not install packages due to an EnvironmentError: [Errno 13] Permission denied: '/Users/mac/Ana
    [未解决]报错:ssh_exchange_identification: read: Connection reset by peer
    Python快速设置Excel表格边框
    Python字典排序
    Scrapy框架: Request回调函数
    Scrapy框架: 异常错误处理
    Scrapy框架: 通用爬虫之SitemapSpider
    Scrapy框架: 通用爬虫之CSVFeedSpider
  • 原文地址:https://www.cnblogs.com/Romantic-Chopin/p/12451137.html
Copyright © 2011-2022 走看看