HTML基础(三)图像和超链接

简介: HTML基础(三)图像和超链接

图像


img 元素向网页中嵌入一幅图像。

语法

<img src="" alt="" />

img标签常用属性

src      跳转的url
alt      图片不显示时显示的文字
height   图像的高,可以为像素和百分比
width    图像的宽,可以为像素和百分比

View Code


超链接标签


语法

<a href="">内容</a>
 href:链接地址,可以是内部链接或外部链接

View Code

上面的代码我们发现是在当前页面打开了超链接,如果想在新页面打开,只需要加上target="_blank"

View Code


常用属性

href    链接地址
target  链接的目标窗口,_self在当前页面打开,_blank在新窗口打开
title   链接提示文字
name    链接命名


链接提示文字


作用:鼠标放到超链接上,会有提示

View Code



作用:跳转到想要到达的位置

语法

<a href="#锚名1">目录1</a>
<a href="#锚名2">目录2</a>
<a href="..." name="锚名1">内容1</a>
<a href="..." name="锚名2">内容2</a>

View Code


不同页面定义锚


语法

<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也可以不写任何信息,会自动使用默认文件名


相关文章
|
2月前
如何在HTML文件中添加超链接
如何在HTML文件中添加超链接
24 0
|
4月前
|
前端开发 JavaScript
前端必看的8个HTML+CSS技巧 (六) 裁剪图像的动画
前端必看的8个HTML+CSS技巧 (六) 裁剪图像的动画
|
5月前
|
前端开发
HTML超链接大致分为以下7类
HTML超链接大致分为以下7类
98 1
|
25天前
HTML 超链接 a 标签
HTML 超链接 a 标签
|
2月前
|
前端开发
HTML 超链接
HTML 超链接。
81 32
|
2月前
|
前端开发 JavaScript UED
如何在HTML中添加图像链接
如何在HTML中添加图像链接
28 1
|
2月前
|
Web App开发 存储 数据可视化
编程笔记 html5&css&js 029 HTML图像
编程笔记 html5&css&js 029 HTML图像
|
7月前
|
前端开发
前端第二课,HTML,alt,title,width/heigh,border,<a>超链接,target,tr,td,th
前端第二课,HTML,alt,title,width/heigh,border,<a>超链接,target,tr,td,th
|
4月前
|
移动开发 UED HTML5
如何像人类一样写HTML之图像标签,超链接标签与多媒体标签
如何像人类一样写HTML之图像标签,超链接标签与多媒体标签