你好,欢迎访问我的博客!登录注册 捐助本站 免责声明 畅所欲言 文章归档
当前位置:首页 - 行业资讯 - 前端教学 - 正文 君子好学,自强不息!

前端教学之HTML图像和超级链接标签---4

2017-12-26前端教学漫步白月光249°c
A+ A-

首先我给大家介绍一下图像标签的格式

图标连接标签语法:

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


属性描述

Src(必写)

URL显示图像的URL
alt文字图像替代文本
height数值和百分比图像的高

width

数值和百分比图像的宽

我先写一个简单的,附上效果图,给大家解释一下


首先上图所示,是在网页内展示了两张图片,但是大家发现没有,我的编码写法并不一样,此处我比较懒,所以路径中有中文一般我们最好路径中不要有中文。

首先,第一行编码是

<img src="E:/Study/HTML/HTML素材/0.jpg" />

大家注意,首先,<img ... />是一个单标,这种格式是错误的,<img></img>

src="..."这路径分为绝对路径相对路径、

绝对路径以本文地址为例,就是需要有盘符,需要有具体的一个图片的地址。

相对路径并没有那么严格,只需要图片文件跟网页程序再一个目录下即可,或者网页内的下级目录也可以,比如下图(大家注意观察盘符目录直接的变化)


那么大家要问了,如果在上一级,我想使用相对路径可以实现吗?

答案是可以的,只需要按照如下格式编写

<img src="../4.jpg" />

代码已经演示效果如下

如果是上级的上级目录则如下格式

<img src="../../../4.jpg(图片名)" />

关于图像路径我就说完啦,下来我给大家讲一下alt的使用,alt是当网页无法正常显示图片的时候,用文字说明来代替图像再浏览器中的显示,至于为什么无法显示图片,网速太慢,src属性错误,浏览器禁用了图像显示等。

alt写法格式如下

<img src="" alt="" />

演示如下

为了规范化,也为了利于seo,所以一般情况下,我们最好给图标标注alt属性

下来,我来给大家讲一下图片标签的另外两个属性height和width,这里跟前文一样,我们可以用px(像素)或者百分比来表示

格式(像素大小不会因为浏览器大小调整而改变,而百分比大小会按照浏览器大小来缩放)

<img src="..." height="" />

<img src="..." width="" />

下面我给大家展示一下高和宽以及对应的代码写法(修改高宽之后的效果)

未修改高与宽之前的效果

超级连接标签语法:

<a href="" >内容</a>

属性描述
href连接地址
target连接的目标窗口   _self   _blank   _top   _parent
title连接提示文字
name连接名字

href是链接地址,可以是内部或者外部连接,我们也可以用下面这种方式给连接标记一个title属性,当鼠标放上去就会有文字提示,超级连接的地址方式跟图片连接规则是一样的。

<a href="" title="">内容</a>


我们也可以设置给一个超级连接让他有超级连接的效果,但是没有超级连接的跳转,按照如下格式即可

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

效果图如下,打开可以观察一下

接下来我来给大家说一下target的使用,默认情况下,我们定义了一个超级连接,那么这个连接是在当前窗口打开我们定义的超级链接,如果我们需要使用新窗口打开超级连接,那么我们就要用到_blank属性,格式如下

<a herf="" target="_blank">内容</a>    _self是一个默认值,如果不定义target,那么模式就是在当前窗口下打开新连接,跟定义target=“_self”是一个效果

现在大家也许会发现,自己浏览网页的时候,有时候点击一个连接,既没有跳转到外部地址,也没有站内跳转,只是在跳转到当前页面下的不同位置而已,这里我们就需要了解“锚”的概念了

在一个页面内我们可以定义多个锚,定义锚的结构如下(请无视我的中文,a标签内建议用英文)

<a href="#锚名1" >目录1 </a>

<a href="#锚名2" >目录2 </a>

<a href="..." name="锚名1">内容</a>

     ....

     ....

<a href="..." name="锚名2">内容</a>

     ....

     ....

演示如下图

细心的小伙伴可能会发现,我定义三个锚位置都不一样

第一个锚的位置我是直接鞋子第一张图的a标签内,所以点击出师表的时候会跳转到第一张图片

第二个锚的位置我是写在了锦瑟的文字前面<a name="锦瑟"></a><h2>锦瑟</h2>

第三个锚我的a标签包含了关雉,<a  name="关雉"><h2>关雉</h2></a>

第二和第三种两种写法都是可以实现锚的功能,这种写法的意思就是锚只是起到一个定位的作用,并没有任何连接

那么我们可以把锚定位到外链的网页吗?答案是可以的,如下格式

页面A <a href="网页地址#锚名">...</a>

页面B <a name="锚名">...</a>

这里大家不要理会我锚后写的target="_blank"我只是为了练习。

电子邮件连接标签

<a href="mailto:邮件地址">...</a>

顾名思义,我们在邮件地址上输入自己的电子邮箱,那么别人再网页点击的时候就会弹出发送邮件,如下

<a href="mailto:361611074@qq.com">联系我</a>

文件下载连接标签

<a href="文件位置">...</a>

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
前端教学之HTML图像和超级链接标签---4

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>


飞鸟慕鱼
时间:2017-12-26 20:27:03

飞鸟博客前来参观

Windows 10 x64Windows 10 x64 Google Chrome 63.0.3239.108Google Chrome 63.0.3239.108
漫步白月光
时间:2017-12-27 09:53:49

@飞鸟慕鱼:谢谢大佬给与学习上的建议

  用户登录
  注册