HTML基础(三)图像和超链接
2024-09-05 15:59:03
图像
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也可以不写任何信息,会自动使用默认文件名
最新文章
- [Math] Backpropagation
- iOS 阶段学习第23天笔记(XML数据格式介绍)
- js的一些小笔记,(不定期更新)
- linux下nginx服务器域名指定目录
- iOS开发问题之Could not instantiate class named NSLayoutConstraint
- 转:为什么C++中空类和空结构体大小为1?
- cmd 连接到指定路径
- 让乌龟在提交cocos2d-x版本时自动去掉不需要的东东
- 讲座:html5于canvas疯狂的炮轰实现
- The ways to kill Oracle session
- javascript requestAnimationFarme
- maven deploy Return code is: 400, ReasonPhrase: Bad Request.
- Yii2 数据搜索类 PostSearch
- Java的集合框架(第一次小结)
- SpringBatch 错误积累
- CentOS下创建网桥
- Hadoop专业解决方案-第12章 为Hadoop应用构建企业级的安全解决方案
- The record of Rf module debugging (1)
- 具有全球唯一性,相对于internet,IP为逻辑地址
- 生成短的uuid