01.WEB-HTML之HTML标签学习总结

一 HTML相关介绍:

1.1 什么是HTML?

超文本标记语言:

超文本:比普通文本功能更加强大;

标记语言:使用一组标签对内容进行描述的语言,他不是编程语言.

1.2 为什么学习HTML?

1.3 HTML怎么使用?

          语法和规范:

          1.所有的html文件后缀名都是以.html 或者.htm结尾的,建议使用.html结尾.

         2.整个html文件分别由头部分和体组成.

         3.html标签都是由开始标签和结束标签组成(特例除外
)

         4.html标签忽略大小写,建议大家使用小写.

二 HTML相关标签学习:

2.1标题标签:

                标题标签使用,n 从 1 到 6 逐渐变小。 超过 6 的按 6 的进行显示
                特点： 加粗加黑显示， 单独占用一行。 与其它行有一定的行间距。

	
		
		
	
	
		
公司介绍

		
公司介绍

		
公司介绍

		
公司介绍

		
公司介绍

		
公司介绍

		公司介绍
	

效果如图所示:

2.2水平线标签:

         水平线标签:

---

 size属性:水平线的高度,单位像素

        noshade属性:没有阴影,取值 noshade,表示显示纯色

2.3 段落标签:

我是一段落文字
我是另一段落文字

2.4 字体标签:

        字体标签使用

        必须结合其属性才能具备一定的样式效果:

        设置颜色color:可以是英文单词,也可以是十六进制

        设置字体face:那些字体必须是你本机已有的

        设置大小的size:从1到7逐渐变大,超过7的部分按照7来显示

2.5 对字体加粗:

2.6 斜体:

三 图片标签

3.1 图片标签  

图片位置属性:src

绝对路径:带有盘符的

相对路径:

    1 如果是同级,直接写文件名称或者 ./文件名

    2 如果是上一级:  ../文件名称,  如果是多层,那么多写几个 ../

    3 如果是下一级:  写目录名称/文件名

width:设置图片宽度  单位:px

height:设置图片高度 单位:px

alt : 当图片无法正常显示出来的时候给出的提示

四列表标签

4.1 无序列表

  type:circle 空心小圆点   disc:实心小圆点  square:实心方块

	

		
CSDN
		
GOOGLE
		
GITHUB
	

4.2 有序列表

		

			
CSDN
			
baidu
			
Google
		
	

举个栗子:

		

			
CSDN
			
baidu
			
Google
		
	

显示结果

五 超链接标签

		点我跳转
	

实现效果:

六 表格标签

		

			

				
11
				
12
				
13
				
14
			
			

				
21
				
22
				
23
				
24
			
			

				
31
				
32
				
33
				
34
			
			

				
41
				
42
				
43
				
44
			
		
	

效果:

给table 中加属性:

效果:
6.2 其他属性

      cellspacing:设置边框与边框之间的距离  
    

      cellpadding:设置边框与内容之间的距离 
    

		

			

				
11
				
12
				
13
				
14
			
			

				
21
				
22
				
23
				
24
			
			

				
31
				
32
				
33
				
34
			
			

				
41
				
42
				
43
				
44
			
		

	

6.3 表格的跨行跨列

设计如下效果:

		

			

				
11
				
13
				
14
			
			

				
21
				
22
				
				
24
			
			

				
31
			
				
34
			
			

				
41
				
42
				
43
			
			
		
	

结果:

6.3.1 在列表中嵌套:

		

			

				
11
				
13
				
14
			
			

				
21
				

					

						

							
11
							
11
							
11
						
						

							
22
							
22
							
22
						
						

							
33
							
33
							
33
						
					
				
				
				
24
			
			

				
31
			
				
34
			
			

				
41
				
42
				
43
			
			
		
	

结果:

 ** 空格在HTML中 :     代表一个空格

七  框架及标签

frameset 使用注意 不能用body标签

八 form表单标签

8.1 表单标签:

所有需要提交到服务器端的表单项都必须使用

括起来

    form表单的属性:

    action:整个表单提交的位置(可以是一个页面，也可以是一个后台java代码)
    method:表单提交的方式(get/post/delete……等7种)

8.2 文本输入项:

8.3 密码输入项:

8.4 单选按钮:

8.5 多选按钮:

8.6 下拉列表:

北京
上海

8.7 文件上传项 :

8.8 文本输入域:

8.9 提交按钮:

8.10 普通按钮:

8.11 重置按钮:

8.12 隐藏项:

用于用户比较敏感的信息;其他标签属性可以查看文档即可.

举个栗子

		

			隐藏字段:

			用户名：

			密码：

			确认密码：

			性别：男
			女

			爱好：钓鱼
			打电动
			写代码

			头像：

			籍贯：
				--请选择--
				北京
				上海
				广州
			

			自我介绍：
									
				

			提交按钮：

			普通按钮：

			重置按钮：
		
	

效果如下: