-
html中的图片标记
img--图片标记
常见的属性
- src属性--设置图片路径
绝对路径--从操作系统的指定盘中的目录开始查找图片的路径。
缺点:1.如果图片保存目录太深,图片的操作路径就会很长.
2.当我们将网页\保存图片的文件夹移动之后,这个图片的路径就变化。图片无法正常显示。
相对路径--以当前网页为参照、为中心,对外开始查找图片的路径。
1.图片与当前网页在同一个目录下【src=”图片名称”】
2.图片保存在当前网页所在目录的子文件夹中【src=”子文件夹的名称\图片名称”】
3.图片保存在当前网页所在目录的父文件夹中[..\上一层]
【src=”..\子文件夹的名称\图片名称”】
网络地址路径--【http://........】
width属性--设置图片的宽度【数字px】
height属性--设置图片的高度【数字px】
总结:1.一般情况下我们不使用绝对路径
2.如果需要的图片资源本地磁盘存在,使用相对路径
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>1.html中的图片标记</title>
</head>
<body>
<h2>1.html中的图片标记</h2>
<h2>img--图片标记</h2>
<h2>1.src属性--设置图片路径</h2>
<h2>绝对路径--从操作系统的指定盘中的目录开始查找图片的路径。</h2>
<img src="F:\20201201\HTML\20210303html(2)\code\imgs\avatar.png"/>
<h2>1.如果图片保存目录太深,图片的操作路径就会很长</h2>
<h2>2.当我们将网页\保存图片的文件夹移动之后,这个图片的路径就变化。图片无法正常显示。</h2>
<h2>相对路径--以当前网页为参照、为中心,对外开始查找图片的路径。</h2>
<img src="imgs\avatar.png"/>
<h2>1.图片与当前网页在同一个目录下【src=”图片名称”】</h2>
<img src="avatar2.png"/>
<h2>2.图片保存在当前网页所在目录的子文件夹中【src=”子文件夹的名称\图片名称”】</h2>
<img src="imgs\avatar.png"/>
<h2>3.图片保存在当前网页所在目录的父文件夹中[..\上一层]【src=”..\子文件夹的名称\图片名称”】</h2>
<img src="..\testimgs\avatar04.png"/>
<h2>3.使用网络地址【http://......】</h2>
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1051452078,2851059078&fm=26&gp=0.jpg"
width="200px" height="200px"/>
<h2>width属性--设置图片的宽度【数字px】</h2>
<h2>height属性--设置图片的高度【数字px】</h2>
</body>
</html>
- 设置网页的背景
bgcolor--设置背景颜色
background--设置背景图片
bgcolor/background属性出现在body开始标记中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设置网页背景</title>
</head>
<!--<body bgcolor="red">-->
<body background="imgs/timg.jpg">
<h1>bgcolor--设置背景颜色</h1>
<h1>background--设置背景图片</h1>
<h1>bgcolor/background属性出现在body开始标记中</h1>
</body>
</html>
3.html中的超链接【链接\锚点】
a--html中的超链接【打开其他的文件】
常用属性
1.href--设置连接地址【绝对路径/相对路径/网络地址】
2.target--属性设置被链接的资源打开方式【_blank[新窗口] _self[当前窗口]】
3.name--设置超链接的名称【本网页内部的链接】
超链接的链接方式
- 连接本地资源
- 连接网络资源
- 本网页内部的链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html中的超链接</title>
</head>
<body>
<h2>a--html中的超链接【打开其他的文件】</h2>
<h2>常用属性</h2>
<h2>1.href--设置连接地址【绝对路径/相对路径/网络地址】</h2>
<h2>2.target--属性设置被链接的资源打开方式【_blank[新窗口] _self[当前窗口]】</h2>
<h2>3.name--设置超链接的名称【本网页内部的链接】</h2>
<h2>超链接的链接方式</h2>
<h2>1.连接本地资源</h2>
<a href="test2.html" target="_blank">打开test2.html</a>
<h2>2.连接网络资源</h2>
<a href="http://news.baidu.com/">打开百度新闻</a>
<h2>3.本网页内部的链接</h2>
<hr>
<a name="mulu">目录</a>
<h1>平凡的世界 第一部 第1章</h1>
<p>1975年二、三月间,一个平平常常的日子,细蒙蒙的雨丝夹着一星半点的雪花,正纷纷淋淋地向大地飘洒着。时令已快到惊蛰,雪当然再不会存留,往往还没等落地,就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去,但那真正温暖的春天还远远地没有到来。
在这样雨雪交加的日子里,如果没有什么紧要事,人们宁愿一整天足不出户。因此,县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴的地方。冬天残留的积雪和冰溜子正在雨点的敲击下蚀化,石板街上到处都漫流着肮脏的污水。风依然是寒冷的。空荡荡的街道上,有时会偶尔走过来一个乡下人,破毡帽护着脑门,胳膊上挽一筐子土豆或萝卜,有气无力地呼唤着买主。唉,城市在这样的日子里完全丧失了生气,变得没有一点可爱之处了。
</p>
<h1>平凡的世界 第一部 第2章</h1>
<p>1975年二、三月间,一个平平常常的日子,细蒙蒙的雨丝夹着一星半点的雪花,正纷纷淋淋地向大地飘洒着。时令已快到惊蛰,雪当然再不会存留,往往还没等落地,就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去,但那真正温暖的春天还远远地没有到来。
在这样雨雪交加的日子里,如果没有什么紧要事,人们宁愿一整天足不出户。因此,县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴的地方。冬天残留的积雪和冰溜子正在雨点的敲击下蚀化,石板街上到处都漫流着肮脏的污水。风依然是寒冷的。空荡荡的街道上,有时会偶尔走过来一个乡下人,破毡帽护着脑门,胳膊上挽一筐子土豆或萝卜,有气无力地呼唤着买主。唉,城市在这样的日子里完全丧失了生气,变得没有一点可爱之处了。
</p>
<h1>平凡的世界 第一部 第3章</h1>
<p>1975年二、三月间,一个平平常常的日子,细蒙蒙的雨丝夹着一星半点的雪花,正纷纷淋淋地向大地飘洒着。时令已快到惊蛰,雪当然再不会存留,往往还没等落地,就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去,但那真正温暖的春天还远远地没有到来。
在这样雨雪交加的日子里,如果没有什么紧要事,人们宁愿一整天足不出户。因此,县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴的地方。冬天残留的积雪和冰溜子正在雨点的敲击下蚀化,石板街上到处都漫流着肮脏的污水。风依然是寒冷的。空荡荡的街道上,有时会偶尔走过来一个乡下人,破毡帽护着脑门,胳膊上挽一筐子土豆或萝卜,有气无力地呼唤着买主。唉,城市在这样的日子里完全丧失了生气,变得没有一点可爱之处了。
</p>
<h1>平凡的世界 第一部 第4章</h1>
<p>1975年二、三月间,一个平平常常的日子,细蒙蒙的雨丝夹着一星半点的雪花,正纷纷淋淋地向大地飘洒着。时令已快到惊蛰,雪当然再不会存留,往往还没等落地,就已经消失得无踪无影了。黄土高原严寒而漫长的冬天看来就要过去,但那真正温暖的春天还远远地没有到来。
在这样雨雪交加的日子里,如果没有什么紧要事,人们宁愿一整天足不出户。因此,县城的大街小巷倒也比平时少了许多嘈杂。街巷背阴的地方。冬天残留的积雪和冰溜子正在雨点的敲击下蚀化,石板街上到处都漫流着肮脏的污水。风依然是寒冷的。空荡荡的街道上,有时会偶尔走过来一个乡下人,破毡帽护着脑门,胳膊上挽一筐子土豆或萝卜,有气无力地呼唤着买主。唉,城市在这样的日子里完全丧失了生气,变得没有一点可爱之处了。
</p>
<h1>平凡的世界 第一部 第5章</h1>
<p>1975年二、三月间,一个平平常常的日子,细蒙蒙的雨丝夹着一星半点的雪花,正纷纷淋淋地向大地飘洒着。时