HTML面试总结

最新推荐文章于 2024-05-28 14:55:45 发布

crazy的蓝色梦想

最新推荐文章于 2024-05-28 14:55:45 发布

阅读量463

点赞数 1

分类专栏：前端面试题汇总

本文链接：https://blog.csdn.net/qq_41257129/article/details/103651255

版权

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

41 篇文章 21 订阅

订阅专栏

(1) 前面页面有哪三层构成，分别是什么？作用是什么？

网页分成三个层次: 结构层、表示层、行为层

结构层：由HTML或XHTML之类的标记语言负责创建。
表示层：由CSS负责创建。
行为层：由JavaScript负责回答“内容应该如何对事件做出反应”这一问题。

(2) 简述一下对HTML语义化的理解？

正确的标签包含正确的内容
HTML语义化让页面结构化，结构更清晰
即使没有css样式，也是很容易阅读的
便于浏览器、搜索引擎解析
搜索引擎的爬虫也依赖于HTMl标记来确定上下文和各个关键字的权重，利于SEO

(3) Doctype作用?严格模式与混杂模式如何区分？它们有何意义?

Doctype声明于文档最前面，告诉浏览器以何种方式来解析页面。有两种模式：严格模式和混杂模式
严格模式：以浏览器支持的最高标准运行
混杂模式（兼容模式）：向后兼容，模拟老式浏览器，防止浏览器无法兼容页面

(4) 行内元素有哪些？块级元素有哪些？空元素有哪些？

行内元素： a 、b、span、img、input 、select、strong等
块级元素： div、p、ul、ol、dl、dt、dd、h1、h2等
空元素 < input> 、< textarea>、 < select>、 < object>、< iframe> 和 < video>
同时也是行内替换元素，height/width/padding/margin均可用。效果等于块元素，但不能独占一行。

(5) HTML5为什么只需要写<!DOCTYPE HTML>?

它声明了这是html5的文档规范。它必须声明在html文档的第一行。加上了之后会让浏览器强制使用w3c标准来解析和渲染页面。如果不加上这一行的话，浏览器就会按照自己的标准进行解析和渲染，可能会导致页面的元素或布局出现问题。
DTD（文档类型定义）可定义合法的XML文档构建模块，HTML5不基于SGML(标准通用标记语言)，所以不需要对DTD进行引用，但是需要doctype来规范浏览器的行为，而HTML4.0基于SGML，所以要对DTD进行引用，才能告诉浏览器文档所使用的的文档类型。

(6) ducument常用属性与方法有哪些？

document常见属性

body 对元素的直接访问
cookie 设置或返回与当前文档有关的所有cookie.
domain 返回当前文档的域名
lastModified 返回被最后修改的日期和时间
referrer 返回当前文档的url
title: 返回当前文档的标题
URL：返回当前文档的URL

document常见方法：

write()：动态向页面写入内容
createElement(Tag): 创建一个HTML标签对象
getElementById(ID): 获得之前id的对象
getElementsByName(Name): 获得之前Name的对象
body.appendChild(tag): 向HTML中插入元素对象

(7) src与href的区别

href 是指网络资源所在的位置。用于超链接
src 指向外部资源的位置。请求src 资源时会将指向的资源下载并应用到文档内，比如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架也是如此。

(8) 为什么利用多个域名来存储网站资源会更有效？

确保用户在不同地区能最快的速度打开网站，其中某个域名崩溃用户也能通过其他域名访问网站。

(9) label的作用是什么？是怎么用的？

label 标签来定义表单控件间的关系，当用户选择这个label标签时，浏览器对自动将焦点转到和这个标签相关的表单控件上。

<label for="Name">Number:</label>
    <input type="text" name="Name"  id="Name"/>

label标签上使用for属性与表单控件使用id属性来关联。

(10) 浏览器内核有哪些？

IE： trident内核
Firefox: gecko内核
Safari： webkit内核
Opera：以前是 presto内核，现在是Blink内核
Chrome: Bink内核

(11) 说一说SVG的理解

SVG 可缩放矢量图形，是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG严格遵从XML语法，并用文本格式的描述语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式

特点：

任意放缩：用户任意缩放图像显示，而不会破坏图像的清晰度。
文本独立： SVH图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。
较小文件： SVG文件比那些GIF和JPEG格式的文件要小很多
超强显示效果： SVG图像在屏幕上总是边缘清晰，它的清晰适合任何屏幕分辨率和打印分辨率。
超强颜色控制： SVG图像提供一个1600万种颜色的调色板，支持ICC颜色描述文件标准、
RGB、线X填充、渐变和蒙版

在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中：

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
        <polygon points="100,10 40,180 190,60 10,60 160,180"
        style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
      </svg>

在这里插入图片描述
(12) 说一说canvas的理解
canvas是HTML5新增的一个API，在网页中动态实现2D与3D图像技术。有一个基于 JavaScript 的绘图 API，而 SVG 和 VML 使用一个 XML 文档来描述绘图。SVG 绘图很容易编辑与生成，但功能明显要弱一些。 canvas可以完成动画、游戏、图表、图像处理等原来需要Flash完成的一些功能。
(13) 说一下SVG与Canvas两者的区别

SVG是一种使用XML描述的2D图形的语言
Canvas通过JavaScript来绘制2D图形
SVG是基于XML，每个DOM元素都是可用的。
Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。

(14) title与h3的区别、b与strong的区别、i与em的区别？

title属性没有明确意义只表示一个标题，H1则表示层次明确的标题，对页面信息的抓取有很大影响。
strong是标明重点内容，有语气加强的含义，会重读，而 是展示强调内容。
i内容展示为斜体， em 表示强调的文本；

(15) 表单的基本组成部分有哪些，表单的主要用途是什么？

组成：表单标签、表单域、表单按钮

表单标签：这里面包含了处理表单数据所用 CGI 程序的 URL, 以及数据提交到服务器的方法。
表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框、和文件上传框等。
表单按钮：包括提交按钮，复位按钮和一般按钮；用于将数据传送到服务器上的 CGI 脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

主要用途：表单在网页中主要负责数据采集的功能，和向服务器传送数据。

(16) HTML5 有哪些新增的表单元素？

datalist
keygen
output

(17) HTML5 标准提供了哪些新的 API？

Media API
Text Track API
Application Cache API
User Interaction
Data Transfer API
Command API
Constraint Validation API
History API

(18) HTML5 存储类型有什么区别？

localStorage: 持久化本地存储，数据永远不过期，关闭浏览器也不会丢失
sessionStorage: 同一会话中的页面才能访问并且当回话结束之后数据也会销毁。是一种会话级别的本地存储。

(19) Cookie、sessionStorage、localStorage的区别

共同点：都保存在浏览器端，在同源窗口中数据都是共享的

cookie 是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。
cookie 数据始终在同源的 http 请求中携带（即使不需要），也会在浏览器和服务器间来回传递。
sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。

存储大小

cookie 数据大小不能超过 4k。
sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。

有期时间

localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
cookie 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭。

(20) HTML5 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览器兼容问题？如何区分 HTML 和 HTML5 ？

HTML5现在已经不是SGML（标准通用标记语言）的子集，主要是关于图像，位置，存储，多任务等功能的增加。

新特性：

canvas
媒介回放的video和audio
本地存储: localStorage长期存储与sessionStorage会话存储
语义化更好的内容元素，比如： article、footer、header、nav、section
表单控件： calendar、date、time、email、url、search
新技术： webWorker、webSocket、Geolocation

移除的元素：

纯表现的元素：basefont，big，center，font, s，strike，tt，u
对可用性产生负面影响的元素：frame，frameset，noframes

(21) HTML5 的离线储存怎么使用，工作原理能不能解释一下？

原理：
HTML5 的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
如何使用
1、页面头部像下面一样加入一个 manifest 的属性；
2、在 cache.manifest 文件的编写离线存储的资源；
```
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
//offline.html
```
3、在离线状态时，操作 window.applicationCache 进行需求实现。

(22) 浏览器是怎么对 HTML5 的离线储存资源进行管理和加载的呢？

在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问 app，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。
如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
离线的情况下，浏览器就直接使用离线存储的资源。

(23) iframe 内嵌框架有那些缺点？

内联框架 iframe一般用来包含别的页面，例如我们可以在我们自己的网站页面加载别人网站的内容，为了更好的效果，可能需要使 iframe 透明效果；

iframe 会阻塞主页面的 onload 事件；
搜索引擎的检索程序无法解读这种页面，不利于 SEO 搜索引擎优化（Search Engine Optimization）
iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

如果需要使用 iframe，最好是通过 javascript 动态给 iframe 添加 src 属性值，这样可以绕开以上两个问题。

(24) 如何实现浏览器内多个标签页之间的通信 ? (阿里)

WebSocket、SharedWorker；
调用 localstorge、cookies 等本地存储方式；
localstorge 在另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信；注意 quirks：Safari 在无痕模式下设置 localstorge 值时会抛出 QuotaExceededError 的异常；

(25) webSocket 如何兼容低浏览器？(阿里)

Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基于 multipart 编码发送 XHR 、
基于长轮询的 XHR。

crazy的蓝色梦想

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
HTML面试总结

(1) 前面页面有哪三层构成，分别是什么？作用是什么？网页分成三个层次: 结构层、表示层、行为层结构层：由HTML或XHTML之类的标记语言负责创建。表示层：由CSS负责创建。行为层：由JavaScript负责回答“内容应该如何对事件做出反应”这一问题。(2) 简述一下对HTML语义化的理解？正确的标签包含正确的内容HTML语义化让页面结构化，结构更清晰即使没有css样式...
复制链接

扫一扫