关于html常见标签的使用

最新推荐文章于 2023-08-20 11:26:25 发布

逸然丶诺

最新推荐文章于 2023-08-20 11:26:25 发布

阅读量261

点赞数

分类专栏： html java 文章标签：前端

本文链接：https://blog.csdn.net/KevinSilent/article/details/95060787

版权

html 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

java

1 篇文章 0 订阅

订阅专栏

@TOChtml里常见标签的使用
常见的标签有div、p、a、h1到h6，下边的代码展示了这些标签的用法：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				width:300px;
				height:100px;
				border:10px solid;
				background-color: red;
				margin-top: 10px;
			}
			#box{
				width:400px;
				height:100px;
				border:4px dashed;
				background-color: green;
				margin: 10px 0 0 0;
			}
			.box1{
				width:350px;
				height:200px;
				border: 3px solid red;
				margin-top: 15px;
				background-size: cover;
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.box2{
				width:500px;
				height:300px;
				border:3px solid green;
				float: left;
			}
			#box2{
				width:500px;
				height:300px;
				border:5px solid blue;
				float:left;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<div id="box"></div>
		<p>相对于div块来说小一些，就是p标签可以包含在div里，但是div不能包含在p里</p>
		<a href="http://www.baidu.com">百度一下</a>
		<div>
			<img class="box1" src="img/1.jpg" />
		</div>
		<h1>111111</h1>
		<h2>222222</h2>
		<h3>333333</h3>
		<h4>444444</h4>
		<h5>555555</h5>
		<h6>666666</h6>
		<div class="box2"></div>
		<div id="box2"></div>
		<div id="box2"></div>
		<div id="box2"></div>
		<div id="box2"></div>
	</body>
</html>

代码的运行结果如下：

在这里插入图片描述

注意点1：关于id和class是对于标签块起一个名字起到区分作用时候用到的，id和class的优先级是id的优先级高于class，即在对于同一个块使用id和class定义了它同一属性的时候起作用的是id而不是class。下边是一个关于class和id的优先级的验证。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				width:300px;
				height:200px;
				margin: auto;
				background-color: green;
				border:2px red solid;
				margin-top: 10px;
			}
			#box{
				width:200px;
				height:200px;
				margin: auto;
				background-color: blue;
				border:2px red dashed;
				margin-top: 10px;
			}
		</style>
	</head>
	<body>
		<div id="box">id的块显示</div>
		<div class=box>class的块显示</div>
		<div id="box" class="box">id和class同时作用的时候的显示</div>
	</body>
</html>

测试结果如下：