HTML 面试题

转载自：帅地博客

1、src 和 href 的区别

src 和 href 都是用来引用外部的资源，它们的区别如下：

（1）src

指向的内容会嵌入到当前标签所在的位置，会将其指向的资源下载并应⽤到⽂档内；

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般 js 脚本会放在页面底部。

例如：请求 js 脚本

（2）href

建立网络资源和当前元素、文档的链接关系；

并行下载资源，不会停⽌对当前⽂档的处理。

例如：a、link 等标签

 

2、对 HTML 语义化的理解

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。

语义化的优点如下：

  • 对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息

  • 对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护

 

3、DOCTYPE 的作用？标准模式与兼容模式有什么区别？

（1）DOCTYPE 的作用

<!DOCTYPE> 告知浏览器的解析器用什么文档标准解析文档；

该声明位于位于 HTML 文档中的第一行，处于 <html> 标签之前；

DOCTYPE 不存在或格式不正确会导致文档以兼容模式呈现。

（2）标准模式与兼容模式的区别

标准模式以该浏览器支持的最高标准运行；

兼容模式，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。

 

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

都是让 js 文件能够异步下载，不阻塞页面的渲染，它们的区别如下：

  • async：边渲染 html，边下载 js，下载完成后暂停 html 的解析，先执行 js，再继续渲染页面
  • defer ：边渲染 html，边下载 js，然后等待整个文档渲染完成后执行 js

下载的处理二者是相同的，主要是执行的时间不同。如果两个属性同时设置，以 async 为准。

 

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）robots：搜索引擎搜索方式

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

其中，content 参数有如下：

all：文件将被检索，且页面上的链接可以被查询

none：文件将不被检索，且页面上的链接不可以被查询

index：文件将被检索

noindex：文件将不被检索

follow：页面上的链接可以被查询

nofollow：页面上的链接不可以被查询

 

6、img 的 srcset 属性的作用

（1）响应式页面中经常用到根据屏幕密度设置不同的图片，这时就用到了 img 标签的 srcset 属性

（2）srcset 属性用于设置不同屏幕密度下，img 会自动加载不同的图片

例如：如下代码能实现在屏幕密度为 1x 的情况下加载 image-128.png，屏幕密度为 2x 时加载 image-256.png

<img src="image-128.png" srcset="image-256.png 2x" />

按照上面的实现，不同的屏幕密度都要设置图片地址，目前的屏幕密度有 1x,2x,3x,4x 四种，如果每一个图片都设置4张图片，加载就会很慢

（3）新的 srcset 标准

<img src="image-128.png"
     srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w"
     sizes="(max-width: 360px) 340px, 128px" />

其中，srcset 指定图片的地址和对应的图片质量，sizes 用来设置图片的尺寸零界点（w 单位，可以理解成图片质量）；

如果可视区域小于这个质量的值，就可以使用；浏览器会自动选择一个最小的可用图片

 sies语法如下：

sizes="[media query] [length], [media query] [length] ... "

sizes 就是指默认显示128px，如果视区宽度大于360px，则显示340px

 

7、行内元素、块级元素、空(void)元素有哪些

行内元素：img（图片）、input（文本框）、a（链接）

块级元素：div（盒子）、ul（列表）、p（段落）、h（标题）

空元素，即没有内容的 HTML 元素，没有闭合标签：br（换行）、hr（水平线）

 

8、说一下 web worker

在 HTML 页面中，如果在执行脚本时，页面的状态是不可相应的，直到脚本执行完成后，页面才变成可相应。

web worker 是运行在后台的 js，独立于其他脚本，不会影响页面的性能。 并且通过 postMessage 将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了。

如何创建 web worker：

  1. 检测浏览器对于 web worker 的支持性
  2. 创建 web worker 文件（js、回传函数等）
  3. 创建 web worker 对象

 

9、浏览器是如何对 HTML5 的离线储存资源进行管理和加载的？

（1）在线的情况下：浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件

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

（2）离线的情况下：浏览器会直接使用离线存储的资源。

 

10、iframe 有那些优点和缺点

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

（1）优点

  • 用来加载速度较慢的内容（如广告）
  • 可以使脚本可以并行下载
  • 可以实现跨子域通信

（2）缺点：

  • iframe 会阻塞主页面的 onload 事件
  • 无法被一些搜索引擎索识别
  • 会产生很多页面，不容易管理

 

11、Canvas 和 SVG 的区别

 

 

12、文档声明（Doctype）和 !Doctype html 有何作用？

文档声明的作用（Doctype）：为了告诉浏览器，当前 HTML 文档使用什么版本的 HTML 来写的，这样浏览器才能按照声明的版本来正确的解析。

!Doctype html 的作用就是让浏览器进入标准模式，使用最新的 HTML5 标准来解析渲染页面；如果不写，浏览器就会进入混杂模式，我们需要避免此类情况发生

 

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

（1）产生乱码的原因

　　① Html 源代码的编码格式与浏览器的解码格式不匹配

　　② 数据库中数据编码格式与六拉起解码格式不匹配

（2）解决办法

　　① 在 html 中 的 head 标签中添加 <meta charset=xxx >，让浏览器按照固定解码格式解析

　　② 在显示数据库数据前进行转码；

 

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

 

 

15、说一下 HTML5 drag API

 

 

 

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

 （1）HTML5 新特性：主要添加了图像、位置、存储、多任务等功能

　　① 绘画 canvas

　　② 媒介回放的 audio 、video 元素

　　③ localStorage 本地离线长期存储数据，浏览器关闭后数据不消失

　　④ session Storage 浏览器关闭后数据自动删除

　　⑤ 新的语义化标签：header、footer、article、nav、session（语义化更好）

　　⑥ 新的表单：calendar、date、time、email、url、search

　　⑦ 控件元素：webworker、websocket、Geolocation

（2）移除的元素

　　① 纯表现的元素：basefont、big、center、font、s、strike、tt、u

　　② 对可用性产生负面影响的元素：frame、frameset、noframes

（3）处理HTML5新标签的浏览器兼容

方法一：IE6/IE7/IE8 可以通过 document.createElement 方法让浏览器支持 HTML5 新标签，再添加标签默认的样式

方法二：使用成熟的框架，例如 html5shim 框架

<!--[if lt IE 9]> 
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> 
<![endif]-->

（4）如何区分 HTML 和 HTML5

方法一：DOCTYPE 声明的方式

方法二：根据新增的结构、功能元素来加以区分

 

17、浮动有哪些方式？比较好的方式是哪一种？

 ① 额外标签法

浮动元素末尾添加一个块级元素或者<br/>，给新添的元素设置 clear:both 属性

 ② 给父级元素添加 overflow:hidden 属性

 ③ :after 伪元素法

 ④ :before、:after 双伪元素法

 

18、实现布局中间自适应宽度，左右两栏固定宽度

 给父元素设置 display:flex 属性

 

19、写出几种 IE6 BUG 的解决方法

双边距 BUG float 引起的 使用 display

超链接 hover 后点击失效，使用正确的书写顺序 link visited hover active

png 透明使用 js 代码改　　

select 在 ie6下遮盖 使用 iframe 嵌套

 

20、meta viewport 有什么作用？如何写？

（1）作用

为了移动端不让用户缩放页面使用的

（2）如何写

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

  • width=device-width：将宽度设置为设备屏幕分辨率的宽度

  • initial-scale=1：页面初始缩放比例为屏幕分辨率的宽度

  • maximum-scale=1：指定用户能够放大的最大比例

  • minimum-scale=1：指定用户能够缩小的最大比例

 

21、script 标签为什么要放在 body 标签的底部

（1）原因

因为浏览器在渲染 html 的时候，从上到下依次执行，遇到 js 文件就会停止当前页面的渲染，转而去下载 js 文件；

如果将 script 标签放在头部，在文件很大的情况下，首屏时间就会延长，影响用户体验。

（2）解决方法

  • 将 script 标签放到 body 的底部
  • 通过 defer\async 属性将 js 文件转为异步下载

 

22、HTML5元素分类

 

 

 

23、SVG 与 HTML5 的 canvas 各有什么优点？哪个更有前途？

 

 

 

24、标准模式和混杂模式的区别

 

 

 

25、标准模式和严格模式的区别

 

 

 

26、Quirks 模式是什么 它和 Standards 模式有什么区别

 

 

 

27、渐进增强和优雅降级有什么不同？

 

 

28、简述一下 src 与 href 的区别

src 和 href 都是用来引用外部的资源，它们的区别如下：

（1）src

指向的内容会嵌入到当前标签所在的位置，会将其指向的资源下载并应⽤到⽂档内；

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般 js 脚本会放在页面底部。

例如：请求 js 脚本

（2）href

建立网络资源和当前元素、文档的链接关系；

并行下载资源，不会停⽌对当前⽂档的处理。

例如：a、link 等标签

 

29、一个页面上有大量的图片，加载很慢，有哪些方法优化这些图片的加载？

（1）方法一：图片懒加载

在渲染页面过程中，图片不会一次性全部加载，会在需要的时候加载；

比如当滚动条滚动到某一个位置时触发事件加载图片

（2）方法二：图片预加载

幻灯片、相册等可以将当前展示图片的前一张和后一张优先下载

（3）方法三：CSSsprite，SVGsprite，Iconfont、Base64 等技术

图片为 css 的情况下可以使用

（4）方法四：特殊编码的图片

如果图片过大，可以在加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验

 

30、以前端角度出发做好 SEO 需要考虑什么

 

 

31、清除浮动的几种方法

 ① 额外标签法

浮动元素末尾添加一个块级元素或者<br/>，给新添的元素设置 clear:both 属性

② 给父级元素添加 overflow:hidden 属性

③ :after 伪元素法

④ :before、:after 双伪元素法

 

32、写 HTML 代码时应注意什么

 

 

 

33、HTML5 的 form 如何关闭自动完成功能？

 设置输入框的 autocomplete 为 "on" 或者 "off" 来开启或者关闭该输入框的自动完成功能

 

34、如何实现浏览器内多个标签页之间的通信

 

 

 

35、XML 和 JSON 的区别

 

 

 

36、如何进行网站性能优化

 

 

 

37、HTML 和 XHTML 的区别是什么

XHTML 是用 xml 的语法来规范 html

XHTML 元素必须被正确地嵌套

XHTML 元素必须被关闭

 

38、网页内容需要支持多语言，应该怎么做？

 

 

 

39、如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些

 

 

 

40、如果页面使用 ‘application/xhtml+xml’ 会有什么问题吗

 

 

 

41、请解释下什么是语义化的 HTML

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。

语义化的优点如下：

  • 对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息

  • 对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护

 

42、怎么理解 WEB 标准以及 W3C 标准？

（1）WEB 标准：三个部分、模块化

　　① 结构：Html 标签，即页面 body 里写入的标签

　　② 表现：Css 样式表，使页面的结构标签更具美感

　　③ 行为：Js ，页面和用户的交互、页面结构或表现发生变化

（2）W3C 标准：对 WEB 标准提出了规范化的要求，也就是在实际编程中的一些代码规范

　　① 对结构的要求：

  • 标签字母要小写
  • 标签要闭合
  • 标签不允许随意嵌套

　　② 对表现和 js 的要求

  • 尽量使用外联 css 样式表和 js 脚本
  • 样式尽量少用行间样式表，使结构与表现分离
  • 标签的 id 和 class 等属性命名要做到见文知义

 

43、前端页面有哪三层构成？作用是什么？

 ① 结构层：由 HTML 创建，描述网页内容的语义含义

 ② 表示层：由 CSS 创建，描述网页如何显示

 ③ 行为层：由 JS 负责，网页如何对某个事件做出反应

 

44、页面可见性（Page Visibility）API 可以有哪些用途

 

 

 

45、Quirks(怪癖）模式是什么 它和 Standards（标准）模式有什么区别

 

 

 

46、div+css 的布局较 table 布局有什么优点？

① 结构、表现分离，改版的时候更方便，只要改 css 文件。

② 页面加载速度更快、页面显示简洁

③ 易于优化（seo），搜索引擎更友好

 

47、html 常见兼容性问题

 

 

 

48、如何在页面上实现一个圆形的可点击区域

 

 

 

49、HTML 全局属性（global attribute）有哪些

 

 

 

50、meta viewport 原理是什么

 

 

 

51、Viewport 属性值

 

 

 

52、页面导入样式时，使用 link 和 @import 有什么区别

 

 

 

53、label 的作用是什么？是怎么用的？

（1）作用

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

（2）如何使用

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">

 

54、js 放在 html 的不同位置有什么区别吗

（1）原因

因为浏览器在渲染 html 的时候，从上到下依次执行，遇到 js 文件就会停止当前页面的渲染，转而去下载 js 文件；

如果将 script 标签放在头部，在文件很大的情况下，首屏时间就会延长，影响用户体验。

（2）解决方法

  • 将 script 标签放到 body 的底部
  • 通过 defer\async 属性将 js 文件转为异步下载

 

55、移动 HTML5 开发流行的框架有哪些

（1）jQueryMobile

  • jQuery 在手机上和平板设备上的版本
  • 给主流移动平台带来 jQuery 核心库
  • 有完整统一的 jQuery 移动UI框架
  • 支持全球主流的移动平台

（2）jQTouch

  • 是一个 jQuery 的插件
  • 主要用于手机上的 Webkit 浏览器上实现一些包括动画、列表导航、默认应用样式等各种常见 UI 效果的 Java 库
  • 支持包括 iPhone、Android 等手机。

 

56、HTML5 中如何嵌入视频

和音频类似，HTML5 支持 MP4、WebM 和 Ogg 式的视频

<video width=”450″ height=”340″ controls>

<source src=”jamshed.mp4″ type=”video/mp4″>

Your browser does’nt support video embedding feature.

</video>

 

57、Typeof 的作用

  • 数字类型， typeof 返回的值是 number。比如：typeof(1)，返回的值就是 number
  • 字符串类型， typeof 返回的值是 string。比如：typeof(“123”)返回的值是 string
  • 布尔类型， typeof 返回的值是 boolean 。比如：typeof(true) 返回的值是 boolean
  • 对象、数组、null ，返回的值是 object 。比如 typeof(window)，typeof(document)，typeof(null) 返回的值都是 object
  • 函数类型，返回的值是 function。比如：typeof(eval)，typeof(Date) 返回的值都是 function
  • 如果运算数是没有定义的（比如说不存在的变量、函数或者 undefined ），将返回 undefined

 

 

 

 

 

Posted on 2022-03-07 13:45  choco莉特  阅读(305)  评论(0)    收藏  举报