目录
一、HTML
1.含义：
2.HTML基本结构
3.HTML基本标签
4.表单
1.基本属性
2.输入标签
二、CSS
1.含义：
2.使用
(1) 行内样式
(2) 内部样式
（3）外部样式
（4）注意 ：
3.选择器
（1）基础
（2）选择器类型
4.盒子模型
（1）盒子构成：
（2）内边距与外边距与边框:
（3）浮动
（4）定位
一、HTML
1.含义：
超文本标记语言
2.HTML基本结构
<html> <head> <meta name="xx" value="xxx"/> <title>标题</title> </head> <body> <!--注释--> <h1>页面内容</h1> </body> </html>
3.HTML基本标签
标题标签: hx(x：1-6)
段落标签: p
加粗： strong
斜体: em
删除线:del
上下标: sup ,sub
分割线: hr
换行标签: br
超链接标签: a
内联框架: iframe
图片标签:img
视频: video
音频：audio
列表标签
1.无序 ul->li
2.有序 ol->li
3.自定义 dl->dt->dd
表格标签：
1. table : 表格标签
2. tr: 行标签
3. td: 单元格
4. th: 表头
5. caption: 表格标题
4.表单
1.基本属性
<form action="" method="">
</form>
注意
-action: 指定数据提交的服务器
-method: GET|POST
*GET: 不安全 , 效率高 , 数据长度不能超过3KB.
*POST: 安全 , 效率低 , 数据长度理论上无限制
作用：把数据以指定的方式提交给指定的服务器。
2.输入标签
<input type="" name="" value=""/>
type: 输入控件类型
name: 控件名称(key)
value: 控件的值
checked: 是否被选中
max:最大值
step:步长
pattern：输入内容的格式规范（正则表达式）
readonly：只读
disabled:禁用
size:控件尺寸
placeholder：文字提示内容
maxlength：最大输入长度
required：是否必填
二、CSS
1.含义：
级联样式表
2.使用
(1) 行内样式
<标签 style="color:blue;font-size: 16px">xxx</标签>
(2) 内部样式
<style type="text/css"> 标签{ 属性 : 值; } </style>
（3）外部样式
导入式
<style type="text/css"> @import url("路径/css文件名"); </style>
链接式(推荐)
<link type="text/css" rel="stylesheet" href="路径/css文件名">
（4）注意 ：
当三种方式发生冲突时，遵循 就近原则 ，即标签距离那个方式近，就使用那个方式。底层实际是因为HTML是一种 边解释边运行 的语言。
3.选择器
（1）基础
选择器: 选择对应的元素设置对应样式效果。
语法：选择器名称{
属性：属性值;
属性：属性值;
属性：属性值;
.....
}
（2）选择器类型
·元素选择器
h1 {font-family: sans-serif;}
·选择器分组
body, h2, p, table, th, td, pre, strong, em {color:gray;}
·类选择器
.important {color:red;} <h1 class="important"> This heading is very important. </h1> <p class="important"> This paragraph is very important. </p>
·ID选择器
#intro {font-weight:bold;} <p id="intro">This is a paragraph of introduction.</p>
·属性选择器
*[title] {color:red;}
·后代选择器
h1 em {color:red;} <h1>This is a <em>important</em> heading</h1> <p>This is a <em>important</em> paragraph.</p>
·子元素选择器
h1 > strong {color:red;} <h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1>
·相邻兄弟选择器
h1 + p {margin-top:50px;}
·伪类
selector : pseudo-class {property: value}
·伪元素
selector:pseudo-element {property:value;}
4.盒子模型
（1）盒子构成：
内容+内边距+边框+外边距
（2）内边距与外边距与边框:
内边距含义：内容与边框之间的距离
padding
padding-[top,bottom,left,right]: 设置指定位置的内边距
padding: 上下左右
padding: 上下 左右
padding: 上 左右 下
padding: 上 右 下 左
外边距含义：边框以外的距离
margin
margin-[top,bottom,left,right]: 设置指定位置的外边距
margin: 上下左右
margin: 上下 左右
margin: 上 左右 下
margin: 上 右 下 左
border
border-color:边框颜色
border-style:边框风格
border-width:边框粗细
（3）浮动
元素按照默认的从上到下或者从左到右顺序排序，标准文档流。
float: 1.left 2.right 3.none(默认)
clear: 清除浮动影响 1.left 2.right 3.both
（4）定位
static：默认值，没有定位
relative：相对定位
特点:
1.不脱离标准文档流，对周边元素没有影响。
2.相对于本身原来的位置定位。
absolute：绝对定位
特点：
1.脱离标准文档流，对周边元素产生影响。
2.【当祖先元素有定位，则相对于最近的祖先元素定位】。
当祖先元素没有定位，则相对于浏览器定位。
fixed：固定定位
特点：
1.脱离标准文档流，对周边元素产生影响。
2.永远相对于浏览器定位。
