HTML基础知识3

最新推荐文章于 2024-08-04 21:23:42 发布

折翼天使【*-*】

最新推荐文章于 2024-08-04 21:23:42 发布

阅读量438

点赞数

文章标签： html

本文链接：https://blog.csdn.net/weixin_52188375/article/details/109513763

版权

HTML_3

1.html中的图片标记

<img />---htm中显示图片

src属性--设置图片路径

图片路径的设置有3中方式

绝对路径--从操作系统的指定盘中的目录开始查找图片的路径。

绝对路径缺点:1.如果图片保存目录太深，图片的操作路径就会很长。</h3>

2.当我们将网页\保存图片的文件夹移动之后，这个图片的路径就变化。图片无法正常显示。

相对路径--以当前网页为参照、为中心，对外开始查找图片的路径。

1.图片与当前网页在同一个目录下【src=”图片名称”】

2.图片保存在当前网页所在目录的子文件夹中【src=”子文件夹的名称\图片名称”】

3.图片保存在当前网页所在目录的父文件夹中[..\上一层]

4.【src=”..\子文件夹的名称\图片名称”】

5.网络地址路径---http:\\xxxxxxxxxxxx

6.width属性--设置图片的宽度【数字px】 height属性--设置图片的高度【数字px】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片标记</title>
	</head>
	<body>
		<h1>img--表示图片</h1>
		<h2>src属性--设置图片路径</h2>
		<h3>图片路径的设置有2中方式</h3>
		<h3>绝对路径--从操作系统的指定盘中的目录开始查找图片的路径。</h3>
		<h3>缺点:1.如果图片保存目录太深，图片的操作路径就会很长。</h3>
		<h3>2.当我们将网页\保存图片的文件夹移动之后，这个图片的路径就变化。图片无法正常显示</h3>
		<img src="F:\20201103\HTML\20201105HTML(3)\code\imgs\avatar5.png"/>
		<h3>相对路径--以当前网页为参照、为中心，对外开始查找图片的路径</h3>
		<h3>图片与当前网页在同一个目录下</h3>
		<img src="avatar04.png"/>
		<h3>图片保存在当前网页所在目录的子文件夹中</h3>
		<img src="imgs\avatar5.png"/>
		<h3>图片保存在当前网页所在目录的父文件夹中[..\上一层]</h3>
		<img src="../imgs/avatar2.png" />
		<img src="..\imgs\avatar2.png" />
		<h3>网络地址路径</h3>
		<h3>width属性--设置图片的宽度【数字px】</h3>
		<h3>height属性--设置图片的高度【数字px】</h3>
		<center>
		<img src="https://timgsa.baidu.com/timg?
		image&quality=80&size=b9999_10000&sec=
		1604550146647&di=851b9d8b62c3f01234c37
		b663cf8c638&imgtype=0&src=http%3A%2F%
		2Fb-ssl.duitang.com%2Fuploads%2Fitem%
		2F201409%2F11%2F20140911211243_3rT4u.jpeg"
		width="200px" height="200px"
		/>
		</center>
	</body>
</html>

2.设置网页的背景

我们这里的设置背景指的是设置整个网页的背景，而不是设置html中某一个元素\标记的背景。

1.设置背景颜色

https://m.wang1314.com/doc/webapp/topic/21084865.html

在body元素中添加bgcolor属性来设置背景颜色


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置网页背景颜色</title>
	</head>
	<body bgcolor="chocolate">
	</body>
</html>

2.设置背景图片

在body元素中添加background属性来设置背景图片【图片路径】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>设置网页的背景图片</title>
	</head>
	<body background="imgs\timg.jpg">
	</body>
</html>

3.html中的超链接【链接\锚点】

<a>链接显示描述</a>

1.href属性设置被连接的文件路径【绝对/相对/网络地址】

如果没有被连接的文件，那么请使用“#”,表示空连接

2.target属性设置被链接的资源打开方式【默认在同一个窗口中打开连接资源】

_blank----在新窗口中显示资源

_self-------在当前窗口中显示资源

3.name属性----设置链接名称[实现本网页内部的链接]

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接</title>
	</head>
	<body>
		<a name="top"></a>
		<h1>超链接</h1>
		<h2>a--表示网页的超链接</h2>
		<h3>href--设置链接文件路径【

最低0.47元/天解锁文章

折翼天使【*-*】

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础知识3

HTML_31.html中的图片标记<img />---htm中显示图片 src属性--设置图片路径图片路径的设置有3中方式绝对路径--从操作系统的指定盘中的目录开始查找图片的路径。绝对路径缺点:1.如果图片保存目录太深，图片的操作路径就会很长。</h3> 2.当我们将网页\保存图片的文件夹移动之后，这个图片的路径就变化。图片无法正常显示。相对路径--以当前网页为参照、为中心...
复制链接

扫一扫