想要了解HTML网页设计吗？我猜你需要这篇文章-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_75096759/article/details/132611367

使用的东西：

可以用记事本来写代码，利用浏览器来浏览。

保存的方式

HTML网页扩展名是：.html或者 .htm

网页写名称一般规定为index.html或者index.htm

元素的解释及制作过程
<html>
	<head>
		<title>这是我的第一个网页</title>
	</head>

	<body>
		<p>惊天霹雳</p>
		<p>惊天霹雳</p>
	</body>
</html>
<p>:是控制段落之间的间距

<a>:代表超级链接

<a href="">百度</a>：在" "中写超级链接的链接，例如：“<a href="https://www.baidu.com/?tn=21002492_51_hao_pg">百度</a>”表示点击百度就会进入百度的超链接

<img/>:是一个非维度标记（只有头没有尾），将图片先保存，保存成.jpg文件，最后将路径写入，雷类似于只这样：<img src="C:\Users\12892\Desktop\y\2\石河子大学教务处网站的图片.jpg"/>

<tr>:生成横线

<table>:生成表格

<h1>到<h6>：生成大小不同的标题

设计页面

<ul>:表示无序列表

<li></li>;为列表

案例：

		<ul>
			<li>喜讯！我校在第九届兵团“互联网+”大学生创新创业 大赛再创...2023-08-31</li>
			<li>喜讯！我校学子在2023年第十四届中国大学生物理学术竞赛（作...2023-08-28</li>
			<li>我院学生在第十六届全国大学生“成图大赛”再创佳绩2023-08-28</li>
			<li>热烈祝贺陈雪玲老师和张佳老师荣获第三届全国高校教师教学创...2023-08-28</li>
			<li>喜讯！我校在第十四届中国大学生物理学术竞赛（西北赛区）荣...2023-07-17</li>
			<li>法学院召开暑期本科教学审核评估工作动员会2023-07-14</li>
			<li>法学院开展2022-2023学年青年教师教学汇报暨第二十一届青年...2023-07-14</li>
			<li>药学院中药学开展吉木萨尔县药用植物调研活动2023-07-11</li>;
			<li>药学院中药学开展吉木萨尔县药用植物调研活动2023-07-11</li>;
			<li>水利水电工程系赴红山水库开展实践教学活动2023-06-25</li>;
		<ul>

呈现效果为：

如果想添加超级链接

<ul>
			<li><a href="https://jwc.shzu.edu.cn/2023/0831/c785a191417/page.htm">喜讯！我校在第九届兵团“互联网+”大学生创新创业 大赛再创...2023-08-31</a></li>
			<li><a href=https://jwc.shzu.edu.cn/2023/0828/c785a191311/page.htm">喜讯！我校学子在2023年第十四届中国大学生物理学术竞赛（作...2023-08-28</a></li>
			<li><a href=https://jwc.shzu.edu.cn/2023/0828/c785a191288/page.htm">我院学生在第十六届全国大学生“成图大赛”再创佳绩2023-08-28</a></li>
			<li>热烈祝贺陈雪玲老师和张佳老师荣获第三届全国高校教师教学创...2023-08-28</li>
			<li>喜讯！我校在第十四届中国大学生物理学术竞赛（西北赛区）荣...2023-07-17</li>
			<li>法学院召开暑期本科教学审核评估工作动员会2023-07-14</li>
			<li>法学院开展2022-2023学年青年教师教学汇报暨第二十一届青年...2023-07-14</li>
			<li>药学院中药学开展吉木萨尔县药用植物调研活动2023-07-11</li>
			<li>药学院中药学开展吉木萨尔县药用植物调研活动2023-07-11</li>
			<li>水利水电工程系赴红山水库开展实践教学活动2023-06-25</li>
		<ul>

元素选择器

控制照片大小，适用于网页只有1张图片
<style>
			img{width:300px;height:200px;border1px}
		</style>
实现效果：

控制文字颜色和大小

p{color:bluse;font-size:34px}

<html>
	<head>
		<title>这是我的第一个网页</title>
		<style>
			img{width:300px;height:200px;border1px}
			#p1{color:blue;font-size:34px}
			#p2{color:red;font-size:34px}
		</style>
	</head>


	<body>
		<p id="P1">惊天霹雳</p>
		<p id="P2">惊天霹雳</p>
		<a href="https://www.baidu.com/?tn=21002492_51_hao_pg">百度</a>
		<img src="C:\Users\12892\Desktop\y\2\石河子大学教务处网站的图片.jpg"/>
		<ul>
			<li><a href="https://jwc.shzu.edu.cn/2023/0831/c785a191417/page.htm">喜讯！我校在第九届兵团“互联网+”大学生创新创业 大赛再创...2023-08-31</a></li>
			<li><a href=https://jwc.shzu.edu.cn/2023/0828/c785a191311/page.htm">喜讯！我校学子在2023年第十四届中国大学生物理学术竞赛（作...2023-08-28</a></li>
			<li><a href=https://jwc.shzu.edu.cn/2023/0828/c785a191288/page.htm">我院学生在第十六届全国大学生“成图大赛”再创佳绩2023-08-28</a></li>
			<li>热烈祝贺陈雪玲老师和张佳老师荣获第三届全国高校教师教学创...2023-08-28</li>
			<li>喜讯！我校在第十四届中国大学生物理学术竞赛（西北赛区）荣...2023-07-17</li>
			<li>法学院召开暑期本科教学审核评估工作动员会2023-07-14</li>
			<li>法学院开展2022-2023学年青年教师教学汇报暨第二十一届青年...2023-07-14</li>
			<li>药学院中药学开展吉木萨尔县药用植物调研活动2023-07-11</li>
			<li>药学院中药学开展吉木萨尔县药用植物调研活动2023-07-11</li>
			<li>水利水电工程系赴红山水库开展实践教学活动2023-06-25</li>
		</ul>


	</body>
</html>

实现效果如下：

盒子的制作

<div></div>：块，连在一起使用，是一个盒子

使用的代码格式：


//HTML 代码：大盒子包小盒子像洋葱皮一样

<div class="container">
  <div class="box-small"></div>
  <div class="box-large"></div>
</div>

//CSS 代码：控制盒子大小和颜色

.container {display: flex;}
.box-small {width: 100px;background-color: red;}
.box-large {width: 200px;background-color: blue;}

使用的案例

<div class="header">
		<img src="C:\Users\12892\Desktop\y\2\石河子大学教务处网站的图片.jpg"/>
</div>


<div class="container">
	<div class="box-small">
		<ul>
			<li><a href="https://jwc.shzu.edu.cn/2023/0831/c785a191417/page.htm">喜讯！我校在第九届兵团“互联网+”大学生创新创业 大赛再创...2023-08-31</a></li>
			<li><a href=https://jwc.shzu.edu.cn/2023/0828/c785a191311/page.htm">喜讯！我校学子在2023年第十四届中国大学生物理学术竞赛（作...2023-08-28</a></li>
			<li><a href=https://jwc.shzu.edu.cn/2023/0828/c785a191288/page.htm">我院学生在第十六届全国大学生“成图大赛”再创佳绩2023-08-28</a></li>
			<li>热烈祝贺陈雪玲老师和张佳老师荣获第三届全国高校教师教学创...2023-08-28</li>
			<li>喜讯！我校在第十四届中国大学生物理学术竞赛（西北赛区）荣...2023-07-17</li>
			<li>法学院召开暑期本科教学审核评估工作动员会2023-07-14</li>
			<li>法学院开展2022-2023学年青年教师教学汇报暨第二十一届青年...2023-07-14</li>
			<li>药学院中药学开展吉木萨尔县药用植物调研活动2023-07-11</li>
			<li>药学院中药学开展吉木萨尔县药用植物调研活动2023-07-11</li>
			<li>水利水电工程系赴红山水库开展实践教学活动2023-06-25</li>
		</ul>
	</div>
	<div class="box-large1">
		<ul>
			<li><a href="https://jwc.shzu.edu.cn/2023/0831/c785a191417/page.htm">喜讯！我校在第九届兵团“互联网+”大学生创新创业 大赛再创...2023-08-31</a></li>
			<li><a href=https://jwc.shzu.edu.cn/2023/0828/c785a191311/page.htm">喜讯！我校学子在2023年第十四届中国大学生物理学术竞赛（作...2023-08-28</a></li>
			<li><a href=https://jwc.shzu.edu.cn/2023/0828/c785a191288/page.htm">我院学生在第十六届全国大学生“成图大赛”再创佳绩2023-08-28</a></li>
			<li>热烈祝贺陈雪玲老师和张佳老师荣获第三届全国高校教师教学创...2023-08-28</li>
			<li>喜讯！我校在第十四届中国大学生物理学术竞赛（西北赛区）荣...2023-07-17</li>
			<li>法学院召开暑期本科教学审核评估工作动员会2023-07-14</li>
			<li>法学院开展2022-2023学年青年教师教学汇报暨第二十一届青年...2023-07-14</li>
			<li>药学院中药学开展吉木萨尔县药用植物调研活动2023-07-11</li>
			<li>药学院中药学开展吉木萨尔县药用植物调研活动2023-07-11</li>
			<li>水利水电工程系赴红山水库开展实践教学活动2023-06-25</li>
		</ul>
	</div>
	<div class="box-large1">

		<ul>
			<li><a href="https://jwc.shzu.edu.cn/2023/0831/c785a191417/page.htm">喜讯！我校在第九届兵团“互联网+”大学生创新创业 大赛再创...2023-08-31</a></li>
			<li><a href=https://jwc.shzu.edu.cn/2023/0828/c785a191311/page.htm">喜讯！我校学子在2023年第十四届中国大学生物理学术竞赛（作...2023-08-28</a></li>
			<li><a href=https://jwc.shzu.edu.cn/2023/0828/c785a191288/page.htm">我院学生在第十六届全国大学生“成图大赛”再创佳绩2023-08-28</a></li>
			<li>热烈祝贺陈雪玲老师和张佳老师荣获第三届全国高校教师教学创...2023-08-28</li>
			<li>喜讯！我校在第十四届中国大学生物理学术竞赛（西北赛区）荣...2023-07-17</li>
			<li>法学院召开暑期本科教学审核评估工作动员会2023-07-14</li>
			<li>法学院开展2022-2023学年青年教师教学汇报暨第二十一届青年...2023-07-14</li>
			<li>药学院中药学开展吉木萨尔县药用植物调研活动2023-07-11</li>
			<li>药学院中药学开展吉木萨尔县药用植物调研活动2023-07-11</li>
			<li>水利水电工程系赴红山水库开展实践教学活动2023-06-25</li>
		</ul>
	</div>
</div>

最终代码：

<html>
	<head>
		<title>这是我的第一个网页</title>
		<style>
			.container {display: flex;}
			.box-small {width: 600px;background-color: gray;}
			.box-large1 {width: 400px;background-color: light gray;}
			.box-large2 {width: 400px;background-color: gray;}
			#p1{color:blue;font-size:34px}
			#p2{color:red;font-size:34px}
		</style>
	</head>


	<body>
<div class="header">
		<img src="C:\Users\12892\Desktop\y\2\石河子大学教务处网站的图片.jpg"/>
</div>


<div class="container">
	<div class="box-small">
		<ul>
			<li><a href="https://jwc.shzu.edu.cn/2023/0831/c785a191417/page.htm">喜讯！我校在第九届兵团“互联网+”大学生创新创业 大赛再创...2023-08-31</a></li>
			<li><a href=https://jwc.shzu.edu.cn/2023/0828/c785a191311/page.htm">喜讯！我校学子在2023年第十四届中国大学生物理学术竞赛（作...2023-08-28</a></li>
			<li><a href=https://jwc.shzu.edu.cn/2023/0828/c785a191288/page.htm">我院学生在第十六届全国大学生“成图大赛”再创佳绩2023-08-28</a></li>
			<li>热烈祝贺陈雪玲老师和张佳老师荣获第三届全国高校教师教学创...2023-08-28</li>
			<li>喜讯！我校在第十四届中国大学生物理学术竞赛（西北赛区）荣...2023-07-17</li>
			<li>法学院召开暑期本科教学审核评估工作动员会2023-07-14</li>
			<li>法学院开展2022-2023学年青年教师教学汇报暨第二十一届青年...2023-07-14</li>
			<li>药学院中药学开展吉木萨尔县药用植物调研活动2023-07-11</li>
			<li>药学院中药学开展吉木萨尔县药用植物调研活动2023-07-11</li>
			<li>水利水电工程系赴红山水库开展实践教学活动2023-06-25</li>
		</ul>
	</div>
	<div class="box-large1">
		<ul>
			<li><a href="https://jwc.shzu.edu.cn/2023/0831/c785a191417/page.htm">喜讯！我校在第九届兵团“互联网+”大学生创新创业 大赛再创...2023-08-31</a></li>
			<li><a href=https://jwc.shzu.edu.cn/2023/0828/c785a191311/page.htm">喜讯！我校学子在2023年第十四届中国大学生物理学术竞赛（作...2023-08-28</a></li>
			<li><a href=https://jwc.shzu.edu.cn/2023/0828/c785a191288/page.htm">我院学生在第十六届全国大学生“成图大赛”再创佳绩2023-08-28</a></li>
			<li>热烈祝贺陈雪玲老师和张佳老师荣获第三届全国高校教师教学创...2023-08-28</li>
			<li>喜讯！我校在第十四届中国大学生物理学术竞赛（西北赛区）荣...2023-07-17</li>
			<li>法学院召开暑期本科教学审核评估工作动员会2023-07-14</li>
			<li>法学院开展2022-2023学年青年教师教学汇报暨第二十一届青年...2023-07-14</li>
			<li>药学院中药学开展吉木萨尔县药用植物调研活动2023-07-11</li>
			<li>药学院中药学开展吉木萨尔县药用植物调研活动2023-07-11</li>
			<li>水利水电工程系赴红山水库开展实践教学活动2023-06-25</li>
		</ul>
	</div>
	<div class="box-large2">

		<ul>
			<li><a href="https://jwc.shzu.edu.cn/2023/0831/c785a191417/page.htm">喜讯！我校在第九届兵团“互联网+”大学生创新创业 大赛再创...2023-08-31</a></li>
			<li><a href=https://jwc.shzu.edu.cn/2023/0828/c785a191311/page.htm">喜讯！我校学子在2023年第十四届中国大学生物理学术竞赛（作...2023-08-28</a></li>
			<li><a href=https://jwc.shzu.edu.cn/2023/0828/c785a191288/page.htm">我院学生在第十六届全国大学生“成图大赛”再创佳绩2023-08-28</a></li>
			<li>热烈祝贺陈雪玲老师和张佳老师荣获第三届全国高校教师教学创...2023-08-28</li>
			<li>喜讯！我校在第十四届中国大学生物理学术竞赛（西北赛区）荣...2023-07-17</li>
			<li>法学院召开暑期本科教学审核评估工作动员会2023-07-14</li>
			<li>法学院开展2022-2023学年青年教师教学汇报暨第二十一届青年...2023-07-14</li>
			<li>药学院中药学开展吉木萨尔县药用植物调研活动2023-07-11</li>
			<li>药学院中药学开展吉木萨尔县药用植物调研活动2023-07-11</li>
			<li>水利水电工程系赴红山水库开展实践教学活动2023-06-25</li>
		</ul>
	</div>
</div>


	</body>
</html>

最终呈现效果：