20道HTML基础面试题（附答案）
以下是我整理的一些HTML的基础面试体，并自己整理了答案。
1 DOCTYPE有什么作用？标准模式与混杂模式如何区分？它们有何意义?
告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。
标准模式（Standards mode）以浏览器支持的最高标准运行；混杂模式（Quirks mode）中页面是一种比较宽松的向后兼容的方式显示。
2 HTML5为什么只需要写 <!DOCTYPE HTML>？
HTML5不基于SGML（Standard Generalized Markup Language 标准通用标记语言），因此不需要对DTD（DTD 文档类型定义）进行引用，但是需要DOCTYPE来规范浏览器行为。
HTML4.01基于SGML，所以需要引用DTD。才能告知浏览器文档所使用的文档类型，如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
3 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
行内元素：a span img input select
块级元素：div ul ol li dl dt dd h1 p
空元素：<br> <hr> <link> <meta>
4 页面导入样式时，使用link和@import有什么区别？
相同的地方，都是外部引用CSS方式，区别：
- link是xhtml标签，除了加载css外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS
- link引用CSS时候，页面载入时同时加载；@import需要在页面完全加载以后加载，而且@import被引用的CSS会等到引用它的CSS文件被加载完才加载
- link是xhtml标签，无兼容问题；@import是在css2.1提出来的，低版本的浏览器不支持
- link支持使用javascript控制去改变样式，而@import不支持
- link方式的样式的权重高于@import的权重
- import在html使用时候需要
<style type="text/css">标签
5 无样式内容闪烁（FOUC）Flash of Unstyle Content
@import导入CSS文件会等到文档加载完后再加载CSS样式表。因此，在页面DOM加载完成到CSS导入完成之间会有一段时间页面上的内容是没有样式的。
解决方法：使用link标签加载CSS样式文件。因为link是顺序加载的，这样页面会等到CSS下载完之后再下载HTML文件，这样先布局好，就不会出现FOUC问题。
6 介绍一下你对浏览器内核的理解？
主要分成两部分：渲染引擎(Layout Engine或Rendering Engine)和JS引擎。
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
JS引擎：解析和执行javascript来实现网页的动态效果。
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。
7 常见的浏览器内核有哪些？
- Trident( MSHTML )：IE MaxThon TT The World 360 搜狗浏览器
- Geckos：Netscape6及以上版本 FireFox Mozilla Suite/SeaMonkey
- Presto：Opera7及以上(Opera内核原为：Presto，现为：Blink)
- Webkit：Safari Chrome
8 HTML5有哪些新特性,移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5
新增加了图像、位置、存储、多任务等功能。
新增元素：
- canvas
- 用于媒介回放的video和audio元素
- 本地离线存储。localStorage长期存储数据，浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除
- 语意化更好的内容元素，比如 article footer header nav section
- 位置API：Geolocation
- 表单控件，calendar date time email url search
- 新的技术：web worker(web worker是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行) web socket
- 拖放API：drag、drop
移除的元素：
- 纯表现的元素：basefont big center font s strike tt u
- 性能较差元素：frame frameset noframes
区分：
- DOCTYPE声明的方式是区分重要因素
- 根据新增加的结构、功能来区分
9 简述一下你对HTML语义化的理解？
- 去掉或丢失样式的时候能够让页面呈现出清晰的结构。
- 有利于SEO和搜索引擎建立良好沟通，有助于爬虫抓取更多的信息，爬虫依赖于标签来确定上下文和各个关键字的权重。
- 方便其它设备解析。
- 便于团队开发和维护，语义化根据可读性。
10 HTML5的文件离线储存怎么使用，工作原理是什么？
在线情况下，浏览器发现HTML头部有manifest属性，它会请求manifest文件，如果是第一次访问，那么浏览器就会根据manifest文件的内容下载相应的资源，并进行离线存储。如果已经访问过并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面。然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不会做任何操作，如果文件改变了，那么就会重新下载文件中的资源，并且进行离线存储。例如，
在页面头部加入manifest属性
<html manifest='cache.manifest'>
在cache.manifest文件中编写离线存储的资源
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
Resourse/logo.png
FALLBACK:
//offline.html
11 cookies，sessionStorage和localStorage的区别？
共同点：都是保存在浏览器端，且是同源的。
区别：
- cookies是为了标识用户身份而存储在用户本地终端上的数据，始终在同源http请求中携带，即cookies在浏览器和服务器间来回传递，而sessionstorage和localstorage不会自动把数据发给服务器，仅在本地保存。
- 存储大小的限制不同。cookie保存的数据很小，不能超过4k，而sessionstorage和localstorage保存的数据大，可达到5M。
- 数据的有效期不同。cookie在设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭。sessionstorage仅在浏览器窗口关闭之前有效。localstorage始终有效，窗口和浏览器关闭也一直保存，用作长久数据保存。
- 作用域不同。cookie在所有的同源窗口都是共享；sessionstorage不在不同的浏览器共享，即使同一页面；localstorage在所有同源窗口都是共享
12 iframe框架有那些优缺点？
优点：
- iframe能够原封不动的把嵌入的网页展现出来。
- 如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
- 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
- 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
缺点：
- 搜索引擎的爬虫程序无法解读这种页面
- 框架结构中出现各种滚动条
- 使用框架结构时，保证设置正确的导航链接。
- iframe页面会增加服务器的http请求
13 label的作用是什么? 是怎么用的?
label标签用来定义表单控件间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。label 中有两个属性是非常有用的, FOR和ACCESSKEY。
FOR属性功能：表示label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。例如，
<Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text">
ACCESSKEY属性功能：表示访问label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。例如，
<Label FOR="InputBox" ACCESSKEY＝"N">姓名</Label><input ID="InputBox" type="text">
14 HTML5的form如何关闭自动完成功能？
HTML的输入框可以拥有自动完成的功能，当你往输入框输入内容的时候，浏览器会从你以前的同名输入框的历史记录中查找出类似的内容并列在输入框下面，这样就不用全部输入进去了，直接选择列表中的项目就可以了。但有时候我们希望关闭输入框的自动完成功能，例如当用户输入内容的时候，我们希望使用AJAX技术从数据库搜索并列举而不是在用户的历史记录中搜索。
方法：
- 在IE的internet选项菜单中里的自动完成里面设置
- 设置form输入框的autocomplete为on或者off来来开启输入框的自动完成功能
15 如何实现浏览器内多个标签页之间的通信?
- WebSocket SharedWorker
- 也可以调用 localstorge、cookies 等本地存储方式。 localstorge 在另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信。
注意：Safari 在无痕模式下设置 localstorge 值时会抛出QuotaExceededError 的异常
16 webSocket如何兼容低浏览器？
- Adobe Flash Socket ActiveX HTMLFile (IE) 基于 multipart 编码发送 XHR 基于长轮询的 XHR
- 引用WebSocket.js这个文件来兼容低版本浏览器。
16 页面可见性（Page Visibility）API 可以有哪些用途？
- 通过visibility state的值得检测页面当前是否可见，以及打开网页的时间。
- 在页面被切换到其他后台进程时，自动暂停音乐或视频的播放。
17 如何在页面上实现一个圆形的可点击区域？
- map+area或者svg
- border-radius
- 纯js实现，一个点不在圆上的算法
18 实现不使用 border 画出1px高的线，在不同浏览器的Quirks mode和CSS Compat模式下都能保持同一效果
<div style="height:1px;overflow:hidden;background:red"></div>
19 网页验证码是干嘛的，是为了解决什么安全问题？
- 区分用户是计算机还是人的程序;
- 可以防止恶意破解密码、刷票、论坛灌水；
20 title与h1的区别、b与strong的区别、i与em的区别？
title属性没有明确意义，只表示标题；h1表示层次明确的标题，对页面信息的抓取也有很大的影响
strong标明重点内容，语气加强含义；b是无意义的视觉表示
em表示强调文本；i是斜体，是无意义的视觉表示
视觉样式标签：b i u s
语义样式标签：strong em ins del code
21 元素的alt和title有什么异同？
在alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字。
持续更新中...
20道HTML基础面试题（附答案）的更多相关文章
- 50 道 CSS 基础面试题及答案
1 介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的? 标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin 低版本IE盒子模型:宽 ...
- 100道Java基础面试题收集整理（附答案）
不积跬步无以至千里,这里会不断收集和更新Java基础相关的面试题,目前已收集100题. 1.什么是B/S架构?什么是C/S架构 B/S(Browser/Server),浏览器/服务器程序 C/S(Cl ...
- 28道java基础面试题-下
28道java基础面试题下 15.Java语言如何进行异常处理,关键字:throws.throw.try.catch.finally分别如何使用? 答:Java通过面向对象的方法进行异常处理,把各种不 ...
- 最新28道java基础面试题-上
28道java基础面试题 1.面向对象的特征有哪些方面? 答:面向对象的特征主要有以下几个方面: 抽象:抽象是将一类对象的共同特征总结出来构造类的过程,包括数据抽象和行为抽象两方面.抽象只关注对象有哪 ...
- 找工作的你不容错过的45个PHP面试题附答案（下篇）
找工作的你不容错过的45个PHP面试题附答案(上篇) Q28:你将如何使用PHP创建Singleton类? /** * Singleton class * */ final class UserFac ...
- 2020年大厂Java面试前复习的正确姿势（800+面试题附答案解析）
前言 个人觉得面试也像是一场全新的征程,失败和胜利都是平常之事.所以,劝各位不要因为面试失败而灰心. 丧失斗志.也不要因为面试通过而沾沾自喜,等待你的将是更美好的未来,继续加油! 本篇分享的面试题内容 ...
- 几道php基础面试题
前言 昨晚实验室一师弟在微薄上@我,给我发了几道php的基础面试题,这里把我写的答案贴出来 题目 (1)写一个函数获取URL的文件后缀,例如“http://www.feiyan.info/test.p ...
- 6、50道JAVA基础编程练习题跟答案
50道JAVA基础编程练习题 [程序1] 题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? 程序分析 ...
- 吐血整理 20 道 Spring Boot 面试题，我经常拿来面试别人！
面试了一些人,简历上都说自己熟悉 Spring Boot, 或者说正在学习 Spring Boot,一问他们时,都只停留在简单的使用阶段,很多东西都不清楚,也让我对面试者大失所望. 下面,我给大家总结 ...
随机推荐
- Codeforces 1196E. Connected Component on a Chessboard
传送门 注意到棋盘可以看成无限大的,那么只要考虑如何构造一个尽可能合法的情况 不妨假设需要的白色格子比黑色格子少 那么容易发现最好的情况之一就是白色排一排然后中间黑的先连起来,剩下黑色的再全部填白色周 ...
- Azure中配置和发布 Nginx docker到互联网
当Azure build一个Niginx docker 镜像时,无法通过浏览器访问这个镜像,于是想到了把这个网站发布到互联网中,这样就能验证网站是否正确. 本问跳过如何创建Azure Ubantu的虚 ...
- 前端Ajax通过设置 timeout 参数，轮询后台API
因为我连接的数据库在台湾,相距较远,所以conn.Open()方法打开极慢.前端Ajax访问API时,API的数据还未返回,前端Ajax访问已经超时. 所以设置一个轮询,设置相隔多少秒之后进行一次查询 ...
- sql server SQL 服务器 - RDBMS
SQL 服务器 - RDBMS --现代的 SQL 服务器构建在 RDBMS 之上. DBMS - 数据库管理系统(Database Management System) --数据库管理系统是一种可以 ...
- luogu P3620 [APIO/CTSC 2007]数据备份
luogu 首先如果一条线不是了连接的相邻两个位置一定不优,把它拆成若干连接相邻位置的线.所以现在问题是有\(n\)个物品,选\(k\)个,要求选的位置不能相邻,求最小总和 如果没有选的位置不能相邻这 ...
- ubuntu自己定义环境变量,替代常用的操作命令
问题背景是这样的,因为自己会经常用自己的用户链接服务器,比如自己的用户是yongjie,然后服务器的ip是162.105.97.31 所以经常执行的命令是ssh yongjie@162.105.97. ...
- python中的定时任务
使用threading模块中的Timer函数 from threading import Timer import time def execute_func(name, age, gender, h ...
- Linux学习篇之OpenKM的安装（汉化）
OpenKM是一个开放源代码的电子文档管理系统,它的特点是可用于大型公司或是中小企业, 适应性比较强. 并且在知识管理方面的加工,提供了更加灵活和成本较低的替代应用,下面讲一下搭建方法. 一.以下都是 ...
- (转)oracle使用expdp、impdp和exp、imp导入导出表及表结构
使用expdp.impdp和exp.imp时应该注重的事项: 1.exp和imp是客户端工具程序,它们既可以在客户端使用,也可以在服务端使用. 2.expdp和impdp是服务端的工具程序,他们只能在 ...
- noi.ac NA529 【神树的矩阵】
表示今天一发A了这题拿了rk3...是个sb构造... 考虑除了\(n=1/m=1\)的情况,最小次数\(ans\)不会\(>3\). 对于\(n=1/m=1\),暴力即可. 然后考虑\(ans ...