那些酷炫的网页你也可以做到——第四篇(HTML图片标签和超链接标签)

简介: 那些酷炫的网页你也可以做到——第四篇(HTML图片标签和超链接标签)

HTML图片标签

图片标签

功能:将图片与html文件相关联,在网页中显示出好看的图片
<img/>内部闭合的标签,可以引入图片
属性:图片的链接地址
相对路径:图片和html在同一个目录下
绝对路径:带盘符的目录
width:图片的显示宽度
height:图片的显示高度
alt:图片的文字说明


将图片与html文件相关联,图片与.html在同一个文件下

image.png

image.png

滚动+图片
<marquee></marquee>图片也可以进行滚动
<marquee><imgalt="静静的雨"src="yu.gif"/></marquee>


HTML的超链接标签


超链接就是点击之后可以跳转到相应的页面,就像我文末添加的超链接,可以跳转到html的其它篇,还可以定位资源,篇幅特别长的文章可以添加超链接,比如从文末跳转到顶部。

<a>文本内容</a>属性:href:链接属性
(1)链接资源:如果访问的是网络资源,需要添加网络协议:http
举例:<ahref="#">当前页面</a><ahref="http://www.baidu.com">百度</a> 添加网络协议之后访问的是百度
(2)如果访问的是本地资源,如果浏览器可以解析的内容,
默认直接打开,如果浏览器不能解析,默认弹出下载窗口。
举例:<ahref="jingjingdeyu.gif">静静的雨</a>                              //访问本地的一个图片资源
<ahref="HTML课件.rar">HTML课件.rar</a>                         //访问本地的一个rar压缩包,可以直接下载
<ahref="HTML1.html">HTML1.html</a>                         //访问本地的html文件,也可以直接打开
name:瞄点属性
定位资源需要使用name属性,
若网站屏幕过长,可以使用name属性定位
举例:<aname="top">顶部</a>                          //顶部位置定义一个锚点
<aname="center">中间</a>                     //顶部位置定义一个锚点
  其次:在页面低端,使用超链接,返回顶部或中间
<ahref="#top">返回顶部</a><ahref="#center">返回顶部</a>
target:表示打开窗口的位置
target=“_new”始终在同一个窗口刷新
target=“_blank”始终产生一个新的窗口

image.png

点击超链接“百度”,就会跳转到百度的官方网页。



目录
相关文章
|
20天前
|
存储 移动开发 前端开发
HTML基础知识:构建网页的基石
【10月更文挑战第11天】HTML基础知识:构建网页的基石
54 0
|
23天前
|
数据安全/隐私保护 C++
【HTML】构建网页的基石
本文介绍了HTML的基本概念和常用标签,包括HTML文件的基本结构、常见标签(如标题、段落、换行、图片、超链接等)、表格与表单的使用方法,以及无语义标签div和span的特性。通过具体示例展示了如何在VS Code中快速生成HTML框架及各标签的应用场景,帮助初学者快速掌握HTML的基础知识。
41 1
【HTML】构建网页的基石
|
3天前
|
移动开发 编解码 UED
除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
|
14天前
|
JavaScript 前端开发 UED
HTML 超链接的多种类型及应用
【10月更文挑战第17天】HTML 超链接类型丰富多样,它们共同构成了网页中不可或缺的导航和交互元素。通过合理地选择和运用这些超链接类型,我们可以为用户创造更加流畅和便捷的浏览体验,提升网站的可用性和吸引力。
14 1
|
3天前
|
存储 移动开发 前端开发
|
25天前
|
Web App开发 数据采集 移动开发
HTML5新增的属性和标签
HTML5新增的属性和标签
91 0
|
前端开发 数据库
Web前端开发笔记——第二章 HTML语言 第四节 超链接标签
Web前端开发笔记——第二章 HTML语言 第四节 超链接标签
Web前端开发笔记——第二章 HTML语言 第四节 超链接标签
笔记 - 3、HTML - 超链接
超链接:     target属性:         _blank:该链接在新的窗口打开。(***)         _self:默认值,在当前页面打开。         _top:在顶层框架(当前页面)中打开。         _parent:在当前框架的上一层(当前页面)中打开。 锚链接:     首先在需要点击跳转的链接上的href属性写成#开头的一个值,   
1367 0
|
2月前
|
XML 前端开发 JavaScript
Html:CSS介绍
Html:CSS介绍
48 1
|
2月前
|
前端开发
Html:CSS的书写位置
Html:CSS的书写位置
28 0