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 ...

随机推荐

输出文章段落首行空格缩进在IE和chrome显示不一致的问题
一般的编辑文章时,首行都缩进两格,而执行的操作则是一个tab键或者四个空格键,在html代码中体现的往往都是4个然而我在输出时却发现了同样的html代码,在IE上显示的是缩进了一个字符,在chrom ...
POJ1276【多重背包】
题意: 给出一个价值sum,然后给出n,代表n个方案,接着n对代表个数与价值,要求最接近sum,但不超过sum的价值. 思路: 多重背包,利用二进制拆分达到保证对于0..n间的每一个整数,均可以用若干 ...
【Tip】JavaScript
『JavaScript』『引用网络资源』 JQuery <script src="http://code.jquery.com/jquery-latest.js">& ...
7天学完Java基础之7/7
Object类的toString方法类Object是类层次结构的根类每个都使用Object作为超类所有对象都实现这个类的方法 //这个是Object类的子类,实现了其所有方法 public cl ...
洛谷 P2672 推销员
题目传送门解题思路: 我们会发现本题有一个特性,就是如果我们走到一个更远的地方,那么近的地方距离原点的距离我们可以忽略. 本题要求最大的疲劳值,所以我们需要排序,第一个想到堆,反正我是先想到堆. 然 ...
nginx媒体压缩
1 gzip模块参考:http://nginx.org/en/docs/http/ngx_http_gzip_module.html 浏览器的请求头里会表明Accept-Encoding 方式.服务 ...
python之商品操作小程序
要求:写一个添加商品的程序,商品信息写入txt文件中,以二维字典形式比如:{‘小米’:{‘价格’:‘1999元’,‘数量’:10}} 1.添加商品 #商品名称 #价格 #数量 2.查看商品 3.删除商 ...
[LOJ6041雅礼集训2017]事情的相似度
题解 \(SAM+set\)启发式合并+扫描线首先可以发现题目要求的就是查询结尾在一段区间内的\(LCS\) 这个显然就是\(SAM\)的\(parent\)树上的\(step[LCA]\) 我们可 ...
Hibernate通过实体对象对应数据库表信息
Hibernate通过实体对象对应数据库表信息,包括:数据库表名称.主键列名.非主键列名等. 获取对象映射缓存管理类: AbstractEntityPersister aep = (AbstractE ...
Json和序列化总结
一.序言遇到问题,就经常逛园,不知你是否曾有,曾经遇到的问题,或者在园子里看到问题的方案,过一段时间,有可能还会摔跤,哈哈...大神请勿喷,小弟记忆不太好,还过来找资料,如果自己写把问题或某个知识点 ...