HTML笔记 ( 四 ) img 标签和 a 标签

---

博主的 Github 地址

---

1. img 标签

• 作用:
  用于在 html 文档中插入图片 ( 最常用的用法 )

img 标签的几个属性

src 属性

• 作用:
  标注图片的 url 源地址

• 类型
  1). 网上 url
  2). 本地绝对路径: 使用本地的图片地址的路径引用, 如 D:/a/b/aaa.jpg
  3). 本地相对路径: 若网页文件与图片文件存于同一文件夹下, 可用相对路径来表示
   例如 若网页文件路径是 D:/a/b/xxx.html 和图片路径是 D:/a/b/image.jpg
   则可以直接用 src="image.jpg" 来进行图片的引用.

alt 属性

• 作用:
  用于在图片显示失败的时候, 在图片本该出现的位置展示文字信息, 是图片占位符.

title 属性

• 作用:
  是图片提示符, 用于在当鼠标停留在图片上时进行提示信息.

 
 
 

2. a 标签

• 作用:
  用作指向某个地址的超链接

a 标签的几个属性

herf 属性

• 作用:
  在该属性中加入 url 即可进行超链接跳转

• 备注:
  1). a 标签的内容可以是任何形式的元素, 包含图片, css 等.
  2). a 标签还可以作为锚点跳转到网页的任意位置.
  3). a 标签也可以用于拨打电话, 发邮件等
  4). 也可以用作协议限定符, 如 强制运行js脚本

 
 

a 标签使用JavaScript伪协议

<a href="#"></a> <%--情况1--%>

<a href="#none"></a> <%--情况2--%>

<a href="###"></a> <%--情况3--%>

<a href="javascript:;"> </a><%--情况4--%>

<a href="javascript:test();"> </a><%--情况5--%>

• 说明:
  javascript:这个伪协议类型声明了URL的主体是任意的 javascript 代码,
  它由 javascript 的解释器来运行.
  除javascript:外还有其他的伪协议, 感兴趣可自行探究.
   

• 5 种情况
   
  1). 点击这个链接后, 会让页面跳到页面顶部, 在location.href后面增加#号,
   相当于直接在浏览器地址加#
   
  2). 点击该链接后, 会跳转到 html 页面中 id="none" 的元素的上方
   
  3). 点击后不跳转，可以阻止默认的跳转行为 ( 但有可能会在后端识别错误, 不推荐 )
   
  4). 点了之后不会有跳转, 可以阻止默认的跳转行为
   
  5). 点击后执行函数名为 test 的 js 方法