HTML5 图像和链接

作者: 不住海边也喜欢浪 | 来源:发表于2016-09-29 20:40 被阅读281次

在了解图像和链接之前,我们要先了解一下URL


URL-Uniform Resource Locator

  • 统一资源定位器,用来标示网络中的任何资源,也被称为网址
  • URL即路径,用于定位万维网(web)上的文档。
  • URL在web页面主要有三种形式
  • 绝对路径:文件从最高级目录下开始的而完整的路径,即完整的URL。
    http://www.baidu.com/img/tu.png
    -http://协议名
    -www.baidu.com:域名
    -img:目录
    -tu.png:具体的文件
  • 相对路径:指文件的位置是相对与当前文件的位置,可以从当前文件出发找到该文件的路径,如下图所示
    相对路径1.png
    相对路径2.png
  • 根相对路径:根相对路径以 “/” 开头,路径是从当前文件的根目录开始计算的,所以如果目录结构过深,用相对路径就会好一些。

HTML 图像

  • 图像格式
  • JPEG(Joint Photopraphic Experts Group)采用有损压缩算法,压缩比较大。
  • GIF(Graphics Interface Format)采用256色的方法来压缩图像,会有较大的失真。主要用于线条为主的图像,GIF支持动画和透明图像。
  • PNG(Portable Network Graphic)采用无损压缩,有8位、24位、32位三种形式。支持透明色,但不支持动画。
  • 图像标签<img>
  • <img>空标签,它质包含属性
  • 必须属性srcsrc的值是图像的URL地址,图像的定义语法是:<img src="url"/>
  • 常用属性widthheight,用来确定图像的宽和高。宽和高只需要确定一个就可以了,否则可能会造成图像的失真。例如<img width="300px" src="img/tu.jpg">

HTML 连接

  • 超链接可以是一个字,一个词,一句话,或者一个图像等,你可以点击这些内容来跳转到新的文档或者文档的其他部分。
  • 使用a元素可以创建一个超链接,语法如下:
    <a href="url" target="">link text</a> -href:链接URL告知当前标记要跳转的地方 -target:目标,可取值_blank,_self等,可以选择用什么方式打开链接 -name:设置锚点
    示例:
    <a href="http://www.baidu .com.cn" target="_blank">在新窗口打开百度</a>
  • 链接的几个形式
  • 目标文档为下载资源
    <a href="xx.zip">下载</a>
  • 电子邮件链接
    <a href="mailto:2298520471@qq.com.cn">发送邮件</a>
  • 返回页面顶部
    <a href="#">返回顶部</a>
  • 链接到JavaScript
    <a href="javascript:...">JS 功能</a>
  • 锚点
  • 锚点是文档中的某行的一个记号,用于连接到文档中的某个位置。
  • 示例如下
    `<a name="here"></a> <br/><br/> <br/><br/> <br/><br/>`
    <a href="#here">回到锚点</a>

图像和链接就这么多了,如果有必要,后面会系统给出常用的HTML标签及属性。喜欢的小伙伴可以关注我哦,只要我还活着,就会持续更新的。

相关文章

  • HTML5 图像和链接

    在了解图像和链接之前,我们要先了解一下URL URL-Uniform Resource Locator 统一资源定...

  • 前端入门--H5精简知识点

    Html5基础 语义 加粗: 或者 倾斜: 或者 删除线: 或者 下划线: 或者 图像 alt和titl...

  • canvas的drawImage方法参数详解

    HTML5中引入新的元素canvas,其drawImage 方法允许在 canvas 中插入其他图像( img 和...

  • HTML5 - Canvas

    HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 Canvas 绘制图像 在使用 ...

  • html锚链接和图像映射

    锚(显示在页面上的文本) 在页面上定义一个锚,name也可以用id=“tips”代替; 创建指向该锚的链接:(同一...

  • 2019-02-21第2次课 图像标签和链接标签学习目标

    第2次课 图像标签和链接标签学习目标 会使用图像相关标签实现图文并茂的页面【难点】 会使用 标签创建超链接、...

  • 1.canvas基础(1)

    canvas定义 Canvas 对象是 HTML5 中新增的。HTML5 标签用于绘制图像(通过脚本,通常是 ...

  • 简书上设置图片尺寸

    修改链接中的参数 “2/w/620” 部分,例: 原始参数和图像 修改之后的参数的图像

  • 《图像的命运》14

    14 三种图像的样式 赤裸图像,直指图像,变质图像。 三种链接和解除展示能力,指意能力,证明在场和见证故事的方式。...

  • 棋盘实现

    canvas用于绘制图像(通过javascript) html5中canvas元素仅仅是图像的容器,要通过getC...

网友评论

    本文标题:HTML5 图像和链接

    本文链接:https://www.haomeiwen.com/subject/zdwkyttx.html