HTML和CSS

1. HTML
HTML（HyperText Markup Language）就是超⽂本标记语⾔。"超⽂本"就是表示⻚⾯内可以包含⾮⽂字元素，如：图⽚、链接、⾳乐等等。

• 标签

   分类：
   	块状元素：元素都从新的⼀⾏开始，并且其后的元素也另起⼀⾏；元素的⾼度、宽度、⾏⾼以及顶和底边距都可设置；元素宽度在不设置的情况下，是它本身⽗容器的100%（和⽗元素的宽度⼀致），除⾮设定⼀个宽度。
   	⾏内元素：和其他元素都在⼀⾏上；元素的⾼度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的⽂字或图⽚的宽度，不可改变。
   	⾏内块状元素：和其他元素都在⼀⾏上；元素的⾼度、宽度、⾏⾼以及顶和底边距都可设置。
  

• 标题标签

   标题属于块级元素。
   
   
  - 
   
  标签可定义标题，标题依次递减。
   注意：h1标签可以为搜索引擎获取，便于页面在被搜索的时候检索到，但是⼀个页面最好只有⼀个h1标签，否则可能进⼊搜索引擎的黑名单。
  

• 水平线标签

   
  标签在 HTML ⻚⾯中创建⼀条⽔平线（horizontal rule）可以在视觉上将⽂档分隔成各个部分。
   注意：在HTML中，hr 标签没有结束标签。
   常⽤属性：
   	align：规定hr 元素的对⻬⽅式。
   		center居中 left向左对齐 right向右对齐 
   	width：规定hr元素的宽度。
  

• 段落标签

   段落属于块级元素。
   
  标签定义段落。
   注意：元素之间会留有空隙。
   属性：
   	align：规定段落中⽂本的对⻬⽅式。
   		left向左对齐  right向右对齐  center居中  justify左右对齐 
  

• 列表标签

   1.无序列表结构：
   	
  
   		
  
   		
  
   		......
   	
   	属性：
   		type：规定列表的项⽬符号类型。
   			dise实⼼圆（默认）  circle空⼼圆  square⽅块
   2.有序列表结构：
   	
  
   		
  
   		
  
   		 ......
   	
   	属性：
   		type：规定在列表中使⽤的标记类型。
   			1⽤数字形式表示序号（默认）
   			a⽤⼩写字⺟表示序号
   			A⽤⼤写字⺟表示序号
   			i⽤⼩写罗⻢数字表示序号
   			I（⼤写i）⽤⼤写罗⻢数字表示序号
  

• div和span

   div属于块级元素。默认占据一整行。
   span只展示标签体中的内容。
   两者均为双标签。
  

• 格式化标签

   font：字体标签。
   	属性：
   		face   设置字体风格
   		size   1-7字体大小
   		color  字体颜色
   pre：原模原样的展示标签体中的内容，被包围在 pre 元素中的⽂本通常会保留空格和换⾏符。
  

• 文本标签

   粗体   粗体   斜体 
   下划线  中划线
   下标文本  上标文本
  

• a标签

   标签定义超链接，用于从一张页面链接到另一张页面
   	属性:
   		href:  用于设置需要链接页面的地址。
   		target：设置链接打开的方式。
   			_self:  当前页面打开。
   			_blank：重新打开页面加载内容。		
   实现锚点：
   	1.目标元素 a标签
   		可以设置id属性/name属性    
   	2.目标元素 其他标签
   		设置id属性               
   	
   	3.导航元素 
   		a标签					
  

• 图片标签

   元素向网页中嵌入一幅图像。
   	属性：
   		src:  链接图片的地址（在线/本地）。
   		border:  边框。
   		width：宽度。
   		height：高度。
   		alt：当图片加载失败时显示的文本内容。
   		title：图片的标题（鼠标悬停在图片上显示）。
  

• 表格标签

   格式：
   	
   	table  表格标签
   	tr     表格的行
   	th     表格的表头信息（自动将文本居中加粗显示）
   	td     标准单元格，居左对齐
   table属性:
   	border   边框
   	width    宽度
   	height   高度
   	align    对齐方式
   	separate 分离边框（默认)
   	collapse 合并边框
   	style="border-collapse: collapse;"   设置边框的显示效果
   tr属性:
   	bgcolor 背景颜色
   	align  	单元格内容的水平对齐方式
   	valign  垂直方向的对齐方式
   td属性：	
   	colspan		规定单元格横跨的列数
   	rowspan		规定单元格横跨的行数
   字符实体：
   	空格   		空格      
   	小于号   	<	     <
   	大于号   	>		 >
   	版权号   	©		 ©
  

• 表单标签

   1.表单用于向服务器传输数据。
   
  元素是块级元素，其前后会产生折行.
   	属性:
   		action:   数据传输的地址
   		method:
   			get   默认,数据在地址栏上，安全性差，有缓存，数据量有限
   			post  数据单独封装在请求体中，安全性较好，无缓存，数据量理论无限
   		name:     表单设置名称
   		arget:    请求打开的方式		
   2.表单元素（表单元素的数据想要提交出去，必须设置name属性）
   标签
   	属性:
   		type
   		text
   		password		密码框
   		radio			单选框（需要用name属性将按钮捆绑为一组）
   		checkbox		多选框（需要用name属性将按钮捆绑为一组）
   		......
   		value   设置标签默认值
   		checked  默认选中
   			checked='checked' 默认选中
   		disabled 禁用
   			disabled='disabled'
   		readonly 只读
   			readonly='readonly'
   		maxlength 最大长度
   			maxlength=值
   		placeholder 提示语		
   button按钮
   	属性：
   			type
   			reset	重置按钮
   			button	普通按钮
   			submit  提交按钮		
   3.文本域
   标签定义多行的文本输入控件。文本区中可容纳无限数量的文本.
   	属性：
   		cols规定文本区内的可见宽度。
   		rows规定文本区内的可见行数。
   4.下拉框 （如果下拉框选项没有value值那么会将标签体中的文本内容提交出去）
   
   	属性:
   		size      显示出来的个数
   		multiple  设置多选
   
   	属性:
   		selected  默认选中
  注意：如果想使用表单文件上传的功能，必须将请求方式先改为post，设置表单属性 enctype="multipart/form-data"。
   		1.二进制表单：enctype="multipart/form-data"	
   		2.普通表单：application/x-www-form-urlencoded
  

2. CSS
层叠样式表。

格式：
	选择器名 {
		属性 : 属性值;
		.....
	}
注意：
	1.css声明要以分号;结束，声明以{}括起来。
	2.建议一行书写一个属性。
    3.若值为若干单词，则要给值加引号，如font-family: "agency fb";。
    4.CSS是⽤来美化⽹⻚⽤的，没有⽹⻚则CSS毫⽆⽤处，所以CSS需要依赖HTML展示其功能 。

• 使用

   1.行内样式
   	写在具体的标签中，通过style属性将样式设置上去，多个样式分号;隔开。
   	
  块级元素hello
   2.内部样式
   	定义在标签上的标签中。
   	
   3.外部样式
   	在外部创建一个css文件，在head标签上通过link标签引入进来。
   	
   		属性：
   			rel  当前文件与引入文件的关系
   			type  引入文件的类型
   			href  引入文件的地址	
   注意：CSS样式的优先级：就近原则。
  

• 基本选择器

   1.通⽤选择器：选中页面中所有元素。
   	*{
   	  ......
   	}
   2.id选择器：选择设置过指定id属性值的元素。
   	#id属性值 {
   		......
   	}
   3.类选择器：选择设置过指定class属性值的元素。
   	.class属性值 {
   		......
   	}
   4.元素选择器：选择指定标签。
   	元素名称 {
   	 ......
   	}
   5.分组选择器：当⼏个元素样式属性⼀样时，可以共同调⽤⼀个声明，元素之间⽤逗号分隔。
   	选择器1,选择器2,... {
   	 ......
   	}
  注意：CSS样式的优先级，是根据选择器的精确度/权重来决定的，常⻅的权重如下，权重越⼤，优先级越⾼：
   		元素选择器：1
   		类选择器：10
   	    id选择器：100
   	    内联样式：1000
   	共有属性id name class
  

• 组合选择器
  由两个选择器组成。

   1.后代选择器（派⽣选择器）：⽤于选择指定标签元素下的后辈元素，以空格分隔。
   	选择器1 选择器2 {
   	 ......
   	}
   2.⼦元素选择器：⽤于选择指定标签元素的所有第⼀代⼦元素，以⼤于号分隔。
   	选择器1 > 选择器2 {
   	 ......
   	}
   3.相邻兄弟选择器：可选择紧接在另⼀元素后的元素，且⼆者有相同⽗元素。以加号分隔。
   	选择器1 + 选择器2 {
   	 ......
   	}
   4.普通兄弟选择器：选择紧接在另⼀个元素后的所有元素，⽽且⼆者有相同的⽗元素，以波浪线分隔。
   	选择器1 ~ 选择器2 {
   	 ......
   	}
  

• 常用属性

   1.背景：
   	background-color   设置元素的背景颜色
   	background-image   设置元素的背景图像，默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。
   	background-repeat  设置是否及如何重复背景图像
   2.文本：
   	text-align        文本显示方式
   		left、right、center
   	color             设置字体颜色
   	font-family       设置字体样式  后备机制
   	text-indent       设置文本首行缩进
   		em一个相对值，例如页面的文本大小为17px,则2em就为17px*4
   	text-decoration   设置字体样式
   		underline	  对文本添加下划线。
   		overline      对文本添加上划线。 
   		line-through  对文本添加中划线，与HTML中的s和 strike 元素相同。 
   		none          关闭原本应用到元素上的所有装饰。
   	font-size         文本大小
   	font-style        字体风格，该属性最常用于规定斜体文本。 属性值：normal、italic、oblique
   		normal	      文本正常显示；
   		italic        文本斜体显示；
   		oblique       文本倾斜显示，oblique是将文字强制倾斜。
   	font-weight       字体加粗，该属性设置文本的粗细。  100-900   400正常体    700加粗   
   3.display属性：规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。
   	none              不显示元素
   	block             将元素设置为块级元素
   	inline            将元素设置为行内元素
   4.float              浮动
   	float的属性值有none、left、right。