HTML学习笔记-图像和超链接

最新推荐文章于 2023-09-05 13:58:01 发布

老王笔记

最新推荐文章于 2023-09-05 13:58:01 发布

阅读量524

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/JSWANGCHANG/article/details/100542777

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

图像和超链接
1， URL
   绝对路径: https://www.baidu.com/img/bd_logo1.png
   相对路径：
           本目录： filename.png
           上层目录：../filename.png
   根相对路基：
           永远都是从根目录出开始查找资源文件
   注意： 1, url中不能出现中文
       2, 严格区分大小写

2，图像
   标记：单标记<img>
   属性：
       1, src: 指定要显示的图片路径
       2, width:宽度，以px为单位的数值，允许省略px(pixel)
       3，heigh 高度,以px为单位的数值，像素
       注意：如果高度和宽度只设定一个值，则另一个值也跟着等比例缩放

3，超链接
   标记：<a>内容</a>
   属性：
       1， href: 链接地址，相对路径或者绝对路径均可
           "#" 表示返回本页顶部
       2， target: 指定要打开新网页的方式
           _self：默认值，在自身标签页中打开新网页
           _blank: 在新标签页中打开

<!doctype html>
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
		<!--图像练习-->
		<h1 align = "Center">HTML5 &lt; Day01 &gt; </h1><hr>
		<h2>1 HTML 文档片段</h2>
		<h3>1.1 问题</h3>
		<p>创建如图-1所示的HTML页面</p>
		<div align="left">
	<!--图片是从JD首页里面down下来的，地址链接也是里面的-->
			<a href="https://pro.jd.com/mall/active/243Fn7ABGYF8TGB2Tiekm6Z8N6wz/index.html" target="_blank">
				<img src="img/dog.png" width="163px" heigh="120px" alt="">
			</a>
			<p>&nbsp;	&nbsp;	&nbsp;	&nbsp;&nbsp;	&nbsp;	&nbsp;		图1 </p>
		</div>

		
		<h3>1.2 方案</h3>
		<p>使用HTML完成效果</p>
		<h3>1.3 实现</h3>
		<p>创建index.html 完成操作...</p>
		<p align="Center">
		
		<!--图片是从JD首页里面down下来的，地址链接也是里面的-->
			<a href="https://pro.jd.com/mall/active/25YetSkaqwFdNWvbWfsLQy7svUZv/index.html?extension_id=eyJhZCI6IiIsImNoIjoiIiwic2hvcCI6IiIsInNrdSI6IiIsInRzIjoiIiwidW5pcWlkIjoie1wiY2xpY2tfaWRcIjpcIjQ4N2VkMzRlLTQ1NzEtNDUxYS05YjY5LTllYjgxYTFjOTU4NlwiLFwibWF0ZXJpYWxfaWRcIjpcIjc4NTgwNjMzM1wiLFwicG9zX2lkXCI6XCI0MjczXCIsXCJzaWRcIjpcIjg2NDllYzE5LWIwZmQtNGU5ZC1hOGI5LTk5Y2UyNjNkYzIzYlwifSJ9&jd_pop=487ed34e-4571-451a-9b69-9eb81a1c9586&abt=1" target="_self">
					<img src="img/school_open.jpg"  width="590px"  heigh="470px" alt="">
			</a>
		</p>
		<div align="Center">图2</div><hr>
 </body>
</html>

效果图

老王笔记

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML学习笔记-图像和超链接

图像和超链接1， URL 绝对路径: https://www.baidu.com/img/bd_logo1.png 相对路径：本目录： filename.png 上层目录：../filename.png 根相对路基：永远都是从根目录出开始查找资源文件注意： 1, url中不能出现...
复制链接

扫一扫