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

             效果一样,用小的
             效果不一样,用好的
posted @   煎binguo子  阅读(166)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
点击右上角即可分享
微信分享提示