a是 anchor锚的缩写叫超链接。点击文字 / 图片可以跳转到另一个网页、文件、页面内某个位置、邮箱、电话。a属于行内双标签元素。基础语法a href跳转的地址点击显示的内容/aa开始标签href地址a 标签最重要的特有属性href hyper‑text reference超文本引用写要跳转去哪里。点击显示的内容链接的内容可以文字、图片。/a结束标签⚠️href 必须写在开始标签里面不能写到结束标签。 链接默认蓝色文字、带下划线访问过后文字变成紫色。一、核心属性1. href 属性必须指定跳转目标地址。地址分两大类绝对路径、相对路径。① 绝对路径完整网址跳转到外部网站完整的http://或者https://开头跳转到别的网站。a hrefhttps://www.baidu.com跳转到百度/a解释点击文字【跳转到百度】打开百度官网。⚠️写外网网址必须带上 https://不能直接写www.baidu.com否则会当成本地文件查找跳转出错。❌错误写法a hrefwww.baidu.com百度/a✅正确a hrefhttps://www.baidu.com百度/a② 相对路径跳转到自己项目里面的网页文件同一个文件夹下面比如项目有两个网页index.html、about.html在 index.html 里面写a hrefabout.html关于我们/a含义点击打开同目录下about.html文件。相对路径后面课程会再深入新手先掌握绝对网址。2. target 属性控制窗口怎么打开页面a 标签特有属性值作用_self默认值在当前浏览器窗口打开链接覆盖原来页面_blank在新标签页打开链接保留原来页面开发最常用示例!-- 当前窗口打开覆盖本页面 -- a hrefhttps://www.baidu.com target_self百度当前窗口/a !-- 新标签页打开推荐外部网站使用 _blank -- a hrefhttps://www.baidu.com target_blank百度新窗口/a访问外部网站建议写target_blank用户不会离开你的网页。3. title 属性全局属性鼠标悬浮在链接上面弹出提示文字。a hrefhttps://www.baidu.com target_blank title前往百度搜索页面百度搜索/a鼠标放到文字上弹出提示 “前往百度搜索页面”。4. 空链接href##代表空链接。点击链接不会跳转到别的网页会跳到当前页面的最顶部开发做临时占位。a href#首页/a还没做好页面的时候先用#临时占位。5. 伪空链接hrefjavascript:;点击链接页面不会滚动到顶部什么都不做JS 交互常用。a hrefjavascript:;暂时没有跳转/a二、页面内部锚点跳转跳转到本页面的某个位置实现点击链接滚动到页面内指定 id 的元素位置。 步骤给目标元素设置id名字id 页面内唯一a 标签的href#id名字示例完整代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 title锚点跳转演示/title /head body !-- 链接跳转到idfood的位置 -- a href#food点我跳转到美食板块/a brbrbrbrbrbrbrbrbrbr brbrbrbrbrbrbrbrbrbr !-- 目标位置设置id属性 -- h2 idfood美食板块/h2 p这里是美食介绍的内容。/p !-- 回到页面顶部 -- a href#返回顶部/a /body /html解释href#food井号后面写目标元素的 id 值。id 不能重复id 不要写中文尽量英文。href#跳转到页面最顶端。注意id 写在目标元素的开始标签里面。三、其他特殊链接1. 邮箱链接mailto:点击唤起电脑的邮件软件发送邮件。a hrefmailto:test163.com给我发邮件/a2. 电话链接tel:手机端生效手机打开网页点击直接拨打电话。a hreftel:13800138000点击拨打电话/a四、a 链接里面可以放什么内容a是行内元素 ✅可以放文字、图片、格式化标签strong、em ❌一般不直接放大的块级元素p、h、divHTML5 允许但新手尽量 a 里面只放文字图片。示例 1链接里面嵌套格式化标签p欢迎访问 a hrefhttps://www.baidu.com target_blankstrong百度官网/strong/a/p链接文字同时加粗。示例 2图片做超链接点击图片跳转a hrefhttps://www.baidu.com target_blank img srchttps://picsum.photos/200/100 alt图片跳转 /a点击这张图片打开百度网页。五、完整综合示例直接复制运行!DOCTYPE html html langzh-CN head meta charsetUTF-8 title超链接完整演示/title /head body h2超链接练习/h2 p1、外部网站新窗口打开 a hrefhttps://www.baidu.com target_blank title百度搜索百度/a /p p2、空链接点击回到页面顶部 a href#空链接#/a /p p3、伪空链接点击页面不动 a hrefjavascript:;伪空链接/a /p p4、图片链接点图片跳转/p a hrefhttps://www.bing.com target_blank img srchttps://picsum.photos/id/24/180/80 alt必应图片 /a p5、邮箱联系 a hrefmailto:demoqq.com发送邮件/a /p p6、锚点跳转 a href#part01跳到下方介绍部分/a /p brbrbrbrbrbrbrbrbrbr brbrbrbrbrbrbrbrbrbr h3 idpart01介绍板块/h3 p这里是锚点跳转到的位置。/p a href#返回顶部/a /body /html六、新手高频错误错误 1外网地址不写 https://a hrefwww.baidu.com百度/a浏览器会当成本地文件跳转 404 找不到页面。 ✅hrefhttps://www.baidu.com错误 2target 属性写错位置写在结束标签a hrefxxx文字/a target_blank属性必须写在开始标签a里面。错误 3锚点跳转忘记给目标写 id或者 id 名字写错href#abc目标元素 id 必须是idabc大小写敏感。错误 4id 在页面重复一个 id 名字整个网页只能出现一次。错误 5把#空链接当真正链接使用还没有做好的页面临时用#占位上线要替换真实地址。错误 6a 标签交叉嵌套a 标签不能嵌套 a 标签链接里面不能再放另一个a。 ❌错误a hrefa外层 a hrefb内层/a /a本篇核心知识点总结a超链接双行内标签核心特有属性href填写跳转地址。target_blank新标签页打开链接_self当前窗口打开默认。地址分为绝对路径完整 https 网址访问外部网站。相对路径本地项目 html 文件。空链接href#点击跳到页面顶部hrefjavascript:;点击无动作。锚点跳转href#id值跳转到页面内拥有对应 id 的元素。特殊链接mailto:邮箱tel:电话手机。a 内部可以放文字、图片、格式化标签a 不能嵌套 a 标签。可以搭配全局属性 title、class、id。小练习写一个页面包含①新窗口打开百度②图片链接③锚点跳转到页面下方返回顶部。下节预告下一篇教程HTML 样式。