HTML/CSS考核作业图片无法显示，编程新手求代码调试指导

图片不显示的核心排查点 #

• 核对图片路径：
  • 本地图片：若和HTML文件同目录，直接写src="xxx.jpg"；若在子文件夹（比如images），要写src="images/xxx.jpg"。注意文件名大小写，部分系统（如Linux）严格区分，Img.png和img.png是两个文件。
  • 手动打开图片文件，确认文件未损坏、格式正常（比如不是后缀名修改后的无效文件）。
• 检查<img>标签语法：
  • 别把src写成scr（新手高频错误），确保标签包含src属性，比如<img src="test.jpg" alt="测试图片">。

HTML/CSS代码常见错误检查 #

HTML部分 #

• 确保完整文档结构：

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
  </head>
  <body>
    <!-- 内容写在这里 -->
  </body>
  </html>
  

• 检查标签嵌套：比如<p>不能嵌套<div>，<ul>里只能放<li>，避免未闭合标签（比如<div>开了没关）。

CSS部分 #

• 选择器别写错：类选择器要加.（比如.box），ID选择器加#（比如#header），不要漏符号。
• 属性与值规范：比如background-color不能写成backgroundcolor，长度值要加单位（比如width: 200px，不是width: 200）。
• 外部CSS引入：确保<link rel="stylesheet" href="style.css">的路径正确，和图片路径检查逻辑一致。

新手调试实用技巧 #

• 打开浏览器开发者工具（按F12或右键选「检查」）：
  • 在「Elements」标签查看<img>的src，鼠标悬停路径，能预览就说明路径没问题，不能预览就排查文件或路径。
  • 看「Console」标签的报错：404是文件找不到，Syntax Error是代码语法错，跟着提示改。
  • 在「Styles」标签看元素样式，划掉的样式是被其他规则覆盖了，可调整选择器优先级或修改样式。

内容的提问来源于stack exchange，提问作者Brian C