HTML面试题
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的区别
defer
和async
在网络加载过程是一致的,都是异步执行的;两者的区别在于脚本加载完成之后何时执行async
,它的加载和执行是紧紧挨着的,无论声明顺序如何,只要外部js文件
加载完成就立刻执行defer
,加载文档的同时加载js脚本(此时仅加载不执行),js脚本需要等到文档所有元素解析完成之后才执行- 执行顺序: 多个带
async
属性的标签,不能保证加载的顺序;多个带defer
属性的标签,按照加载顺序执行;
3.HTML5 对比 HTML4 有哪些不同之处?HTML5有哪些新特性
HTML5新增:
- 新增语义化标签:
nav、header、footer、aside、section、article
- 音频、视频标签:
audio、video
- 数据存储:
localStorage、sessionStorage
canvas(画布)、Geolocation(地理定位)、websocket(通信协议)
input
标签新增属性:placeholder、autocomplete、autofocus、required
- history API:
go、forward、back、pushstate
HTML5移除的元素有:
- 纯表现的元素:
basefont,big,center,font, s,strike,tt,u
- 对可用性产生负面影响的元素:
frame,frameset,noframes
4.src和href的区别
src
和href
都是用来引用外部的资源,它们的区别如下:
- `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(⽂档类型) 的作⽤是什么
DOCTYPE
是HTML5
中一种标准通用标记语言文档类型声明,它必须声明在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. 前端页面由哪三层构成,分别作用是什么?
分成:结构层、表示层、行为层。
- 结构层:由
HTML
这类的标记语言负责创建 - 表示层:由
CSS
负责创建。装修页面 - 行为层:
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
的内容
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体