转:前端面试题-HTML+CSS

2019-06-13 admin

目录

HTML部分

1. Doctype作用,HTML5 为什么只需要写<!DOCTYPE HTML>

2. 行内元素有哪些,块级元素有哪些,空(void)元素有那些

3. 简述一下你对HTML语义化的理解

4. 常见的浏览器内核有哪些,介绍一下你对浏览器内核的理解

5. html5有哪些新特性

6. 描述一下 cookies,sessionStorage 和 localStorage 的区别

7. 如何实现浏览器内多个标签页之间的通信

8. HTML5的离线存储怎么使用,解释一下工作原理

9. src与href的区别

10. 表单提交中Get和Post方式的区别

CSS部分

1. css盒子模型,box-sizing属性的理解

2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法

3. 如何让一个不定宽高的盒子水平垂直居中

4. px和em和rem的区别

5. position的值有哪些

6. display:none与visibility:hidden的区别

7. CSS中link 和@import的区别

8. 什么是响应式设计,响应式设计的基本原理是什么

9. 为什么要初始化CSS样式

10. CSS3有哪些新特性

11. ::before 和 :after中双冒号和单冒号有什么区别?解释一下这2个伪元素的作用

12. CSS优化、提高性能的方法有哪些

13. 重绘和回流,浏览器是怎样解析CSS的

14. flex布局css预处理器

15. css预处理器

前言

貌似又到了一年一度跑路跳槽的时刻,由于个人的一些原因最近也参加了很多面试,发现有很多基础性的东西掌握程度还是不够,故此想总结一下最近面试遇到的问题以及个人认为比较重要的东西,留给自己消化,也分享给有需要的小伙伴

如果文章中有出现纰漏、错误之处,还请看到的小伙伴多多指教,先行谢过

好了,废话不多说,以下 ↓

HTML

1. Doctype作用,HTML5 为什么只需要写 <!DOCTYPE HTML>

doctype是一种标准通用标记语言的文档类型声明,目的是告诉标准通用标记语言解析器要使用什么样的文档类型定义(DTD)来解析文档.<!DOCTYPE>声明必须是HTML文档的第一行,位于html标签之前

HTML5不基于SGML,所以不需要引用DTD。在HTML5中<!DOCTYPE>只有一种

SGML: 标准通用标记语言,是现时常用的超文本格式的最高层次标准

2. 行内元素有哪些,块级元素有哪些,空(void)元素有那些

行内元素:a span i img input select b

块级元素:div ul ol li h1~h6 p table

空元素:br hr link

3. 简述一下你对HTML语义化的理解

简单来说,就是合适的标签做合适的事情,这样具有以下好处:

  • 有助于构架良好的HTML结构,有利于搜索引擎的建立索引、抓取,利于SEO
  • 有利于不同设备的解析
  • 有利于构建清晰的机构,有利于团队的开发、维护

4. 常见的浏览器内核有哪些,介绍一下你对浏览器内核的理解

Trident内核:IE

Gecko内核:NETSCAPE6及以上版本,火狐

Presto内核:Opera7及以上。[Opera内核原为:Presto,现为:Blink;]

Webkit内核:Safari,Chrome等。[Chrome的:Blink(WebKit的分支)]

浏览器内核又可以分成两部分:渲染引擎和JS引擎。 渲染引擎主要负责取得网页的内容、整理讯息、计算网页的显示方式等,JS引擎则是解析Javascript语言,执行javascript语言来实现网页的动态效果。

5. html5有哪些新特性

  • 语义化标签: header footer nav section article aside
  • 增强型表单:date(从一个日期选择器选择一个日期) email(包含 e-mail 地址的输入域) number(数值的输入域) range(一定范围内数字值的输入域) search(用于搜索域) tel(定义输入电话号码字段) 等
  • 视频和音频:audio video
  • Canvas绘图 SVG绘图
  • 地理定位:Geolocation
  • 拖放API:drag
  • web worker:是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能
  • web storage: localStorage sessionStorage
  • WebSocket: HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议

6. 描述一下 cookie,sessionStorage 和 localStorage 的区别

| 特性 | Cookie | localStorage | sessionStorage | | 生命周期 | 可设置失效时间,没有设置的话,默认是关闭浏览器后失效 | 除非被手动清除,否则将会永久保存 | 仅在当前网页会话下有效,关闭页面或浏览器后就会被清除 | | 存放数据大小 | 4KB左右 | 可以保存5MB的信息 | | http请求 | 每次都会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题 | 仅在客户端(即浏览器)中保存,不参与和服务器的通信 |

7. 如何实现浏览器内多个标签页之间的通信

  • 使用localStorage: localStorage.setItem(key,value)localStorage.getItem(key)
  • websocket协议
  • webworker

多个标签页之间的通信

8. HTML5的离线存储怎么使用,解释一下工作原理

HTML5的离线存储

9. src与href的区别

区别:src用于替代这个元素,而href用于建立这个标签与外部资源之间的关系

<link href="style.css" rel="stylesheet" />浏览器加载到这里的时候,html的渲染和解析不会暂停,css文件的加载是同时进行的

<script src="script.js"></script>当浏览器解析到这句代码时,页面的加载和解析都会暂停直到浏览器拿到并执行完这个js文件

10. 表单提交中Get和Post方式的区别

  • Get一般用于从服务器上获取数据,Post向服务器传送数据
  • Get传输的数据是拼接在Url之后的,对用户是可见的;Post的传输数据对用户是不可见的
  • Get传送的数据量较小,不能大于2KB。Post传送的数据量较大,一般被默认为不受限制
  • Get安全性非常低,Post安全性较高
  • 在FORM提交的时候,如果不指定Method,则默认为Get请求

CSS

1. css盒子模型,box-sizing属性的理解

css的盒模型由content(内容)、padding(内边距)、border(边框)、margin(外边距)组成。但盒子的大小由content+padding+border这几部分决定

box-sizing是一个CSS3属性,与盒子模型有着密切联系。即决定元素的宽高如何计算,box-sizing有三个属性:

box-sizing: content-box|border-box|inherit:
  • content-box 使得元素的宽高即为内容区的宽高(默认模式)
  • border-box: 计算方式content + padding + border = 本身元素大小,即缩小了content大小
  • inherit 指定box-sizing属性的值,应该从父元素继承

2. 清除浮动,什么时候需要清除浮动,清除浮动都有哪些方法

浮动的元素是脱离文档标准流的,如果我们不清楚浮动,那么就会造成父元素高度塌陷,影响页面布局。

清除浮动的方式:

  • 为父元素设置高度
  • 为父元素添加overflow:hidden
  • 伪元素
.fix::after { 
     content:""; 
     display:block; 
     clear:both;
}

使用伪元素的好处:不增加冗余的DOM节点,符合语义化

overflow:hidden可以触发BFC机制。BFC:块级格式化上下文,创建了 BFC的元素就是一个独立的盒子,它规定了内部如何布局,并且与这个独立盒子里的布局不受外部影响,当然它也不会影响到外面的元素,计算BFC的高度时,浮动元素也参与计算

3. 如何让一个不定宽高的盒子水平垂直居中

定位的方式

.father {
    position: relative;
}
.son {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

css3属性

.father {
    position: relative;
}
.son {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

flex布局

.father {
    display: flex;
    justify-content: center;
    align-items: center;
}

4. px和em和rem的区别

px: 像素,相对长度单位。像素px是相对于显示器屏幕分辨率而言的

em的值并不是固定的,会继承父级元素的字体大小,代表倍数

rem的值并不是固定的,始终是基于根元素 <html> 的,也代表倍数

5. position的值有哪些

static: 默认值。没有定位,元素出现在正常的流中

relative(相对定位):生成相对定位的元素,相对于其正常(原先本身)位置进行定位

absolute(绝对定位):生成绝对定位的元素,相对于static定位以外的第一个父元素进行定位

fixed(固定定位):生成绝对定位的元素,相对于浏览器窗口进行定位

6. display:none与visibility:hidden的区别

区别 display:none visibility:hidden的
是否占据空间 不占据任何空间,在文档渲染时,该元素如同不存在(但依然存在文档对象模型树中) 该元素空间依旧存在
是否渲染 会触发reflow(回流),进行渲染 只会触发repaint(重绘),因为没有发现位置变化,不进行渲染
是否是继承属性 不是继承属性,元素及其子元素都会消失 是继承属性,若子元素使用了visibility:visible,则不继承,这个子孙元素又会显现出

7. CSS中link 和@import的区别

link属于XHTML标签,@import完全是CSS提供的一种方式,只能加载CSS

加载顺序的差别,当一个页面被加载的时候,link引用的CSS会同时被加载,而@import引用的CSS 会等到页面全部被下载完再被加载

兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,而link标签无此问题

当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的

8. 什么是响应式设计,响应式设计的基本原理是什么

响应式网站设计是一个网站能够兼容多个终端,而不是为每一个终端做一个特定的版本。基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理

9. 为什么要初始化CSS样式

因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对 CSS 初始化往往会出现浏览器之间的页面显示差异

初始化样式会对 SEO 有一定的影响

10. CSS3有哪些新特性

  • 实现圆角border-radius,阴影box-shadow,边框图片border-image
  • 对文字加特效text-shadow,强制文本换行word-wrap,线性渐变linear-gradient
  • 实现旋转transform:rotate(90deg),缩放scale(0.85,0.90),translate(0px,-30px)定位,倾斜skew(-9deg,0deg);
  • 增加了更多的CSS选择器、多背景、rgba()
  • 唯一引入的伪元素是::selection
  • 实现媒体查询@media,多栏布局flex
  • 过渡transition 动画animation

11. ::before 和 :after中双冒号和单冒号有什么区别?解释一下这2个伪元素的作用

单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。(伪元素由双冒号和伪元素名称组成),双冒号是在当前规范中引入的,用于区分伪类和伪元素

12. CSS优化、提高性能的方法有哪些

  • 移除空的css规则(Remove empty rules)
  • 正确使用display的属性
  • 不滥用浮动、web字体
  • 不声明过多的font-size
  • 不在选择符中使用ID标识符
  • 遵守盒模型规则
  • 尽量减少页面重排、重绘
  • 抽象提取公共样式,减少代码量

13. 重绘和回流

重绘和回流

14. flex布局

flex布局教程–阮一峰

15. css预处理器

提供了一种css的书写方式,常见的就是 SAAS文档LESS文档

转自 https://github.com/Roamen/web…

[转载]原文链接:https://segmentfault.com/a/1190000019463788

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-67167.html

文章标题:转:前端面试题-HTML+CSS

相关文章
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
破解前端面试(80% 应聘者不及格系列):从 闭包说起
不起眼的开始 招聘前端工程师,尤其是中高级前端工程师,扎实的 JS 基础绝对是必要条件,基础不扎实的工程师在面对前端开发中的各种问题时大概率会束手无策。在考察候选人 JS 基础的时候,我经常会提供下面这段代码,然后让候选人分析它实际运行的结...
2017-06-02
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot; style=&quot;width: 100%; height:100%;&quot;&gt...
2017-02-17
HTML5的5个不错的开发工具推荐
HTML5规范终于在今年正式定稿,对于从事多年HTML5开发的人员来说绝对是一个重大新闻。数字天堂董事长,DCloud CEO王安也发表了文章,从开发者和用户两个角度分析了HTML对两个人群的优势。其实,关于HTML5的开发工具,我们以往的...
2015-11-12
HTML5凭什么可以代替Flash
本世纪初,全球网络建设仍处于早期阶段,发达国家网民刚刚在从窄带向宽带网络过渡。由于网络带宽、PC运算速度等因素限制,早期的网站基本以静态文字和图片内容为主。但随着宽带网络在全球范围快速普及,网民对内容的需求也不断变化。死板的文字加图片的网站...
2015-11-12
前端交流QQ群
我们建立了一个前端交流QQ群供大家交流,有什么问题都可以在群里提问,欢迎你的加入,也希望我们大家能够在群里互帮互助,同时也能学到东西。 我们相信,前端有你更精彩! 为了让更多的小伙伴加入我们,欢迎大家转发扩散! 长按以上二维码加入我们 ...
2016-04-01
HTML5究竟会火到什么地步
这已经是第N次,HTML5火热了起来,这次的火热是否可以延续? H5的最大优势就是可以在网页上直接调试和修改,而且更重要的是,它几乎不用考虑用户的机型与适配性问题。智能手机主要被分裂为两大系统:Android和iOS,一个做应用的团队,怎么...
2015-11-12
2014年最流行前端开发框架对比评测
如今,各种开发框架层出不穷,各有千秋。哪些是去年较受开发者关注的呢?前不久,云适配根据Github上的流行程度整理了2014年最受欢迎的6个前端开发框架,并进行对比说明,希望帮助有需要的朋友选择合适自己的前端框架。 1. Bootstrap...
2015-11-12
必须记住的 30 类 CSS 选择器
开篇 有 30 个 CSS 选择器你必须烂熟于心,它们适应于当今各大主流浏览器。 1.* * { margin: 0; padding: 0; } *选择器选择的是每一个单一元素。很多程序员用上面的 CSS 将所有元素的 ma...
2015-11-16
回到顶部