web前端-03超链接和图片标签
超链接
1.超链接也是一个行内元素,在a标签中可以嵌套除它自身外的任何元素
2. 属性:
href属性
指定跳转的目标路径
值可以是一个外部网站的地址
也可以写一个内部页面的地址
target属性
用来指定超链接打开的位置
可选值:
_self 默认值 在当前页面中打开超链接
_blank在一个新的页面中打开超链接
3. 当我们需要跳转一个服务器内部的页面时,一般我们都会使用相对路径
相对路径都会使用.或者..开头
./ 或 ../
( ./可以省略不写,如果不写./也不写../则就相当于写了./ )
./表示当前文件所在的目录
4.
- 回到顶部超链接:
将href属性设置为#,这样直接点击超链接就能直接回到顶部
- 可以跳转到页面的指定位置
将href属性设置为#,和目标元素的id属性值
id属性(唯一不重复)
每一个标签都可以添加一个id属性
id属性就是元素的唯一标识
- 在开发中可以将#作为超链接的路径的展位符使用
- 可以使用JavaScript来作为href的属性,此时点击这个超链接什么都不会发生
图片标签
1.用于向当前页面引入一个外部图片
2.使用img标签来引入外部图片,img标签是一个自结束标签
img这种元素属于替换元素(基于块和行内元素之间,具有两种元素的特点)
- 属性:
src 属性指定的是外部图片的路径
alt 属性是对图片的描述,这个描述在默认情况下不会显示,有些浏览器会在图片无法加载时显示
(搜索引擎会根据alt中的内容来识别图片,如果不写,就不会被搜索引擎搜索)
width 图片的宽度
height 图片的高度
(宽度和高度中如果只修改了一个,另一个会根据比例缩放)
注意:
一般情况在pc端不建议修改图片的大小,需要多大的图片就裁多大
但是在移动端,经常需要对图片进行缩放
- 图片格式:
jpeg(jpg)
支持的颜色丰富,不支持透明效果,不支持动图
一般用来显示照片
gif
支持的颜色较少,支持简单透明,支持动图
颜色单一的图片,动图
png
支持颜色丰富,支持复杂透明,不支持动图
颜色丰富,费用咋透明图片(专为网页而生)
webp
这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
它具备其他图片格式所有的优点,而且文件还小
缺点:兼容性不好
base64
将图片使用base64编码,可以直接将图片转换成字符,通过字符的形式来引入图片
一般都是一些需要和网页一起加载的图片才会使用base64
效果一样,用小的
效果不一样,用好的
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤