HTML常用标签及CSS常用样式

一、HTML常用标签

1、基础标签

1、<h1>——<h6> 标题标签，数字越大，字号越小
2、<p>正文文本，可以分离段落
3、<em>字体倾斜
4、<strong>字体加粗
5、<hr>分割线、水平线
6、<br>换行
7、<div> 容器标签 会换行
8、<span> 容器标签 不会换行
9、<a> 超链接
		属性：href  要跳转的地址，“#”代表当前页面

2、图片标签

1、<img src="图片路径"> 插入图片标签
			属性：
				alt 图片未正常加载的提示语
				title 鼠标悬停图片之上的提示语
				width 宽度属性 （单位px）
				border-radius 边框角度

3、表格与列表标签

1、列表
	1.1：无序列表 ul
		type属性：
			none去除前面符号 
			默认实心圆
	1.2：有序列表 ol
		type属性：
			1 用数字排序（默认）
			a/A 用字母排序
			i/I 用罗马符号排序
以上两个列表都需要配合<li>标签使用，要添加其他标签要在<li>标签里用
	1.3：自定义列表 
		dl > dt > dd
			dl必须配合dt及dd使用
			dl和dt不能添加其他标签，可以添加在dd里面
			没有type属性

2、表格
	table 用来表示表格
	tr 用来表示行数
	td 用来表示一个单元格 
	th 是表头 有文字居中和加粗的效果
		rowspan  跨行 （纵向合并单元格）
		colspan   跨列 （横向合并单元格）
	border 表格线条粗细
	bgcolor  表格背景颜色  英文、16进制  RGB
	align 表格中的文字靠 "left“左  ”right“右  "center"居中
	cellspacing  单元格之间的距离
	cellpadding  文字与单元格的距离

4、表单标签

表单：在网页中负责采集信息和用户互动，接名（name）得值（value）
1、<form> 创建表单
		属性：action 发送到何处 
			 method 以何种方式发送  
2、<inpute> 标签 默认为文本形式
		属性：type：
				"password"密文形式(密码用)
				"submit"登录  
				"reset" 带有重置属性的按钮
				"placeholder"添加提示语
				"image"添加图片按钮 自带提交功能
				"button" 普通按钮，没有任何功能 
				"file" 定义文件选择
				"radio" 单选
				"checkbox"value" 值多选
			  value：值
3、<select> 标签 下拉选项标签
		<noptio> 下拉选项标签里添加内容
4、<textarea> 多行文本域
		属性：rows 文本框可见行数
			 cols 文本框横向宽度
通用属性：
		type="hidden" 隐藏域 隐藏文本框
		readonly 只读属性
		disabled 禁用属性

5、其他标签

audio 添加音乐标签
video 添加视频标签（可设置宽高）
	属性：
		src 地址
		controls 显示播放器控件
		autoplay 自动播放
		loop 循环播放

二、CSS常用样式

CSS样式不能单独运行，必须依赖于HTML才能运行

1、文字样式及基础样式

	width 宽度
	height 高度
	font-size 定义文字大小
	color 定义文字颜色
	font-style 字体风格（斜体）
	font-family 字体类型（楷体、仿宋）
	font- size 字体像素大小PX（像素）
	font-weight 字体粗细
	text-alige  文字居中center/靠左 left/靠右right
	text-indent 首行缩进 px
	line-height  行高 px（大于20）

	text-decoration （设置文本装饰）
				none 取消线条
				overline 上划线
				underline 下划线
				line-through 穿越文本的划线

2、鼠标样式

	cursor: 
		defalut 默认光标
		pointer 超链接指针
		wait 等待状态
		crosshair 鼠标呈十字状
		text 指示文档
		help 鼠标带问号 指示可用帮助

3、背景

		background-color：背景颜色
		background-image:url 背景图片地址
		background-repeat：repeat-x 水平重复
		background-repeat：repeat-y 垂直重复
		background-repeat：no-repeat不重复
		background-position：定位图片位置
				left center right 左中右
				background-size 图片比例 100%

4、列表样式

1、list-style-type
	1）无序列表
 		 disc 实体圆心（默认）
 		 circle 空心圆
  	     square 实体方心
 		 none   无列表标记
	（2）有序列表
		 1 / a / A / i  /  I
2、list-style-image 属性可以为各个列表设置项目图像
			属性值：url(图片路径)
3、list-style-position 可以用来控制列表项目符号的位置
 		outside
 		inside

5、伪类（暂时性状态）

		link 单击访问前状态
		visited 单击访问后
		hover 鼠标悬浮其上
		active 单击未释放状态

6、盒子模型

1、边框
	border-top-style 上边框样式
	border-right-style 右边框样式
	border-bottom-style 下边框样式
	border-left-style 左边框样式
	border-style 所有边框样式
				（上，右，下，左）按顺序执行
				只写两个值得话，第一个代表上下，第二个代表左右
		none 无边框
		solid 实线边框
		dashed 虚线边框
		dotten 点状边框
		double 双线边框
		hidden 与none相同，应用于解决边框冲突 隐藏边框
		
	border-width 赋予宽度
	order-color 赋予颜色
	简写按照顺时针顺序填写
	
	border 同时设置边框样式
	
2、盒子撑开
	box-sizing 属性
		content-box 宽高仅用于元素内容 不包括内边距和边框（会撑开盒子）
		border-box  盒子时间宽度和高度包括袁术内容和边距（不会撑开盒子）
	
3、边距
	margin:内边距
		auto 左右居中 自适应
	margin 外边距
		top 上
		right 右
		bottom 下
		left 左
	所有的标签都有内外边距，所有在写样式时可以先写
	*{margin：0
	  padding：0}
	将内外边距先清零 如果其他的标签需要内外边距，可以再单独加边距

7、浮动和清除浮动

	float：（浮动）
		left 向左浮动
		right 向右浮动
		
	clear：（清除浮动）
		left 清除左浮动
		right 清除右浮动
		both 清除左右浮动