刚刚学习了前端，总结一下。

学习前端的一些总结

刚刚开始学习，写写自己学到的知识点。第一次总结不是很好，慢慢尝试。

一.HTML初识

			1 HTML标签：作用所有HTML中标签的一个根节点。根标签
			2 head标签： 文档的头部
			文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内				  容显示给读者。注意在head标签中我们必须要设置的标签是title。
			3.title标签： 文档的标题
			作用：让页面拥有一个属于自己的标题。
			4.body标签：文档的主体  以后我们的页面内容 基本都是放到body里面的
			body元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等)

二.CSS

表格 table
目标： 能手写表格 能简单合并单元格
组成
table
里面只能放表格内部的标签 不放 div 之类的
行 tr
单元格 td
属性
宽度 和 高度 width height
边框 border
cellpadding 单元格内 内容距离边框的距离 padding
cellspacing 单元格之间的距离 margin
align=center 忘了它
表头单元格
th
一般再表格的第一行 或者 第一列
文字会加粗 而且会居中显示
表格标题
caption
位置写到table标签内部 下一行
合并单元格
跨行
rowspan
跨列
colspan
步骤
1.确定跨行还是跨列
2. 根据上而下 左而右 选择目标单元格
3.删除多余的单元格
CSS位置分类
行内样式表

内容

少用
内部样式表

head 内部
多用
外部样式表
link
真正实现了 结构和样式相分离 H 和 C
最多
CSS 样式规则
选择器{ 属性： 值; 属性： 值;}
字体样式
font-size
字体大小
别忘了加单位 px
font-family
字体
font-weight
字体加粗
normal 正常的 == 400
bold 加粗的 == 700
font-style
字体样式倾斜
normal 正常
italic 倾斜的
综合连写
有顺序关系 不能调动 必须有 font-size 和 font-family
选择器{font: font-style font-weight font-size/line-height font-family;}
文本样式
color
十六进制
#f00
#000
#fff
line-height
行高
行与行之间的距离
单位一般用px
text-align
文本水平居中对齐
text-indent
段落首行缩进2个字 text-indent：2em； 1em就是一个字的距离
文本格式化标签样式
em 和 i 倾斜
取消倾斜
font-style：normal
添加倾斜
font-style：italic
strong 和 b
取消加粗
font-weight: normal 400
添加加粗
font-weight: bold 700
u ins
删除下划线
text-decoration:none;
添加下划线
text-decoration:underline;
s 和 del
删除删除线
text-decoration:none;
添加删除线
text-decoration:line-through
CSS 选择器
基本选择器
标签选择器
可以选择某一类标签 比如 所有的div 标签
div span table input
类选择器
可以选择一个或者多个标签
.nav
类名命名
1. 不能纯数字
2. 不能数字开头
3. 尽量英文字母 + 数字
4. .div .p .table 错误的 不能以标签命名
自己起的名字
多类名选择器
ID 选择器
# 定义 id 调用
id选择器和class选择器 区别
使用次数上
class 多次重复使用 （最常用）
id 只能使用一次
通配符选择器
* 所有标签都会选择 实际开发的时候使用较少
表单
目的： 收集用户信息 可以和用户交互
表单域
form
action
把表单信息提交到xxx位置页面
method
get
post
范围区域
表单控件
input (单）
text
单行文本
password
密码框
radio
单选按钮
checkbox
复选框
submit
提交
reset
重置
image
图像提交
file
文件域
上传文件的
select
下拉列表
option 选项
textarea
文本域 多行文本
输入文字内容
button
普通按钮
label for
点击label内的文字，光标可以定位到 id 的表单内部
name
属性 名字 用来查找表单的
value
属性 值 显示再表单内 后面 会把他放到后台里面
css三大特性
层叠性
就近原则
继承性
子元素继承父元素的样式
就近原则
优先级
就近原则
子元素设置自己样式，与父元素相同时，不会继承
行内元素中优先级高于内部样式表
!importent
背景
背景色
background-color
背景图
background-image:url()
平铺
background-repeat
附着
background-attachment
盒子模型
行高
line-height
行高等于高度，垂直居中
网页布局的本质
过个盒子拼接而成，放置内容和图片等
盒子的边框
border
border-witdh
border-style
border-color
1px solid red
圆角边框
百分比
像素
border-radius
50% 圆
内边距
padding-top
padding-bottom
padding:1px 上下左右
padding:1px 2px 上下1px 左右 2px
padding：1px 2px 3px 4px 上 右 下 左
HTML +CSS 第三章
CSS选择器
基础选择器
标签选择器
标签名{}
div{} span{}
id选择器
#id名 {}
唯一的
在css不常用
类别选择器
.类名{}
书写规范
不能以数字开头
数字与字母结合
不能拼音，尽量与盒子内容相关
多类名选择器
类名1,(换行)类名2{}
好处：减少代码量
复合选择器
交集选择器
标签.类名{}
并集选择器
类名1，类名2
后代选择器
标签名 标签名
儿子、孙子、
子代选择器
类名>类名
亲儿子
伪类选择器
:link
:hover
:active
:visited
显示模式
块状元素
block
宽、高、内外边距
独占一行
div hn p ul ol li
行内元素
inline
没有宽高。
同一行上
span a del u s em
行内块元素
inline-block
有宽高
有空隙
img input
前端基础第五天复习
外边距
块级盒子居中对齐
margin: 0 auto; 核心 让盒子的 左右 改为 auto
必须设置宽度
清除内外边距
* { margin：0； padding：0；}
合并问题 （最大的为准）
上下垂直合并
避免开
嵌套的合并 塌陷
border
padding
overflow：hidden
浮动
就是为了让多个块级元素一行显示 （布局用）
标准流
正常显示的方式 块级一行显示一个 行内元素一行显示多个
浮动 是 脱标的
1. 浮动再父盒子里面 是不会超过内边距和边框的范围
2. 如果子盒子有一个浮动了，其余的子盒子都应该浮动
3. 默认的隐式转换 行内块元素
清除浮动 clear属性 （left/right/both）
1.在浮动下方元素添加新元素
2. 父级添加overflow属性方法
3. 使用after伪元素清除浮动
4. 使用before和after双伪元素清除浮动
定位(position)
1.静态定位 static
静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。
上面的话翻译成白话： 就是网页中所有元素都默认的是静态定位哦！ 其实就是标准流的特性。
在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。
2.相对定位 relative
相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。
3.绝对定位 absolute
当position属性的取值为absolute时，可以将元素的定位模式设置为绝对定位。
注意： 绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。
4.固定
fixed属性
1.固定定位的元素跟父亲没有任何关系，只认浏览器。
2.固定定位完全脱标，不占有位置，不随着滚动条滚动。
圆角边框
border-radius
border-radius： 50% 圆环
盒子阴影
box-shadow:
box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影