引用GitHub 上 ltadpoles的前端面试

https://github.com/ltadpoles

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. 描述一下 cookies,sessionStorage 和 localStorage 的区别

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

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

使用localStorage: localStorage.setItem(key,value)、localStorage.getItem(key)

websocket协议

webworker

8. 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文档

前端面试题-HTML+CSS的更多相关文章

  1. web前端面试题HTML/CSS部分

    web前端面试题HTML/CSS部分 前端页面有哪三层构成,分别是什么?作用是什么? 1.结构层:由 HTML 或 XHTML 之类的标记语言负责创建,仅负责语义的表达.解决了页面“内容是什么”的问题 ...

  2. 前端面试题:CSS实现水平垂直居中

    这是一个挺常见的前端面试题,但是没有做过总结.有的时候可能会使用完了,很长一段时间不去使用,会慢慢忘记.所以,温故而知新,还是很有必要的. 一.绝对定位元素的居中实现 这一种工作中用的应该是最多的,兼 ...

  3. [WEB面试题] web前端面试题HTML+CSS第一弹,个人整理部分面试题汇总

    以下内容仅供参考,网络整理而来 1.XHTML和HTML是什么有什么不同的区别 HTML是一种基本的WEB网页设计语言 XHTML可扩展超文本标记语言,是一种置标语言,表现方式与超文本标记语言(HTM ...

  4. 前端面试题(css)

    css  基础面试题 css 面试题 js 面试题 1.介绍下CSS的盒子模型    介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的? css 是如何设置这两种模型的 box-si ...

  5. 前端面试题:css相关面试题

    CSS 选择器中,元素选择器和类选择器的区别是什么? 元素选择器是最常见的 CSS 选择器,即,文档的元素就是最基本的选择器.选择器通常是某个 HTML 元素,比如 <p>.<h1& ...

  6. 前端面试题之css

    1.请列出几个具有继承特性的css属性 font-family  font-size  color  line-height  text-align  text-indent 2.阐述display: ...

  7. 前端面试题归类-css

    一.说下盒模型? 有两种盒模型,W3C盒模型和IE盒模型通常说的"IE盒子模型"指的是IE5.5,IE6及其以后,盒模型都为 content-box当浏览器未设置<!doct ...

  8. 前端面试题归类-css的flex相关

    Flex布局 常见父项的属性: ●flex-direction :设置主轴的方向 Row 默认值从左到右 row-reverse 从右到左 column 从上到下 column-reverse 从下到 ...

  9. 某一线互联网公司前端面试题总结css部分

    1,css3选择器 :not(selector) 选择页面内所有type!=text的类型: input:not([type=text]){ color: red; font-weight: bold ...

随机推荐

  1. 学习笔记:oracle学习一:oracle11g体系结构之服务器结构、数据字典

    目录 1.服务器架构 1.1 系统全局区SGA 1.1.1 高速数据缓冲区(database buffer cache) 1.1.2 重做日志缓冲区(redo log buffer cache) 1. ...

  2. Word 查找替换高级玩法系列之 -- 给数字批量添加空格和下划线

    Word中的查找和替换是一个很强大的功能,很多人都在使用这项功能.查找和替换,顾名思义就是说,查找到符合条件的内容,然后将那些内容替换成我们所需要的内容.下面,我们就通过实例来了解一下查找和替换功能, ...

  3. 堆学习笔记(未完待续)(洛谷p1090合并果子)

    上次讲了堆,别人都说极其简单,我却没学过,今天又听dalao们讲图论,最短路又用堆优化,问懂了没,底下全说懂了,我???,感觉全世界都会了堆,就我不会,于是我决定补一补: ——————来自百度百科 所 ...

  4. FishingMaster(HDU-6709)【贪心】

    题目链接:https://vjudge.net/problem/HDU-6709 题意:一个人要抓n条鱼,每抓一条鱼用时K,每烹饪一条鱼用时a[i],抓鱼的过程不能被打断,烹饪鱼的时候可以抓鱼,也可以 ...

  5. 汉字在unicode中的位置

    在www.unicode.org中查找汉字.china找不到,后来查资料才明白,应该查CJK,为什么内? unicode这个组织吧中国日本韩国的字合并了   中日韩统一表意文字(CJK Unified ...

  6. Dubbo#编译动态扩展类

    这篇排版有问题 后面修改....**** 以ExtensionLoader.getExtensionLoader(Protocol.class).getAdaptiveExtension();为例 - ...

  7. asp.net core-3.应用程序部署到iis

    asp.net core在部署到iis 上的时候,iis服务器要装一个AspNetCoreModule,网站—>模块  具体下载地址可以去网上搜索https://www.nuget.org/pa ...

  8. 工欲善其事必先利其器之Vagrant + VirtualBox

    Vagrant 可以管理 VirtualBox,实现快速配置创建虚拟机 1.下载软件 VirtualBox虚拟机下载地址:https://www.virtualbox.org/wiki/Downloa ...

  9. 获取类的描述信息 DescriptionAttribute

    static void Main(string[] args) { var attrs = typeof(TestClass).GetCustomAttributes(typeof(System.Co ...

  10. ASP.NET WEB应用程序(.network4.5)MVC Razor视图引擎2 视图模板页

    https://www.cnblogs.com/xlhblogs/archive/2013/06/09/3129449.html MVC Razor模板引擎 @RenderBody.@RenderPa ...