HTML实体与图片标签详解-优快云博客

实体

在这里插入图片描述

<!doctype html>
<html>
	<head>
	
		<meta charset="utf-8"/>
		<title>实体</title>
	</head>
	<body>
		<!-- 在HTML中，一些如< >这种字符是不能直接使用的，
			 需要使用一些特殊的符号，这些特殊符号我们称之为实体（转义字符串）
			 浏览器解析实体时，会自动将实体转换成对应的字符
			 实体语法：
				&+实体名称
					<	&lt;
					>	&gt;
					空格 &nbsp;
					版权符号 &copy;
		-->
		a&lt;b&gt;c
		<p align="center">
			投我以木瓜，报之以琼琚。<br/>
			匪报也，&nbsp;永以为好也！<br/>
			投我以木桃，报之以琼瑶。<br/>
			匪报也，&nbsp;永以为好也！<br/>
			投我以木李，报之以琼玖。<br/>
			匪报也，&nbsp;永以为好也！<br/>
			&copy 版权所有
		</p>
	</body>

</html>

图片标签

<!doctype html>
<html>
	<head>
	
		<meta charset="utf-8"/>
		<title>图片标签</title>
	</head>
	<body>
		<!--
			使用img标签来向网页中引入一个外部图片，
				img标签也是一个自结束标签
			属性：   src Source资源		href  Hypertext Reference超文本引用
				src：设置一个外部图片路径
				alt: 可以用来设置在图片不能显示时，对图片的描述
						搜索引擎能够通过alt属性来识别不同的图片
						如果不写alt属性，则搜索引擎不会对img进行收录
				weight: 可以用来修改图片的宽度，一般使用px作为单位

				height: 可以用来修改图片的高度，一般使用px作为单位

				宽度和高度两个属性如果只设置一个，另一个也会同时调整比例大小
					如果两个值同时指定则按照你指定的值来设置
				一般除了自适应页面，不建议设置width和height

		-->
		<img src="1.jpg" alt="哈哈哈，死机了吧" height="700px" weight="1350px"/>
	</body>
</html>

路径问题：

<!doctype html>
<html>
	<head>
	
		<meta charset="utf-8"/>
		<title>图片标签</title>
	</head>
	<body>
		<!--
			src属性配置的是图片的路径，目前我们所有使用的路径全都是相对路径。
			相对路径：
				相对路径指的是相对于当前资源所在的目录的位置
				<img src="img/i.jpg" alt="哈哈哈，死机了吧" height="700px" weight="1350px"/>

			可以使用../来返回上一级目录，返回几级路径就写几个../
				<img src="../../1.jpg" alt="哈哈哈，死机了吧" height="700px" weight="1350px"/>

		-->
		<img src="../1.jpg" alt="哈哈哈，死机了吧" height="700px" weight="1350px"/>
	</body>
</html>

图片格式问题

		图片格式：
			JPGE(JPG)
				-JPGE图片支持的颜色比较多，图片可以压缩，但不支持透明
				-一般使用JPGE来保存照片等颜色丰富的图片
			GIF
				-GIF支持的颜色少，只支持简单的透明（直线透明），支持动态图
				-图片颜色单一或者是动态图时用gif
			PNG
				—PNG支持颜色多，并且支持复杂透明
				-可以用来显示颜色复杂的透明图片

		图片使用原则：
			-效果一致时，使用小的
			-效果不一致时使用好的