HTML常用标签img a

目录

图像image

img 标签

语法

 img标签属性

图像路径

超链接a标签

语法

 默认样式

超链接属性

href属性 

target属性

title属性

链接的类型

 空链接 

外部链接

 内部地址

下载地址

锚点链接

---

图像image

图像是网页的主要内容之一，在HTML标签中，img标签用于定义HTML页面中的图像

img 标签

语法

<img src="" alt="" width="" height="" title="">

 img标签属性

src：用于指定图像文件的路径和文件名 是不可缺的

alt：指定替换文本,默认不显示，当图像不能正常显示时，显示该文字对图像进行替换,有利于用户体验

width/height属性 :指定图片宽度/高度

title :鼠标悬停时的文字提示

图像路径

相对路径：相对路径是指由这个文件所在位置为参考基础，而建立出的目录关系,常用的相对路径包括当前目录，上一级目录，下一级目录

目录：：一个点（.）后面跟一个斜杠表示当前目录也就是当前文件所在目录。

两个点（.）后跟一个斜杠表示前文件所在目录的上一级目录

一个斜杠，表示图像文件位于HTML文件下一级

<img src="pic.png" alt="">
<img src="./pic.png" alt="">     <!-- ./ 可以省略 -->

 <img src="../pic2.png" alt="">

 <img src="images/pic3.png" alt="">

绝对路径 ：绝对路径文件在目录中的绝对位置完整描述，常见的绝对路径一种由其在网络上的绝对位置定义的位置，一种是本地从盘符出发的绝对位置

网络绝对位置

语法：包括协议和域名：如：http://www.ujiuye.com/statics/images/logo.png

本地绝对位置

D盘下webset文件夹下的image文件夹中的logo.png描述为：

D:\webset\images\logo.jpg

绝对URL始终指向同一位置，无论在何处使用

注意:在链接到同一网站内的其他位置时，应尽可能使用相对链接。链接到另一个网站时，需要使用绝对链接。

超链接a标签

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像。将文档链接到其他文档或资源，链接到文档的特定部分

语法

<a href="" target="" title="">文字或图片</a>

 默认样式

• 不独占一行

• 默认当前窗口打开

• 默认带有下划线、文字颜色

超链接属性

href属性 

作用：指定跳转的地址

<a href="http://www.jd.com">京东商城（文字链接）</a>
<a href="4.例-导航.html" target="_blank"><img src="pic.png" alt="">（图片链接）</a>

target属性

作用：指定目标地址的打开方式

取值：

• "blank"新窗口打开

• ”self“当前窗口打开（默认值 ）

 <a href="http://www.jd.com" target="_blank"><img src="pic.png" alt=""></a>

title属性

 作用：定义提示文本，将鼠标悬停在链接上会显示标题作为工具提示

 

 

链接的类型

 空链接 

如果当时没有确定链接的目标时使用空链

<a href="#">商品</a>

外部链接

 链接到站外其他 网站的链接 （绝对地址）

 <a href="https://www.baidu.com"> 百度 </a>

 内部地址

网站内部页面之间的相互链接。直接链接内部页面的名称

<a href="index.html">首页</a>

下载地址

如果href里面的地址是一个文件或压缩包，会下载这个文件。

<a href="1.txt">下载文本文件</a>

锚点链接

当我们点击锚点链接时，可以快速定位到页面中的某个位置。

跳转至当前页面指定位置的锚点

定义目标：<p id="box"></p> 
定义跳转：<a href="#box"></a>

跳转至其它页面的锚点

定义目标：a.html页面的 <div id="box"></div>
定义跳转：<a href="a.html#test"></a>

效果参考：腾讯公司 - Tencent 腾讯 腾讯企业站