`

前端积累----图片相关

阅读更多

 以下为当前总结,还未完善好,当然以后会不断学习补充的

 

1.alt 属性

必需的属性,它规定在图像无法显示时的替代文本

假设由于下列原因用户无法查看图像,alt 属性可以为图像提供替代的信息:网速太慢,src 属性中的错误,浏览器禁用图像,用户使用的是屏幕阅读器

用法:<img src="/i/eg_tulip.jpg"  alt="上海鲜花港 - 郁金香" />

注意:alt表示图片不能正常显示时的替换内容,里面可以加上文字,一般不写这个属性的话会有警告错误,所以我一般是会加上的

 

2.网页加图标

<head lang="en">
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="./0223.png">
    <title>前端开发</title>
</head>

  <link>标签中href为图标相对位置,最好放在网站的根目录下

添加icon,href后面加图片路径,相当于<img src="">标签中的src属性

 

 【常出现问题】

①图片引不到html页面,提示404路径错误.

检查后发现相对路径正确,可就是引不到。这时你可以试着只访问图片,然后把路径改为自顶级路径向下

<img src="../../../xitong/image/tu.png">

 ../../../xitong是顶级路径,这里xitong即为项目名

 

②页面不显示图片

【这里有个新方法,用代码编辑器打开网页,拖动图片显示出绝对位置,然后复制到项目中即可】

通过浏览器启动时,发现页面无法应用本地图片,浏览器也没有报错。

经过多次查找后发现是图片路径问题,因为图片没有经过服务器,所以肯定加载不出来

这时我把路径改为图片经过服务器路径:

原来的:<img src="./Firefox_wallpaper.png">
改动后的:<img src="localhost/xitong/views/Firefox.png">

 

 

分享到:
评论

相关推荐

    前端面试-腾讯

    根据给定文件的信息,我们可以提炼出与“前端面试-腾讯”相关的知识点,这些知识点主要围绕前端技术栈、面试技巧及腾讯公司对前端工程师的具体要求展开。 ### 前端技术栈 1. **HTML/CSS基础** - 掌握HTML5新特性...

    前端练习01-前端-HTML

    这些内容可能包括`&lt;h1&gt;`至`&lt;h6&gt;`的标题,`&lt;p&gt;`表示段落,`&lt;a&gt;`定义超链接,`&lt;img&gt;`插入图片,以及其他辅助元素如`&lt;div&gt;`(布局容器)和`&lt;span&gt;`(内联元素)。 HTML5的引入带来了许多新特性,如`&lt;section&gt;`、`...

    前端基础-PC端品优购项目(下).rar

    在本资源包“前端基础-PC端品优购项目(下).rar”中,包含了一系列前端开发的基础学习材料,特别关注于构建一个PC端的电商网站。这个项目旨在帮助初学者掌握HTML、CSS以及与电商前端相关的技术。以下是根据提供的...

    前端静态模板-响应式黑粉红图片网站-学生作业毕设实训素材.zip

    本文将围绕“前端静态模板-响应式黑粉红图片网站-学生作业毕设实训素材”这一主题,深入探讨相关知识点。 首先,我们需要理解什么是前端静态模板。静态模板通常由HTML、CSS和JavaScript组成,它们不依赖后端服务器...

    前端开发简历模板-刘先生-web前端-3年.doc

    【刘先生】的前端开发简历显示他是一位拥有3年工作经验的专业Web前端开发者,毕业于商务英语专业,目前在寻找广州地区的Web前端开发岗位,期望薪资在7000-9000元/月。他的技能涵盖了HTML、CSS3、ES6、Vue.js、微信小...

    前端开源库-empty-trash

    "empty-trash"库的主要任务是清空前端项目中的临时文件和缓存,这些文件在开发过程中可能会积累,久而久之占用不必要的存储空间,甚至可能影响项目的运行效率。在项目迭代频繁的环境中,定期清理无用资源尤为重要,...

    前端开源库-gulp-clearbuild

    `gulp-clearbuild`主要解决的问题是前端项目在开发过程中,随着文件的增加和修改,构建目录可能会积累大量的冗余文件,如旧的JavaScript、CSS、图片等。这些冗余文件不仅占用磁盘空间,还可能影响编译速度和部署效率...

    前端静态模板-温泉 spa 化妆-学生作业毕设实训素材.zip

    在IT行业中,前端开发是构建Web应用程序的重要组成部分,它涉及到用户与网站互动的界面设计和实现。...通过深入学习和分析,学生不仅可以提升自己的技术能力,也能为毕业设计和论文写作积累宝贵的素材。

    2023前端小项目-学成在线素材,包含设计图等素材

    在前端开发领域,小项目是提升技能和积累经验的重要途径。"2023前端小项目-学成在线素材" 是一个专为前端开发者提供的资源集合,旨在帮助学习者掌握前端开发技巧,通过实践来深化理论知识。这个压缩包包含了各种设计...

    前端静态模板-手机商城首页金盛集团-学生作业毕设实训素材.zip

    在IT行业中,前端开发是构建Web应用程序的重要组成部分,它涉及到用户与网站互动的界面设计和实现。...通过实践和探索,学生不仅可以深化对前端技术的理解,还能为未来的毕业设计和论文撰写积累宝贵经验。

    前端团队管理 前端基础架构的实践和思考 共22页.pdf

    * 内聚众人智慧:前端基础架构需要具备内聚众人智慧的特点,能够将项目开发之余的技术积累起来。 * 融入到整个技术体系中:前端基础架构需要具备融入到整个技术体系中的特点,能够与后端技术无缝结合,发挥技术最大...

    web-前端开发规范手册

    ### Web前端开发规范手册知识点详解 #### 一、规范目的 - **概述**: 本规范旨在提高团队协作效率,确保后台人员能轻松地添加新...遵循这些规范不仅有助于开发出更高质量的产品,还能促进团队间的有效沟通和技术积累。

    WEB前端工程师必备实用网站(图片)

    资深前端大神积累的各种资源,免费开源的,高质量学习资源网址,也是从课程班里淘来的,绝对实用。多多学习,不断进步。

    前端静态模板-响应式绿白灰色大气-学生作业毕设实训素材.zip

    在前端开发领域,静态模板...通过学习和实践这个模板,学生不仅可以提升前端开发技能,还能为毕业设计和论文撰写积累宝贵的经验。同时,这样的模板也能激发创新思维,帮助学生设计出符合现代审美和功能需求的网页应用。

    前端静态模板-响应式蓝白红企业网站-学生作业毕设实训素材.zip

    总的来说,这个压缩包为学习和实践前端开发提供了现成的平台,尤其适合对响应式设计感兴趣的初学者,可以帮助他们快速理解和应用相关技术。通过分析和修改这个模板,学生不仅可以提升技术水平,还能为自己的毕业设计...

    超详细的web前端基础学习笔记

    ### 详细知识点梳理 #### 超详细的web前端基础学习笔记 ##### 前端课程介绍 ...它如同网页的骨架,为网页提供基本框架。...随着实践经验的积累,开发者还可以进一步学习 CSS 和 JavaScript 来增强网页的表现力和交互性。

    JavaWeb-前端素材管理系统,用于javaWeb考试前练习

    这个系统主要目标是帮助学习者在准备JavaWeb相关的考试时,能够更好地理解和实践前端技术。通过这个系统,用户可以整理、分类和检索前端开发所需的各类素材,如HTML、CSS、JavaScript代码片段,图片,甚至包括一些...

    前端性能讲解——阿里

    一淘-UX网站组前端团队是一支在前端技术方面有着深厚积累的团队,他们不仅率先在阿里巴巴集团内部采用Git进行生产环境代码管理,而且还构建了一系列高效的开发工具和服务,如Git仓库代码在线浏览和分享平台、Git仓库...

    雷志兴-百度前端基础平台与架构分享

    百度作为中国领先的互联网公司之一,在其发展过程中积累了大量的前端技术经验与实践成果。随着百度业务的不断拓展,前端技术面临着诸多挑战。例如,如何在多样的产品线中保持一致性和高效性?如何降低不同产品线之间...

    达内wec前端视频教程百度云

    根据提供的文件信息,我们可以归纳出一系列与达内Web前端视频教程相关的知识点,这些知识点涵盖了Web前端开发的基础到高级技能,适合不同水平的学习者。接下来,我们将深入探讨这些知识点,帮助大家更好地理解Web...

Global site tag (gtag.js) - Google Analytics