第二天0605下午——超链接<a>与图片<img>
今天下午学习了超链接<a>标签和图片<img>标签,以下面代码为例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<a href="#end">跳转底部</a><br />
<a href="https://www.baidu.com/">这是一个跳转到百度的超链接</a><br>
<a href="../../动态壁纸/壁纸2/preview.jpg">这是指向一个图片</a><br>
<a href="../../清华 html教程.rar">这是一个压缩包</a><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="https://www.taobao.com/">
这是跟在 a 标签中,img 图片前的一段文字。
<img src="../../动态壁纸/壁纸1/最终幻想13雷霆归来 隐藏CG/preview.jpg" width="1080" height="1880" alt="图片加载不粗来显示" title="图片名称" align=middle vspace=10 hspace=10 border=10>
这是跟在 a 标签中,img 图片后的一段文字。
</a>
<a name="end"></a>
</body>
</html>
<a>标签——超链接和下载
<a>标签作为超链接必须有两个要素,内容和指向。
<a href="https://www.baidu.com/">这是一个跳转到百度的超链接</a>
其中href属性后面是超链接的指向地址,中间是内容。
<a>标签主要有三种用法:
1.跳转网页
<a href="https://www.baidu.com/">这是一个跳转到百度的超链接</a>
这是<a>标签最常用的用法,href后面双括号中写网页地址。
2.指向文件
href后面双括号中写一个文件的地址,如果这个文件是图片,txt文档,html等浏览器可以打开的文件,浏览器会默认打开;
注意:如果打开的文本文档是乱码,是编码问题,换一下编码方式,换浏览器的编码方式就可以。
如果是浏览器无法识别的文件,比如压缩包,点击链接浏览器会下载。
3.做锚点
锚点有两个<a>标签构成
<a href="#end">跳转底部</a>
<a name="end"></a>
一个<a>标签里用来定位,用name定义一个名字,另一个<a>标签用来跳转,标签里href=“#定义的名称”,在href里,#代表当前页面,点击就可以跳转到那个<a>标签所在的位置。
<img>图片标签
<img src="../../动态壁纸/壁纸1/最终幻想13雷霆归来 隐藏CG/preview.jpg" width="1080" height="1880" alt="图片加载不粗来显示" title="图片名称">
<img>标签标签中有图片的地址,而不是通过在代码中直接添加图片,所以代码占空间不会很大。
<img>标签是一个单标签,主要属性有:
src:图片的地址
width:图片宽度
height:图片高度
alt:图片加载不出来显示的名称
title:图片标题,鼠标移到图片上显示的名称
其中,高度和宽度是都是以像素为单位的,如果只是设置了宽度或者高度,会根据原本的长宽比例来自动缩放大小,如果同时设置了长度和宽度,会根据设置的长度和宽度来拉伸。
另外,如果网速较慢,会加载不出图片,但是后面的文字不影响。这是因为浏览器在解析执行代码时,一行一行代码解析执行,解析到图片时,他会分开,相当于再找一个人一边来根据地址照图片,另一边继续执行下面的代码。
拓展:
如果<a>标签中同时放了图片和文字,那点击他们都是相同的效果,指向相同的页面或者文件。
<img align=#> #=top, middle, bottom
图象和文字的对齐,用来控制文字在图像的什么位置显示。
<img vspace=# hspace=#> #=value
vspace和hspace用来增加图片周围的空白。
border=#
用来控制图片的边框宽度。
图片超链接
<a href="https://www.taobao.com/">
<img src="../../动态壁纸/壁纸1/最终幻想13雷霆归来 隐藏CG/preview.jpg" width="1080" height="1880" alt="图片加载不粗来显示" title="图片名称">
</a>
在<a>标签中嵌套一个<img>图片。
- 以大数据之名,变身!——In big data we trust
- 90%家长都不知道关于少儿编程的这些疑题!
- 常用SQL语句和语法汇总
- Python学习笔记1——斐波那契数列
- 视觉传感器几大技术要点详解!
- Spark之搜狗日志查询实战
- 区块链与数字货币是什么关系呢?
- 保存数据到MySql数据库——我用scrapy写爬虫(二)
- 人工智能将取代人类?危机亦或是新的机遇
- 大数据驱动的未来网络:体系架构与应用场景(下)网络架构与场景详解
- 冷静点,NVIDIA 禁止 Geforce 进数据中心想限制的并不是深度学习
- 智能机器人崛起背后的中国力量
- 企业微服务架构转型-实施步骤
- Andrew Ng机器学习课程笔记--week2(多元线性回归&正规公式)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Xcode9 在全屏模式下使用Xcode模拟器
- IQKeyboardManager每次运行都会断点到Bug ID:#550
- Reveal的使用方法
- Unity项目嵌入现有iOS项目的方法
- iOS CAShapeLayer和UIBezierPath的使用
- iOS Swift 读取本地json文件
- WKWebView不显示JS的Alert,Confirm,TextInput弹框解决方法
- Xcode9 上传出现ERROR ITMS-90023/iTunes Store Operation Failed错误
- 微信小程序开发教程-从零开始(1)
- Bison详解连连支付集成
- Bison的APP上线咯,小伙伴们赶紧过来围观吧....
- 详解持久化Core Data框架的原理以及使用---转自Bison的技术博客
- Bison眼中的iOS开发多线程是这样的(一)
- Bison眼中的iOS开发多线程是这样的(二)
- React Native在Mac上部署iOS开发环境