前端知识点总结(HTML篇2)

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老版的怪异盒子,只能在移动端使用

原文地址:https://www.cnblogs.com/LingXiangLi/p/10252910.html

时间: 2024-07-30 17:49:07

前端知识点总结(HTML篇2)的相关文章

前端知识点回顾——Javascript篇(六)

fetch 在原生ajax+es6promise的基础上封装的一个语法糖,返回promise对象. fetch(url, initObj) .then(res=>res.json()) .then(data=>{ //这里得到返回的json对象,可进行操作 }) .cateh(err){ console.log(err); }; //initObj { body: JSON.stringify(data), // must match 'Content-Type' header cache:

前端知识点总结(CSS篇)

圣杯布局 CSS合并方法 盒子模型 CSS定位 CSS动画原理 CSS3动画(简单动画的实现,如旋转等) CSS不同选择器的权重(CSS层叠的规则) flexbox布局 块级元素和行内元素的异同 CSS在性能优化方面的实践(比方说选择器的效率等) CSS打包压缩的方法 使用CSS预处理的优缺点(比方说Sass和Compass等) { box-sizing: border-box; }这条CSS规则是干嘛的,有什么优点 CSS浮动的原理及清除浮动的方法及优缺点 CSS垂直居中的方法 base64的

前端知识点总结1

前端知识点总结 WendySays 关注 2016.10.14 17:10* 字数 1074 阅读 759评论 3喜欢 8 知识框架 知识框架图,每个部分有很多书推荐https://github.com/JacksonTian/fks Paste_Image.png 浏览器工作原理 How browsers work 浏览器工作原理相关的译文 浏览器渲染浏览器的渲染原理简介 看到这个标题大家一定会想到这篇神文<How Browsers Work>,这篇文章把浏览器的很多细节讲得很细,而且也被翻

前端知识点总结(转载)

转自--- https://github.com/hawx1993/Front-end-Interview-questions/blob/master/README.md 本文旨在加深对前端知识点的理解,资料来源于网络,由本人(博客:http://segmentfault.com/u/trigkit4) 收集整理. 一些开放性题目 1.自我介绍:除了基本个人信息以外,面试官更想听的是你与众不同的地方和你的优势. 2.项目介绍 3.如何看待前端开发? 4.平时是如何学习前端开发的? 5.未来三到五

关于前端开发的20篇文档与指南-转

关于前端开发的20篇文档与指南 前端开发开发者CSSJavaScriptHTMLWeb 摘要:前端开发者中相信很多人会有两种感受:真的不知所措,这个行业到底有多少东西需要去学习:渴望更多,并迫不及待的为接下来的学习寻求一些思想方向.本文整理一些有用的信息,希望可以帮助相关领域的前端开发人员. 相信在2015年很多这个行业的人都会有这样的两种感受: 真的不知所措,这个行业到底有多少东西需要去学习: 渴望更多,并迫不及待的为接下来的学习寻求一些思想方向. 第一个来自于我们的个人感受,而第二个则是纯粹

2014年计算机软考《网络管理》知识点【汇总篇】

51CTO学院,在软考备考季特别整理了"2014年计算机软考<网络管理>知识点",帮助各位学院顺利过关!更多软件水平考试辅导及试题,请关注51CTO学院-软考分类吧! 2014年计算机软考<网络管理>知识点汇总 1 2014年计算机软考<网络管理>知识点第一章 查看详情 2 2014年计算机软考<网络管理>知识点第二章 查看详情 3 2014年计算机软考<网络管理>知识点第三章 查看详情 4 2014年计算机软考<网络管

python学习第六十五天:前端知识点总结

前端知识点串讲 1 HTML 1.1 组成 HTML标签: 单 双 HTML标签属性 class id 1.2 HTML标签 # 页面结构标签 html body head # HEAD 头部标签 meta title style link script # 格式标签 p h1~6 pre br hr # 文本标签 em strong sub sup del ins i # 列表 ul ol li dl dt dd # 表格 table thead tbody tfoot tr td th ca

中级前端知识点提要

中级前端知识点提要 标签(空格分隔): JavaScript HTML 基础 1 Restful API Representational State Transfer(表现层状态转移). URL定位资源,用HTTP动词(GET POST PUT DELETE)描述操作. 资源.统一接口.URI.无状态. 应该将API的版本号放入URL:URL中只能有名词而不能有动词:API应该提供参数. 2 CommonJS/AMD/CMD/ES6 Module 2.1 CommonJS 是Node.js模块

好程序员web前端分享HTML基础篇

好程序员web前端分享HTML基础篇,最近遇到很多新手,都会问,如果要学web前端开发,需要学什么?难不难学啊?多久能入门之类的问题?那么今天好程序员就先来给大家分享一下web前端学习路线:HTML基础 学习目标 1.本专业介绍.HTML相关概念,HTML发展历史 2.WEB标准,W3C/WHATWG/ECMA相关概念 3.相关软件的应用以及站点的创建 4.HTML基本结构和HTML语法 5.HTML常用标记 一.本专业介绍.HTML相关概念,HTML发展历史 本专业介绍 移动前端/WEB前端

前端知识点总结——HTML

前端知识点总结--HTML HTML:HTML4.01 指的就是网页技术HTML5:HTML4.01的升级版本 1.web的基础知识 web与Internet1.Internet:全球性的计算机互联网络,因特网,互联网,交互网2.提供服务 前端学习圈:767273102 ,从最基础的HTML+CSS+JavaScript.jQuery,Ajax,node,angular等到移动端HTML5的项目实战的资料都有整理 访问网站:www(world wide web)服务 Email:电子邮件服务 B