HTML 和 CSS基础知识总结

HTML 和 CSS基础知识总结

1、HTML基础内容

1. H1到H6 ：标题；
2. p 段落；
3. br 换行；
4. strong或者b 加粗；
5. em或者i 倾斜；
6. del或者s 删除线；
7. ins或者u 下划线；
8. div和span 没语义只能装内容；
9. img 图片标签常用alt替换文本，title鼠标放上；
10. a 链接标签 target 包含 _self和_blank 锚点链接 a = “#abc” div id = “abc”；
11. table 表格 tr th默认加粗居中 td thead tbody 合并单元格 rowspan竖 colspan横行 cellpadding文字和表格距离 cellspacing表格自己宽度；
12. ul li 无序列表 ol li 有序列表 dl dt dd 无序列表；
13. form 表单标签 action method name；
14. input 输入标签 button checkbox file hidden image password radio reset submit text；
15. label for=“sex” input name = “sex” 点击文本聚焦斜体样式；
16. select 下拉标签 option ；
17. textarea 文本域标签 cols一行几个 rows几行开始下拉；

2、CSS基础

1.文本属性
18. 选择器
1.基础选择器 标签 class （可以多个） id 通配符选择器;
2.符合选择器 后代选择器 .nav div p a 子选择器 ul>li 并集选择器 div,p 伪类选择器：hover : 等等；
链接伪类选择器：a:hover 放上连接 a:link 未访问 a:visited 访问 a:active 点击 连写 love hate 或者lv ha
focus:focus 获得光标；
19. font文字 :
1、font-family 文字字体 font-family:“字体” 或者 font-family:字体 ， “字体”
2、font-size 文字大小px;
3、font-weight 粗细 normal bold bolder light 或者数字100-900 700基础 400 normal;
20. font-style 样式 normal italic;
21. font复合写法 style weight size/height family; 必须有size 和 family;
22. 文本颜色 color 预定义 十六进制 rgba；
23. 文本对齐 text-align center left right；
24. 装饰文本 text-decoration none underline下划线 overline上划线 line-through删除线；
25. 文本缩进 text-indent 首行缩进 * em ；
26. 行间距 line-height : px；可以设置和盒子一样大 使得文字水平居中 (行间距等于上加文字加下)
2.Emmet语法
生成HTML标签
1.标签 * 生成行数
2.父字关系 div>p
3.同级 div + p
4…demo #demo直接添加名字
5.有顺序$
6.div{}
生成CSS标签
按tab 哈哈哈
3.元素显示模式
块元素
h p div ul ol li
1.占一行
2.可以设置宽高等
3.默认宽度父类100%
4.可以放块元素和行内元素
文字类的元素 例如 p h 不准放块元素
行内元素
a strong b em i del s ins u span
1.一行多个
2.不可以设置宽高等
3.默认宽度就是本身
4.可以放文字和行内元素
a不能放a 但是a可以放块
行内块元素
input img td
1.一行多个 但是有空隙
2.默认宽度本身
3.高度和边距都可以修改
转换为行内块 inline-block; display:block 行转块 反之inline
4.背景
background-color :transparent透明;
background-image:url();
background-repeat:repeat,no-repeat,repeat-x,repeat-y; 图片是否重复
background-position 分为x和y轴 只给一个另一个默认居中 精确数值要按照x y写 可以混合使用数字加标识；
background-attachment 背景图状态 scroll滚动 fixed固定
背景复写没有固定要求；
5.CSS三大特性
层叠性、继承性（text font line 以及color）、优先级（权重 从小到大 继承或者* 标签 类 id 行内 !important）
盒子模型
上右下左
1.margin border padding content
2.border 复合写法没有要求 border-collapse覆盖线只对table有用； border会影响盒子大小；
圆角边框 border-radius ; border-top-left-radius
3.padding 会影响盒子大小；没有指定宽度不会撑大；
4.margin 块级水平居中 必须指定宽度 左右auto 行内元素和行内块元素 给其父亲加 text-align:center;
盒子嵌套外边距塌陷三种解决 父类外边距加边框 设置父类内边距 父类定义overflow:hidden;
box-shadow 盒子阴影
text-shadow 文字阴影
浮动
标准流 浮动 定位
float none left right 浮动没有原来位置并且浮动紧挨着； 浮动元素具有行内块元素特点； 浮动如果有父元素就在父元素里面浮动，并且只浮动后来的元素对前面没有影响；
清除浮动的三种方法
额外方法 在标签下面加空标签清除 clear : both
父级添加overflow属性 overflow :hidden
父级添加after伪元素 百度
父级添加双伪元素 百度
定位
可以在盒子里随意移动压着
position
static.静态定位 relative相对定位. absolute绝对定位. fixed固定定位
相对定位 移动但是保留原来位置；
绝对定位 父元素没定位 自己跑了；有定位参考最近一级；移动没有原来位置；不占位置
固定定位 不占位置；
粘性定位 sticky;
z-index 定位叠放顺序；
浮动不会压住文字；
显示与隐藏
display 隐藏之后不占位置
visibility 隐藏占位
overflow 将溢出隐藏 scroll显示滚动条 auto 需要显示滚动条
精灵图
backgroud-postion x y轴 也可以直接在backgroude的url后面直接写；
三角形
不加宽和高 直接给四个边的大小颜色；
用户鼠标样式
cursor : default pointer小手 move text not-allowed；
轮廓线
outline : 0;
文本域禁止拖动
resize:none;
图片和文字对齐
vertical-align :baseline top middle bottom;
单行显示…
white-space:nowrap;
overflow:hidden
text-overflow:ellipsis

3、HTML5新增内容

1、语义化标签

头部标签

导航标签

内容标签 定义文档某个区域

侧边栏标签

尾部标签

2、多媒体标签
video标签 mp4/webm/ogg
autoplay=autoolay 视频就绪自动播放
controls=controls 向用户显示播放控件
width=pixels 设置播放器宽度
height=pixels 设置播放器高度
loop=loop 播放完 是否循环播放
preload auto/none 是否预先加载视频
src url 视频url地址
poster Imgurl 加载等待的画面图片
muted=muted 静音播放
3、音频标签
audio标签 mp3/wav/ogg
autoplay=autoplay 自动播放
controls=controls 控件
loop=loop 循环
scr =url 播放地址
4、input类型
type=“search/url/email/date/time/month/week/number/tel/color”
5、表单属性
required=required 内容不能为空
placeholder 提示文本
autofocus=autofocus 自动聚焦属性 页面加载完成自动聚焦
autocomplete=off/on 显示输入过的内容
multiple=multiple 可以多选文件提交

4、CSS3新特性

1、选择器
（1）属性选择器
input[value]
input[type=text]
div[class^=icon]具有class 并且以icon开头
div[class$=icon]具有class 并且以icon结尾
div[class*=icon]具有class 并且含有icon
（2）结构伪类选择器
E:first-child 匹配父元素第一个子元素E
E:last-child 匹配父元素最后子元素E
E:nth-child(n) 匹配父元素第n子元素E even偶数 odd奇数 公式从0开始
E:first-of-type 指定类型E的第一个
E:last-of-type 指定类型E的最后
E:nth-of-type(n) 指定类型E的第n个
nth-child和nth-of-type区别：
第一个给所有元素遍历 里面标签一样，否则不好使
第二个选取指定标签第一个
（3）伪元素选择器
通过css创建标签，实际不存在
::before ::after行内元素
必须有content属性 权重和标签一样为1
2、盒子模型
box-sizing: content=box border-box
前提padding和border不会 超过宽度
3、滤镜 filter
blur(?px)值越大，越模糊
4、calc函数
计算宽度高度
width:calc( )
5、过渡
transiton:要过渡的属性（可以all） 花费的时间 运动曲线 何时开始
6、2D转换
transform 可以实现 移动 旋转 缩放
translate 移动类似定位 transform:translate( x , y) 不会影响别的盒子 如果是百分比移动按照自身宽度或者高度来移动 对行内元素无效
rotate旋转
transform:rotate(?deg)
transform-origin:x y设置旋转中心位置
scale缩放
transform:scale(x,y) 不会影响其他盒子、四周放大 也可以设置中心点
连续写法 transform:translate() rotate() scale() 注意顺序 要把位移放到最前面
8、动画 animation
步骤 1、定义动画 2、使用动画
@keyframes 定义动画
@keyframes move{
}
animation-name:move
animation-duration:持续时间
简写
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否方向 动画起始或者结束的状态
animation-delay:间隔时间 热点图
运动曲线 steps步长
9、3D转换
x右面是正 y下面是正 z外面是正
3D位移
transfrom:translate3d
透视
眼 物体 屏幕
从眼到屏幕是透视 近大远小
perspective 写在父盒子上面
z轴越大 看到越大
3D旋转
transform:rotateX(?deg)\Y\Z
3D呈现
transform-style:preserve 写给父级保持3D