目录
什么是MIME types，常见的MIME type有哪些？
注：本文以力扣的前端HTML为基础
本文看完了解基础后，面试前还可以看一下《七天八股速记：前端》来速记一下
什么是HTML
HTML全称是 HyperText Markup Language ，也就是超文本标记语言
HTML被归类为一种标记语言，而不是编程语言
在前端-什么是结构语言、样式语言、脚本语言？-CSDN博客中我称HTML是房子的骨架，是因为他是用来告知浏览器如何组织页面的标记，用来描述网页的表现，展示效果或功能以及行为
“超文本”是指连接单个网站或多个网站网页的链接，比如（下面的超链接就是超文本的一种）
<a href="https://www.example.com">点击我跳转</a>HTML使用“标记”（markup）来注明文本、图片和其他内容
HTML使用“标签”（tag）标记元素，标签由在 < 和 > 中包裹的元素名组成
HTML标签里的元素名不区分大小写
常用的浏览器引擎是什么？
浏览器是一种从Web获取和显示页面的程序，让用户通过超链接访问更多页面
排版引擎（Layout Engine），也称为浏览器引擎（Browser Engine）、页面渲染引擎（Rendering Engine）或样板引擎，它是软件组件，负责获取标记式内容（如HTML、XML及图像文件等）和整合信息（如CSS以及XSL等），并将排版后内容输出至显示器或打印机
上面的CSS就是我之前说的样式语言，控制颜色、字体、大小、位置等（房子的装修）
XML（eXtensible Markup Language）可拓展标记语言，是一种数据存储和传输语言，而现在JSON更加常用了
常见的浏览器排版引擎有：
Mozilla Firefox 使用 Gecko 引擎
Apple Safari 和 早期 Google Chrome 使用 KDE 引擎，后发展成为 WebKit 引擎
Internet Explorer 使用 Trident 引擎
Microsoft Edge 早期使用 EdgeHTML 引擎
Opera 早期使用 Presto 引擎
目前，Google Chrome 及基于 Chromium 浏览器，如 Microsoft Edge，Opera 使用基于 WebKit 分支自行构建的 Blink 引擎
常见的HTML实体字符
HTML语法自身的特殊字符
表示其自身的话得用特殊引用：以&开始，分号；结束（有点像反斜杠 \ 转义符）
原义字符 等价字符饮用
< <
> >
" "
' '
& &
空格
HTML注释
用 <!-- 和 --> 包裹
HTML注释不会被渲染
会被传输
解析时，早起IE浏览器用HTML注释区分版本
通常使用UglifyJS 和 Terser 或正则匹配的方式，在生产环境删除注释
HTML注释用来描述
代码怎么工作
不同部分代码做了什么
HTML语义化是什么？为什么要语义化？一定要语义化吗？
语义是语言的含义，语义化是前端开发的专用术语，指使用具有真实意义的标签来标记内容（比如<header>页眉、<nav>导航栏、<main>页面主要内容等等）语义类标签是对内容的补充，表达标题摘要、文章结构、强调重点、丰富含义、避免歧义
HTML语义化的好处是
易读、增强可读性、便于开发和维护
增强可访问性，便于屏幕阅读器定位和朗读
增强结构清晰度，利于SEO（Search Enigine Optimization 搜索引擎优化：更容易被搜索引擎抓取放在前面，获得更多浏览量）
HTML语义化不是一定要执行的标准
利用无语义标签，如 <div> 和 <span> 可以满足几乎所有开发需求（<div>是用来包“大块内容”的块级容器，<span>是用来包“小段文字”的行内容器，向外显示文字）
部分语义化标签存在兼容性问题，如 <button> 的默认 type 不总为 submit 等
滥用标签会增加不必要的嵌套，增加CSS Reset的样式（虽然CSS不强制要求和HTML的语义化标签对应，但是如果你想写出高质量、可维护、利于SEO的网页，CSS最好和HTML的语义结构对应）
<article class="news-card">
<h2>标题</h2>
<p>新闻内容...</p>
</article>语义化这是一章文章块
CSS：配合语义来美化
.news-card {
border: 1px solid gray;
padding: 10px;
background: #f9f9f9;
}除了HTML 语义化以外，良好的命名，简明扁平的结构，良好的无障碍设计，清晰的导航和分区，一定程度上，也能弥补语义的欠缺，提升代码的机器阅读体验，降低抓取难度，提高索引权重
连续空格如何渲染？
为了增加代码可读性，开发者一般会在HTML元素中嵌套使用空白
空白可以使用空格或TAB缩进实现
HTML解释器会讲连续出现的空白字符识别为一个单独的空格符
如果一定要使用连续空格，可以用全角空格或者实体字符
声明文档类型
<!DOCTYPE html> （即：DOC TYPE）
是最简单有效的文档类型声明，目的是防止浏览器在渲染文档的时候，切换到“怪异模式（兼容模式）”。确保浏览器按照最佳相关规范进行渲染，而不是使用一个不符合规范的渲染模式
哪些字符集编码支持简体中文？
支持简体中文的字符集编码有：
国标开头的 GB 2312、GBK、GB 18030
大五码 BIG5
万国码 Unicode 转换格式即 UTF（-8、-16、-32）是将数字转换到程序数据的编码方案
如何解决乱码问题？
乱码原因：
客户端不支持 HTML 编码的字符集
实际存储的字符集与使用 meta 标签声明的字符集不一致
部分现代浏览器会自动纠正，根据实际使用的字符集编码渲染 HTML
解决方案：使用 UTF-8 存储并在页面添加 <meta charset="utf-8"> 声明编码类型
如何验证HTML是否正确？
验证 HTML 的最好方法使用 W3C 创立并维护的标记验证服务，网址如下：
提交一个线上 URL，HTML 文件或者代码，网页会返回相应的错误报告
重点：什么是HTML5？它有哪些新特性？
HTML5是HTML标准的最新版本。其引入了许多新的特性，使得Web开发变得更加简单和强大。下面列举一些HTML5的新特性：
1.语义化标签：HTML5新增了一些语义化标签，如<header>, <nav>, <article>, <section>, <footer>等，使得网页的结构更加清晰明了。
2.增强的表单控件：HTML5提供了一些新的表单控件，如日期选择器、颜色选择器、数字输入框等，使得表单更加易用和灵活。
3.视频和音频支持：HTML5原生支持视频和音频，可以使用<video>和<audio>标签来嵌入视频和音频文件，不再需要依赖第三方插件（如Flash）来播放。
4.Canvas绘图：HTML5的Canvas API允许我们使用JavaScript在网页上绘制图形、动画和游戏。
5.Web存储：HTML5引入了Web Storage API，使得我们可以在浏览器中存储数据，包括本地存储和会话存储。
6.地理定位：HTML5提供了Geolocation API，可以获取用户的地理位置信息，使得我们可以开发基于地理位置的应用。
7.WebSocket和Server-Sent Events：HTML5提供了两种新的网络技术，WebSocket和Server-Sent Events，使得我们可以实现实时通信和事件推送。
8.Web Workers：HTML5的Web Workers允许我们使用JavaScript创建后台线程，从而提高Web应用的性能和响应能力。
除了上述特性之外，HTML5还引入了许多其他的新特性和API，如IndexedDB、File API、Web Components等，使得Web开发更加高效和灵活。
详情版看：力扣
什么是MIME types，常见的MIME type有哪些？
MIMEtype（现在称为“媒体类型（media type）”，但有时也是“内容类型”（content type））其实就是一种在互联网上标识文件格式和处理方式的标准，它通过在HTTP头部中添加MIME类型信息、和文件一起发送（例如，一个声音文件可能被标记为 audio/ogg 一个图像文件可能是 image/png ），来指示文件类型（有点类似于文件拓展名），让浏览器或其他用户代理（例如邮件客户端）知道如何正确地处理特定的文件格式。
常见的MIME类型：
text/plain 表示文本文件的默认值，一个文本文件应当是人类可读的，并且不包含二进制数据
application/octet-stream 表示所有其他情况的默认值。一种未知的文件类型应当使用此类型。浏览器在处理这些文件时会特别小心，试图防止、避免用户的危险行为
text/html：HTML文件类型
text/plain：纯文本文件类型
text/css：CSS文件类型
text/javascript：JavaScript文件类型
application/json：JSON数据类型
application/xml：XML文件类型
image/jpeg：JPEG图片类型
image/png：PNG图片类型
image/gif：GIF图片类型
application/pdf：PDF文件类型
application/msword：Word文档类型
application/vnd.ms-excel：Excel文件类型
audio/mpeg：用于表示 MP3 音频文件。
video/mp4：用于表示 MP4 视频文件
重点：什么是ARIA？
ARIA（Accessible Rich Internet Applications）是能够让残障人士更加便利地访问 Web 内容和使用 Web 应用的一套机制，来自 W3C（整个互联网定规则的组织，它负责规范 HTML、CSS、XML、DOM 等技术标准，确保所有浏览器、网站、设备都能互通）的网络无障碍计划 WAI（Web Accessibility Initiative）
ARIA 是对超文本标记语言（HTML）的补充，以便在没有其他机制的情况下，使得应用程序中常用的交互和小部件可以传递给辅助交互技术
ARIA 是一组特殊的易用性属性，可以添加到任意标签上，尤其适用于 HTML。role 属性定义了对象的通用类型（例如文章、警告、或幻灯片）。额外的 ARIA 属性提供了其他有用的特性，例如表单的描述或进度条的当前值
ARIA 在大多数流行的浏览器和屏幕阅读器中得到了实现
开发人员应该更倾向使用对应的语义化 HTML 元素，而不是使用 ARIA。
“Use native HTML elements whenever possible before falling back to ARIA.”
——（能用原生 HTML 标签，就别用 ARIA。）