前端的发展日新月异,前端开发也早已从原来的切图套页面,变成了现在的非常复杂的技术体系,近期由于找工作,面试了很多家单位,也总结了一部分前端面试中经常会遇到的面试类型,并一一解答。
主要分为HTML、CSS、Javascript及Javascript进阶、浏览器原理及相关知识、三大主要前端架构(VUE、Angular、React)、ES6相关知识、
前端中的一些设计模式、前端工程化开发工具、前端所需要了解的其他知识等这些部分。如果有不够全面和正确的的,欢迎指正和补充。

前端知识及面试集锦第一部分:HTML和HTML5

1、HTML与HTML5,声明模式有什么不同,为什么不同

解答:

<!DOCTYPE> 声明不是一个 HTML 标签;它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。

<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签之前,<!DOCTYPE>声明告知浏览器的解析器用什么文档标准解析这个文档(标准模式)。若声明错误或未声明会导致文档以兼容模式/混杂模式呈现。

<!DOCTYPE> 标签没有结束标签。<!DOCTYPE> 声明不区分大小写。总是先给 HTML 文档添加 <!DOCTYPE> 声明,确保浏览器能够预先知道文档类型.

在html4.01中,<!DOCTYPE>声明需要引用DTD(文档类型声明),因为它是基于SGML(Standard Generalized Markup Language 标准通用标记语言),DTD 指定了标记语言的规则,确保了浏览器能够正确的渲染内容。

HTML5不基于SGML因此不需要引用DTD。

HTML5只有一种声明方式: <!DOCTYPE html>

HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明,分别是:Strict、Transitional 和 Frameset

Strict模式,不允许使用表现性、废弃元素(如font)以及框架集(如frameset)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Transitional 模式 ,允许使用表现性、废弃元素(如font),不允许使用框架集(如frameset)。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Frameset 模式,允许表现性元素,废弃元素以及框架集

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

2、HTML的组成部分,每个部分的结构和作用

解答:

一个标准完整的HTML主要由声明、html标签,head标签,body标签等组成

head中可以包括 meta 、link、title、base、style、script等标签

body定义文档的主题,大部分实体元素在body中

其中meta标签:可提供有关页面的原信息(mata-information),meta 有一个必选属性content 和三个可选属性 http-equiv ,name, scheme

link标签:用于引入CSS样式表文件,只能出现在head中

title标签:定义文档的标题,可显示在浏览器页签中

base标签: 为页面上的所有链接规定默认地址或默认目标。通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。使用 <base> 标签可以改变这一点。浏览器随后将不再使用 当前文档的 URL,而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。

style标签:标签用于为 HTML 文档定义样式信息。在 style 中,您可以规定在浏览器中如何呈现 HTML 文档。type 属性是必需的,唯一可能的值是 "text/css"。

script标签:标签用于定义客户端脚本,比如 JavaScript。script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。

3、HTML中的块级元素、行内元素、行内块元素各有哪些,其语义表达的是什么

解答:

元素按照功能可以分为基础元素、格式元素、表单元素、框架元素、图像元素、多媒体元素、链接元素、列表元素、表格元素、样式语义元素、脚本元素、元信息元素等

(1)常用块级元素div、h1-h6、p、table、ul、ol、dl、li、dt、dd、header、footer、article、aside、section

(2)   常用行内元素span、大部分的格式元素b、strong、i、del、em、pre、sub、sup、u等,image、a、input、button、select、textarea、label

4、HTML5中新增了哪些元素?废除了哪些元素?,

(1)HTML5中引入了新的canvas元素,新的多媒体元素audio、video、source、embed、track等,新的表单元素datelist、keygen、output,新的语义化元素article、aside、details、command、header、footer、nav、section等

(2) 废除了旧版中一些用于格式的元素,applet、basefont、font、center、big、dir、frame等

5、HTML5中的WebStorage技术

解答:

WebStorage是HTML新增的本地存储解决方案之一,但并不是为了取代cookie而制定的标准,

cookie作为HTTP协议的一部分用来处理客户端和服务器通信是不可或缺的,session正是依赖于实现的客户端状态保持。

WebStorage的意图在于解决本来不应该cookie做,却不得不用cookie的本地存储。

HTML5 提供了两种在客户端存储数据的新方法:localStorage,sessionStorage,

localStorage在本地永久性存储数据,除非显式将其删除或清空,

sessionStorage存储的数据只在会话期间有效,关闭浏览器则自动删除。两个对象都有共同的API

length、key、getItem、setItem、removeItem、clear

同时HTML5规定了一个storage事件,在WebStorage发生变化的时候触发,可以用此监视不同页面对storage的修改

6、HTML5中的Websocket

解答:

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。

在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

前端面试题集锦(一)之HTML部分的更多相关文章

  1. Web前端面试题集锦

    前端开发面试知识点大纲: 注意 转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/5927180.html )作者:wangwen896 HTML&CSS ...

  2. 前端面试题集锦及答案解析--HTML、 HTTP、web综合问题

    前端需要注意哪些SEO 合理的title.description.keywords:搜索对着三项的权重逐个减小,title值强调重点即可,重要关键词出现不要超过2次,而且要靠前,不同页面title要有 ...

  3. 前端面试题集锦(二)之CSS部分

    1.CSS中的选择器都有哪些?权限情况如何? 解答: (1)类选择器 .className  (2) ID选择器 #id  (3) 元素选择器 div 可以多个,以逗号隔开 (4)父子选择器 以空格隔 ...

  4. 前端面试题2016--HTML

    本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链.万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的!也是不可能的!不可能的!不可 ...

  5. 前端面试题 之 JavaScript

    昨天我们一起分享了关于html和css的面试题<前端面试题之Html和CSS>,今天我们来分享关于javascript有关的面试题.我面试的时候最害怕面试官问我js了,因为我真心不擅长这个 ...

  6. 【web前端面试题整理02】前端面试题第二弹袭来,接招!

    前言 今天本来准备先了解下node.js的,但是,看看我们一个小时前与一个小时后的差距: 既然如此,我们继续来搜集我们的前端面试题大业吧!!! 特别感谢玉面小肥鱼提供哟,@玉面小飞鱼 题目一览 Jav ...

  7. 各大互联网公司前端面试题(js)

    对于巩固复习js更是大有裨益.    初级Javascript: 1.JavaScript是一门什么样的语言,它有哪些特点? 没有标准答案. 2.JavaScript的数据类型都有什么? 基本数据类型 ...

  8. 前端面试题(html篇)

    前端面试题(html篇)

  9. 2016最全的web前端面试题及答案整理

    面试web前端开发,不管是笔试还是面试,都会涉及到各种专业技术问题,今天小编整理了一些常见的web前端面试题及答案,希望对大家有所帮助. 1.常用那几种浏览器测试?有哪些内核(Layout Engin ...

随机推荐

  1. springcloud-eureka客户端服务注册(含demo源码)

    1. 场景描述 前几天介绍了下springcloud的Eureka注册中心(springcloud-注册中心快速构建),今天结合springboot-web介绍下eureka客户端服务注册. 2. 解 ...

  2. Bzoj 1079 着色方案 题解

    1079: [SCOI2008]着色方案 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 2237  Solved: 1361[Submit][Stat ...

  3. Android开发-实现第三方APP跳转

    自己创建一个按钮: <Button android:id="@+id/btn_button" android:layout_width="fill_parent&q ...

  4. micropython TPYBoard v201 简易的web服务器的实现过程

    转载请注明文章来源,更多教程可自助参考docs.tpyboard.com,QQ技术交流群:157816561,公众号:MicroPython玩家汇 前言 TPYBoard v201开发板上搭载了以太网 ...

  5. 个人永久性免费-Excel催化剂功能第59波-快速调用Windows内部常用工具命令

    Windows里一些常用的工具.命令,许多存放得很深的位置,不容易找到,每次还要百度半天才能调用成功,Excel催化剂现将常用的操作,提取至插件中完成,一键即可调出相应功能,无需苦苦找寻. 使用场景 ...

  6. [Spring-Cloud-Alibaba] Sentinel 规则持久化

    在之前的练习中,只要应用重启,就需要重新配置,这样在我们实际的项目是非常不实用的,那么有没有办法把我们配置的规则保存下来呢?答案是YES,那么接下来,给大家来介绍如何将Sentinel规则持久化. D ...

  7. 2019暑假集训 BLO

    题目描述 Byteotia城市有n个 towns m条双向roads. 每条 road 连接 两个不同的 towns ,没有重复的road. 所有towns连通. 输入 输入n<=100000 ...

  8. MySQL 5.7和8.0性能测试

    目录 背景 前提 环境 测试 双1模式下 0 2 模式下 结论 背景 测试mysql5.7和mysql8.0 分别在读写.只读.只写模式下不同并发时的性能(tps,qps) 前提 测试使用版本为mys ...

  9. Spring源码分析之环境搭建

    写在最前面 最近突然心血来潮,想看看源码,看看大牛都怎么码代码,膜拜下.首选肯定是spring大法,于是说干就干,从GitHub上下载spring-framework源码编译拜读. 环境搭建 安装JD ...

  10. linuk挂载命令

    1 Linuk挂在命令如下(将一个目录下面的东西挂在到另一个目录上面) mount -bind -o rw /data/vsftpd/原目录   /data/vsftpd/目标目录 2 查看所有的挂载 ...