• 欢迎光临~

HTML面试题

开发技术 开发技术 2022-10-19 次浏览

1.说说HTML语义化

HTML标签的语义化,就是用正确的标签做正确的事情,给某块内容用上适当的标签,让页面有良好的结构,页面元素有含义
优点:

  • 适合搜索引擎爬虫爬取有效信息,有利于SEO。语义化还支持读屏软件,根据文字可以自动生成目录
  • 增加代码的可读性,结构更清晰,就算没有样式也可以看出网页的结构

常见的语义化标签:

<h1>~<h6>标签:标题标签,h1等级最高,h6等级最低

<header></header>:用于定义页面的介绍展示区域,通常包括网站logo、主导航、全站链接以及搜索框

<nav></nav>:定义页面的导航链接部分区域

<main></main>:定义页面的主要内容,一个页面只能使用一次。

<article></article>:定义页面独立的内容,它可以有自己的header、footer、sections等

<section></section>:元素用于标记文档的各个部分,例如长表单文章的章节或主要部分

<aside></aside>:一般用于侧边栏

<footer></footer>:文档的底部信息

<small></small>:呈现小号字体效果

<strong></strong>:用于强调文本

2.script标签中defer和async的区别

  • deferasync在网络加载过程是一致的,都是异步执行的;两者的区别在于脚本加载完成之后何时执行
  • async,它的加载和执行是紧紧挨着的,无论声明顺序如何,只要外部js文件加载完成就立刻执行
  • defer,加载文档的同时加载js脚本(此时仅加载不执行),js脚本需要等到文档所有元素解析完成之后才执行
  • 执行顺序: 多个带async属性的标签,不能保证加载的顺序;多个带defer属性的标签,按照加载顺序执行;

3.HTML5 对比 HTML4 有哪些不同之处?HTML5有哪些新特性

HTML5新增:

  1. 新增语义化标签:nav、header、footer、aside、section、article
  2. 音频、视频标签:audio、video
  3. 数据存储:localStorage、sessionStorage
  4. canvas(画布)、Geolocation(地理定位)、websocket(通信协议)
  5. input标签新增属性:placeholder、autocomplete、autofocus、required
  6. history API:go、forward、back、pushstate

HTML5移除的元素有:

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

4.src和href的区别

srchref都是用来引用外部的资源,它们的区别如下:

  • `src:` 表示对资源的引用,它指向的内用会被嵌入当前文档中,src会将指向的资源下载并且应用到该文档中,例如js脚本,浏览器解析到该元素时,会暂停其他资源的下载和处理,会直接加载、编译该资源
  • `href:` 表示超文本引用,它指向一些网络资源,浏览器识别到文件的时候就会并行下载资源,不会停止当前文档的处理。用于a、link等标签上

5.img的srcset属性的作⽤?

因为不同的分辨率和屏幕尺寸图片显示会存在差异,在高分辨率下,就显示高分辨率的图像,或者低分辨率用户,为提供较小的图像。
通过使用 img 标签的 srcset 属性,可定义一组额外的图片集合,让浏览器根据不同的屏幕状况选取合适的图片来显示。

6.响应式图片处理优化: Picture 标签

在 picture下可放置零个或多个source标签、以及一个img标签,为不同的屏幕设备和场景显示不同的图片。
如果source匹配到了, 就会优先用匹配到的, 如果未匹配到合适的source,就使用img标签提供的图片

<picture>
  <source srcset="640.png" media="(min-width: 640px)">
  <source srcset="480.png" media="(min-width: 480px)">
  <img src="320.png" alt="">
</picture>

7.DOCTYPE(⽂档类型) 的作⽤是什么

DOCTYPEHTML5中一种标准通用标记语言文档类型声明,它必须声明在HTML文档的第一行,目的是告诉浏览器以什么模式解析文档,不同模式会影响最终浏览器显示的结果

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

8.常⽤的meta标签有哪些

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

常用的meta标签:

charset,用来描述HTML文档的编码类型:
<meta charset="UTF-8" >

keywords,页面关键词:
<meta name="keywords" content="关键词" />

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

refresh,页面重定向和刷新:
<meta http-equiv="refresh" content="0;url=" />

viewport,适配移动端,可以控制视口的大小和比例:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
viewport的content 参数有以下几种:
width viewport :宽度(数值/device-width)
height viewport :高度(数值/device-height)
initial-scale :初始缩放比例
maximum-scale :最大缩放比例
minimum-scale :最小缩放比例
user-scalable :是否允许用户缩放(yes/no)

robots,搜索引擎索引方式:
<meta name="robots" content="index,follow" />

9.行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

常见块级元素:p、div、form、ul、li、dl、dt、dd、table、h1~h6、

  • 独占一行,宽度跟随父元素的100%,可以设置高度、边距

常见行级元素:span、a、img、input、select、button strong

  • 宽度就是文字或者图片的宽度,不能改变
  • 和其它元素都会在一行显示
  • input准确的说应该是行块级元素默认样式是display:inline-block;

空元素,即没有内容的HTML元素。空元素是在开始标签中关闭的,也就是空元素没有闭合标签:
常见的有:<br>、<hr>、<img>、<input>、<link>、<meta>

使用display属性转换 inline(行)、block(块)、inline-block(行块)

10.title与h1的区别、b与strong的区别、i与em的区别?

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

11. iframe 标签有那些优点和缺点?

iframe 元素会创建包含另外一个文档的内联框架(即行内框架)
优点:

  • 如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决
  • 网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用
    缺点:
  • iframe 会阻塞主页面的 onload 事件
  • 搜索引擎爬虫不能很好的处理iframe中的内容,所以使用iframe会不利于搜索引擎优化(SEO)
  • iframe框架页面会增加服务器的http请求,对于大型网站是不可取的。
  • iframe框架结构有时会让人感到迷惑,如果框架个数多的话,可能会出现上下、左右滚动条,会分散访问者的注意力,用户体验度差

12. 说一下 HTML5 drag(拖拽) API

dragstart: 当用户开始拖动元素或选择文本时触发此事件。
drag:拖动元素或选择文本时触发此事件。
dragenter:当拖动的元素或选择文本输入有效的放置目标时,会触发此事件。
dragover:当将元素或文本选择拖动到有效放置目标(每几百毫秒)上时,会触发此事件。
dragleave:当拖动的元素或文本选择离开有效的放置目标时,会触发此事件。
drop:当在有效放置目标上放置元素或选择文本时触发此事件。
dragend:当拖动操作结束时(释放鼠标按钮或按下退出键),会触发此事件。

13. label 标签的作用是什么?

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

14. Canvas和SVG标签的区别

SVG:

  • SVG是一种使用XML来描述2D图形的语言
  • SVG绘制的是矢量图,矢量图特点就是不会随图片大小改变清晰度,不会模糊
  • SVG的每个图形都被视为对象,如果对象的属性变化,那么浏览器能够自动重现图形

canvas:

  • Canvas是画布,通过js来绘制2D图形,是逐像素进行渲染的。其位置发生改变,就会重新进行绘制
  • Canvas是逐像素渲染的,放大后可能出现锯齿形
  • Canvas能够以.png和.jpg格式保存结果图像

Canvas适合图像密集型的游戏,其中很多对象会被频繁重绘,SVG适合带有大型渲染区域的应用程序(比如谷歌地图)。

15. head 标签有什么作用,其中什么标签必不可少?

head标签它作为一个容器,主要包含了用于描述HTML文档自身信息的标签,这些标签大多情况都是给浏览器和搜索引擎看的
下面这些标签可用在 head 部分:<base>, <link>, <meta>, <script>, <style>, <title>
其中 <title> 定义文档的标题,它是 head 部分中唯一必需的元素。

16.文档声明(Doctype)和<!Doctype html>标签有何作用?

doctype:就是为了告诉浏览器,当前HTML文档使用什么版本的HTML来写的,这样浏览器就能按照声明的版本来正确的解析
<!Doctype html>的作用,就是让浏览器进入标准模式,使用最新的HTML5来解析渲染页面,如果不写,浏览器就会进入混杂模式

17. 严格模式与混杂模式的区分

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

18.HTML5 为什么只需要写 ?

因为HTML5不基于SGML(标准通用标记语言),不需要对DTD进行引用,但需要doctype来规范浏览器的行为,也即按照正常的方式来运行,因此html5只需要写doctype即可
其中,SGML 是标准通用标记语言, 简单的说,就是比 HTML, XML 更老的标准,HTML,XML这两者都是由 SGML 发展而来的,而HTML5 不是的

19.渐进增强和优雅降级之间的区别

渐进增强:针对低版本的浏览器进行构建页面,保证基本的功能,再针对高级浏览器进行效果、交互等改进和追加功能提升用户体验
优雅降级:一开始就构建完整的功能,然后对低版本浏览器兼容

区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要

20. HTML、XML、XHTML 之间有什么区别?

它们都属于标记语言。

  • XML:主要⽤于存储数据和结构。语法严谨,可扩展性强。由于 JSON 也有类似作⽤但更轻量⾼效, XML 的市场变得越来越⼩。
  • XHTML:属于加强版 HTML,为解决 HTML 的混乱问题而生,在语法方面变得和 XML 一样严格。另外,XHTML 的出现也催生了 HTML 5,让HTML向规范化严谨化过渡。
  • HTML:主要用于做界面呈现。HTML 是先有实现,后面才慢慢制定标准的,导致HTML⾮常混乱和松散,语法非常的不严谨。所以新出的HTML 在基础上进行了拓展

XML的要求会比较严格:

  • 元素必须被正确地嵌套
  • 元素必须被关闭
  • 标签名必须用小写字母
  • 文档必须拥有根元素

21.前缀为 data- 开头的元素属性是什么?

H5新增的自定义属性 使用时data-自定义name,这些属性通过dataset属性获取,不支持该属性的浏览器可以通过getAttribute方法获取

22. 说一下HTML5的离线存储?

HTML5的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来,之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示
(1)创建一个和 html 同名的 manifest 文件,然后在页面头部加入 manifest 属性:

<html lang="en" manifest="index.manifest">

在 cache.manifest 文件中编写需要离线存储的资源:

CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html

23.说一下 web worker

因为js是单线程 所有任务只能在一个线程上完成,web worker就是为js创造多线程环境,允许主线程创建Worker线程,将一些任务分配给后者运行,主线程运行的同时,worker线程同时也在后台运行,两者互不干扰
使用new Worker() worker通过 postMessage()方法将结果回传到主线程,主线程监听message事件来获取worker线程完成的状态

//主线程
const worker = new Worker('./worker.js');
// 监听message事件
worker.addEventListener('message', (event) => {
  console.log(event.data);
});

//worker线程
//费时间的操作
function fb(n){
   if(n == 1 || n == 2){
      return 1
   }
   return fb(n - 1) + fb(n - 2);
}
console.time('fb执行时间1')
var result = fb(43)
console.timeEnd('fb执行时间1')
self.postMessage('worker1')

24. 前端页面由哪三层构成,分别作用是什么?

分成:结构层、表示层、行为层。

  1. 结构层:由 HTML这类的标记语言负责创建
  2. 表示层:由 CSS负责创建。装修页面
  3. 行为层:JS构成 页面跟用户之间的交互行为,用户操作了网页,网页给用户一个反馈

25.说说你对 WEB 标准以及 W3C 的理解与认识

web标准

  • web标准主要包括结构、表现和行为三个方面,分别对应html css js,因为浏览器不同避免最终效果在不同浏览器上显示出现差异,遵循web标准会让我们写的页面更统一

w3c
W3C是由万维网联盟提出的一系列标准的集合,遵循w3c制定的web标准,能够使用户浏览者更方便的阅读,使网页开发者之间更好的交流

标准规范:

  • 需要文档声明(DOCTYPE)
  • 标签字母小写、标签要闭合、标签乱嵌套
  • 合理的语义化标签,可提高搜索机器人对网页内容的搜索几率,也便于后续改版、维护
  • 尽量使用外链 css 样式表和 js 脚本。是结构、表现和行为分为三块,符合规范。同时提高页面渲染速度,提高用户的体验

26. 为什么最好把 CSS 的 link 标签放在head之间?

把 <link> 标签放在 <head></head> 之间是规范要求的内容。这种做法可以让页面逐步呈现,提高了用户体验。如果将样式表放在文档底部附近,会使许多浏览器(包括 Internet Explorer)不能逐步呈现页面。
一些浏览器会阻止渲染,以避免在页面样式发生变化时,重新绘制页面中的元素。这种做法可以防止呈现给用户空白的页面或没有样式的内容

27.为什么最好把 JS 的 `script` 标签恰好放在 `/body` 之前?

js脚本在下载和执行期间会阻止 HTML 解析。把 <script> 标签放在底部,保证 HTML 首先完成解析,将页面尽早呈现给用户

28.什么是盒子模型?

指在一个网页文档中,每个元素都被呈现为一个矩形的盒子,描述了元素所占空间的内容
盒子模型有两种,标准盒子和IE盒子(w3c盒子和怪异盒子)
标准盒子宽度是 width + padding + border
IE盒子宽度是 width padding和border已经被包含在width里面了
两种盒子模型可以使用css的box-sizing属性进行转换

标准模型为 box-sizing:content-box;
IE模型为:box-sizing:border-box;

简单理解:标准盒子你再给盒子设置padding或者border的时候,盒子的宽度是会被撑大的,而IE盒子不会

29.img上 title 与 alt

  • alt:全称alternate,切换的意思,如果无法显示图像,浏览器将显示alt指定的内容
  • title:当鼠标移动到元素上时显示title的内容
程序员灯塔
转载请注明原文链接:HTML面试题
喜欢 (0)