学习第二十五天

一：初识html
1.HTML 指的是超文本标记语言
2.学习不同作用的标记 标签 作用 特点 属性 不同的属性值的 作用
3.属性:帮助我们完善的展示标签
标签中添加属性,属性前添加空格
属性名 = “属性值” 属性值前后添加引号 '|" 保持一致
4.单标签|自闭和标签: 标签对中不需要内容
双标签|闭合标签 : 标签对中需要定义内容,有开始有结束
5. 定义在html页面的首行,告诉浏览器html文档的版本
声明方式,html5的声明方式
6. 告诉浏览器,用什么样的字符编码格式解析html页面中定义的内容
如果想要保证不乱码,一定要定义 charset
7.head标签对中定义的内容给浏览器看的设置
title标签 head中唯一一个能被用户看到的内容,定义页面的标题
body中定义的内容是给用户看的
重点关注body标签对中定义的内容

HTML 是用来描述网页的一种语言。
• HTML 指的是超文本标记语言 (Hyper Text Markup Language)
• HTML 不是一种编程语言，而是一种标记语言 (markup language)
• 标记语言是一套标记标签 (markup tag)
• HTML 使用标记标签来描述网页

二：常用标签
常用标签:
分类:
块元素 : 前后换行,独占一行
可以设置宽高
可以嵌套其他块元素,行内元素,普通文本
所有的块元素都有一个属性,align 对齐方式
left right center
行内元素 : 可以和其他元素一行显示
不可以设置宽高,默认由自己内容撑起
只能嵌套其他行内元素或者文本…

		a 超链接标签
			属性:
				href: 定义链接地址
					绝对地址
					相对地址
					没有地址,每点击一次刷新一次
					target 打开方式
						_blank 新页面打开
						_self 本页面打开
					title 属性
						鼠标悬停在内容上时候,显示的提示字
				特点:
					自带下划线
					链接未访问:字体蓝色
					链接已访问:字体紫色
	 
		锚链接
			a标签的href属性的值为: #+定点id属性的值
			
		p标签
			上下会有一段留白
			块元素
			内容正常显示
		div 块
			是块元素
		span 便于为元素提供样式
		h* 1~6 标题标签
			根据权重的不同,字体大小以此减小
			加粗
	br 换行
		hr 水平线
		img 图像标签
			src 图像地址  必填属性
				相对地址
				绝对地址
				路径:
					进入某个路径内部 /
					返回上一层路径 ../
			width : 宽度  ---属性是属于标签的,标签是html语言的 
			height : 高度
				以px像素为单位
			border : 变框
			title: 当鼠标悬停在内容上时候,显示的提示字
			
		列表标签:
			无序列表
				ul 定义无序列表
					type属性更换列表项标记 
				li 定义列表项
			有序列表
				ol 定义有序列表
					type属性更换列表项标记 
		表格标签 :
			table 定义表格
			tr    定义行
			th    定义表格头单元格
				加粗 居中
			td    定义表格体单元格
			
			常用属性:
				border 边框
				bordercolor 边框颜色
				bgcolor 背景颜色
				align 对其方式
				width 宽度
				height 高度
				style="border-collapse: collapse;" 双线变成单线
				colspan 跨列
				rowspan 跨行
	form 标签
			作用: 收集用户信息
			
			属性:
				name 定义表单的名字
				action 定义表单中数据的提交位置
				method :提交方式
					get 数据拼接在地址后面  默认
					post 数据在请求头中
					get和post之间的区别???
				enctype 如果存在文件上传,表单的enctype属性值修改为multipart/form-data
			
			表单元素: 定义在form标签中的元素
				大部分的表单元素使用input进行定义 type属性不同的值代表不同的表单标签
				text 普通文本框 name
				password 密码框 加密 name
				radio 单选框  name value
					一组的内容,之能选择一个,单选,name的值相同为一组
				checkbox 多选框
				file 上传文件 修改enctype的值
				hidden 隐藏框 
				submit 提交
				button 按钮 常常结合js一起使用
				reset 重置
			
			button type属性 sumbit button reset
			textarea 多行文本域
			select 下拉列表框
				option 定义下拉列表选项
			
			想要有提交数据能力的表单元素必须定义name属性 ,是后台区分前台的唯一
			
			fieldSet 文本域
			label  <label> 标签为 input 元素定义标注（标记）
			
			常用属性:
				checked 默认选中单选,多选框
				selected  默认选中下拉列表选项
				autofocus 自动聚焦
				placeholder 提示字
				required 必填属性
				multiple  多选
				readonly 只读 不能修改能提交
				disabled 禁用 不能修改不能提交

三：css层叠样式表
css层叠样式表
作用:CSS是用来美化网页用的，没有网页则CSS毫无用处，所以CSS需要依赖HTML展示其功能 。

			使用语法:
				1.选择器: 选中一个|一些元素
					基础选择器:
						元素选择器: 根据元素的标签名选中一个或一组元素
					属性选择器:
					伪类选择器:
					伪元素选择器...
					
				2.css使用语法
					选择器{
						样式1;
						样式2;  
						//样式: 样式名:样式值;
					}
					
				
				3.使用方式
					1.行内样式表:
						在行的内部使用,定义一个style属性,属性中定义样式,只作用于当前这个元素
					2.内部样式表
						在html文档head中定义style标签对,标签对中定义样式
					3.外部样式表   --推荐 
						在外部单独定义一个css文件,文件中引入样式,哪一个html需要使用,就引入link
					
					优先级: 谁离元素更近,优先显示谁

基础选择器:
元素选择器: 根据元素的标签名选中一个或一组元素
.类选择器: 根据元素的class属性的值,选中一个或一组元素
一个html页面中class属性的值可重复,可以有多个
#id选择器: 页面中id属性值不能重复,定义唯一的一个
*通配符 : 选中页面中所有的元素

		基础选择器优先级: id>class>元素选择器>通配符
	 
		后代选择器: 父级选择器 子集选择器{样式...}
			某个元素的某些子元素
		群组选择器: 通过,连接多个选择器,选中他们能够匹配到的所有元素

四：常用样式
常用样式:
背景:
背景颜色 background-color
背景图片 background-image
背景是否重复 background-repeat
默认平铺
背景图片的大小background-size
背景图片的位置
background-position
复合属性: background:颜色 图片 重复 位置;
个数,顺序可以随意改变
尺寸:
width
height
单位都是像素值
颜色:
背景颜色
字体颜色
颜色的英文单词 :red…
颜色十六进制
颜色三原色 rgb
rgba a->透明度 0完全透明 1完全不透明

		opacity :元素的透明度
			元素还是占文档流中的位置

居中问题
text-align 使用在行内元素无效
left
center
right
line-height 行高
默认一行中的内容在这一行中是垂直居中的
保证块元素中的内容的行高与块元素的高度相同，就能达到垂直居中的效果

vertical-align  块元素无效
		给同行的行内元素设置vertical-align属性控制其垂直方向的对其方式
		top middle bottom
块元素中多行文本垂直居中：
		父元素：display:table;当作表格的单元格使用
		子元素：
				display:table-cell
				vertial-align:middle;
display:
		inline:行内元素
		block:块元素
		inline-block:行内块，块元素和行内元素的特点

以上垂直水平居中都是指行内，行内块，文本的对其方式
如果想要控制块元素在其父级中的对其方式，需要利用到盒子模型

复合属性：
background:推荐大家使用
通过符合属性设置背景的相关样式，没有顺序和内容个数的要求
font:不推荐使用

	list-Style:none;去除列表项标记

五：盒子模型

盒子模型
内容+内边距+ 变框外边距
能看到的元素的大小:内容+内边距+ 变框

		内容:
			宽高都是内容的大小
		内边距:
			背景的样式会默认延伸到内边距上
			设置值(内边距+外边距的方式)
				一个值: 四边都是
				两个值: 上下  左右
				三个值: 上  右  下   左边与右边一致
				四个值: 上  右  下 左
				
				padding-left|padding-right|padding-top|padding-bottom
		变框:
			变框三要素: 宽度  样式  颜色;
			元素四边相同的样式: border: 10px solid firebrick;
			元素四边不同的样式: border-left:10px solid firebrick;
		外边距:
			元素距离周围其他元素的之间的距离
			设置值的方式与内边距一样
			块元素上下的外边距会合并
		盒子模型的使用:根据具体的需求分析:变框  宽高  变框和内容之间(内边距) 变框和其他元素之间的距离(外边距) 元素和元素之间的距离没有变框|背景的情况(内外边距都可以)