HTML5面试相关知识汇总

一，HTML5引入了哪些新特性？

HTML5在HTML4的基础上新增了很多新元素，根据标记内容的类型不同，可以把新的元素分为以下几种类型

1，结构元素

也就是通常说的语义化标签。主要以下内容。

元素名称	说明
header	表示页面中一个内容的区块或整个页面的标题
footer	表示页面或一个页面内容的脚注。
section	表示页面中的一个内容区块
article	表示页面中一块与上下文不相关的独立内容
aside	表示article元素内容之外的，与aricle元素内容相关的辅助信息
nav	表示页面中导航链接的部分
mian	表示页面中的主要内容
figure	表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元

2，功能元素

根据页面内容的需要，HTML5新增了很多专用的功能元素，内容主要如下

元素名称	说明
video	定义视频，比如电影片段或其他视频流。
audio	定义音频，比如音乐或其他音频流
embed	用来插入各种多媒体，格式可以是Midi,Wav,MP3等等
canvas	表示图形，如图标或其他图像。这个元素本身没有行为，仅提供一块画布，它把一个绘图API展现给客户端JavaScript，以使脚本能够把想绘制的东西绘制到这块画布上。

使用方式：

//video
<video src="movie.ogg" controls="controls">video元素</video>

//audio
<audio src="someaudio.wav">audio元素</audio>

//embed
<embed src="horse.wav"/>

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

3，表单元素

通过type属性，HTML5为input元素新增了很多类型。其主要内容如下

名称	格式	说明
tel	<input type="tel"/>	表示必须输入电话号码的文本框
search	<input type="search"/>	搜索文本框
url	<input type="url"/>	表示必须输入URL地址的文本框
email	<input type="email"/>	必须输入电子邮件的文本框
color	<input type="color"/>	颜色文本框
date/month/week…	<input type="date"/>	各种日期框

4，全局属性

HTML5新增了8个全局属性，可以用于任何HTML元素。

名称	介绍
contentEditable	允许用户可以在线编辑元素中的内容。
contextmenu	用于定义 元素的上下文菜单。上下文菜单在用户右键单击元素是出现
data-*	其可以自定义用户数据
draggable	定义元素是否可以被拖动。true-可拖动 false-不可拖动 auto-浏览器默认
dropzone	定义在元素上拖动数据时是否赋值，移动或链接被拖动数据。属性值copy/move/link
hidden	设置元素的可见状态，为true时不可见
spellcheck	是否对元素进行拼写和语法检查
translate	是否应该翻译元素内容

5，新增存储方式

HTML5新增了localStorage，sessionStorage，indexedDB三种数据存储方式。
localStorage用于永久保存客户端的少量数据。
sessionStorage用于临时保存客户端的少量数据，关闭浏览器窗口时，数据会被删除。
indexedDB用于永久保存客户端的大量数据。

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

浏览器乱码主要有以下一些原因
网页源代码的编码格式与乱码文件的编码格式不统一，如网页源代码的格式为UTF-8，而乱码文件的编码格式为GBK，两者冲突了。
解决方案：统一编码格式，
在控制台通过 document.charset查看网页源代码的编码格式

然后查看与文件格式是否保持一致，不一致则修改。

三，请描述 script、script async 和 script defer 的区别？

script

浏览器在解析HTML的时候，如果遇到一个没有任何属性的script标签，就会暂停解析，先发送网络请求获取该JS脚本的代码内容，然后js引擎会执行这段脚本，执行完毕之后在继续解析。其示意如图所示：

script async

async是异步的意思，当浏览器遇到带有async的script脚本时，会异步发送网络请求获取JS脚本，不会停止解析HTML。当获取JS脚本后，如果HTML解析完成，则直接执行脚本，若HTML解析未完成，则暂停HTML解析，执行JS脚本，脚本执行完毕之后再进行HTML解析。其示意图如下：
HTML解析以完成：

HTML解析未完成：

script defer

defer表示延迟，当浏览器遇到带有defer的script脚本时，其发送网络请求也是异步的，但JS脚本的解析会延迟到HTML解析完毕之后再进行。其示意图如下：

四，src和href有哪些区别？

href

href表示超文本引用，是在当前元素和引用资源之前做一个链接的桥梁。主要用于link，a等标签。若在文档中添加href，浏览器会识别该文档为CSS文件，就会并行下载资源并不会停止对当前文件的处理。

src

src表示引用外部资源，并将外部资源下载并替换到文档中当前标签所在位置。主要用于script，img，iframe标签。当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此。

五，iframe的作用以及优缺点

iframe标签是一个内联框架，即用来在当前HTML标签中嵌入另一个文档的，且所有主流浏览器都支持iframe标签。它有所在的优势，也有一些缺陷。

优点

• 简单易用：只需一个iframe标签就可以嵌入另一个网页，能够将不同的内容嵌入到同一个页面中，很灵活，自由。
• 分割界面：使用iframe可以将页面分割成多个区域，每个区域内容不同。
• 跨域访问：通过iframe可以嵌入来自其他域的网页，实现跨域数据共享。

缺点

• 维护性高：iframe中的内容是独立的网页，会增加页面结构的复杂度，难以维护。
• 影响加载性能：每个iframe都需要加载额外的资源，包括HTML,CSS和JavaScript文件，这会增加页面的加载时间和带宽消耗。
• SEO问题：搜索引擎通常不会对iframe的内容进行检索，这会影响到网站的搜索引擎优化(SEO)。

六，行内元素和块级元素分别有哪些，可以如何转换？

说道行内元素和块级元素，首先得大致了解一下它们的含义。

块级元素

块级元素占据了其父元素的整个空间，因此成为了一个“块”。简单来说，就是块级元素独占一行。每个块级元素都会独占一行，默认垂直向下排列。
块级元素的宽度，高度都是可以设置的。宽度没有设置时默认100%，高度由内容决定。

常见的块级元素及其含义

名称	含义
div	元素没有特定的含义。除此之外，由于它属于块级元素
table	表格标签
form	表单标签
p	段落标签
ul	无序列列表标签
h1~h6	标题元素标签，h1最大，h6最小
hr	表示段落级元素之间的主题转换
pre	该标签表示预定义格式文本。在该元素中的文本通常按照原文件中的编排，以等宽字体的形式展现出来，文本中的空白符（比如空格和换行符）都会显示出来
address	表示其中的 HTML 提供了某个人或某个组织（等等）的联系信息

行内元素

顾名思义，行内元素根据名称理解就是在单独行内部的元素，也就是说这个行内元素和其他的行内元素是在一条水平线上排列的，不会换行。
行内元素的宽度，高度设置都是无效的，由它的内容决定。内容的宽度，高度决定了行内元素的宽度，高度。

常见的行内元素及其含义

名称	含义
span	该标签表示短语内容的通用行内容器，并没有任何特殊语义
a	可以通过它的href属性创建通向其他网页、文件、电子邮件地址、同一页面内的位置或任何其他 URL 的超链接
img	图像嵌入元素标签
input	输入元素标签
br	文本标签中的换行标签，还有一些其他的文本标签,等等，不举例了。

转换

通过display属性可以将行内元素和块级元素相互转换。
display:inline:转化为行内元素
display:block:转化为块级元素
display:inline-block:转化为行内块级元素

七，对W3C标准的理解？

W3C标准

W3C标准是由万维网联盟发布的一系列标准和指南，用于确保网络技术的互操作性和可访问性。W3C规范定义了HTML 、CSS、XML、DOM、SVG等一系列网页技术的标准。主要有如下作用：

• 统一开发流程，使用统一标准化工具
• 学习降低成本
• 跨平台，方便迁移不同设备
• 降低代码维护成本

标准举例

• 标签字母要小写：<div></div>
• 标签要闭合：<img src="" alt="" />
• 标签不允许随意嵌套

<!--正确-->
<div>
    <i></i>
</div>

<!--错误-->
<div>
    <i>
</div>
    </i>

参考文章

图解 script 标签中的 async 和 defer 属性 - 掘金
【前端面试题】2023年前端面试真题之HTML篇 - 掘金
2022高频前端面试题——HTML（上篇） - 掘金
前端面试系列初章——HTML & CSS 篇 - 掘金