教师范例-1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<img src="img/1.jpg">
<hr size="10" color="red" width="50%" align="right">
<img src="img/460.jpg" width="200px" height="200px">
<img src="img/460.gif">
<img src="img/slide-1-image.png">
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/5017dafe76f2d7822544ff2896f8fb5b.png)
教师范例-2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
border-color: red;
border-width:3px ;
border-style: dotted;
width: 200px;
height: 100px;
}
div{
border-bottom:5px double blue;
border-right:5px solid red;
width: 200px;
height: 100px;
text-align: center;
}
</style>
</head>
<body>
<span>这是一个span标签</span>
<span>这是一个span标签</span>
<div>这是一个div标签</div>
<div>这是一个div标签</div>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/e76d1c5bfad8cedba9ddce998b4aecd1.png)
教师范例-3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin: 0px;padding: 0px}
.box1{
width: 400px;
height: 400px;
border:5px solid black;
margin: 50px auto;
}
.box2{
width: 200px;
height: 200px;
border:5px solid red;
}
h1{
text-align: center;
}
.wrap{
border:5px solid blue;
text-align: center;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<h1>hhhhhhhhhhhhh</h1>
</div>
<img class="wrap">
<img src="img/imag1.jpg">
</div>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c6f9e265bf3ca69526238405739ff1c4.png)
教师范例-4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
border:5px solid black;
}
div>a{
color:red;
}
</style>
</head>
<body>
<div class="box">
<h1>hhhhhhhhh
<a href="#">aaaaaaaaa</a>
</h1>
<p>pppppppppp</p>
<a href="#">aaaaaaaaa</a>
<h1>hhhhhhhhh
<a href="#">aaaaaaaaa</a>
</h1>
<p>pppppppppp</p>
<a href="#">aaaaaaaaa</a>
</div>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/317cc01db15438454b0142b7b605a1e1.png)
教师范例-5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h2{color:red}
div{text-align: center}
h1{color: blue;line-height: 20px}
span{color: red;}
.font1{ color:green;}
.font2{color: #666;}
p{word-spacing: 30px;}
</style>
</head>
<body>
<h2>要闻</h2>
<div class="box">
<h1>外边距 与父类和兄弟元素的距离</h1>
<h1>外边距 与父类和兄弟元素的距离</h1>
<h1>外边距 与父类和兄弟元素的距离</h1>
<p>支持格式:jpg静态图 png退底图 gif动态图</p>
<p>支持格式:jpg静态图 png退底图 gif动态图</p>
<h1>外边距 与父类和兄弟元素的距离</h1>
<p>支持格式:jpg静态图 png退底图 gif动态图</p>
<h1>外边距 与父类和兄弟元素的距离</h1>
<p>支持格式:jpg静态图 png退底图 gif动态图</p>
</div>
<h1><a href="#">大型<span>招聘</span>网站[猎聘网]有专属猎头的<span>招聘</span>网站</a></h1>
<p>
大型<span>招聘</span>网站[猎聘网]有专属猎头的<span>招聘</span>网站大型<span>招聘</span>网站[猎聘网]有专属猎头的<span>招聘</span>网站大型<span>招聘</span>网站[猎聘网]有专属猎头的<span>招聘</span>网站大型<span>招聘</span>网站[猎聘网]有专属猎头的<span>招聘</span>网站
</p>
<p>
<a href="#" class="font1">www.liepin.com</a>
<a href="#" class="font2"> 推广</a>
</p>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/50f88ae92d14a9619824b8307eb8b985.png)