33、HTML高频前端面试题

最新推荐文章于 2024-01-17 20:27:30 发布

C.&H.

最新推荐文章于 2024-01-17 20:27:30 发布

阅读量4.5k

点赞数 1

分类专栏：前端面试题目

本文链接：https://blog.csdn.net/sunnnnh/article/details/117635537

版权

前端面试题目专栏收录该内容

136 篇文章 39 订阅

订阅专栏

HTMLé¢è¯é¢.png

1、src和href的区别

2、对HTML语义化的理解

3、 DOCTYPE(document type ⽂档类型) 的作⽤

4、script标签中defer和async的区别

4.1 script标签未加入defer和async时，即默认情况：

4.2 两种异步加载的语法：defer和async

7、常见的行内元素和块级元素，以及它们的区别、转换

7.1 行内元素

7.2 块级元素

7.3 行内块级元素

7.4 空元素，即没有内容的HTML元素。

14. HTML与XHTML——二者有什么区别

15. iframe 有哪些优点和缺点？

16、文档声明（Doctype）和有何作用? 严格模式与混杂模式如何区分？它们有何意义?

17、title与h1的区别、b与strong的区别、i与em的区别？

18、head 标签有什么作用，其中什么标签必不可少？

19、获取dom节点的方法以及区别?

19.1 获取dom节点的方法

19.2 getElementXXX与queryselector的区别

20、解释一下HTML，CSS，JS

1、src和href的区别

1、请求资源类型不同
（1）href 表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。
（2）src表示对资源的引用。会将其指向的资源下载并应用到文档中，常用的有script，img 、iframe；

2、作用结果不同
（1）href 用于建立当前文档和引用资源之间的联系；

（2）src 用于替换当前内容；

3、浏览器解析方式不同
（1）若在文档中添加href ，浏览器会识别该文档为 CSS 文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式。

（2）当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

既然我们上面提到了link和@import导入css文件是不同的，那我们就顺便说说两者的区别，如果您已经知道，就可以不用往下看了哈

link和@import的区别
两者都是外部引用 CSS 的方式，但是存在一定的区别：
（1）link是XHTML标签，除了能够加载CSS，还可以定义RSS等其他事务；而@import属于CSS范畴，只可以加载CSS。
（2）link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后再加载。
（3）link是XHTML标签，无兼容问题；@import则是在CSS2.1提出的，低版本的浏览器不支持。
（4）link支持使用Javascript控制DOM改变样式；而@import不支持。

1）src：

表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置（例<img src="">会将图片嵌入img所在的位置）。
src会将其指向的资源下载并应⽤到⽂档中，例如js脚本，img图片和frame等元素。
<script src="js.js"></script>当浏览器解析到这一句时，会暂停其他资源的下载和处理，直至将该资源加载，编译，执行完毕（img和frame等元素也是如此，）。所以⼀般js脚本会放在页面底部。

2）href：

表示超文本引用，它指向一些网络资源，建立当前元素和引用资源之间的关系。
当浏览器识别到它指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。常用在a、link等标签上（<a href="">）。
例如<link href="common.css" rel="stylesheet"/>当浏览器解析到这一句的时候会识别该文档为css文件，会下载并且不会停止对当前文档的处理。所以使用link方式来加载css。

2、对HTML语义化的理解

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。

语义化的优点：

对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于SEO（搜索引擎优化）。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录；
对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。

常见的语义化标签：

<header></header>  头部

<nav></nav>  导航栏

<section></section>  区块（有语义化的div）

<main></main>  主要区域

<article></article>  主要内容

<aside></aside>  侧边栏

<footer></footer>  底部

3、 DOCTYPE(document type ⽂档类型) 的作⽤

<!DOCTYPE html>

DOCTYPE是HTML5中一种标准的文档类型声明，且必须声明在HTML⽂档的第⼀⾏。
目的是告诉浏览器（的解析器）应该以什么样（html或xhtml）的文档类型来解析文档，不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。

浏览器渲染页面的两种模式：

CSS1Compat：标准模式（Strick mode），是默认模式，浏览器使用W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。
BackCompat：怪异模式(混杂模式)(Quick mode)，浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。

4、script标签中defer和async的区别

4.1 script标签未加入defer和async时，即默认情况：

<script src="path/to/myModule.js"></script>

浏览器是同步加载 JavaScript 脚本，即渲染引擎遇到<script>标签就会停下来，等执行完脚本，再继续向下渲染。如果是外部脚本，还必须加入脚本下载的时间。

1）问题：

如果脚本体积很大，下载和执行的时间就会很长，因此造成浏览器堵塞，降低用户体验。

2）解决：

所以浏览器允许脚本异步加载。

4.2 两种异步加载的语法：defer和async

<script>标签加入defer或async属性，脚本就会异步加载

<script src="path/to/myModule.js" defer></script>
<script src="path/to/myModule.js" async></script>

渲染引擎遇到这一行命令，就会开始下载外部脚本。

defer与async的区别：

脚本执行时间：defer是“渲染完页面再执行脚本”，async是“下载完脚本就执行”。defer要等到整个页面在内存中正常渲染结束（DOM 结构完全生成，以及其他脚本执行完成），才会执行；async一旦下载完，渲染引擎就会中断渲染，执行这个脚本，执行完后，再继续渲染。
执行顺序： 多个带defer属性的标签，按照加载顺序执行；多个带async属性的标签，不能保证加载的顺序

4.2.1 只有一个脚本的情况

1）没有defer或async属性。浏览器会立即下载并执行相应的脚本，并且在下载和执行时页面的处理会停止。

<script src="example.js"></script>

2）有了defer属性。浏览器会立即下载相应的脚本，在下载的过程中页面的处理不会停止，等到文档解析完成后脚本才会执行。

<script defer src="example.js"></script>

3）有了async属性。浏览器会立即下载相应的脚本，在下载的过程中页面的处理不会停止，下载完成后立即执行，执行过程中页面处理会停止。

<script async src="example.js"></script>

4）如果同时指定了两个属性，则会遵从async属性而忽略defer属性。

<script async src="example.js" defer async></script>

下图可以直观的看出三者之间的区别：

其中蓝色代表js脚本网络下载时间，红色代表js脚本执行，绿色代表html解析。

4.2.2 多个脚本的情况

1）两个脚本都没有defer或async属性。浏览器会立即下载并执行脚本example1.js，在example1.js脚本执行完成后，再下载并执行脚本example2.js，在脚本下载和执行时页面的处理会停止。

<script src="example1.js"></script>
<script src="example2.js"></script>

2）有了defer属性。

浏览器会立即下载相应的脚本example1.js和example2.js，在下载的过程中页面的处理不会停止，等到文档解析完成才会执行这两个脚本。
HTML5规范要求脚本按照它们出现的先后顺序执行，因此第一个脚本会先于第二个脚本执行，而这两个脚本会先于DOMContentLoaded事件执行。
在现实当中，脚本并不一定会按照顺序执行，也不一定会在DOMContentLoaded事件触发前执行，因此最好只包含一个脚本。

<script defer src="example1.js"></script>
<script defer src="example2.js"></script>

3）有了async属性。

浏览器会立即下载相应的脚本example1.js和example2.js，在下载的过程中页面的处理不会停止，example1.js和example2.js哪个先下载完成哪个就立即执行，执行过程中页面处理会停止，但是其他脚本的下载不会停止。

标记为async的脚本并不保证按照它们的先后顺序执行。异步脚本一定会在页面的load事件前执行，但可能会在DOMContentLoaded事件触发之前或之后执行。

<script async src="example1.js"></script>
<script async src="example2.js"></script>

补充：

DOMContentloaded：是指dom加载完成

解析过程：
①.解析html的结构。
②.加载css样式表和js脚本文件。
③.解析js文件，之后绘制dom树。
④.dom树绘制完毕 -------------------------------->>>>DOMContentloaded（执行）
⑤.加载外部图片和文件(视频，音频等)
⑥.外部文件加载完毕 ------------------------------>>>>window.onload（执行）

5、常⽤的meta标签有哪些

meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等，除了HTTP标准固定了一些name作为大家使用的共识，开发者还可以自定义name。

常用的meta标签：

（1）charset，用来描述HTML文档的编码类型：

<meta charset="UTF-8" >

（2） keywords，页面关键词：

<meta name="keywords" content="关键词" />

（3）description，页面描述：

<meta name="description" content="页面描述内容" />

（4）refresh，页面重定向和刷新：

<meta http-equiv="refresh" content="0;url=" />

（5）viewport，适配移动端，可以控制视口的大小和比例：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

其中，content 参数有以下几种：

width viewport ：宽度(数值/device-width)
height viewport ：高度(数值/device-height)
initial-scale ：初始缩放比例
maximum-scale ：最大缩放比例
minimum-scale ：最小缩放比例
user-scalable ：是否允许用户缩放(yes/no）

（6）搜索引擎索引方式：

<meta name="robots" content="index,follow" />

其中，content 参数有以下几种：

all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；
index：文件将被检索；
follow：页面上的链接可以被查询；
noindex：文件将不被检索；
nofollow：页面上的链接不可以被查询。

6、HTML5新特性

语义化标签
本地存储
媒体标签
增强型表单
拖放
canvas绘图
SVG绘图
地理定位
WebWorker
WebSocket

6.1 语义化标签

HTML5增加了新的内容标签，这些标签带有一定的语义，使搜索引擎爬取你的网站信息更高效。
HTML4中的内容标签级别相同，无法区分各部分内容。而HTML5中的内容标签互相独立，级别不同，搜索引擎以及统计软件等均可快速识别各部分内容。

6.2 本地存储

HTML5 提供了两种在本地存储数据的新方法：

localStorage - 没有时间限制的数据存储。一直存在本地的
sessionStorage - 针对一个 session 的数据存储。伴随着session，窗口一旦关闭就没了

6.3 媒体标签

（1） audio 音频

<audio src='' controls autoplay loop='true'></audio>

属性：

controls 控制面板
autoplay 自动播放
loop=‘true’ 循环播放

（2）video 视频

<video src='' poster='imgs/aa.jpg' controls></video>

属性：

poster 指定视频还没有完全下载完毕、或用户还没有点击播放前 显示的封面。默认显示当前视频文件的第一针画面，当然通过poster也可以自己指定。
controls 控制面板
width
height

（3）source

浏览器对视频格式支持程度不一样，为了能够兼容不同的浏览器，可以通过source来指定视频源。

<video>
 	<source src='aa.flv' type='video/flv'></source>
 	<source src='aa.mp4' type='video/mp4'></source>
</video>

6.4 增强型表单

1）新的表单类型

email ：能够验证当前输入的邮箱地址是否合法
url ：验证URL
number ：只能输入数字，其他输入不了，而且自带上下增大减小箭头，max属性可以设置为最大值，min可以设置为最小值，value为默认值。
search ：输入框后面会给提供一个小叉，可以删除输入的内容，更加人性化。
range ：可以提供给一个范围，其中可以设置max和min以及value，其中value属性可以设置为默认值
color ：提供了一个颜色拾取器
time ：时分秒
data ：日期选择年月日
datatime ：时间和日期(目前只有Safari支持)
datatime-local ：日期时间控件
week ：周控件
month：月控件

例：

<input type="range"/>

2）新的表单属性：

placeholder ：提示信息
autofocus ：自动获取焦点
autocomplete=“on” 或者 autocomplete=“off” 使用这个属性需要有两个前提：
- 表单必须提交过
- 必须有name属性。
required：要求输入框不能为空，必须有值才能够提交。
pattern： 输入框内容必须符合的正则表达式。例如手机号patte="^(+86)?\d{10}$"
multiple：是否允许多个输入。可以选择多个文件或者多个邮箱
min：允许输入的数字最小值
max：允许输入的数字最大值
minlength：允许输入的字符串最小长度
maxlength：允许输入的字符串最大长度
form：指定输入元素所从属的表单id，可以实现输入框放在表单外部并能被提交的效果验证属性(了解即可)

例：

 <input type="text" placeholder="嘻嘻~" form="formID"/>

3）新的表单元素：

<datalist>：数据列表，为input提供输入建议列表。
<progress>：进度条，展示连接/下载进度。
<meter>：刻度尺/度量衡，描述数据所处的阶段，红色(危险)=>黄色(警告)=>绿色(优秀)。
<output>：输出内容，语义上表示此处的数据是经过计算而输出得到的。

例：

<progress></progress>

4）新的表单事件：

oninput 每当input里的输入框内容发生变化都会触发此事件。
oninvalid 当验证不通过时触发此事件。

6.5 拖放

抓取对象以后拖到另一个位置。设置元素可拖放：

<img draggable="true" />

6.6 canvas绘图（画布）

canvas 元素使用 JS 在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

<canvas id="c2" width="400" height="300"></canvas>  //创建画布元素

var ctx = c2.getContext('2d');   //使用H5 Canvas API进行绘图
ctx.fillStyle = '#FFF'                  //填充颜色/渐变色对象

6.7 SVG绘图

SVG 指可伸缩矢量图形，用于定义用于网络的基于矢量的图形，使用 XML 格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有损失，它是万维网联盟的标准

例：常用的SVG图形圆形

<circle r="100" cx="400" cy="300" fill="#f0f" fill-opacity="0.4" 
stroke="#00f" stroke-width="6" stroke-opacity=".4"></circle>

Canvas与SVG的不同：

(1)Canvas是位图；SVG是矢量图

(2)Canvas是JS绘图技术(不是DOM元素)；SVG是标签绘图技术(是DOM元素)

(3)Canvas内容不能使用CSS；SVG内容可以使用CSS；

(4) Canvas内容不方便绑定事件处理；SVG内容方便进行事件绑定

6.8 地理定位

Geolocation（地理定位）用于定位用户的位置

支持地理位置API的浏览器会定义 navigator.geolocation属性，用于获取用户的位置信息。此属性拥有以下方法：

navigator.geolocation.getCurrentPosition() 获取用户当前的位置。该方法需要接受一个回调函数作为参数，如果这个方法成功则返回的地理数据对象，该对象包含了用户地理位置的信息
navigator.geolocation.watchPosition() 该方法用于获取当前位置，同时不断地监视当前位置，一旦用户的地理位置发生变化，就会调用指定的回调函数。
navigator.geolocation.clearWatch() 该方法用于停止监视用户的位置。传递给此方法的参数应当是调用watchPosition()方法的返回值。

通过浏览器获取当前用户的所在地理坐标，以实现“LBS服务”（Location Based Service 基于本地的服务），如实时导航、周边推荐。

情形1：用户使用手机浏览器——可以根据内置GPS芯片读取数据

情形2：用户使用PC浏览器——可以根据电脑的IP地址进行反向查询(需要很大的IP分配库)

具体参考：https://blog.csdn.net/h15882065951/article/details/76557588?

6.9 WebWorker

1）Web Worker 可以让你在后台运行Javascript:

一般来说Javascript和页面的UI会共用一个线程，浏览器中javascript的执行是单线程的，页面上的javascript在执行时会阻塞浏览器的响应，在这段代码运行完毕之前，页面是无法响应用户操作的。

若浏览器加载了一个很耗时的JS文件(可能影响DOM树结构)，浏览器必须等待该文件执行完成才会继续执行后续的代码。这段代码可以交给Web Worker在后台运行，那么页面在Javascript运行期间依然可以响应用户操作。
后台会启动一个worker线程来执行这段代码，用户可以创建多个worker线程。
页面上单线程执行的javascript是主线程（我们通常写的javascript都在主线程中执行），new出来的web worker对象为子线程。只有主线程中的代码执行时会导致阻塞，子线程则不会，这表示部分耗费时间的复杂运算完全可以从后台挪到前台来完成。
通过terminate()方法终止Web Worker。

2）不过Web Worker有以下一些使用限制：

Worker任务不允许直接操作DOM树，也不允许使用任何的BOM对象
Web Worker无法访问window、document之类的浏览器全局变量；
需要的数据只能由UI主线程来传递，处理的结果也必须交由UI主线程来显示。
Web Worker无法访问全局变量或是全局函数；
Web Worker无法调用alert()或者confirm之类的函数；

Web Worker中的Javascript依然可以使用setTimeout(),setInterval()之类的函数，也可以使用XMLHttpRequest对象来做Ajax通信。

3）总结：

Web Worker可以在后台执行脚本，而不会阻塞页面交互。
Worker对象分为两种：专用式Web Worker和共享式Web Worker：专用式的Web Worker只能被单个页面使用，而共享式的Web Worker可以在被多个页面使用

6.10 WebSocket

使服务端就可以主动推送信息给客户端（http2.0）

Websocket只需要一次HTTP握手，所以说整个通讯过程是建立在一次连接/状态中，也就避免了HTTP的非状态性，服务端会一直知道你的信息，直到你关闭请求.

7、常见的行内元素和块级元素，以及它们的区别、转换

7.1 行内元素

常见的行内元素：<span>、<a>、<img>、 <input>、<textarea>、<select>、<label>

还包括一些文本元素：<br> 、<b>、 <strong>、<sup> 、<sub>、 <i> 、<em> 、<del> 、 <u>等

7.2 块级元素

常见的块级元素：<div>、<table>、<form>、<p>、<ul>、 <ol>、<li>

此外还有：<h1>......<h6>、<hr> 、<center>、<dl>、<dt>、<dd>

7.3 行内块级元素

7.4 空元素，即没有内容的HTML元素。

空元素没有闭合标签

常见的空元素：<br>、<hr>、<img>、<input>、<link>、<meta>；

此外还有：<area>、<base>、<col>、<colgroup>、<command>、<embed>、<keygen>、<param>、<source>、<track>、<wbr>

7.5 区别

1）块级元素

总是从新的一行开始，即各个块级元素独占一行，默认垂直向下排列；
高度、宽度、margin及padding都是可控的，设置有效，有边距效果；
宽度没有设置时，默认为100%；
块级元素中可以包含块级元素和行内元素。

2）行内元素

和其他元素都在一行，即行内元素和其他行内元素都会在一条水平线上排列；
高度、宽度是不可控的，设置无效，由内容决定。
可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；注意：在垂直方向上设置内边距（padding-bottom），在显示上是将元素范围扩大了，但实际上不会对周围元素有任何影响。
根据标签语义化的理念，行内元素最好只包含行内元素，不包含块级元素。

3）行内块级元素（它既具有块级元素的特点，也有行内元素的特点。）

不自动换行，可以在一行中放置多个行内块级元素，与其他行内元素都会在一条水平线上排列。默认排列方式为从左到右。
高度、宽度、margin及padding都是可控的，设置有效，有边距效果

7.6 行内和块级元素之间的转换

display:inline：转换为行内元素；
display:block：转换为块状元素；
display:inline-block：转换为行内块状元素。

8、说一下 web worker

1）Web Worker的特点

WebWorker的本质：就是一个执行指定任务的独立线程，且该线程可以与UI主线程进行消息数据传递（通过postMessage和onmessage ）。
我们可以将一些大计算量的代码交由web Worker运行而不阻塞用户界面。
Worker 是无 UI 线程，无法调用 UI 相关的 DOM/BOM API。Worker任务不允许直接操作DOM树，也不允许使用任何的BOM对象
需要的数据只能由UI主线程来传递，处理的结果也必须交由UI主线程来显示。
Worker 线程被主线程控制，主线程可以新建和销毁 Worker；

在 Worker 线程中运行 JS，会创建 独立于主线程的 JS 运行环境，Worker 是无 UI 线程，无法调用 UI 相关的 DOM/BOM API。下图展示了 Worker 线程和主线程的异同：

2）如下图所示，Worker 的通信十分简单。调用Web Worker的过程：

若浏览器加载了一个很耗时的JS文件，由于javascript是单线程执行的，浏览器必须等待该文件执行完成才会继续执行后续的代码。
因此我们使用Web Worker将该js文件的执行过程，放入一个新的线程去执行
web worker 是运行在后台的 js，不会影响到主线程的代码执行，完全在自己独立的线程中计算（独立于其他脚本）。只是在计算完成之后，通过 postMessage将结果发回主线程。

线程A 调用 postMessage 发送数据到线程 B，线程B调用onmessage 接收线程A发过来的数据。

9、浏览器乱码的原因是什么？如何解决？

产生乱码的原因：

网页源代码是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码，反之也会出现乱码；
html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码；
浏览器不能自动检测网页编码，造成网页乱码。

解决办法：

使用软件编辑HTML网页内容；
如果网页设置编码是gbk，而数据库储存数据编码格式是UTF-8，对数据库进行编码设置；
如果浏览器浏览时出现网页乱码，在浏览器中找到转换编码的菜单进行转换。

10、渐进增强和优雅降级之间的区别？

（1）渐进增强（progressive enhancement）：主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果、交互等方面的改进和追加功能，以达到更好的用户体验（在一个非常基础的版本基础上不断扩充）。

（2）优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。

两者区别：

优雅降级是从复杂的现状开始的，并试图减少用户体验的供给；而渐进增强是从一个非常基础的，能够起作用的版本开始的，并在此基础上不断扩充，以适应未来环境的需要；
降级（功能衰竭）意味着往回看，而渐进增强则意味着往前看，同时保证其根基处于安全地带。

11、Canvas和SVG的区别

（1）SVG： SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言XML描述的2D图形的语言，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

其特点如下：

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用

（2）Canvas： Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。

其特点如下：

依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘

注：矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。

（3）Canvas与SVG的不同：

1) Canvas是位图；SVG是矢量图

2) Canvas是JS绘图技术(不是DOM元素)；SVG是标签绘图技术(是DOM元素)

3) Canvas内容不能使用CSS；SVG内容可以使用CSS；

4) Canvas内容不方便绑定事件处理；SVG内容方便进行事件绑定

12、介绍一下你对浏览器内核的理解？

浏览器内核是什么东西。英文叫做：Rendering Engine，中文翻译很多，排版引擎、解释引擎、渲染引擎，现在流行称为浏览器内核.

主要分成两部分：JS引擎和渲染引擎(layout engineer或Rendering Engine)。

1）渲染引擎：顾名思义，就是用来渲染网页内容的，将开发者写的代码转换为用户可以看见的完美页面。负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

(由于牵扯到排版问题，所以肯定会排版错位等问题。为什么会排版错位呢？有的是由于网站本身编写不规范，有的是由于浏览器本身的渲染不标准。)

2）JS引擎：解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

13、常见的浏览器内核有哪些？

浏览器内核就是负责读取网页内容，整理讯息，计算网页的显示方式并显示页面.

浏览器	内核	备注
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器
firefox	Gecko	可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
Safari	webkit	从Safari推出之时起，它的渲染引擎就是Webkit，一提到 webkit，首先想到的便是 chrome，可以说，chrome 将 Webkit内核深入人心，殊不知，Webkit 的鼻祖其实是 Safari。
chrome	Chromium/Blink	在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发
Opera	blink	现在跟随chrome用blink内核。

14. HTML与XHTML——二者有什么区别

1）什么是XHTML

XHTML 是以 XML 格式编写的 HTML
是可扩展超文本标记语言
XHTML 与 HTML 4.01 几乎是相同的
是更严格更纯净的 HTML 版本
是 2001 年 1 月发布的 W3C 推荐标准
得到所有主流浏览器的支持

2）HTML与XHTML的区别

1.文档结构

XHTML DOCTYPE 是强制性的，即必须进行 XHTML 文档类型声明
<html>、<head>、<title> 以及 <body> 元素也必须存在
<html> 中的 xmlns 属性必须使用，为文档规定 xml 命名空间

2.元素语法

XHTML 元素必须正确嵌套
XHTML 元素必须要有一个相应的结束标记
XHTML 元素必须小写
XHTML 文档必须有一个根元素

3.属性语法

XHTML 属性必须使用小写
XHTML 属性值必须用引号包围
XHTML 属性最小化也是禁止的

3）如何从 HTML 转换到 XHTML

向每张页面的第一行添加 XHTML <!DOCTYPE>
向每张页面的 html 元素添加 xmlns 属性
把所有元素名改为小写
关闭所有空元素
把所有属性名改为小写
为所有属性值加引号

15. iframe 有哪些优点和缺点？

iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。

优点：

支持任何浏览器
原封不动的把嵌入的网页展现出来
重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度）。用来加载速度较慢的内容（如广告）
网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用

缺点：

iframe 会阻塞主页面的 onload 事件。window 的 onload 事件需要在所有 iframe 加载完毕后(包含里面的元素)才会触发
代码复杂，无法被一些搜索引擎的检索程序识别，不利于SEO（搜索引擎优化）
会产生很多页面，页面复杂度高，不容易管理
页面加载速度相对frame较慢
iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以可能会影响页面的并行加载
当你所在的网站的域名 和 iframe标签上src使用的域名不一致时，就会出现跨域的问题

16、文档声明（Doctype）和`<!Doctype html>`有何作用? 严格模式与混杂模式如何区分？它们有何意义?

1）文档声明的作用： 文档声明是为了告诉浏览器，当前HTML文档使用什么版本的HTML来写的，这样浏览器才能按照声明的版本来正确的解析。可用<!Doctype html>进行文档声明。

2）<!doctype html> 的作用：让浏览器进入标准模式，使用最新的 HTML5 标准来解析渲染页面；如果不写，浏览器就会进入混杂模式，我们需要避免此类情况发生。目的是要告诉浏览器，应该使用什么样的文档类型定义（DTD）来解析文档。

3）严格模式与混杂模式：

严格模式：又称为标准模式，指浏览器按照W3C标准解析代码；
混杂模式：又称怪异模式、兼容模式，是指浏览器用自己的方式解析代码。混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作；

4）如何区分严格模式与混杂模式：

网页中的DTD（Document Type Definition，文档类型定义），直接影响到使用的是严格模式还是浏览模式，可以说DTD的使用与这两种方式的区别息息相关。

如果文档包含严格的DOCTYPE ，那么它一般以严格模式呈现（严格 DTD ——严格模式）；
包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）；
DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现（DTD不存在或者格式不正确——混杂模式）；
HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 尽可能大的实现了向后兼容(HTML5 没有严格和混杂之分)。

<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" 
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">

总之，严格模式让各个浏览器统一执行一套规范兼容模式保证了旧网站的正常运行。

17、title与h1的区别、b与strong的区别、i与em的区别？

title属性没有明确意义只表示是个标题；H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；
strong标签有语义，是起到加重语气的效果；而b标签是没有的，b标签只是一个简单加粗标签。b标签之间的字符都设为粗体，strong标签加强字符的语气都是通过粗体来实现的，而搜索引擎更侧重strong标签。
i内容展示为斜体，em表示强调的文本；均是斜体

18、head 标签有什么作用，其中什么标签必不可少？

1）head标签的作用：

标签用于定义文档的头部，它是所有头部元素的容器。

<head> 描述了文档的各种属性和信息，<head>中的元素可以引用脚本<script>、指示浏览器在哪里找到样式表<link>、提供元信息<meta>等。

绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

2）head标签包含的标签：

下面这些标签可用在 head 部分：<link>, <script>, <style>, <title>, <meta>, <base>。

其中 <title> 定义文档的标题，它是 head 部分中唯一必需的元素。

3）标签的含义：

meta：可提供有关页面的元信息，比如提高文档关键字、进行重定向。
base：为页面上的所有链接规定默认地址或默认目标

19、获取dom节点的方法以及区别?

19.1 获取dom节点的方法

1）通过 getElementxxxx 方法获取（通过顶层document节点获取）。

// 1. 通过 id 进行获取 获取的结果是一个 dom 节点,只返回一个元素   
document.getElementById('idname')

// 2. 通过类名进行获取 返回一个 HTMLCollection(类数组) 数据结构。
//    如果需要其中的某一个 dom 节点,则需要通过下标进行获取   
document.getElementsByClassName('classname')
   

// 3. 该方法通过节点的name获取节点，这个方法返回的不是一个节点元素，而是具有同样名称的节点数组。
document.getElementsByName('form1')

// 4. 该方法是通过节点的Tag获取节点，同样该方法也是返回一个节点数组。
document.getElementsByTagName('div')

2）通过父节点获取

parentObj.firstChild：获取 parentObj节点的第一个子节点
parentObj.lastChild：获取 parentObj节点的最后一个子节点
parentObj.childNodes：获取parentObj节点的子节点数组
parentObj.getElementsByTagName(tagName)：它返回parentObj节点的所有子节点中类型为指定值的子节点数组。

3）通过其他方式获取（参数都为class属性值）

document.querySelector('.classname') ：获取class为classname的第一个元素
document.querySelectorAll('.classname')：获取class为classname的全部元素

注意: querySelector 和 querySelectorAll 这两个函数有局限性,不能够获取到动态添加的节点只能获取 html 中的静态节点。

19.2 getElementXXX与queryselector的区别

query选择符选出来的元素及元素数组是静态的，而getElement这种方法选出的元素是动态的。静态的就是说选出的所有元素的数组，不会随着文档操作而改变。
在使用的时候getElement这种方法性能比较好，query选择符则比较方便。

20、解释一下HTML，CSS，JS

1）HTML：（HyperText Markup Language）超文本标记语言

结构（structure）——决定网页的结构及内容，即“显示哪些内容”
可以把HTML说成是静态代码。
“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

2）CSS（Cascading Style Sheet）层叠样式表单

表现（presentation）——设计网页的表现样式，即“如何显示有关内容”。
CSS是将样式信息与网页内容分离的一种标记语言，我们使用css为每个元素定义样式，它主要用于美化HTML页面。
通过设置对应的样式属性可以修改html文档内各元素的显示、位置等样式（如修改颜色、字体、字号、宽高、位置、背景等）。
语法为：选择符 {属性：值} (selector {property：value} )。

3）JS（JavaScript）一种动态脚本语言

行为（behavior）——控制网页的行为（效果），即“内容应该如何对事件做出反应”。
使用JavaScript代码可以让前端变的有交互(点击事件)，常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。
通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

JS的常用功能：
1、嵌入动态文本于HTML页面
2、对浏览器事件作出响应
3、读写HTML元素
4、在数据被提交到服务器之前验证数据
5、检测访客的浏览器信息
6、控制cookies，包括创建和修改等

4）举例，对于一个网页

eg1:HTML定义网页的结构，CSS描述网页的样子，而JavaScript，设置一个很经典的例子是说HTML就像一个人的身体，而CSS就是人的衣服，Javascript就像人的思想和行为
eg2:HTML是肉身、CSS就是皮相、Javascript就是灵魂。没有Javascript,HTML+CSS是植物人，没有CSS、HTML是个毁容的植物人

C.&H.

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
33、HTML高频前端面试题

目录1、src和href的区别2、对HTML语义化的理解3、DOCTYPE(document type ⽂档类型) 的作⽤4、script标签中defer和async的区别4.1 script标签未加入defer和async时，即默认情况：4.2 两种异步加载的语法：defer和async4.2.1 只有一个脚本的情况4.2.2 多个脚本的情况5、常⽤的meta标签有哪些6、HTML5新特性6.1 语义化标签6.2 本地存储6.3 媒体标签6.4...
复制链接

扫一扫