2023年11月25日发(作者：)

html⾯试常被问的知识点

1.对浏览器内核的理解

浏览器内核⼜可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。

渲染引擎 它负责取得⽹页的内容（HTML、XML、图像等等）、整理讯息（例如加⼊ CSS 等），以及计算⽹页的显⽰⽅式，然后会输出⾄显⽰器或打印机。浏

览器的内核的不同对于⽹页的语法解释会有不同，所以渲染的效果也不相同。

JS 引擎 则是解析 Javascript 语⾔，执⾏ javascript语⾔来实现⽹页的动态效果。

最开始渲染引擎和 JS 引擎并没有区分的很明确，后来 JS 引擎越来越独⽴，内核就倾向于只指渲染引擎。有⼀个⽹页标准计划⼩组制作了⼀个 ACID 来测试引

擎的兼容性和性能。内核的种类很多，常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。

2.什么是

DOCTYPE是html5标准⽹页声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个⽂档。

⽂档解析类型有：

- BackCompat：怪异模式，浏览器使⽤⾃⼰的怪异模式解析渲染页⾯。（如果没有声明DOCTYPE，默认就是这个模式）

- CSS1Compat：标准模式，浏览器使⽤W3C的标准解析渲染页⾯。

标签

提供给页⾯的⼀些元信息（名称/值对），有助于SEO。

属性值：

name：名称/值对中的名称。author、description、keywords、generator、revised、others。 把 content 属性关联到⼀个名

称。

http-equiv：没有name时，会采⽤这个属性的值。content-type、expires、refresh、set-cookie。把content属性关联到http头

部。

content ： 名称/值对中的值， 可以是任何有效的字符串。 始终要和 name 属性或 http-equiv 属性⼀起使⽤。

语义化的作⽤

⽤正确的标签做正确的事情。

html语义化让页⾯的内容结构化，结构更清晰，便于对浏览器，搜索引擎解析；

即使在没有样式CSS情况下也以⼀种⽂档格式显⽰，并且是容易阅读的；

搜索引擎的爬⾍也依赖于HTML标记确定上下⽂和各个关键字的权重，利于SEO;

使阅读源代码的⼈对⽹站更容易将⽹站分块，便于阅读维护理解。

5. HTML5有哪些新特性，移除了哪些元素？如何处理HTML5新标签的浏览器兼容问题？

新特性：

1. : header footer nav main article section

2. ⽤于绘画的canvas元素；

3. ⽤于媒介回放的；

4. 对本地离线存储有更好的⽀持，localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage的数据在浏览器关闭后⾃动

删除；

5. ：calendar,date,time,email,url,search；

6. 新的技术:webworker,websockt、Geolocation；

移除的元素

1. 纯表现的元素：basefont,big,center,font,s,strike,tt,u;

2. 对可⽤性产⽣负⾯影响的元素：frame,frameset,noframes;

如何处理html5新标签的浏览器兼容

1. 当在页⾯中使⽤HTML5新标签时，可能会得到三种不同的结果：

(1) 新标签被当作错误处理并被忽略，在DOM构建时会当作这个标签不存在。

(2) 新标签被当作错误处理，并在DOM构建时，这个新标签会被构造成⾏内元素。

(3)新标签被识别为HTML5标签，然后⽤DOM节点对其进⾏替换。

2. 解决⽅法

(1) 通过动态创建html5新标签：

lement(tagName);

(2)通过JS解决

a.使⽤html5shim：

在中调⽤以下代码：

b.使⽤kill IE6

渐进增强：针对低版本浏览器进⾏构建页⾯，保证最基本的功能，然后再针对⾼级浏览器进⾏效果、交互等改进和追加功能，达到更好

的⽤户体验。

优雅降级：⼀开始就构建完整的功能，然后再针对低版本的浏览器进⾏兼容。

10.页⾯导⼊样式时，使⽤ link 和@import 有什么区别？

link 属于 XHTML 标签，除了加载 CSS 外，还能⽤于定义 RSS, 定义 rel 连接属性等作⽤；⽽@import 是 CSS 提供的，只能⽤于加

载 CSS;

页⾯被加载的时，link 会同时被加载，⽽@import 引⽤的 CSS 会等到页⾯被加载完再加载;

import 是 CSS2.1 提出的，只在 IE5 以上才能被识别，⽽ link 是 XHTML 标签，⽆兼容问题;

link ⽀持使⽤ js 控制 DOM 去改变样式，⽽@import 不⽀持;

与 i 的区别

都表⽰斜体

em是语义化的标签

i是样式标签

12.哪些元素可以⾃闭合？

表单元素input、img、hr、br、mate、link

13.渐进增强和优雅降级

渐进增强：针对低版本浏览器进⾏构建页⾯，保证最基本的功能，然后再针对⾼级浏览器进⾏效果、交互等改进和追加功能，达到更好

的⽤户体验。

优雅降级：⼀开始就构建完整的功能，然后再针对低版本的浏览器进⾏兼容。

和async的区别

defer

要等到整个页⾯在内存中正常渲染结束（DOM结构完全⽣成，以及其他脚本执⾏完成），才会执⾏。多个defer脚本会按照它们

在页⾯出现的顺序加载。“渲染完再执⾏”

async

⼀旦下载完，渲染引擎就会中断渲染，执⾏这个脚本以后，再继续渲染。多个async脚本是不能保证加载顺序的。“下载完就执

⾏”

可以参考:

中 title 属性和 alt 属性的区别？

cookie 是⽹站为了标⽰⽤户⾝份⽽储存在⽤户本地终端（Client Side）上的数据（通常经过加密）

cookie 数据始终在同源的 http 请求中携带（即使不需要），记会在浏览器和服务器间来回传递。

sessionStorage 和 localStorage 不会⾃动把数据发给服务器，仅在本地保存。

存储⼤⼩：

cookie 数据⼤⼩不能超过 4k。

sessionStorage 和 localStorage 虽然也有存储⼤⼩的限制，但⽐ cookie ⼤得多，可以达到 5M 或更⼤。

有效期（⽣命周期）：

localStorage: 存储持久数据，浏览器关闭后数据不丢失除⾮主动删除数据；

sessionStorage: 数据在当前浏览器窗⼝关闭后⾃动删除。

cookie: 设置的 cookie 过期时间之前⼀直有效，即使窗⼝或浏览器关闭

共享

sessionStorage不能共享，localStorage在同源⽂档之间共享，

cookie在同源且符合path规则的⽂档之间共享

详细可以参考:

5全局属性

5 的 form 如何关闭⾃动补全功能？

给不想要提⽰的 form 或某个 input 设置为 autocomplete=off。

form标签的其他新属性：

form表单提交的注意事项：

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

title 属性没有明确意义只表⽰是个标题，H1 则表⽰层次明确的标题，对页⾯信息的抓取也有很⼤的影响；

strong 是标明重点内容，有语⽓加强的含义，使⽤阅读设备阅读⽹络时：strong 会重读，⽽ b 是展⽰强调内容。

i 内容展⽰为斜体，em 表⽰强调的⽂本；

Physical Style Elements – ⾃然样式标签

b, i, u, s,

Semantic Style Elements – 语义样式标签

strong, em, ins, del, code

<label>

<input type="checkbox" id="cb">

<i>i>

label>

/*css*/

部分

#cb {

display: none;

}

#cb + i {

/* content: ' '; */

font-style: normal;

display: inline-block;

width: 20px;

height: 20px;

background-color: grey;

border-radius: 50%;

}

#cb:checked + i{

background-color: hotpink;

}

#cb:checked + i::after {

content: ' ';

display: inline-block;

margin: 5px;

width: 10px;

height: 10px;

background-color: #ffffff;

border-radius: 50%;

}

23.关于iframe以及它有哪些缺点？

iframe的使⽤⽅法：

<iframe src="要引⼊的⽂件路径" frameborder="0">iframe>

缺点

iframe 会阻塞主页⾯的 Onload 事件；

搜索引擎的检索程序⽆法解读这种页⾯，不利于 SEO;

iframe 和主页⾯共享连接池，⽽浏览器对相同域的连接有限制，所以会影响页⾯的并⾏加载。

使⽤ iframe 之前需要考虑这两个缺点。如果需要使⽤ iframe，最好是通过 javascript动态给 iframe 添加 src 属性值，这样可以绕开以

上两个问题。

24.实现不使⽤ border 画出 1px ⾼的线，在不同浏览器的标准模式与怪异模式下都能保持⼀致的效

果。

<div style="height:1px;overflow:hidden;background:red">div>

25.相对路径，绝对路径，物理路径，根⽬录

物理路径：它就是指硬盘上⽂件的路径，⽐如下⾯的⽂件位置表⽰⽅法：

d:

d:

d:

d:

相对路径：以引⽤⽂件之⽹页所在位置为参考基础，⽽建⽴出的⽬录路径。因此，当保存于不同⽬录的⽹页引⽤同⼀个⽂件时，所使⽤

的路径将不相同，故称之为相对路径。

1. 图像⽂件和HTML⽂件位于同⼀⽂件夹：只需输⼊图像⽂件的名称即可，如。

2. 图像⽂件位于HTML⽂件的下⼀级⽂件夹：输⼊⽂件夹名和⽂件名，之间⽤“/”隔开，如

src=“img/img01/” />。

3. 图像⽂件位于HTML⽂件的上⼀级⽂件夹：在⽂件名之前加⼊“…/” ，如果是上两级，则需要使⽤ “…/ …/”，以此类

推，如。

⽹站根⽬录：去掉绝对路径前⾯的域名就是根⽬录，所以它可以理解为是⽹站的最上层⽬录。它的表⽰⽅法如下：

/

tips:·使⽤根⽬录和绝对路径的好处是表⽰路径⽐较简单，都是从⽹站的最上策⽬录⾥查找，⼀级⼀级的向下查。缺点是程序不容易移植

(⽐如把⽹站做为另⼀个⽹站的⼀个栏⽬，移动到⼀个新的⽂件夹中就不⾏了。

标签 rel=“Stylesheet”?

Link标签有两个作⽤：1. 定义⽂档与外部资源的关系；2. 是链接样式表。

下⾯是链接外部样式表

<head>

<link rel="stylesheet" type="text/css" href="" />

head>

href

为 URL地址；

type

为链接⽂件的格式；

5-dom扩展

获取元素

document.getElementsByClassName ('class');

//

通过类名获取元素，以伪数组形式存在。

document.querySelector('selector');

//CSS1

通过选择器获取元素，符合匹配条件的第个元素。

document.querySelectorAll('selector');

//CSS

通过选择器获取元素，以伪数组形式存在。

类名操作

Node.classList.add('class');

//class

添加

Node.classList.remove('class');

//class

移除

Node.classList.toggle('class');

//class

切换，有则移除，⽆则添加

Node.classList.contains('class');

//class

检测是否存在

⾃定义属性

在HTML5中我们可以⾃定义属性，其格式如下data-*=""

<div id="demo" data-my-name="itcast" data-age="10">

<script>

/*

t是以对象形式存在的，当我们为同⼀个DOM节点指定了多个⾃定义属性时，

t则存储了所有的⾃定义属性的值。

*/

var demo = elector(反馈);

//获取

//注：当我们如下格式设置时，则需要以驼峰格式才能正确获取

var name = t['myName'];

var age = t['age'];

//设置

t['name'] = 'web developer';

<script/>

5新增的API

29.浏览器是怎么对 HTML5 的离线储存资源进⾏管理和加载的呢？

在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest ⽂件，如果是第⼀次访问 app，那么浏览器就会根据

manifest ⽂件的内容下载相应的资源并且进⾏离线存储。如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使⽤离线的

资源加载页⾯，然后浏览器会对⽐新的 manifest ⽂件与旧的 manifest ⽂件，如果⽂件没有发⽣改变，就不做任何操作，如果⽂件改

变了，那么就会重新下载⽂件中的资源并进⾏离线存储。

离线的情况下，浏览器就直接使⽤离线存储的资源。

在离线状态时，操作 ationCache 进⾏需求实现。

参考链接：

30.谈谈你对WEB标准的理解

web标准的构成

Web标准不是某⼀个标准，⽽是由W3C和其他标准化组织制定的⼀系列标准的集合。

主要包括结构（Structure）、表现（Presentation）和⾏为（Behavior）三个⽅⾯。

结构标准：结构⽤于对⽹页元素进⾏整理和分类，HTML。

表现标准：表现⽤于设置⽹页元素的版式、颜⾊、⼤⼩等外观样式，主要指的是CSS。

⾏为标准：⾏为是指⽹页模型的定义及交互的编写，咱们主要学的是 Javascript

web标准的好处

1

、让Web的发展前景更⼴阔

2

、内容能被更⼴泛的设备访问

3

、更容易被搜寻引擎搜索

4

、降低⽹站流量费⽤

5

、使⽹站更易于维护

6

、提⾼页⾯浏览速度

31.替换元素和⾮替换元素

替换元素：

可替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显⽰内容。

例如浏览器会根据标签的src属性的值来读取图⽚信息并显⽰出来，⽽如果查看(x)html代码，则看不到图⽚的实际内容；⼜例如根据标签的type属

性来决定是显⽰输⼊框，还是单选按钮等。

(x)html