H5入门

一：认识网页

网页中的第一行代码:=================作用：声明文档类型
（1）包含一对
	html标签中包含：
		一对======网页的头部标签。
			head中包含了一个标签=============作用：定义编码格式
				==========charset:定义的编码方式编码属性方式有：UTF-8/GB2312/BIG5`````
			head中包含了一对
			
			
			
			
		

（3）网页中的常识性问题
	网页运行浏览器：IE，chrome(谷歌)，firefox(火狐)，safari(苹果)，opra(欧朋)
	网页的保存文件格式：以.html或者.htm为后缀名的文件
	网页的注释：
（4）网页中的标签分类
	按照单双标签分类分为两类
		双标签：成对出现，有开始，有结束，双标签也叫封闭性的标签
			1)超链接标签===a标签
				案例：文字/图片
				属性：href跳转链接地址属性
					  target打开方式属性
						取值：默认值：本身打开_self
								_blank;在新窗口中打开
								_top;在顶部窗口打开
								_parent;在父级窗口打开
					  name="锚点属性"===后期演示
			2)加粗标签====b标签strong标签
				案例:加粗一加粗二
				后者更加具有语义化====见名知意
			3)倾斜标签====i标签和em标签
				案例:倾斜一倾斜二
				后者更加具有语义化====见名知意
			4)下划线标签====u标签
				案例：下划线效果
			5)删除线标签====s标签和del标签
				案例：倾斜一倾斜二
				后者更加具有语义化====见名知意
			6)角标标签======分为两个
				上角标标签===sup标签
					10m*10m=100m2
				下角标标签===sub标签
					水元素的化学方程式为：H2O
			7)字体标签=====font标签
				案例：我爱北京天安门
				属性：face="字体属性"
					  size="字体大小属性" 
						取值范围：1-7；特点：1最小，7最大
					  color="字体的颜色属性"
						可以取值为：颜色的单词，#，rgb
			8)居中标签=====center标签
				案例：
			9)段落标签=====p标签
				案例：
文本
			10)空标签，行内元素标签=====span标签
				案例：空标签
			11)盒子标签======div标签
				块级元素。
				案例：
块级元素
			12)script标签=====引入外部js文件
				案例:
			13)表格标签======table标签
				案例：===详解在后
			14)表单标签======form标签
				案例：
===详解在后
			15)列表标签=====分为三种列表
				有序列表，无序列表，自定义列表
				
				有序列表：有顺序性，列表项是以数字为开始；
					案例：

								
把冰箱门打开
								
把大象放进去
								
把冰箱门带上
							  

					属性：type="A/a/I/i/1"
								列表项显示类型
						  start="2"
								控制列表项的起始
								
								
				无序列表：没有顺序性，默认是以黑色实心圆点为开始
					案例：

								
把冰箱门打开
								
把大象放进去
								
把冰箱门带上
							  

					属性：type=""无序列表列表项显示类型
							取值：默认：disc;黑色实心圆点
										circle;空心圆
										square;黑色实心方块
										none;取消列表项
										
				自定义列表：						
					案例：

			16)预定义预排版=====pre标签
				案例:

										
			17)网页中的标题标签=====hn标签
				n的取值范围1-6
				案例:

一级标题
						
一级标题
						
一级标题
						
一级标题
						
一级标题
						
一级标题
						一级标题

				特点：h1最大，h6最小，自动加粗，自动换行，默认占宽100%
										
					
		单标签：单个出现，有开始，没有结束，单标签也叫非封闭性标签
			1)图像标签======img标签
				案例
				属性：src="图像的路径"
							路径：
								相对路径：相对于某一个文件夹下的路径显示
									案例：../image/1.png=====../作用：返回上一级
										  image/img/1.png
								绝对路径：从某一盘符下开始的一个完成的路径
									案例：C:\Program Files\Boot Camp\123.exe
					 				  http://www.baidu.com
									  
									  
					  width="图像的宽度"
					  height="图像的高度"
						注意：如果只调整图像的一个宽或高的情况下，图像会等比例缩放
					  border="1px"图像的边框属性
						注意：当图像带有超链接的时候，图像会带有1px黑色的实线边框，需要使用border="0"来取消
					  alt="这是一个汽车"   图像未正常加载情况下的提示性文字属性
						占页面空间的提示文字
					  title="这也是一个汽车的图片" 鼠标放在元素上的提示性文字属性
						不占页面空间的提示性文字
			2)换行标签
				
标签
			3)input类标签
				详解在表单中
			4)水平线标签=====hr标签
				案例：

				属性：width="500px" 可以取值为px或%
					  align=""对齐方式属性	
							取值：默认值：center
								  左对齐：left
								  右对齐：right
					  size="30px"水平线的高度属性
					  noshade 取消水平线阴影属性
					  color="red"
		
（5）网页中的标签分类，按照显示方式分类,**********************面试题*****************
	分为三类：
		行内元素：默认横向排列，不能设置宽和高
			案例：a,b,strong,i,em,s,del,u,sup,sub,span,font
		块级元素：默认总向排列，能设置宽和高，默认占宽100%;
			案例：div,p,h1-h6,hr,ol,ul,li,table,dl,dt,dd,form
		行内块级元素:默认横向排列，能够设置宽和高
			案例：img，input
			
（6）网页文件的命名
	遵循，驼峰命名法；
		遵循，以字母，数字，下划线配合使用，不能以数字开头
		index(首页) admin(用户,首页) login(登陆) shopping(购物)
		
（7）HTML代表的含义
	html是一种超文本标记语言
	是hyper text markup language

二、表格的相关介绍

（1）表格定义：是由行和列组成的展示和存储数据的元素
（2）组成表格的组成元素：行，列，单元格；最基本的元素：单元格
（3）表格标签=====table标签====双
（4）表格中的行标签=======是table row的缩写
（5）表格中的列标签=======是table data的缩写
（6）表格的基本结构

（7）表格的相关属性=====需要放在table开始标签中
	1)边框属性：border="1"
	2)宽度属性：width="800px"px单位可以省略
				宽度的取值可以为%
	3)高度属性：height="800px"px单位可以省略
	4)对齐方式属性：align="left"
		取值:默认值：left
			 居中对齐：center
			 右对齐：right
		align="center"相当于center标签能够将表格居中
	5)背景颜色：bgcolor="red"
	6)背景图片：background="图片的路径"
	7)单元格与内容之间的间距（内边距，内间距）
		属性：cellpadding="20px"
	8)单元格与单元格之间的间距
		属性：cellspacing="20px"
	9)细线边框属性(边框合并)=====CSS属性需要使用style行内样式
		style="border-collapse:collapse"
	10)表格内部横纵方向边框显示
		属性：rules
			取值：rows=====只显示横向
				  cols=====只显示纵向
	11)表格的边框线方向显示
		属性：frame
		取值：above(顶部) below(底部) hsides(垂直方向上的边框) 
			lhs(左侧的边框) Rhs(右侧的边框) vsides(水平方向上的边框) 
			box(盒子，整个方向) border(同上)
	12)表格中的文本，默认是左侧垂直居中对齐
	
（8）tr的相关属性=======需要将属性，放在tr的开始标签
	1)高度属性：height="100px"
	2)背景颜色：背景颜色：bgcolor="red"
	3)背景图片：background="图片的路径"
	4)水平对齐方式:align="left/right/center" 默认值left
	5)垂直对齐方式：valign="top/bottom/middle"
	
（9）td的相关属性=======需要将属性，放在td的开始标签	
	1)宽度属性：width="800px"px单位可以省略
				宽度的取值可以为%
				单元格的宽度会影响一列
	2)高度属性：height="800px"单位可以省略
				宽度的取值可以为%
				单元的高度影响一正行
	3)背景颜色：背景颜色：bgcolor="red"
	4)背景图片：background="图片的路径"
	5)水平对齐方式:align="left/right/center" 默认值left
	6)垂直对齐方式：valign="top/bottom/middle"
	
（10）表格的标题标签====caption标签
	位置：位于：table标签内部，第一个tr出现的位置之前
		注意：使用align属性调整，表格标题的位置align="top/bottom"谷歌浏览器和火狐浏览器
（11）表格的标题行与标题列======th标签
	th标签替换的是td
		特点：具有加粗和居中效果
（12）表格的分组标签
	表格的头部：
	表格的主体：
	表格的尾部：
	
（13）表格的复杂属性：单元格的合并	
	横向：水平方向跨列，colspan
	纵向：垂直方向跨行，rowspan