一、div标签
1、在html中，<div>标签的作用是将我们的网页分割成独立的版块，同时方便浏览器进行定位。
2、div标签拥有以下几个元素：header，nav，section，aside，footer。也正是通过这些属性，我们才可以对各个部分进行定位。
a.header:文章的头部；
<div id="header">我是头部</div>b.nav：文章的标题；
<div id="nav">我是标题</div>c.section：文章的内容简介；
<div id="section">这里是文章的内容简介。</div>d.aside：文章的侧边栏（一般存储快捷链接、广告）；
<div id="aside">侧边栏内容，如快速链接、广告等。</div>e.footer：文章的底部栏（一般存储版权归属）；
<div id="footer">版权所有@wp</div>二、其它标签
接下来要给大家说的是之前在html基础标签漏掉的<a>和<img>标签。
1、<img>标签：这个标签是用来给网页插入图片，使网页不会全是文字，比较枯燥。给网页插入图片有3种方式，分别是从本地导入图片（绝对路径），从本地导入图片（相对路径），从网页导入图片。
#绝对路径是图片存储在你的电脑的位置；相对路径是指图片相对于你的html文件的位置；从网页导入图片是在网页上复制图片的链接，使浏览器能够通过该链接查询到你要导入的图片。
<p>从本地导入图片（绝对路径）</p><br>
<img src="G:\web\HTML\图片，超链接\DvEo46QWhDyhQzuPBsaP-g.jpg" width="100" height="100">
<br>
<p>从本地导入图片（相对路径）</p>
<img src="f1ec930ada86b6e7d42ee12107bd99e6.jpg" width="200" height="200"><br>
<p>从网络URL导入图片</p>
<img src="https://static.firefoxchina.cn/202205/Ej31NtZBxNfWbBN04pWXPo3xK7IHDQig9SjVDKyo.png"
width="400" height="400">
2、<a>标签： 这个标签是用来在网页中插入一个超链接，点击该插入的超链接后，可以跳转到另一个网页。
<a href="https://www.mi.com/shop">点击此处跳转至小米商城</a>
除了这样常见的跳转外，我们还可以通过超链接锚点，跳转到自己需要的页面。
<a href="#我是苹果">查看苹果图片</a><br>
<a href="#我是橘子">查看橘子图片</a><br>
<a href="#我是西瓜">查看西瓜图片</a><br>
<a name="我是苹果">我是苹果</a>
<br>
<img src="D:\新建文件夹\DvEo46QWhDyhQzuPBsaP-g.jpg" width="400" height="400">
<br>
<a name="我是橘子">我是橘子</a>
<br>
<img src="D:\新建文件夹\2017-09-19-06-57-32.jpg" width="400" height="400">
<br>
<a name="我是西瓜">我是西瓜</a>
<br>
<img src="D:\新建文件夹\AIwBCAAQAhgAIPbX1-YFKK2hw88EMNYiOP8W.jpg" width="400" height="400">三、综合练习
在学习完以上的html基础知识后，我们便可以制作出一个简单的网页了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>广东云浮中医院职业学院</h2>
<h4>欢迎来到：<ins>计算机学院</ins></h4>
<hr>
<ul type="disc">
<li><a href="">首页</a></li>
<li><a href="">关于我们</a></li>
<li><a href="">学生风采</a></li>
<li><a href="">联系方式</a></li>
</ul>
<hr>
<div id="header"><h3>最新文章</h3></div>
<div id="nav"><h4>文章标题</h4></div>
<div id="section">这里是文章的内容简介。</div>
<div id="section">可以使用<br>标签进行换行。</div>
<div id="section"><img src="云中医校徽.jpg" weidth="100" height="100"></div>
<div id="section">想了解广东云浮中医药职业学院：<a href="https://www.gdyfvccm.edu.cn/">点击这里</a></div>
<h4>侧边栏</h4>
<div id="aside">侧边栏内容，如快速链接、广告等。</div>
<table border="1">
<tr>
<th>专业</th>
<th>链接</th>
</tr>
<tr>
<td>计算机应用技术</td>
<td><a href="专业A.txt">专业A</a></td>
</tr>
<tr>
<td>数字媒体技术</td>
<td><a href="专业B.txt">专业B</a></td>
</tr>
</table>
<h5>联系我们</h5>
<form action="">
姓名：<input type="text"><br>
邮箱：<input type="text"><br>
<input type="submit" value="提交">
</form>
<hr>
<div id="footer">版权所有2024广东云浮中医药职业学院</div>
<hr>
</body>
</html>