前端面试题集锦（一）之HTML部分
前端的发展日新月异，前端开发也早已从原来的切图套页面，变成了现在的非常复杂的技术体系，近期由于找工作，面试了很多家单位，也总结了一部分前端面试中经常会遇到的面试类型，并一一解答。
主要分为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 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
转载于:https://www.cnblogs.com/liquanjiang/p/10568427.html
前端面试题集锦（一）之HTML部分相关推荐
- Web前端面试题集锦
Web前端面试题集锦 前端开发面试知识点大纲: 注意 转载须保留原文链接(http://www.cnblogs.com/wzhiq896/p/5927180.html )作者:wangwen896 H ...
- 前端面试题集锦——JavaScript
前端面试题集锦--JavaScript 1.请你谈谈 Cookie 的优缺点 cookie是存储于访问者计算机中的变量 cookie是浏览器提供的一种机制 可以由JavaScript对其进行控制(设置 ...
- 2021-2022 最新最全的前端面试题集锦（2022 持续更新中...敬请关注）
写在最前 想起上一次的面试经历,不免细思极恐. 工作以来,感觉自己接触到的东西还是挺多的,但是当我面试的时候,就会发现各种问题,很多知识点都是模棱两可,答得不全面.究其原因,还是没有吃透这些内容.所以 ...
- 前端面试题集锦（二）之CSS部分
1.CSS中的选择器都有哪些?权限情况如何? 解答: (1)类选择器 .className (2) ID选择器 #id (3) 元素选择器 div 可以多个,以逗号隔开 (4)父子选择器 以空 ...
- 前端面试题集锦——前端综合问题
前端综合问题 前端页面有哪三层构成,分别是什么?作用是什么? 1)结构层(html)structural layer 由HTML或者XHTML之类的标记语言负责创建,即:标签: 2)表示层(css)p ...
- web前端面试题集锦三
1.HTML语义化的理解? 答案:HTML语义化就是让页面的内容结构化,便于对浏览器.搜索引擎解析:在没有样式CSS的情况下也以一种文档格式显示,并且是容易阅读的:搜索引擎的爬虫依赖于标记来确定上下文 ...
- 「前端面试题系列7」Javascript 中的事件机制（从原生到框架）
前言 这是前端面试题系列的第 7 篇,你可能错过了前面的篇章,可以在这里找到: 理解函数的柯里化 ES6 中箭头函数的用法 this 的原理以及用法 伪类与伪元素的区别及实战 如何实现一个圣杯布局? ...
- 前端面试题整理（定期更新）
前言 因为面试的原因,最近又开始关注前端面试题,浏览过网上很多面试题集合,有很多小伙伴整理的很全面,但是我发现其中有很多技术点在当下已不再流行,而面试题一般都是映射开发中常遇到的一些技能和问题,再结合 ...
- JavaScript中的load事件的作用_史上最全的web前端面试题汇总及答案JavaScript之二（二）...
作者:樱桃小丸子儿 链接:https://www.jianshu.com/p/abadcc84e2a4 JavaScript JS的基本数据类型 number,string,boolean,objec ...
最新文章
- Python进阶07 函数对象
- 密码学-hash散列表
- c#截取字符串后几位_基础库的字符串设计
- React.Fragment 包裹标签
- BZOJ 4814 Luogu P3699 [CQOI2017]小Q的草稿 (计算几何、扫描线、set)
- python合并列表并按升序排序_在python中按升序合并两个排序的链接列表:单链接列表指针更新问题...
- 飞鸽传书已经写了5年，还是老样子。
- 在windows下配置PostgreSQL
- java 龟兔赛跑预测_[Java] 蓝桥杯BASIC-24 基础练习 龟兔赛跑预测
- MyBatis学习--高级映射
- 《Objective-C函数速查实例手册》——导读
- ios13 文件 连接服务器 您已离线,iOS13，终于可以屏蔽系统更新了
- java如何获取全部省市_纯java获取省市区
- 金蝶K3开发-工业老单据序时薄隐藏列内容
- Caused by: java.lang.NoSuchMethodError：xxx——依赖冲突的解决
- 学计算机是不是必须要买电脑,上大学了，你必须买一部电脑吗？
- cmake整理：在编译时拷贝文件之add_custom_comand 和 add_custom_target
- 【论文阅读】3D Topology-Preserving Segmentation with Compound Multi-Slice Representation
- 新手如何零基础操作让亚马逊无货源店铺如何单月3-5万
- 在网吧敲代码是种什么体验？网友神评论：在挨打的边缘疯狂试探