一、超链接标签：从“点了没反应”到“想跳哪就跳哪”
超链接看起来简单，就一个标签，但我见过太多人栽在细节上。去年带一个刚学HTML的大学生做个人作品集网站，他把所有链接都写成我的作品，结果页面上文字是蓝色带下划线，点了却纹丝不动。其实问题就出在少了href属性——这就像你寄快递只写了收件人名字，没写地址，快递员怎么送？
href
属性是超链接的“灵魂”，它告诉浏览器要跳转到哪里。比如你想链接到百度，就写百度一下。这里要注意，网址必须完整，包括http://或https://，不然浏览器会以为是本地文件路径。我之前帮朋友改博客，他写，结果跳转的是“当前网页地址/baidu.com”，自然404了。 target属性决定链接在哪里打开，最常用的两个值：_self（默认，当前窗口打开）和_blank（新窗口打开）。为什么 外部链接用_blank？你想想，用户在你网页上看内容，点了个外部链接结果当前页面被替换，很容易流失。MDN Web Docs在关于标签的指南里特别提到，_blank配合rel="noopener noreferrer"能提升安全性，避免新窗口劫持原页面，完整写法是安全链接。
还有文本内容，就是用户能看到的点击区域，千万别空着。之前见过有人写，页面上啥都没有，用户根本不知道能点击，这完全浪费了链接的作用。
很多人超链接失效，80%是路径没写对。简单说，绝对路径是“完整地址”，比如https://www.yourblog.com/images/photo.jpg，适合链接外部网站；相对路径是“相对当前文件的位置”，适合链接自己网站的文件。
举个我实操的例子：朋友的个人网站文件夹结构是website/（根目录）里有index.html（首页）和pages/文件夹（里面有about.html），还有images/文件夹（放图片）。如果要在index.html里链接到about.html，相对路径就是关于我——这里pages/表示“当前文件所在目录下的pages文件夹”。如果写成绝对路径C:/website/pages/about.html，换台电脑或传到服务器，路径就错了，链接肯定失效。
“锚点链接”也很实用，能让用户点击后跳转到页面内指定位置。比如文章太长，顶部放个“跳到底部”链接，就需要先给目标位置加个id，比如
，然后链接写成跳到底部。我去年给一个美食博客做优化时，用锚点链接把“食材清单”“步骤说明”“小贴士”做成目录，用户体验提升不少，后台数据显示页面停留时间增加了2分钟。
二、图片![HTML5超链接使用教程|图片标签基础用法详解|零基础入门指南 四]()
标签：从“破碎图标”到“清晰又加载快”
图片是网页的“颜值担当”，但新手常犯的错比超链接还多：要么图片显示不出来，要么加载慢得像蜗牛，要么明明是风景照，结果被拉伸变形。上个月帮邻居的手工店做网站，她传了20张没压缩的单反照片，每张3MB，网页打开要等10秒，我优化后每张压缩到200KB内，加载速度快了80%。
src
属性和href类似，是图片的“地址”，必须写对路径（和超链接路径规则一样，分绝对和相对路径）。但比超链接多一个坑：图片文件名别用中文！我见过有人把图片命名为“风景照.jpg”，本地预览没事，传到服务器就显示破碎图标，改成“scenery.jpg”立刻正常——因为有些服务器对中文文件名支持不好。 alt属性是“备用文本”，很多人觉得可有可无，其实它是SEO和可访问性的“关键分”。当图片加载失败时，alt会显示文字提示；屏幕阅读器用户（比如视力障碍者）靠alt理解图片内容；搜索引擎也通过alt判断图片主题。W3C在网页可访问性指南里强调，除了纯装饰性图片（alt=""），所有内容图片都必须有描述性alt文本。比如一张猫咪玩毛线的图片，alt="橘猫在沙发上玩彩色毛线球"就比alt="图片"好10倍。
宽高属性（width/height） 设置，避免页面“抖动”。如果不指定宽高，图片加载时页面会先留空白，加载完成后突然撑开，用户体验很差。正确做法是用CSS设置宽高，或者直接在标签里写
新手常忽略图片格式，其实选对格式能让加载速度天差地别。JPG适合色彩丰富的照片（比如风景、人像），压缩率高但不支持透明；PNG适合图标、Logo（支持透明背景），但体积较大；WebP是谷歌推出的高效格式，相同画质下体积比JPG小30%，现在主流浏览器都支持。我自己的博客从JPG换成WebP后，页面加载速度从3秒降到1.5秒，谷歌PageSpeed得分直接从70提到90。
压缩图片也很重要，推荐用 TinyPNG（tinypng.com）在线压缩，免费且不损失画质。记得别直接用手机拍的原图（通常5-10MB），压缩到200-500KB足够清晰。 “响应式图片”技巧也实用：用srcset属性让不同设备加载不同尺寸图片，比如手机加载300px宽的图，电脑加载800px宽的图，代码是
按照这些方法写完后，你可以用浏览器打开HTML文件，按F12打开开发者工具，切换到“控制台”标签，如果有红色错误提示“Failed to load resource”，就是路径错了；如果图片显示但控制台有黄色警告“Image elements do not have alt attributes”，记得补上alt。遇到解决不了的问题，也可以把代码复制到W3C HTML验证器（rel=”nofollow”），它会告诉你哪里写错了——这是我带新人时必教的“自查神器”，比瞎猜高效10倍。
你现在就可以打开编辑器，试着写一个带超链接和图片的简单页面：比如用超链接链接到自己的社交媒体，插入一张自己喜欢的图片，按刚才说的检查路径、加alt属性。写完后在浏览器里预览，相信我，当你看到点击链接能跳转、图片清晰显示的那一刻，会超有成就感——这就是网页开发的魅力，简单但真实可见的成果。如果遇到问题，欢迎在评论区告诉我你的代码和遇到的情况，我来帮你一起排查！
选路径这事儿，我带新人时 出个特形象的比喻：绝对路径就像寄快递时写的“完整家庭住址+门牌号”，不管你在哪寄，快递员都能精准送到；相对路径则是“从你现在站的位置往前走30米，左转第三间房”，只适合在自己熟悉的环境里用。
就拿链接外部网站来说，比如你想让用户点一下跳转到知乎，就得用绝对路径——，少个https://都不行。去年帮一个做美妆博客的朋友改链接，她把知乎链接写成，结果用户点了之后，浏览器自动在她博客网址后面加了“zhihu.com”，变成“https://她的博客域名/zhihu.com”，当然打不开。这就是没写全绝对路径的坑，外部网站不在你的服务器上，浏览器根本不知道“zhihu.com”在哪儿，必须给它完整的“门牌号”。
但如果是链接自己网站里的文件，比如从首页跳转到“关于我”页面，或者插入本地图片，就得用相对路径了。举个实际的文件夹结构例子：你建了个叫“mywebsite”的文件夹，里面有“index.html”（首页），还有“pages”文件夹（装“about.html”）和“images”文件夹（装“photo.jpg”）。这时候从首页链接到“about.html”，相对路径就是——“pages/”代表“从当前文件（index.html）所在的文件夹里，找到pages文件夹，再进去找about.html”。要是写成绝对路径“C:/mywebsite/pages/about.html”，等你把网站传到服务器上，服务器上可没有“C盘”，路径肯定失效。我见过最夸张的，有人把所有本地图片都用绝对路径，结果换了台电脑打开HTML文件，所有图片全是破碎图标，就是因为新电脑上没有原路径的图片文件。
简单说，判断用哪种路径就看“目标文件是不是你自己网站的”：是外部网站（比如百度、B站），就用绝对路径；是自己网站内的页面、图片，就用相对路径。这样既能保证链接和图片正常显示，又能避免换电脑、换服务器时出问题——这是我踩过无数坑才 出的“懒人法则”，你照着做，路径这块基本不会出错。
超链接点击后没有反应，可能是什么原因？
最常见原因是缺失href属性（超链接必须的跳转地址），或href属性值格式错误。比如外部链接漏写http://或https://（如写成href="baidu.com"，浏览器会误认为是本地路径），或本地链接路径错误（如文件位置移动但路径未更新）。检查标签是否包含href="目标地址"，并确保地址正确。
相对路径和绝对路径在超链接/图片中怎么选？
外部网站链接优先用绝对路径（如https://www.example.com），确保在任何设备或服务器环境下都能准确跳转；自己网站内的文件（如页面、图片）用相对路径（如pages/about.html或images/photo.jpg），更灵活且避免本地绝对路径（如C:/files/）在服务器部署时失效。简单说：“链接外部用全地址，链接自己用相对位置”。
img标签的alt属性有必要写吗？它有什么作用？
非常必要，且是提升网页质量的关键细节。alt属性是图片的“备用文本”：当图片加载失败时，页面会显示alt文字提示用户图片内容；帮助屏幕阅读器（视障用户使用的工具）理解图片信息，提升网页可访问性；同时辅助搜索引擎识别图片主题，对SEO（搜索引擎优化）友好。非装饰性图片 写描述性alt文本（如alt="橘猫在沙发上玩毛线球"），纯装饰图可写alt=""（告诉浏览器无需读取）。
为什么插入的图片显示破碎的图标（裂开的图片符号）？
通常是src属性路径错误导致浏览器无法找到图片文件。检查三方面：①路径是否正确（区分相对路径/绝对路径，如图片在images文件夹下，需写src="images/photo.jpg"而非src="photo.jpg"）；②图片文件名是否包含中文或特殊字符（ 用英文/数字命名，避免服务器不兼容）；③图片文件是否确实存在于指定路径（如误删文件或移动位置后未更新路径）。
使用target=”_blank”打开新窗口时，为什么要加rel=”noopener noreferrer”？
这是重要的安全优化措施。当用target="_blank"打开新窗口时，新窗口默认可通过window.opener访问原页面，恶意网站可能利用此特性修改原页面（如跳转钓鱼网站），即“窗口劫持”。添加rel="noopener noreferrer"可阻止新窗口访问原页面，保护用户安全。MDN Web Docs等权威文档明确推荐此写法，完整格式为。
