目录

一.第一个html文件

二.HBuilder安装&基本标签

（1）基本标签1

（2）基本标签2

三.body中的常用小标签

 四.超链接标签

五.图片标签

六.表格标签

 七.表单标签

（1）分析URL

（2）常用属性

八.框架之iframe & frameset

(1)iframe

(2)frameset

九.div分块标签

example:桌面上创建一个文本文件，后缀改成html，即可。然后打开文件，书写html代码即可，编辑文件可用系统的文本编辑器或者notepad++等都可。

	
		
		
		
		
		
	
	
	
		
		This is my first HTML
	

编辑完成后保存文件，双击打开即可。

二.HBuilder安装&基本标签

官网：https://www.dcloud.io/

下载APP版就可以。解压之后不用安装直接点击HBuilderX.exe文件运行即可。

（1）基本标签1

（2）基本标签2

	
		
		
	
	
		
		【新时代-幸福美丽新边疆】西藏：代代接力守护绿色家园
		
【新时代-幸福美丽新边疆】西藏：代代接力守护绿色家园
		【新时代-幸福美丽新边疆】西藏：代代接力守护绿色家园
		【新时代-幸福美丽新边疆】西藏：代代接力守护绿色家园
		【新时代-幸福美丽新边疆】西藏：代代接力守护绿色家园
		【新时代-幸福美丽新边疆】西藏：代代接力守护绿色家园
		【新时代-幸福美丽新边疆】西藏：代代接力守护绿色家园
		
		
		
		

		
		
		
  美国太空探索技术公司(Spacex)发射的星链卫星，在今年先后两次接近中国空间站，
		对中国空间站搭载的航天员生命健康构成危险。
 
		出于安全考虑，中国空间站组合体针对有关美国卫星，两次实施“紧急避碰”。
		
		
		
  美国太空探索技术公司(Spacex)发射的星链卫星，在今年先后两次接近中国空间站，
		对中国空间站搭载的航天员生命健康构成危险。

		出于安全考虑，中国空间站组合体针对有关美国卫星，两次实施“紧急避碰”。
		
		
		
		
			近日，中央网络安全和信息化委员会印发《“十四五”国家信息化规划》（以下简称《规划》），
			对我国“十四五”时期信息化发展作出部署安排。
			《规划》是“十四五”国家规划体系的重要组成部分，是指导各地区、各部门信息化工作的行动指南。
		
		
	

效果图：

三.body中的常用小标签

	
		
		
	
	
		
		一起向未来
		
		一起向未来
		
		一起向未来
		
		一起向未来
		
		23
		
		log73
		
		一起向未来
		
		一起向未来
		
		
		一起向未来
		
		一起向未来
		

		
		
		
 
			
javaSE
			
javaEE
			
javaME
		
		
		

			
javaSE
			
javaEE
			
javaME
		
		
		

			
java
			
javaSE
			
javaEE
			
javaME
		
		
		
		一起向未来
	

效果图：

 四.超链接标签

	
		
		
	
	
		返回底部 
		

		
		
		
		body.html小测试
		
		百度主页
		
		
		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

		

        
		返回顶部
	

五.图片标签

	
		
		
	
	
		
		
		
		
		
		
		

		
		

			
			6666
			
				
				
			
			8888
		
	

六.表格标签

	
		
		
	
	
		
		

			
 
				
11
 
				
2
				
3
			
			

				
7
 
				
8
				
9
			
			

				
10
 
				
11
				
12
			
		
		

		
		

			

				
1--2
 
				
				
3
			
			

				
4
				
5
				
6--9
 
			
			

				
7
				
8
				
			
		

	

效果图：

 七.表单标签

（1）分析URL

以百度搜索java为例：

 运行之后再观察url可看到我们传送的关键字的值

 若将get改为post，则无法访问，因为post传送的参数不是跟在地址后面的！！！

（2）常用属性

	
		
		
	
	
		

			
			账号：

			密码：

			
			
			男：
			女：

			
			
			
			抽烟：
			喝酒：
			烫头：
			
			
			个人介绍：hello
			
			
			

			
			
			
			
			
			
				
				中国
				美国
				日本
				新加坡
			
			
			
			
			
			
			
			
		
	

效果图：

 

八.框架之iframe & frameset

(1)iframe

	
		
		
	
	
		
 
		    
			
有道翻译
			
淘宝
			
NBA
		
		
		
		
	

(2)frameset

iframe和frameset的区别：iframe相当于在网页里嵌套了另一个网页，而frameset相当于对整个网页进行划分。因为frameset在手机端容易错乱，所以在实际应用中用的较少，使用比较多的是iframe，HTML5中已经把frameset去掉了。

文件结构：

 

frameset.html:

	
		
		
	
	
	
		
		
		
		
		这一行分为两列，第一列占10%，第二列自动计算（即90%）
		
			
			
			
			
		
		
		
		
		
	
	
	

 left.html:

	
		
		
	
	
		left.html
		
		
		

			
有道翻译
			
淘宝
			
NBA
		
	

right.html:

	
		
		
	
	
		right.html
	

 top.html:

	
		
		
	
	
		top.html
	

 bottom.html:

	
		
		
	
	
		bottom.html
	

九.div分块标签

以京东登陆界面为例

 制作一个网页时，分析网页模块，给网页分好模块之后再进行整体的架构布局，写出一个大致的框架（都有哪些模块），然后再对各个模块分别进行细致的打磨。如上图，我用不同颜色的框框出了不同的模块。

	
		
		
		
		
			.top{
				height: 100px;
				width: 100%;
				background-color: red;
			}
			
			.tips{
				width: 100%;
				height: 40px;
				background-color: pink;
			}
			
			.center{
				width: 100%;
				height: 475px;
				background-color: palegreen;
			}
			
			.login{
				width: 350px;
				height: 400px;
				background-color: #FFFFFF;
				
				position: relative;
				left: 950px;
				top: 10px;
			}
			
			.bottom{
				width: 100%;
				height: 150px;
				background-color: paleturquoise;
			}
			
		

	
	
		
		
		
		
		
		
		
			
				
			
		
		
		
		
	

效果图：