前端面试宝典总结之HTML
本文章 对各大学习技术论坛知识点，进行总结、归纳自用学习，共勉🙏
文章目录
- 前端面试宝典总结之HTML
- # 1.什么是 DOCTYPE， 有何作用？
- 2.对 html 语义化的理解
- 3. src 和 href 的区别
- 4. title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？
- 5. 什么是严格模式与混杂模式？
- 6.前端页面有哪三层构成，分别是什么？
- 7. iframe的作用以及优缺点
- 8.meta viewport 是做什么用的，怎么写？
- 9.浏览器乱码的原因是什么?如何解决?
- 10.iframe 有那些优点和缺点?
- 11.HTML5 新特性
- 12.如何使用HTML5中的Canvas元素绘制图形？
- 13.什么是data-属性？
- 14.请描述 cookie、sessionStorage 和 localStorage 的区别。
- 15.请描述 script、script async 和 script defer 的区别。
- 16.为什么最好把 CSS 的 link 标签放在 head 之间？为什么最好把 JS 的 script 标签恰好放在 body 之前，有例外情况吗？
- 17. 你用过哪些HTML5标签
# 1.什么是 DOCTYPE， 有何作用？
Doctype是HTML5的文档声明，通过它可以告诉浏览器，使用哪一个HTML版本标准解析文档。在浏览器发展的过程中，HTML出现过很多版本，不同的版本之间格式书写上略有差异。如果没有事先告诉浏览器，那么浏览器就不知道文档解析标准是什么？此时，大部分浏览器将开启最大兼容模式来解析网页，我们一般称为怪异模式，这不仅会降低解析效率，而且会在解析过程中产生一些难以预知的bug，所以文档声明是必须的。
2.对 html 语义化的理解
HTML标签的语义化，简单来说，就是用正确的标签做正确的事情，给某块内容用上一个最恰当最合适的标签，使页面有良好的结构，页面元素有含义，无论是谁都能看懂这块内容是什么。
语义化的优点如下：
- 在没有CSS样式情况下也能够让页面呈现出清晰的结构
- 有利于SEO和搜索引擎建立良好的沟通，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重
- 方便团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化
3. src 和 href 的区别
src和href都是HTML中特定元素的属性，都可以用来引入外部的资源。两者区别如下：
src：全称source，它通常用于img、video、audio、script元素，通过src指向请求外部资源的来源地址，指向的内容会嵌入到文档中当前标签所在位置，在请求src资源时，它会将资源下载并应用到文档内，比如说：js脚本、img图片、frame等元素。当浏览器解析到该元素时，会暂停其它资源下载，直到将该资源加载、编译、执行完毕。这也是为什么将js脚本放在底部而不是头部的原因。href：全称hyper reference，意味着超链接，指向网络资源，当浏览器识别到它指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理，通常用于a、link元素。
4. title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？
title属性表示网页的标题，h1 元素则表示层次明确的页面内容标题，对页面信息的抓取也有很大的影响strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：strong会重读，而b是展示强调内容i是italic(斜体)的简写，是早期的斜体元素，表示内容展示为斜体，而 em 是emphasize（强调）的简写，表示强调的文本
5. 什么是严格模式与混杂模式？
- 严格模式：是以浏览器支持的最高标准运行
- 混杂模式：页面以宽松向下兼容的方式显示，模拟老式浏览器的行为
6.前端页面有哪三层构成，分别是什么？
构成：结构层（html）、表示层(css)、行为层(js)
- 结构层（structural layer）结构层类似于盖房子需要打地基以及房子的悬梁框架，它是由HTML超文本标记语言来创建的，也就是页面中的各种标签，在结构层中保存了用户可以看到的所有内容，比如说：一段文字、一张图片、一段视频等等
- 表示层（presentation layer）表示层是由CSS负责创建，它的作用是如何显示有关内容，学名：层叠样式表，也就相当于装修房子，
- 行为层（behaviorlayer）行为层表示网页内容跟用户之间产生交互性，简单来说就是用户操作了网页，网页给用户一个反馈，这是JavaScript和DOM所呈现的效果
7. iframe的作用以及优缺点
iframe也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入到现有的网页中。
优点：
- 可以用来处理加载缓慢的内容，比如：广告
缺点： - iframe会阻塞主页面的Onload事件
- iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。但是可以通过JS动态给ifame添加src属性值来解决这个问题，当然也可以解决iframe会阻塞主页面的Onload事件的问题
- 会产生很多页面，过于冗余 不易管理
- 浏览器的后退按钮没有作用
- 无法被一些搜索引擎识别
8.meta viewport 是做什么用的，怎么写？
目的是为了在移动端不让用户缩放页面使用的
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale-1, minimum-scale=1">
每个表示的含义
with=device-width将布局视窗（layout viewport）的宽度设置为设备屏幕分辨率的宽度initial-scale=1页面初始缩放比例为屏幕分辨率的宽度maximum-scale=1指定用户能够放大的最大比例minimum-scale=1指定用户能够缩小的最大比例
9.浏览器乱码的原因是什么?如何解决?
编码格式不匹配
浏览器打开网页时,需要根据网页源代码的编码格式来解码。如果网页的编码格式与浏览器的编码格式不匹配,就会出现乱码。比如,网页的编码格式为 UTF-8,而浏览器的编码格式是 GB2312,那么就会出现乱码。
网页编码错误
在编写网页的时候,如果编码出现错误,也会导致浏览器打开网页时出现乱码。比如,在写 HTML 代码时,如果忘记给中文字符指定编码格式,就会出现乱码。
字体缺失
有些网页会使用比较特殊的字体,如果浏览器中没有这个字体,就会找不到对应的字符,从而出现乱码。
10.iframe 有那些优点和缺点?
优点
-
可以在页面上独立显示一个页面或者内容,不会与页面其他元素产生冲突。
-
灵活性与复用性，可以在多个页面中重用同一个页面或者内容,可以减少代码的冗余 。
-
动态加载内容，加载是异步的,页面可以在不等待 iframe 加载完成的情况下进行展示。
-
方便地实现跨域访问，绕过同源策略限制，可以在主页面中嵌入来自不同域名的内容，实现跨域资源的集成和交互
-
集成第三方内容，方便集成广告、地图、视频播放器等第三方服务，这些服务往往需要独立的JavaScript和CSS，Iframe可以避免与主页面的样式和脚本冲突。
缺点 -
SEO不友好， 搜索引擎可能无法正确解析 iframe 中的内容，抓取和索引能力有限；可能影响页面的搜索引擎排名
-
性能影响，会阻塞主页面的 onload 事件
-
和主页面共享连接池,影响页面并行加载
-
安全性问题，Iframe可能被用于点击劫持、恶意脚本注入等安全攻击，需要开发者谨慎处理以确保安全
11.HTML5 新特性
- 语义化标签，新增了一系列标签，如
<header>、<footer>、<nav>、<article>、<section>等，助开发者更清晰地定义文档结构，提高页面的可读性和搜索引擎优化（SEO）。 - 增强型表单，(如可以通过
input的type属性指定类型是color还是date或者url等) - 多媒体支持，媒体元素标签(
video,audio) - canvas,svg
- Geolocation API，地理等位(
navigator.geolocation.getCurrentPosition(callback))，允许Web应用访问用户的地理位置信息，为基于位置的服务提供支持 - 拖放 API，(给标签元素设置属性 draggable 值为 true,能够实现对目标元素的拖动)
- Web Worker，(可以开启一个子线程运行脚本)
- Web Storage，(即
sessionStorage与localStorage) - Websocket，(双向通信协议,可以让浏览器接收服务端的请求)
- dom 查询，(
document.querySelector()和 document.querySelectorAll())
12.如何使用HTML5中的Canvas元素绘制图形？
<html lang="en">
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
</body>
<script>
// 获取元素
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "RoyalBlue";
ctx.fillRect(50, 50, 100, 100);
</script>
</html>
13.什么是data-属性？
在 JavaScript 框架变得流行之前，前端开发者经常使用 data- 属性，把额外数据存储在 DOM 自身中。当时没有其他 Hack 手段（比如使用非标准属性或 DOM 上额外属性）。这样做是为了将自定义数据存储到页面或应用中，对此没有其他更适当的属性或元素。
而现在，不鼓励使用 data- 属性。原因之一是，用户可以通过在浏览器中利用检查元素，轻松地修改属性值，借此修改数据。数据模型最好存储在 JavaScript 本身中，并利用框架提供的数据绑定，使之与 DOM 保持更新。
14.请描述 cookie、sessionStorage 和 localStorage 的区别。
| / | cookie | localStorage | sessionStorage |
|---|---|---|---|
| 由谁来初始化 | 客户端或服务器，服务器可以使用 Set-Cookie 请求头 | 客户端 | 客户端 |
| 过期时间 | 手动设置 | 永久存储 | 会话存储 当前页面关闭时 |
| 在当前浏览器会话（browser sessions）中是否保持不变 | 取决于是否设置了过期时间 | 是 | 否 |
| 是否随着每个 HTTP 请求发送给服务器 | 是，Cookies 会通过 Cookie 请求头，自动发送给服务器 | 否 | 否 |
| 容量（域名） | 4kb | 5MB | 5MB |
| 访问权限 | 任意窗口 | 任意窗口 | 当前页面窗口 |
15.请描述 script、script async 和 script defer 的区别。
- script - HTML 解析中断，脚本被提取并立即执行。执行结束后，HTML 解析继续。
- script async - 脚本的提取、执行的过程与 HTML 解析过程并行，脚本执行完毕可能在 HTML 解析完毕之前。当脚本与页面上其他脚本独立时，可以使用 async，比如用作页面统计分析。
- script defer - 脚本仅提取过程与 HTML 解析过程并行，脚本的执行将在 HTML 解析完毕后进行。如果有多个含 defer 的脚本，脚本的执行顺序将按照在 document 中出现的位置，从上到下顺序执行。
`注意：没有 src 属性的脚本，async 和 defer 属性会被忽略。
16.为什么最好把 CSS 的 link 标签放在 head 之间？为什么最好把 JS 的 script 标签恰好放在 body 之前，有例外情况吗？
把 <link> 标签放在 <head></head> 之间是规范要求的内容。此外，这种做法可以让页面逐步呈现，提高了用户体验。将样式表放在文档底部附近，会使许多浏览器（包括 Internet Explorer）不能逐步呈现页面。一些浏览器会阻止渲染，以避免在页面样式发生变化时，重新绘制页面中的元素。这种做法可以防止呈现给用户空白的页面或没有样式的内容。把 <script> 标签恰好放在 </body> 之前
脚本在下载和执行期间会阻止 HTML 解析。把 <script> 标签放在底部，保证 HTML 首先完成解析，将页面尽早呈现给用户。
例外情况是当你的脚本里包含 document.write() 时。但是现在，document.write() 不推荐使用。同时，将 <script> 标签放在底部，意味着浏览器不能开始下载脚本，直到整个文档 （document） 被解析。也许，对此比较好的做法是，<script> 使用 defer 属性，放在 <head> 中。
17. 你用过哪些HTML5标签
-表示结构的标签 <header> <nav> <main> <article> <section> <aside> <footer>
-表示文字形式
<data> ：比如：展示了一些商品名称，而且每个名称都和一个商品编码相关联。
<ul>
<li><data value="101">华为Mate60</data></li>
<li><data value="102">iPhone15</data></li>
<li><data value="103">三星</data></li>
</ul>
<time> ：表示日期和时间值，机器读取通过 datetime 属性指定。
<p>
我们在每天早上 <time>9:00</time> 开始营业。
</p>
<mark> ：用于高亮文本
-嵌入内容
<video> ：
controls：展示视频自带的控件autoplay：视频马上自动播放poster：海报帧的URLheight、width：视频显示区域的宽和高loop：视频结尾自动回到视频开始的地方
<video controls>
<source src="myVideo.mp4" type="video/mp4">
<source src="myVideo.webm" type="video/webm">
<p>Your browser doesn't support HTML5 video. Here is
a <a href="myVideo.mp4">link to the video</a> instead.</p>
</video>
<!-- 这个例子展示了如何提供多种视频格式以确保浏览器兼容性。controls 属性添加了播放、暂停、音量控制等基础控件。两个 <source> 标签分别指定了MP4和WebM格式的视频源文件，这样大多数现代浏览器都能至少支持其中之一。如果浏览器不支持HTML5视频播放，就会显示段落中的文字，提供一个直接下载视频的链接。 -->
<video src="videofile.ogg" autoplay poster="posterimage.jpg">
抱歉，您的浏览器不支持内嵌视频，不过不用担心，你可以 <a href="videofile.ogg">下载</a>
并用你喜欢的播放器观看!
</video>
<!-- 这个视频嵌入示例，只提供了一个视频源文件（Ogg格式），并且设置了autoplay属性让视频在页面加载后自动播放，以及使用poster属性指定了一个图像作为视频在未播放时的封面。如果浏览器不支持视频播放，则显示提示文字及下载链接。-->
<video src="foo.ogg">
<track kind="subtitles" src="foo.en.vtt" srclang="en" label="English">
<track kind="subtitles" src="foo.sv.vtt" srclang="sv" label="Svenska">
</video>
<!--这个例子展示了如何为视频添加字幕。使用 <track> 标签定义了两种语言的字幕文件（英语和瑞典语），kind="subtitles" 表明这是字幕，srclang 指定了字幕的语言代码，label 提供了用户可选字幕时的可读标签。视频源仅为一个Ogg格式文件，没有额外的浏览器兼容性处理提示。
总结来说，这些例子展示了如何利用HTML5 <video> 标签的-->
<canvas> ：通过JavaScript 和 HTML的 元素来绘制图形
<canvas id="canvas" width="300" height="300"></canvas>
//获取元素
const canvas = document.getElementById('canvas');
//获得一个绘图上下文
const ctx = canvas.getContext('2d');
// 填充绿色
ctx.fillStyle = 'green';
// 设置在左上角(30, 30)，设置成宽200高100
ctx.fillRect(30, 30, 200, 100);
下一篇👉: 前端面试宝典总结2-CSS
