一、图像标签
在HTML中,用<img>标签在网页中添加图像,图像以嵌入的方式添加到网页中图像标签的格式为:<img scr="图像文件名" alt="替代文字 " title="鼠标悬停提示文字 " width="图像宽度 " height="图像高度 " border="边框宽度 " hspace="水平空白 " vspace="垂直空白 " align="环绕方式或对齐方式 " />
标签中的属性说明见表,其中scr是必要的属性
属性 | 说明 |
src | 图像来源,即图像的URL路径 |
alt | 如果图像无法显示,则用文字代替 |
title | 提供额外的提示,方便用户的使用 |
width | 图像的显示宽度(像素数或百分数),通常设图像的真实大小以免是真 |
height | 图像的显示高度(像素数或百分数) |
border | 图片的边框大小,默认情况下图片没有边框,即border=0 |
hespace | 图片左侧或右侧的空白像素数(水平边距) |
vspace | 图片顶部或底部的空白像素数(垂直边距) |
align | 图像在水平(环绕方式)或垂直方向(对齐方式),包括left(图像居左)、righe(图像居右)、top(文本与图像在顶部对齐)、middle(文本与图像在中央对齐)或bottom(文本与图像在底部对齐) |
2、图像标签的例题
题目:在HTML中导入一个星空的图片
解答:首先需要构建好html的基本框架,这里运用快捷方式,输入“!”,接着在<body></body>中运用图像标签<img>就可以了,其中要在scr中输入图像的URL路径,接下来图像的位置、大小、提示等根据常用属性操作即可。
示例代码:
<p>星空图片</p>
<img src="https://img95.699pic.com/photo/40248/3133.jpg_wh860.jpg" alt="图片加载失败" width="200" height="200">
运行结果:
二、超链接
1、超链接的定义
超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一个网页,也可以是相同网页的不同位置,还可以是一个图片、一个电子邮件地址、一个文件甚至是一个应用。
2、路径
创建超链接时必须了解链接与被链接对象的路径,在网站中路径通常有3种表达方式:绝对路径(它包括通信协议名、服务器名、路径及文件名的完全路径)、根目录相对路径(它指本地站点文件夹(根目录),以“/”开头,路径是从当前站点的根目录开始算的)、文档目录相对路径(以当前文档所在的文件夹为基础开始寻找路径)。
3、创建超链接
在HTML中可以通过<a>标签创建超链接,其中<a>标签有2种使用方式:
①通过使用href属性创建指向另一个文档的超链接;
②通过使用name属性创建文档内的书签。
超链接的语法格式为:<a href="url" title="指向链接时显示的文字" target="窗口名称">热点文本</a>
注:href属性定义了这个链接所指的路径,如果一个链接不到其他位置的空超链接,可以用符号“#”代替URL
4、超链接的例题
题目:创建一个直接到百度网页的超链接
解答:跟图像标签一样,首先需要构建好html的基本框架,这里运用快捷方式,输入“!”,接着在<body></body>中运用超链接标签<a>就可以了,其中要在href输入超链接的路径
示例代码:
<p>跳转到百度的超链接</p>
<a href="https://www.baidu.com/">点击跳转百度</a>
运行结果:
5、书签链接
书签链接常用于内容庞大复杂的网页,通过单击书签链接能指向页面里的特定段落,便于浏览者快速查看网页内容。
书签就是用<a>标签对网页元素做的一个记号,锚点与链接可以在同一页面,也可以在不同页面。在实现锚点链接之前,需要先创建锚点,格式为
<a name="记号名(锚点名称)"锚(显示在页面中的文本)</a>
三、实践例题——《水果图鉴》
题目:创建一个水果书签链接(页面内书签的链接)
解答:首先需要构建好html的基本框架,这里运用快捷方式,输入“!”,接着在<body></body>中运用超链接的标签<a>,然后在href创建锚点“这是某种水果”,再然后输入热点文本:查看某某水果,最后点击“查看某某水果”,将跳转到“记号名”开始的网页元素。
为了更好的浏览,热点文本中将加入图片,这需要加入图像标签,图像标签的使用方法在最开头那里。
示例代码:
<h2>《水果图鉴》 </h2>
<a href="#这是橘子图片"><h4>查看橘子图片</h4></a>
<a href="#这是苹果图片"><h4>查看苹果图片</h4></a>
<a href="#这是香蕉图片"><h4>查看香蕉图片</h4></a>
<a name="这是橘子图片">
<p>这是橘子</p>
</a>
<img src="./水果图鉴/图片/orange.jpg" width="480rpx" height="500rpx">
<br>
<a name="这是苹果图片">
<p>这是苹果</p>
</a>
<img src="./水果图鉴/图片/apple.jpg" width="480rpx" height="500rpx">
<br>
<a name="这是香蕉图片">
<p>这是香蕉</p>
</a>
<br>
<img src="./水果图鉴/图片/banana.jpg" width="480rpx" height="500rpx">
运行结果:
四、总结
本篇文章主要介绍图像标签与超链接的基本使用方法,外加网页内的书签链接的例题,文献参考Web前端开发技术。