HTML基础（三）图像和超链接
图像
img 元素向网页中嵌入一幅图像。
语法
<img src="" alt="" />
img标签常用属性
src 跳转的url
alt 图片不显示时显示的文字
height 图像的高，可以为像素和百分比
width 图像的宽，可以为像素和百分比
<html >
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<img src="http://img3.cache.netease.com/photo/0001/2016-04-26/BLJL1S1I00AO0001.jpg" alt="我是图片" width="20%" height="30%"> </body>
</html>
超链接标签
语法
<a href="">内容</a>
href:链接地址，可以是内部链接或外部链接
<html >
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<a href="https://cn.bing.com/">点我</a>
</body>
</html>
上面的代码我们发现是在当前页面打开了超链接，如果想在新页面打开，只需要加上target="_blank"
<html >
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<a href="https://cn.bing.com/" target="_blank">点我</a>
</body>
</html>
常用属性
href 链接地址
target 链接的目标窗口，_self在当前页面打开，_blank在新窗口打开
title 链接提示文字
name 链接命名
链接提示文字
作用：鼠标放到超链接上，会有提示
<html >
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<a href="https://cn.bing.com/" target="_blank" title="这是必应网站">点我</a>
</body>
</html>
锚
作用：跳转到想要到达的位置
语法
<a href="#锚名1">目录1</a>
<a href="#锚名2">目录2</a>
<a href="..." name="锚名1">内容1</a>
<a href="..." name="锚名2">内容2</a>
<html >
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<a href="#menu1">点我到达目录一</a>
<a href="#menu2">点我到达目录二</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 />
<a name="menu1"><p>目录一</p></a>
<a >目录一的内容</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 />
<a name="menu2"><p>目录二</p></a>
<a >目录二的内容</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 /> </body>
</html>
不同页面定义锚
语法
<a href="网页名称#锚名1">目录1</a>
<a href="..." name="锚名1">内容1</a>
我们在相同的文件夹下在写一个HTML页面，上面的起名为01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<a href="01.html#menu2">点我达到另一个页面</a> </body>
</html>
电子邮件链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<a href="mailto:1030923822@qq.com">邮件链接</a> </body>
</html>
文件下载
通常在咱们写项目的时候会遇到上传下载什么的，在上传完文件后会把文件的路径保存到数据库里以便下载，如果想不通过后台直接下载的话，可以把文件路径给a标签的属性href；
<a href="/user/test/xxxx.txt">点击下载</a>
这样当用户打开浏览器点击链接的时候就会直接下载文件。
但是有个情况，比如txt,png,jpg等这些浏览器支持直接打开的文件是不会执行下载任务的，而是会直接打开文件，这个时候就需要给a标签添加一个属性“download”；
<a href="/user/test/xxxx.txt" download="文件名.txt">点击下载</a>
这里download也可以不写任何信息，会自动使用默认文件名
HTML基础（三）图像和超链接的更多相关文章
- jdbc基础 (三) 大文本、二进制数据处理
LOB (Large Objects) 分为:CLOB和BLOB,即大文本和大二进制数据 CLOB:用于存储大文本 BLOB:用于存储二进制数据,例如图像.声音.二进制文件 在mysql中,只有B ...
- Python全栈开发【基础三】
Python全栈开发[基础三] 本节内容: 函数(全局与局部变量) 递归 内置函数 函数 一.定义和使用 函数最重要的是减少代码的重用性和增强代码可读性 def 函数名(参数): ... 函数体 . ...
- Bootstrap <基础三十二>模态框（Modal）插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 ...
- Bootstrap <基础三十一>插件概览
在前面布局组件中所讨论到的组件仅仅是个开始.Bootstrap 自带 12 种 jQuery 插件,扩展了功能,可以给站点添加更多的互动.即使不是一名高级的 JavaScript 开发人员,也可以着手 ...
- Bootstrap <基础三十>Well
Well 是一种会引起内容凹陷显示或插图效果的容器 <div>.为了创建 Well,只需要简单地把内容放在带有 class .well 的 <div> 中即可.下面的实例演示了 ...
- Bootstrap<基础三> 排版
Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈. 使用 Bootstrap 的排版特性,您可以创建标题.段落. ...
- Ruby语法基础(三)
Ruby语法基础(三) 在前面快速入之后,这次加深对基本概念的理解. 字符串 Ruby字符串可以分为单引号字符串和双引号字符串,单引号字符串效率更高,但双引号的支持转义和运行 puts '单引 ...
- C#_02.13_基础三_.NET类基础
C#_02.13_基础三_.NET类基础 一.类概述: 类是一个能存储数据和功能并执行代码的数据结构,包含数据成员和函数成员.(有什么和能够干什么) 运行中的程序是一组相互作用的对象的集合. 二.为类 ...
- Unit01： Web概述 、 HTML概述 、 文本处理 、 图像和超链接 、 表格 、 表单
Unit01: Web概述 . HTML概述 . 文本处理 . 图像和超链接 . 表格 . 表单 demo1.html <!-- 声明网页的版本(文档类型) --> <!doctyp ...
- 04 mysql 基础三 (进阶)
mysql 基础三 阶段一 mysql 单表查询 1.查询所有记录 select * from department; select * from student; select * from ...
随机推荐
- 国产免费的visio替代品edraw mind map，用来话流程图够用了
最新版Edraw Mind Map可以创建基本的思维导图.气泡图和基本流程图,提供了强大的设计功能,包括丰富设计素材.全面的页面布局定义.预置的符号库与绘图工具等.创建的图形,可以导出为常用图像格式. ...
- Redis的相关命令
Redis的相关命令 redis程序的命令 /usr/bin/redis-benchmark /usr/bin/redis-check-aof /usr/bin/redis-check-rdb /us ...
- 用grep在子目录中指定的文件类型中查找（转载）
转自:http://www.ai7.org/wp/html/653.html grep -r abcd *.py 这样的命令得不到你期待的结果,而 grep -r abcd * 这样得到的结果又太多, ...
- css里关于浏览器的前缀
今天遇到一个比较坑爹的 -moz-box-sizing: border-box; box-sizing' border-box; 一下子有点懵逼,第一个什么鬼??一查,原来是火狐浏览器的前缀.应该 ...
- 洛谷 - P2293 - 高精度开根 - 高精度
https://www.luogu.org/problemnew/show/P2293 要求求出给定高精度整数的非负根取整的结果. 还有神仙用Python的浮点pow运算骗到不少分的. 唉! 那么我们 ...
- C++语言中的static关键字的作用是什么?
在函数体,一个被声明为静态的变量在这一函数被调用过程中维持其值不变.在模块内(但在函数体外),一个被声明为静态的变量可以被模块内所用函数访问,但不能被模块外其它函数访问.它是一个本地的全局变量.在模块 ...
- 洛谷 P4125 [WC2012]记忆中的水杉树【扫描线+set+线段树】
我没有找到能在bzojAC的代码--当然我也WA了--但是我在洛谷过了,那就假装过了吧 minmax线段树一开始写的只能用min更新min,max更新max,实际上是可以互相更新的-- 首先看第二问, ...
- 大数模板 (C ++)
上次BC遇到一个大数题目,没有大数模板和不会使用JAVA的同学们GG了,赛后从队友哪里骗出大数模板.2333333,真的炒鸡nice(就是有点长),贴出来分享一下好辣. //可以处理字符串前导零 #i ...
- Fast Bit Calculations LightOJ - 1032
Fast Bit Calculations LightOJ - 1032 题意:求0到n的所有数的二进制表示中,"11"的总数量.(如果有连续的n(n>2)个1,记(n-1) ...
- saltstack学习笔记--grains基本操作
查看当前已经定义的监控项: [root@master ~]# salt "192.168.75.135" grains.items 192.168.75.135: ---- ...