html-css自学笔记3（图片标签、相对路径、图片的格式、_meta标签、xHtml语法规范、内联框架）

最新推荐文章于 2024-04-13 12:25:58 发布

ABU_MOlI_ITUI

最新推荐文章于 2024-04-13 12:25:58 发布

阅读量239

点赞数

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

本文链接：https://blog.csdn.net/ABU_MOlI_ITUI/article/details/108221550

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

图片标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			使用img标签来向网页中引入一个外部图片，
			img标签也是一个自结束标签
			属性：
			src：设置一个外部图片的路径
			alt：可以用来设置在图片不能显示时，对图片的描述
				搜索引擎可以通过alt属性来识别不同的图片
				如果不写alt属性，则搜索引擎不会对img中的图片进行收录
			width：可以用来修改图片的宽度，一般使用px作为单位
			height:可以用来修改图片的高度，一般使用px作为单位
			
			宽度和高度俩个属性如果指设置一个，另一个也会同时等比例调整大小
				如果俩个值同时指定则按照你的指定的值来设置
				一般开发中除了自适应的页面，不建议设置width和height
		-->
		<img src="img/190552515.jpeg" alt="古风" width="100px" />
	</body>
</html>

相对路径

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片标签</title>
	</head>
	<body>
		<!--
			src属性配置的是图片的路径，目前我们所要使用的路径全部都是相对路径。
			相对路径：
					相对路径指相对于当前资源所在目录的位置
					<img src="abc/bcd/2.gif" alt="这是一只大松鼠"/>
					
				可以使用../来返回一级目录，返回几级目录就写几个../
				<img src="../../2.gif" alt="这是一只大松鼠"/>
		-->
	</body>
</html>

图片的格式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片标签</title>
	</head>
	<body>
		
		<!--
			图片的格式
			JPEG(JPG)
			-JPEG图片支持的颜色比较多，图片可以压缩，但是不支持透明
			-一般使用JPEG来保存照片等颜色丰富的图片
			
			GIF
			  -gif支持的颜色少，只支持简单的透明，支持动态图
			  -图片颜色单一或者是动态图时可以使用gif
			  
			  PNG
			  -PNG支持的颜色多，并且支持复杂的透明
			  -可以用来显示颜色复杂的透明的图片
			  
			  图片的使用原则：
			  效果不一致，使用效果好的
			  效果一般，使用小的
			
		-->
	</body>
</html>

_meta标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
			使用meta标签还可以用来设置网页的关键字
		-->
		<!--<meta name="keywords" content="HTML5,javascript,java...."/>-->
		<!--还可以用来指定网页的描述
			搜索引擎在检索页面时，会同时检索页面中的关键字和描述，但是这俩个值不会影响页面在搜索引擎中的排名
		-->
		<!--<meta name="description" content="发布h5，JavaScript......"  />-->
		
		<!--
			使用meta可以用来做请求的重定向
			<meta http-equiv="refresh" content="秒数；url=目标路径" />
		-->
		<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />
	</head>
	<body>
		<h2>5秒后跳转百度</h2>
	</body>
</html>

xHtml语法规范

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--1.html中不区分大小写，一般我们小写
			2.html不能注释
			3.html标签必须结构完整，要么成对出现，要么是自结束标签
			4.html标签，可以嵌套，但是不能交叉嵌套
			5.html标签中必须有值，且值必须加引号
		-->
		<p>那你好久<h2>即将来临</h2></p>
		<p>那你好久即将来临
			<!--浏览器尽最大努力解析正确页面，你所有不符合语法规范的内容
				浏览器都会为你自动修正，但是有时候会修正错误
			-->
			<!--自结束标签
				可以写/，也可以不写，一般写上
			-->
			<br />
	</body>
</html>

内联框架

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>我是内联框架</h1>
		<!--
			使用内联框架可以引入一个外部的页面
			使用iframe来创建一个内联框架
			属性：
			src:指向一个外部页面的路径，可以使用相对路径
			width：
			height
			name：可以为内联框架指定一个name属性
			在现实开发中不推荐使用内联框架，因为内联框架中的内容不会被搜索引擎所检索
		-->
		<iframe src="index.html" name="index"></iframe>
	</body>
</html>