请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需要一步,快速开始

搜索
开启左侧

2020 前端面试 | “HTML + CSS + JS”专题

马上注册,分享更多源码,享用更多功能,让你轻松玩转云大陆。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
本文版权归 “公众号 | 前端一万小时” 所有,欢迎转载!

转载请注明出处,未经同意,不可修改文章内容。
    “前端面试题”及“参考答案详解”属于“¥102.4 | 面试刷题”私有团队专享内容,需付费阅读

    文章列表所列示的文章属于“¥1024 | 从零基础到轻松就业”私有团队专享内容,除开源的部分,其它皆需付费阅读
Web 前置知识
    《老生常谈的从 URL 输入到页面展现背后发生的事》[编号:web_01]
涉及面试题:
1. 从 URL 输入到页面展现背后发生了什么事?
2. 一次完整的 HTTP 事务是怎么一个过程?
3. 浏览器是如何渲染页面的?
4. 浏览器的内核有哪些?分别有什么代表的浏览器?
5. 刷新页面,JS 请求一般会有哪些地方有缓存处理?
    《初次接触前端,我们要理解哪些名词?》《工欲善其事,必先利其器——软件安装、环境搭建》《做一次山大王,让操作系统乖得像只小绵羊——命令行入门》《用李涛高手之路前 3 节课开启我们光与色的大门》《Git 和 GitHub:① Git、GitHub 初认识》《Git 和 GitHub:② 提交代码+团队合作》


HTML
    《① HTML 基础》[编号:html_01]
涉及面试题:
1. DOCTYPE 有什么作用?怎么写?
2. 列出常见的标签,并简单介绍这些标签用在什么场景?
3. 页面出现了乱码,是怎么回事?如何解决?
4. title 属性和 alt 属性分别有什么作用?
5. HTML 的注释怎样写?
6. HTML5 为什么只写 <!DOCTYPE html> ?
7. data- 属性的作用?
8. <img> 的 title 和 alt 有什么区别?
9. Web 标准以及 W3C 标准是什么?
10. DOCTYPE 作用?严格模式与混杂模式如何区分?它们有何意义?
11. HTML 全局属性(Global Attribute)有哪些?
    《② HTML 元素、属性详解》[编号:html_02]
涉及面试题:
1. meta 有哪些常见的值?
2. meta viewport 是做什么用的,怎么写?
3. 列出常见的标签,并简单介绍这些标签用在什么场景?
4. 如何在 HTML 页面上展示 <div></div> 这几个字符?
5. 你是如何理解 HTML 语义化的?
6. 前端需要注意哪些 SEO?
7. 你对网页标准和 W3C 重要性的理解?
    《③ HTML 表单详解》[编号:html_03]
涉及面试题:
1. POST 和 GET 方式提交数据有什么区别?
2. 在 input 里,name 有什么作用?
3. label 有什么作用?如何使用?
4. radio 如何分组?
5. placeholder 属性有什么作用?
6. type=hidden 隐藏域有什么作用?举例说明。
7. CSRF 攻击是什么?如何防范?
8. 网页验证码是干嘛的?是为了解决什么安全问题?
9. 常见 Web 安全及防护原理?

CSS
    《CSS 基础与选择器初识》[编号:css_01]
涉及面试题:
1. CSS 加载方式有几种?
2. @import 有什么作用?如何使用?
3. CSS 选择器常见的有几种?
4. id 选择器和 class 选择器的使用场景分别是什么?
5. @charset 有什么作用?
6. 简述 src 和 href 的区别?
7. 页面导入时,使用 link 和 @import 有什么区别?
    《CSS 选择器详解》[编号:css_02]
涉及面试题:
1. 伪类选择器有哪些?
2. 伪元素和伪类的区别?
    《CSS 结构和层叠》[编号:css_03]
涉及面试题:
1. 选择器的优先级是如何计算的?
2. 什么是 CSS 继承?哪些属性能继承,哪些不能?
    《CSS 值和单位》[编号:css_04]
涉及面试题:
1. 你有没有使用过视网膜分辨率的图形?当中使用什么技术?
2. px,em,rem,vw 有什么区别?
    《CSS 给文本加样式:① 字体属性》[编号:css_05]
涉及面试题:
简述字体图标的原理,动手实现使用 iconfont 实现字体图标的 demo。
    《CSS 给文本加样式:② 文本属性》
    《CSS 基本视觉格式化:① “块盒子”格式化》[编号:css_07]
涉及面试题:
1. 块级元素和行内元素分别有哪些?空(void)元素有那些?块级元素和行内元素有什么区别?
2. IE 盒模型和 W3C 盒模型有什么区别?
3. 在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例?
    《CSS 基本视觉格式化:② “行内盒子”格式化》[编号:css_08]
涉及面试题:
1. line-height: 2; 和 line-height: 200%; 有什么区别?
2. 在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例。
3. 行内元素的“边框”、“边界”等“框属性”是由 font-size 还是 line-height 控制?
4. height=line-height 可以用来垂直居中单行文本?代码怎么实现?
5. inline-block 有什么特性?
6. inline-block 在实际工作中有什么作用?
7. 怎么去除两个按钮中间的缝隙问题?
8. 一个页面有一排高度不一样的产品图,这时如果我们用 inline-block ,怎样使他们“顶端对齐”?
    《CSS 给盒子、背景、链接、列表、表单、表格等加样式》[编号:css_09]
涉及面试题:
1. 让一个元素“看不见”有几种方式?有什么区别?
2. 单行文本溢出加 ... 如何实现?
3. 如何在页面上实现一个圆形的可点击区域?
    《让“盒子”动起来:① 浮动》[编号:css_10]
涉及面试题:
1. 浮动元素有什么特征?对父容器、其他浮动元素、普通元素、文字分别有什么影响?
2. 清除浮动指什么?如何清除浮动?两种以上方法。
    《让“盒子”动起来:② “定位”和 BFC》[编号:css_11]
涉及面试题:
1. 有几种定位方式?分别是如何实现定位的?参考点是什么?使用场景是什么?
2. z-index 有什么作用?如何使用?
3. BFC 是什么?如何生成 BFC?BFC 有什么作用?举例说明。
4. 在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例?
    《把“可以动的盒子”更优雅地展示:① “伪元素”妙用》[编号:css_12]
涉及面试题:
1. 如何使用伪元素来清除浮动?
2. 可以通过哪些方法优化 CSS3 Animation 渲染?
    《把“可以动的盒子”更优雅地展示:② “居中”盒子》[编号:css_13]
涉及面试题:
1. 如何让块级元素水平居中?如何让行内元素水平居中?如何让 inline-block 元素水平居中?
2. 垂直上下居中的办法?
    《把“可以动的盒子”更优雅地展示:③ 常用的“布局”》[编号:css_14]
涉及面试题:
响应式布局原理?
    《让这些“展示”有更好的扩展性——媒体查询》[编号:css_15]
涉及面试题:
1. 列举你了解的 HTML5、CSS3 新特性?
2. Canvas 和 SVG 有什么区别?
    《CSS 拓展:① 浏览器兼容》[编号:css_16]
涉及面试题:
1. 渐进增强和优雅降级分别是什么意思?
2. 什么是 CSS Hack?在哪个网站查看标签(属性)的浏览器兼容情况?
3. IE6、7 的 Hack 写法是?
4. 尽可能多的列举浏览器兼容的处理范例?
5. CSS Reset 是什么?CSS 预编译器是什么?后编译器(PostCSS)是什么?
6. CSS Reset 和 Normalize.css 有什么区别?
7. 尽可能多的写出浏览器兼容性问题?
8. 如何让 Chrome 浏览器显示小于 12px 的文字?
9. CSS 预处理器的比较:Less、Sass?
10. 常见兼容性问题?
    《CSS 拓展:② CSS 编码规范》[编号:css_17]
涉及面试题:
1. 列举 CSS 编码规范?
2. 编码规范的作用是什么?列举 5 条以上编码规范。
    《CSS 拓展:③ Emmet 常用语法介绍》《CSS 拓展:④ flex 布局》《CSS 拓展:⑤ CSS3 Transition》《CSS 拓展:⑥ CSS3 变形》《CSS 拓展:⑦ CSS3 Animation》


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

广告招商