首页 > Web开发 > 详细

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

时间:2019-06-12 22:11:37      阅读:197      评论:0      收藏:0      [点我收藏+]

 图像

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>
View Code

超链接标签

语法

 <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>
View Code

上面的代码我们发现是在当前页面打开了超链接,如果想在新页面打开,只需要加上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>
View Code

常用属性

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>
View Code

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

语法

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

 

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

原文:https://www.cnblogs.com/zouzou-busy/p/11006965.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!