img、a标签的使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<!--图像标签
<img src='图片的地址' alt='当图片显示不出来时所替换的文字'
title="当鼠标放到图片上显示的文字"
1、路径:绝对路径:F:\讲义\HTML\20180201
2、相对路径:
/:代表window盘符,根路径(下级目录)
./:当前目录(又叫文件夹) 同级目录(可省略不写)
../:上一级目录
超链接标签:
<a href="你要连接的地址" target="连接的打开方式">
title="当鼠标放上去时显示的文字"
</a>
href:相对路径、绝对路径、网络路径
target:_blank 在新窗口页打开
_self 在当前页跳转(默认)
超链接的下载功能:
href:只能写网页无法解析的文件
只有网页无法解析,才提供下载功能
只有 .zip .rar压缩文件才能下载
锚点连接:
1.设置标记(锚点)
<a name="标记值"><a/>
2.设置连接(当我点连接就回到锚点)
<a href="路径+#标记值"><a/>
-->
</head>
<body>
<!--设置锚点-->
<a name="top">顶部</a> <br>
<img src="./img/1.jpg" alt="">
<img src="../../../img/2.jpg" alt="这是小金毛" title="你饿了/金毛给你送外卖">
<!--新的页面打开-->
<a href="../0611/day01.html" target="_blank" title="这是百度">百度</a>
<!--当前页面打开-->
<a href="../0611/day01.html" target="_self">百度</a>
<a href="./img.zip">下载</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a name="middle">中部</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!--设置连接-->
<a href="#top">回到顶部</a>
</body>
</html>
img、a标签的使用的更多相关文章
- a标签点击跳转失效--IE6、7的奇葩bug
一般运用a标签包含img去实现点击图片跳转的功能,这是前端经常要用到的东西. 今天遇到个神奇的bug:如果在img上再包裹一层div,而且div设置了width和height,则图片区域点击时,无任何 ...
- IE6、7下html标签间存在空白符,导致渲染后占用多余空白位置的原因及解决方法
直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...
- 百度MIP页规范详解 —— canonical标签
百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误 这 ...
- 【CSS进阶】伪元素的妙用--单标签之美
最近在研读 <CSS SECRET>(CSS揭秘)这本大作,对 CSS 有了更深层次的理解,折腾了下面这个项目: CSS3奇思妙想 -- Demo (请用 Chrome 浏览器打开,非常值 ...
- TODO:Laravel 使用blade标签布局页面
TODO:Laravel 使用blade标签布局页面 本文主要介绍Laravel的标签使用,统一布局页面.主要用到到标签有@yield,@ stack,@extends,@section,@stop, ...
- 最新 去掉 Chrome 新标签页的8个缩略图
chrome的新标签页的8个缩略图实在让人不爽,网上找了一些去掉这个略缩图的方法,其中很多已经失效.不过其中一个插件虽然按照原来的方法已经不能用了,但是稍微变通一下仍然是可以用的(本方法于2017.1 ...
- css-父标签中的子标签默认位置
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- xpath提取多个标签下的text
title: xpath提取多个标签下的text author: 青南 date: 2015-01-17 16:01:07 categories: [Python] tags: [xpath,Pyth ...
- 多个Img标签之间的间隙处理方法
1.多个标签写在一行 <img src="/i/eg_tulip.jpg" alt="郁金香" height="100px"/> ...
- html5标签canvas函数drawImage使用方法
html5中标签canvas,函数drawImage(): 使用drawImage()方法绘制图像.绘图环境提供了该方法的三个不同版本.参数传递三种形式: drawImage(image,x,y):在 ...
随机推荐
- Raphael.js image 在ie8以下的兼容性问题
Raphael.js 在ie7,ie8浏览器内绘制图形採用的vml,在绘制image的时候会解析成 <?xml:namespace prefix = "rvml" ns = ...
- mms
Quartz2D 二维绘图引擎(绘制图形|绘制文字|读取生成 PDF|裁剪图片|自定义 UI 控件) 继承 UIView 重写 drawRect.(viewDidLoad->viewWillAp ...
- LeetCode 438. Find All Anagrams in a String (在字符串中找到所有的变位词)
Given a string s and a non-empty string p, find all the start indices of p's anagrams in s. Strings ...
- pygame save that Stream as video output.
python - how to save pygame camera as video output - Stack Overflow https://stackoverflow.com/quest ...
- java多线程——线程通信
一.线程通信目标 1.线程通信的目标是使线程间能够互相发送信号 2.线程通信使线程能够等待其他线程的信号 二.几种方式 1.通过共享对象 2.忙等待 线程 B 运行在一个循环里,以等待信号 (不释放c ...
- YTU 2782: 用数字造数字
2782: 用数字造数字 时间限制: 1 Sec 内存限制: 128 MB 提交: 191 解决: 160 题目描述 输入一个3位以上的整数,求其中最大的数字最小的数字之间的差.例如:输入8729 ...
- [HNOI2006]潘多拉的宝盒
https://www.zybuluo.com/ysner/note/1250303 题面 给定\(s\)个自动机,如果某个自动机\(A\)能产生的所有串都能在自动机\(B\)中产生(即走相同\(0/ ...
- Java中static final 与 final 的区别(转载)
转自:http://advance0683.iteye.com/blog/1107732 Java中static final 与 final 的区别: 例子: Java代码 import java.u ...
- PCB 使用第3方网站做为外链图片资源
计划将Web版SI9000阻抗计算工具放外网了,由于个人网站带宽太小原因, 准备将静态的图片资源放在第三方网站,今天找了好几个图床网站,把阻抗模型图上传到图床网站,这样一来就能解决带宽的问题了,今天折 ...
- E20170623-hm
verbose adj. 冗长的,啰唆的,累赘的; reverse vt. (使) 反转; (使) 颠倒; 掉换,交换; [法] 撤消,推翻; adj. 反面的; ...