HTML知识点

最新推荐文章于 2023-01-11 11:17:57 发布

数据的星辰大海

最新推荐文章于 2023-01-11 11:17:57 发布

阅读量207

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_37554565/article/details/98039530

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、实体特殊字符

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>实体</title>
	</head>
	<body>
		<!-- 
			在HTML中，一些如< >这种特殊字符是不能直接使用，
				需要使用一些特殊的符号来表示这些特殊字符，这些特殊符号我们称为实体（转义字符串）
				浏览器解析到实体时，会自动将实体转换为其对应的字符
			实体的语法：
				&实体的名字;
					<  &lt;
					>  &gt;
					空格  &nbsp;
					版权符号 &copy;
		-->
		a&lt;b&gt;c
		<p>&copy;&divide;今天天气&nbsp;&nbsp;&nbsp;好晴朗，处处好风光</p>
	</body>
</html>

二、图片标签

<!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	 width="100px" height="500px"
		-->	
		<img src="2.gif" alt="这是一个大松鼠"  width="100px" height="500px"  />
		
	</body>
</html>

三、图片路径和图片格式

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>图片标签</title>
	</head>
	<body>
		<!--
			src属性配置的是图片的路径，目前我们所要使用的路径全都是相对路径。
			相对路径：
				相对路径指相对于当前资源所在目录的位置
				<img src="abc/bcd/2.gif" alt="这是一个大松鼠"/>
				
			可以使用../来返回一级目录,返回几级目录就写几个../	
			<img src="../../img/2.gif" alt="这是一个大松鼠"/>
		-->
		<img src="../img/2.gif" alt="这是一个大松鼠"/>
		<!--
			图片的格式
				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、js等前端相关的信息" />
		
		<!-- 
			使用meta可以用来做请求的重定向
			<meta http-equiv="refresh" content="秒数;url=目标路径" />
		-->
		<meta http-equiv="refresh" content="5;url=http://www.baidu.com" />
		
	</head>
	<body>
	<!-- 我是一个注释
		<h1>这是一个标题</h1>
	-->
		<h1>5秒以后跳转页面</h1>
	</body>
</html>

五、xHtml的语法规范

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>xHtml的语法规范</title>
	</head>
	<body>
		<!--
			1.HTML中不区分大小写,但是我们一般都使用小写
		-->
		
		<!-- 
			2.HTML中的注释不能嵌套
		-->
		
		<!-- 
			3.HTML标签必须结构完整，要么成对出现，要么自结束标签
		-->
		<!-- 正确 -->
		<p>我是一个p标签</p>
		<!-- 错误 -->
		<p>我是一个p标签
		
		<!-- 
			浏览器尽最大的努力正确的解析页面，你所有的不符合语法规范的内容，
				浏览器都会为你自动修正，但是有些情况会修正错误
		-->
		<!-- 自结束标签 -->
		abc
		<br />
		bcd
		<br>
		efg
		
		<!-- 
			4.HTML标签可以嵌套，但是不能交叉嵌套
		-->
		<p>今天天气<font color="red">真不错</font><p>
		
		<p>今天天气<font color="red">真不错<p></font>
		<hr />
		<!-- 
			5.HTML标签中的属性必须有值，且值必须加引号(双引号单引号都可以)
		-->
		
		<p>今天天气<font color>真不错</font><p>
		<p>今天天气<font color='red'>真不错</font><p>
	</body>
</html>

六、内联框架

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

七、超链接

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>超链接</title>
	</head>
	<body>
		<h1>我是demo04</h1>
		<!-- 
			使用超链接可以让我们从一个页面跳转到另一个页面
			使用a标签来创建一个超链接	
			属性：
				href:指向链接跳转的目标地址,可以写一个相对路径也可以写一个完整的地址
		-->
		
		<a href="http://www.baidu.com">我是一个超链接</a> <br /><br />
		
		<a href="http://www.baidu1234567.com">我是一个超链接</a> <br /><br />
		
		<!-- 
			a标签中的target属性可以用来指定打开链接的位置
				可选值：
					_self，表示在当前窗口中打开（默认值）
					_blank，在新的窗口中打开链接
					可以设置一个内联框架的name属性值，链接将会在指定的内联框架中打开
		-->
		<a href="demo03.html" target="tom">我是一个超链接</a>
		<br /> <br />
		<iframe src="demo02.html" name="tom"></iframe>
		
		<!-- center标签中的内容，会默认在页面中居中显示 
				我们可以将要居中的元素，全都放到center中
		-->
		<center>
			<p>我是一个p标签</p>
		</center>
	</body>
</html>

八、练习

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>练习</title>
	</head>
	<body>
		<center>
			<!-- 
				跳转到id为bottom的元素所在的位置
				直接在href中写 #id属性值
			-->
			<a href="#bottom">去底部</a>
			<a href="#hello">去指定位置</a>
			<h1>这是我的个人博客</h1>
			<hr />
			<h2>东风破</h2>
			<!-- 创建超链接时，如果地址不确定可以直接写一个#作为占位符 -->
			<a href="#">周杰伦</a>
			
			<p id="hello">
				一盏离愁 孤单伫立在窗口 <br />
				我在门后 假装你人还没走 <br />
				旧地如重游 月圆更寂寞 <br /> 
				夜半清醒的烛火 不忍苛责我 <br />
				一壶漂泊 浪迹天涯难入喉 <br />
				你走之后 酒暖回忆思念瘦<br />
				水向东流 时间怎么偷<br />
				花开就一次成熟 我却错过<br />
				谁在用琵琶弹奏 一曲东风破<br />
				岁月在墙上剥落 看见小时候<br />
				犹记得那年我们都还很年幼<br />
				而如今琴声幽幽 我的等候你没听过<br />
				<img src="1.jpg" alt="图片" width="300px" /> <br />
				谁在用琵琶弹奏 一曲东风破<br />
				枫叶将故事染色 结局我看透<br />
				篱笆外的古道我牵着你走过<br />
				荒烟漫草的年头 就连分手都很沉默<br />
				一壶漂泊 浪迹天涯难入喉<br />
				你走之后 酒暖回忆思念瘦<br />
				水向东流 时间怎么偷<br />
				花开就一次成熟 我却错过<br />
				谁在用琵琶弹奏 一曲东风破<br />
				岁月在墙上剥落 看见小时候<br />
				犹记得那年我们都还很年幼<br />
				而如今琴声幽幽 我的等候你没听过<br />
				谁在用琵琶弹奏 一曲东风破<br />
				枫叶将故事染色 结局我看透<br />
				篱笆外的古道我牵着你走过<br />
				荒烟漫草的年头 就连分手都很沉默<br />
				<img src="2.jpg" alt="图片2" width="300px" /> <br />
				谁在用琵琶弹奏 一曲东风破<br />
				岁月在墙上剥落 看见小时候<br />
				犹记得那年我们都还很年幼<br />
				而如今琴声幽幽 我的等候你没听过<br />
				谁在用琵琶弹奏 一曲东风破<br />
				枫叶将故事染色 结局我看透<br />
				篱笆外的古道我牵着你走过<br />
				荒烟漫草的年头 就连分手都很沉默<br />
			</p>
			
			<hr />
			
			友情链接:<a href="#">A网站</a> | <a href="#">B网站</a> | <a href="#">C网站</a> <br /><br />
			
			<!-- 
				如果将链接地址设置为#，则点击超链接以后，会自动跳转到当前页面的顶部
				
				html中有一个属性，每一个元素都可以设置，该属性可以作为标签的唯一标识
				这个属性就是id，id属性在同一个页面中只能有一个不能重复
			-->
				<a id="bottom" href="#">回到顶部</a> | 
				
				<!-- 
					发送电子邮件的超链接，点击链接以后可以自动打开计算机中默认的邮件客户端
					href="mailto:邮件地址"
					
					当点击这个超链接时，会默认打开计算机的默认电子邮件客户端，并且将收件人设置mailto后的邮件地址
				-->
				<a href="mailto:abc@atguigu.com">联系我们</a>
		</center>
	</body>
</html>

数据的星辰大海

关注

0
点赞
踩
0

收藏

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

一、实体特殊字符<!doctype html><html> <head> <meta charset="utf-8" /> <title>实体</title> </head> <body> <!-- 在HTML中，一些如< >这种特殊字符是不能直接使用，...
复制链接

扫一扫