前端知识点总结（HTML篇2）

Posted 2021-02-02 lingxiangli

html概念、全称、含义
web标准构成----结构、表现、行为
html基本结构
doctype ---- 声明文档类型
常用标签
img的属性 src alt title 含义
a的属性 href target含义
表格属性
border-collapse
table-layout:fixed
表单
button和submit区别

2.css基础
css全称 含义
css语法
样式表创建的三种方式
两种外部样式引入的区别
样式表的优先级
选择器
权重
浮动属性的取值及清除浮动的方式及各自的优劣
注释 html注释和css注释

3.css核心属性
浮动
文本属性
字体大小的表示方式及网页默认字体大小 网页单位
文本属性简写
font: font-style font-weight font-size/line-height font-family
font:12px/24px "微软雅黑";
背景属性
背景图和插入图片的区别
背景属性

4.盒模型
padding
margin
border
盒模型实际宽度的计算
padding和margin的使用场景
margin传递和重叠的问题
文本溢出的四个属性

5.元素类型
基本元素类型及特点
置换元素

6.定位、锚点、透明
定位的四个属性值及特点
辅助属性 z-index和left/right/top/bottom
包含块的概念
锚点概念及语法
透明及兼容写法

7.图片整合技术
优势
如何实现
滑动门

8.自适应宽高
最小高度及兼容
visibility:hidden和display:none区别？
伪对象操作符（伪元素）
before和after
自适应窗口的实现

9.浏览器兼容
浏览器内核及代表作
css bug
css hack
ie过滤器
filter过滤器
常见的bug及hack
img
向下三像素 block或者vertical-align
左右间距 float
ie6双边距 display:inline
ie图片边框
默认高度（最小高度）font-size:0;或者overflow:hidden
表单元素距离顶部不一样 float:left
按钮高度不一致 a模拟 外面套一层div
ie6百分比出现小数点会四舍五入 给右边的元素添加 clear:right
ie6input默认不上下居中 给line-height

10.表单高级
表单
fieldset
legend
label for属性的使用
表格
合并单元格
table-layout:fixed
隔行变色
表格标题 caption
合并行、列

数据行分组 thead tbody tfoot
css统筹（全局）
BFC概念、触发BFC的条件、应用

11.H5基础
html5新特性
语义化标签
插入媒体 声音和视频
画布 canvas
datalist
响应式布局
h5新增表单元素
email
url
number
range
color
date
h5新增表单验证
placeholder
autofocus
required
novalidate 取消验证
自动验证 min max step

12.css3
渐进式增强和优雅降级概念和区别
css3选择器
属性选择器
伪类选择器
结构性
nth
root
empty
目标
target
UI元素
enabled
disabled
checked
::selection
否定
not
动态
link/visited/hover/active/focus
层级选择器
子选择器 相邻兄弟选择器 同级通用选择器
css3文本属性
阴影
换行 word-wrap word-break
字体 @font-face
css3背景属性
background-origin 背景原点（背景图填充的相对位置）
background-clip 背景裁切
background-size
多背景属性
圆角
阴影

13.弹性盒子
怪异盒子（IE6正常模式）
弹性盒子概念及属性

14.响应式实现
概念和实现的核心：媒体查询

15.移动端页面布局
rem/em 自适应的实现
淘宝适配和网易适配

16.css渐变、过渡和2d转换
css3渐变
线性渐变
径向渐变
重复渐变
css3过渡
transition 四个属性值
2d转换
trasform
translate
scale
skew
rotate
注意多个值同时使用时的问题
transform-origin
位移和旋转同时使用的先后问题

17.3d转换和动画
3d转换
transform
translate
rotate
scale
景深：perspective
透视：backface-visibility
定义3d: transform-style:preserve-3d、flat
旋转中心：transform-origin
3d盒子

逐帧动画 animation
旋转相册的实现
过渡动画与逐帧动画的区别

手风琴效果
字体图标的实现

/修改placeholder颜色/
input::-webkit-input-placeholder {
color:red;
}
/多行超出省略/
.ee{
width: 120px;
height: 60px;
line-height: 20px;
text-overflow: ellipsis;
overflow : hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
box是i老版的怪异盒子，只能在移动端使用