html图像

<img>标签可以在网页上插入一张图片,它是独立使用的标签,通过“src”属性定义图片的地址,通过“alt”属性定义图片加载失败时显示的文字,以及对搜索引擎和盲人读屏软件的支持。

<img src="images/pic.jpg" alt="产品图片" />

绝对路径和相对路径

像网页上插入图片这种外部文件,需要定义文件的引用地址,引用外部文件还包括引用外部样式表,javascript等等,引用地址分为绝对地址和相对地址。

绝对地址:相对于磁盘的位置去定位文件的地址
相对地址:相对于引用文件本身去定位被引用的文件地址

绝对地址在整体文件迁移时会因为磁盘和顶层目录的改变而找不到文件,相对路径就没有这个问题。相对路径的定义技巧:

“ ./ ” 表示当前文件所在目录下,比如:“./pic.jpg” 表示当前目录下的pic.jpg的图片,这个使用时可以省略。

“ ../ ” 表示当前文件所在目录下的上一级目录,比如:“../images/pic.jpg” 表示当前目录下的上一级目录下的images文件夹中的pic.jpg的图片。

html链接

<a>标签可以在网页上定义一个链接地址,通过src属性定义跳转的地址,通过title属性定义鼠标悬停时弹出的提示文字框。

<a href="#"></a> <!--  # 表示链接到页面顶部   -->
<a href="http://www.itcast.cn/" title="跳转的传智播客网站">传智播客</a>
<a href="2.html">测试页面2</a>

定义页面内滚动跳转

页面内定义了“id”或者“name”的元素,可以通过a标签链接到它的页面滚动位置,前提是页面要足够高,有滚动条,且元素不能在页面顶部,否则页面不会滚动。

<a href="#mao1">标题一</a>
......
......
<h3 id="mao1">跳转到的标题</h3>

html图像、绝对路径和相对路径,链接的更多相关文章

  1. href 里面 链接前面加/与不加的区别?(绝对路径与相对路径)

    在写href链接时,有绝对路径与相对路径,href 里面 链接前面加/与不加的区别? href="/cp/images/lis.jpg" 相对路径 cp前面/会获取当前路径,组合成 ...

  2. Html图像标签、绝对路径和相对路径:

    Html图像标签: <img>标签可以在网页上插入一张图片,它是独立使用的标签,它的常用属性有: (1)src 属性 定义图片的引用地址 (2)alt 属性 定义图片加载失败时显示的文字, ...

  3. linux基础进阶命令详解(输出重定向(2>&1,1>&2,&>file)、输入重定向、管道符、通配符、三种引号、软连接、硬链接、根“/”、绝对路径vs相对路径)

    本章命令(共9个): 1 2 3 4 5 6 7 8 9 输出重定向 输入重定向 管道符 通配符 三种引号 软连接 硬链接 根"/" 绝对路径vs相对路径 1.输出重定向 作用:一 ...

  4. XHTML 相对路径与绝对路径

    文件路径 文件路径就是文件在电脑(服务器)中的位置,表示文件路径的方式有两种:相对路径和绝对路径. 路径标识: 标识符号 说明 / 路径标识 . 当前目录 .. 上一层目录 "." ...

  5. Xcode 中的相对路径与绝对路径的相关设置

    近日闲来无事,与博客园中闲荡,忽至一烟霞照耀祥瑞蒸熏松竹翠秀奇花遍开的神奇之地.如此美景,令人心生向往,故而徜徉于其中不可自拔,独乐乐不如众乐乐: iOS开发之 相对路径与绝对路径 https://d ...

  6. https/相对路径,绝对路径

    1. htttps HTTPS(全称:Hyper Text Transfer Protocol over Secure Socket Layer),是以安全为目标的HTTP通道,简单讲是HTTP的安全 ...

  7. iOS开发之Xcode 相对路径与绝对路径

    iOS开发之 相对路径与绝对路径 https://developer.apple.com/library/mac/documentation/DeveloperTools/Reference/Xcod ...

  8. Http,Https (SSL)的Url绝对路径,相对路径解决方案Security Switch 4.2 中文帮助文档 分类: ASP.NET 2014-10-28 14:09 177人阅读 评论(1) 收藏

    下载地址1:https://securityswitch.googlecode.com/files/SecuritySwitch%20v4.2.0.0%20-%20Binary.zip 下载地址2:h ...

  9. jsp相对路径和绝对路径小谈

    很长一段时间纠结过JSP中的相对路径和绝对路径,也研究过一段时间,今天趁着有点时间,记下来,也有大家分享一下. 1)我们先来理解一下相对路径 首先还是我们的开始,建一个WEB项目,只是测试一下而已,名 ...

随机推荐

  1. hadoop:如何运行自带wordcount

    1.在linux系统创建文件 vi aa.txt   --------i 进行编辑  输入  内容(多个单词例如:aa bb cc aa) 2.在HDFS上面创建文件夹 hdfs dfs -mkdir ...

  2. 日志分析工具之goAccess

    在此推荐一款分析日志的工具,方便我们日常对于网站的访问状况有一个较为清晰的了解  一.安装 官网: https://goaccess.io/download 源码安装: 1. wget http:// ...

  3. Oracle pivot行转列函数案例

    with temp as( select '湖北省' province,'武汉市' city,'第一' ranking from dual union all select '湖北省' provinc ...

  4. Linux基础学习笔记6-SHELL编程

    编程基础 程序:指令+数据 程序编程风格: 过程式:以指令为中心,数据服务于指令 对象式:以数据为中心,指令服务于数据 shell程序:提供了编程能力,解释执行 编程基本概念: 顺序执行:循环执行:选 ...

  5. 在linux命令下访问url

    1.elinks - lynx-like替代角色模式WWW的浏览器 例如: elinks --dump http://www.baidu.com 2.wget 这个会将访问的首页下载到本地 [root ...

  6. 如何使用 Yum Repository 安装指定版本的 MySQL

    自从从使用 debian 系的 apt-get 转到使用 yum 工具之后一直不是很习惯,也没有去看过很多工具包安装的时候到底影响到了哪些文件等.这次借这次社区版 MySQL 安装来一并梳理一下. 首 ...

  7. 使用getopts处理输入参数

    在编写shell脚本中,需要输入参数,使用过程中,getopts更加方便.可以很好的处理用户输入的参数和参数值. 参加如下一段脚本: #!/bin/bash while getopts ": ...

  8. RN 实战 & React Native 实战

    RN 实战 & React Native 实战 https://abc.xgqfrms.xyz/react-native-docs/ 0.59 https://github.com/xgqfr ...

  9. 启用chacha20和salsa20等加密方法

    wget https://download.libsodium.org/libsodium/releases/LATEST.tar.gz tar zxf LATEST.tar.gz cd libsod ...

  10. css 引用自定义图标

    1.进入阿里图标库搜索需要的图标(搜索“图标"是全部的) 2.选择需要的图标 下载 下载svg 格式 进入https://icomoon.io/     css引用库 解压下载的压缩包 ok ...