常见html的标签含义（2）

最新推荐文章于 2022-05-10 23:36:49 发布

xc_ai_xm

最新推荐文章于 2022-05-10 23:36:49 发布

阅读量700

点赞数 2

分类专栏： html 文章标签： html 标签

本文链接：https://blog.csdn.net/qq_39104044/article/details/75432142

版权

html 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

对html图像标签的应用和路径的应用：

图像

元素：<img />

导入图像：<img src="图像的路径和名称" />

例如：<img src=" 006.jpg" width="250px" height="250px" />

浏览器支持的图像格式：

gif:支持透明色，支持动画，支持256种颜色
jpg:不支持透明色，也不支持动画，支持1670种颜色
png:支持透明色，但不支持动画，支持3中格式的颜色

图片元素可以添加的属性：
src (必须存在的)
width:设置图像宽度
height:设置图像高度
title:设置图像的注释
border:设置图像边框
<marquee>:双标签滚动元素：可以使图像在页面上滚动起来
behavior(属性名称)：设置图像的滚动方式
alternate:设置图像在页面的两端来回滚动
scrollamount:设置图像的滚动速度
direction:设置图像滚动的方向设置up和down要去掉behavior属性
onmouseover:表示当鼠标悬停时
onmouseout:表示当鼠标离开时
“this.stop()":表示停止事件
"this.start()":表示开始事件
hspace:设置图像水平间距，以像素为单位，注意：距离的设置是双向的
vspace:设置图像的垂直间距，以像素为单位注意：距离的设置是双向的

案例：

<head>
<style>
img{-webkit-transition: -webkit-transform 1s,height 1s,width 1s;}
img:hover{-webkit-transform:rotateY(-180deg);}
</style>
</head>

<marquee behavior="alternate" direction="left" scrollamount="20" οnmοuseοver="this.stop()" οnmοuseοut="this.start()"><img src=" 女神006.jpg" width="250px" height="250px" title="图片显示1243" border="3" vspace="20px" hspace="50px"/></marquee>

路径问题

1.绝对路径：从盘符开始在完整路径
例如：
图片："D:\资料\我的资料\HTML练习\006.jpg"
网页："C:\资料\我的资料\HTML练习\006.HTML"
<img src="006.jpg"/>
当网与图像在相同文件夹内时，直接引用图像名称即可。

2.相对路径：从当前位置开始的相对完整路径
例如：
图片："D:\资料\我的资料\HTML练习\图片\图片\009.jpg"
网页："C:\资料\资料\HTML练习\006.HTML"
<img src="D:\资料\我的资料\HTML练习\图片\006.jpg/>
或 <img src=" 图片\图片\006.jpg/>

连接
<a href="目标的路径地址">文本信息或者其他内容</a>
例如： <a href="www.baidu.cn">《照片墙》</a>
方式一：
<a href="www.baidu.cn">
<marquee>
<img src="D:\资料\我的资料\HTML练习\图片\图片\006.jpg" width="20%" height="20%" border="2" />
</marquee>
</a>
上述代码只有点击图像才有跳转页面
方式二：
<marquee>
<a href="www.baidu.cn">
<img src="D:\资料\我的资料\HTML练习\图片\图片\006.jpg" width="20%" height="20%" border="2" />
</a>
</marquee>

上述代码点击图像或同行空白区域时都有跳转页面

<a>元素可以添加在属性
target:设置新窗口打开方式
可以取值
"_blank" （创建新建窗口）
"_self" （自身窗口打开）
"_parent" （在父窗口中打开页面）
"_top" （在顶窗口中打开页面）

注意：
1.如果图像添加连接，IE浏览器中图像会被蓝色框线包围。
2.图像、连接居中，不能直接在元素内添加align属性
解决方法：
1）在外层套一个<p>元素，在<p>元素添加align属性
2）在外层套一个<div>元素，在<div>元素添加align属性
3）在外层套一个<center>元素
注：不建议用<h2 align="center">元素，在外层套一个<right>元素使用图像居右，是一种错误写法，没有<right>元素

锚点：
<a>文本或其他内容</a>
第一步：定义一个锚点 <a name="a1"> </a>
第二步：链接一个锚点 <a href="#a1"> </a>
例如：
<a href="#a1" name="a2" >点击回到底部</a>
<a name="a1" href="#a2" >点击回到顶部</a>