目录

图像标签

路径

相对路径

绝对路径

超链接标签


图像标签

图像标签

在HTML标签中,<img>标签用于定义HTML页面中的图像。img是image的缩写,意为图像。

src是<img>标签的必须属性,它用于指定图像文件的路径和文件名。(属性:就是属于这个图像标签的特性。)

Web前端开发入门—Chapter02Web前端开发入门—Chapter02

Web前端开发入门—Chapter02

Web前端开发入门—Chapter02

Web前端开发入门—Chapter02

Web前端开发入门—Chapter02

Web前端开发入门—Chapter02

图像标签属性注意点:

Web前端开发入门—Chapter02

路径

补充:

(1)目录文件夹和根目录

目录文件夹:就是普通的文件夹,里面放了做页面所需要的相关素材,例如html文件,图片等。

根目录:打开文件夹的第一层就是根目录。

(2)路径

相对路径

图片相对于HTML页面的位置

Web前端开发入门—Chapter02

相对路径是从代码所在的这个文件出发,去寻找目标文件的,这里所说的上一级、下一级、和同一级就是图片相对于HTML页面的位置。

绝对路径

是指目录下的绝对位置,直接到达目标位置,通常是从盘符开始的路径。

Web前端开发入门—Chapter02

从网上找的图片:

Web前端开发入门—Chapter02

把图片点开,复制链接到代码中。

超链接标签

<a>标签用于定义超链接,作用是从一个页面链接到另一个页面

为单词anchor的缩写,锚。

1.语法格式

Web前端开发入门—Chapter02

Web前端开发入门—Chapter02

2.链接分类

  • 外部链接:

target 打开窗口的方式  默认是_self 即 当前窗口打开页面      _blank  新窗口打开页面

Web前端开发入门—Chapter02

Web前端开发入门—Chapter02

  • 内部链接:

网站内部页面之间的相互连接,直接链接内部页面名称即可。列如<a href="index.html">首页</a>

 

  • 如果还不确定链接要跳转到哪里,可以用“#”也就是空链接来代替。

Web前端开发入门—Chapter02

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

Web前端开发入门—Chapter02               

Web前端开发入门—Chapter02

  • 网页元素连接:在网页中的各种网页元素,如文本、图像、表格、音频、视频等都可以添加超链接。

Web前端开发入门—Chapter02

  • 锚点链接

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

Web前端开发入门—Chapter02

 

 

 

 

 

 

相关文章:

  • 2021-08-18
  • 2021-10-21
  • 2021-11-20
  • 2022-12-23
  • 2022-12-23
  • 2021-05-05
  • 2021-06-08
猜你喜欢
  • 2021-10-01
  • 2021-12-18
  • 2021-12-22
  • 2022-12-23
  • 2021-07-19
  • 2022-01-06
  • 2021-04-11
相关资源
相似解决方案