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):在 ...
随机推荐
- WebSocket握手总结
网址:http://blog.csdn.net/edwingu/article/details/44040961 WebSocket protocol 是HTML5一种新的协议.它实现了浏览器与服务器 ...
- win7下远程登录ubuntu mysql
网络上找了很久的一个办法,不然老是远程访问不了linux mysql. 原先一直用root登录,进不了,新建一个root1倒是可以了. 安装好mysql后,按以下步骤: 1.将vim /etc/mys ...
- 【HDU 1007】 Quoit Design
[题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=1007 [算法] 答案为平面最近点对距离除以2 [代码] #include <algorith ...
- 【POJ 1328】 Radar Installation
[题目链接] http://poj.org/problem?id=1328 [算法] 每个雷达都位于笛卡尔坐标系的x轴上,因此,对于每个岛屿,我们都可以用勾股定理算出它的有效管辖区域 那么,问题就被转 ...
- P3202 [HNOI2009]通往城堡之路 神仙题
这个题不是坑人吗...写个tarjan标签,然后拿这么个神仙题来搞...代码有点看不懂,有兴趣的可以去洛谷题解区看看,懒得想了. 题干: 题目描述 听说公主被关押在城堡里,彭大侠下定决心:不管一路上有 ...
- JSP-Runoob:JSP 语法
ylbtech-JSP-Runoob:JSP 语法 1.返回顶部 1. JSP 语法 本小节将会简单地介绍一下JSP开发中的基础语法. 脚本程序 脚本程序可以包含任意量的Java语句.变量.方法或表达 ...
- bzoj3545
线段树合并+离线+启发式合并 半年前这道题t成狗... 离线的做法比较好想,按照边的权值排序,询问的权值排序,然后枚举询问不断加边,加到上限后查找第k大值,这里平衡树,权值线段树都可以实现. 那么我们 ...
- MSP430:中断简介
(5).中断应用程序举例(外部中断): void interrupt_initial() { P1DIR&=~BIT7; //P1.7为输入 P1IE|=0x80; //P ...
- Centos搭建图形界面VNC
#!/bin/sh unset SESSION_MANAGER unset DBUS_SESSION_BUS_ADDRESS exec /etc/X11/xinit/xinitrc
- 必会!Linux文件的管理
1.1 创建一个目录 /data [root@liuhao ~]# mkdir /data 1.2 查看目录是否创建成功 <可以找到data即为创建成功> [root@liuhao ~]# ...