【前端高频面试题--HTML篇】

码上有前

已于 2024-02-16 17:20:03 修改

阅读量192

点赞数

分类专栏：前端文章标签：前端 html 学习 html5 javascript

于 2023-04-09 01:13:09 首次发布

本文链接：https://blog.csdn.net/qq_45832651/article/details/130034168

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

本文列举了前端面试中关于HTML的高频问题，包括HTML5的新特性、语义化标签、DOCTYPE的作用、Canvas与SVG的区别、script标签的defer和async属性等，并探讨了meta标签、元素的区别以及iframe的优缺点。这些内容对于理解HTML的基础和进阶知识至关重要。

摘要由CSDN通过智能技术生成

🚀 作者：“码上有前”
🚀 文章简介：高频前端面试题–HTML篇
🚀 欢迎小伙伴们点赞👍、收藏⭐、留言💬

在这里插入图片描述

往期精彩内容

【前端高频面试题–HTML篇】
【前端高频面试题–CSS上篇】
【前端高频面试题–CSS下篇】
【前端高频面试题–JS上篇】
【前端高频面试题–JS下篇】
【前端高频面试题–ES6篇】
【前端高频面试题–ES7-ES11】
【前端–异步编程】
【前端高频面试题–TypeScript篇】

【前端高频面试题–git篇】
【前端高频面试题–微信小程序篇】

【前端高频面试题–Vue基础篇】
【前端高频面试题–虚拟DOM篇】
【前端高频面试题–Vue3.0篇】
【前端高频面试题–Vuex上篇】
【前端高频面试题–Vuex下篇】
【前端高频面试题–Vue生命周期篇】
【前端高频面试题–Vue组件通信篇】
【前端高频面试题–Vue路由篇】

【前端-Vue3创建一个新项目】
【前端大屏自适应缩放】
【前端Vue3 + TS项目开发一般流程】

☆☆☆（特别重要）

HTML5有哪些更新

语义化标签
媒体标签
- audio：音频
  - controls 控制面板
  - autoplay 自动播放
  - loop=‘true’ 循环播放
- video视频
  - controls 控制面板
  - width、height
  - poster：指定视频还没有完全下载完毕，或者用户还没有点击播放前显示的封面。默认显示当前视频文件的第一针画面，当然通过poster也可以自己指定。
- source标签：因为浏览器对视频格式支持程度不一样，为了能够兼容不同的浏览器，可以通过source来指定视频源。
表单类型 type=‘’”
- email ：能够验证当前输入的邮箱地址是否合法
- url ：验证URL
- number ：只能输入数字，其他输入不了，而且自带上下增大减小箭头，max属性可以设置为最大值，min可以设置为最小值，value为默认值。
- search ：输入框后面会给提供一个小叉，可以删除输入的内容，更加人性化。
- range ：可以提供给一个范围，其中可以设置max和
- min以及value，其中value属性可以设置为默认值
- color ：提供了一个颜色拾取器
- time ：时分秒
- data ：日期选择年月日
- datatime ：时间和日期(目前只有Safari支持)
- datatime-local ：日期时间控件
- week ：周控件
- month：月控件
表单属性
- placeholder ：提示信息
- autofocus ：自动获取焦点
- autocomplete=“on” 或者 autocomplete=“off” 使用这个属性需要有两个前提：表单必须提交过必须有name属性。
- required：要求输入框不能为空，必须有值才能够提交。
- pattern=" " 里面写入想要的正则模式，例如手机号
- multiple：可以选择多个文件或者多个邮箱
- form=" form表单的ID"
表单事件
- oninput 每当input里的输入框内容发生变化都会触发此事件。
- oninvalid 当验证不通过时触发此事件
- 进度条、度量器
- progress标签：用来表示任务的进度（IE、Safari不支持），max用来表示任务的进度，value表示已完成多少。
- meter属性：用来显示剩余容量或剩余库存（IE、Safari不支持）
- high/low：规定被视作高/低的范围
- max/min：规定最大/小值
- value：规定当前度量值
- 设置规则：min < low < high < max
DOM查询操作
- document.querySelector()
- document.querySelectorAll()
Web存储
- localStorage - 没有时间限制的数据存储
- sessionStorage - 针对一个 session 的数据存储
history API：go、forward、back、pushstate
移除的元素
- 纯表现的元素：basefont，big，center，font, s，strike，tt，u;
- 对可用性产生负面影响的元素：frame，frameset，noframes；
其他
- 拖放：设置元素可拖放，
- 画布（canvas ）：canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
- SVG ：SVG 指可伸缩矢量图形，用于定义用于网络的基于矢量的图形，使用 XML 格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有损失，它是万维网联盟的标准
- 地理定位：Geolocation（地理定位）用于定位用户的位置。

<canvas id="myCanvas" 
  	width="200" 
  	height="100"></canvas>

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

行内元素：a b span img input select strong；
块级元素：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；
空元素，即没有内容的HTML元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签
- 常见的：
  、
  、、、、；
- 鲜见的：、、、、、、、、、、。

src和href的区别

src： 表示对资源的引用。src会将其指向的资源下载并应⽤到⽂档内，如请求js脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕。
href：表示超文本引用，指向一些网络资源。建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。常用在a、link等标签上。

对HTML语义化的理解

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。
语义化的优点如下

对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录；
对开发者友好，使用语义类标签增强可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护
常见的语义化标签

script标签中defer和async的区别

defer 和 async属性都是去异步加载外部的JS脚本，它们都不会阻塞页面的解析，其区别如下

执行顺序：多个带async属性的标签，不能保证加载的顺序；多个带defer属性的标签，按照加载顺序执行；
脚本是否并行执行：async属性，表示后续文档的加载和执行与js脚本的加载和执行是并行进行的，即异步执行；defer属性，加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本需要等到文档所有元素解析完成之后才执行DOMContentLoaded事件触发执行之前。

☆☆（重要）

DOCTYPE(⽂档类型) 的作⽤

DOCTYPE告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档，不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。浏览器渲染页面的两种模式。

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

Canvas和SVG的区别

SVG：SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言XML描述的2D图形的语言，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
其特点如下：
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序（比如谷歌地图）复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
- 不适合游戏应用
Canvas：Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。其特点如下：
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘