面试 HTML 框架八股文十问十答第一期
相信看了本文后,对你的面试是有一定帮助的!关注专栏后就能收到持续更新!
⭐点赞⭐收藏⭐不迷路!⭐
1)src和href的区别
- src和href的区别:
- src(source):
- 用于外部资源的引入,比如
<script>
标签的src
属性用于引入外部JavaScript文件。 - 浏览器会根据src的值发起请求,并执行相应的资源。
- 用于替代内嵌内容。
- 用于外部资源的引入,比如
- href(hypertext reference):
- 用于建立当前元素与外部资源之间的关系,比如
<link>
标签的href
属性用于引入外部样式表。 - 浏览器不会像
src
一样去获取资源,而是根据href
的值建立元素与外部资源的关联。 - 用于链接到外部资源,例如CSS文件或超链接。
- 用于建立当前元素与外部资源之间的关系,比如
- src(source):
2)对HTML语义化的理解
HTML语义化是指在编写HTML代码时,使用具有含义的标签,使文档结构清晰、易读、有助于理解。语义化的优点包括:
- 提升可访问性: 有意义的标签可以提高页面在辅助技术(如屏幕阅读器)中的表现,使页面更容易理解。
- 搜索引擎优化(SEO): 搜索引擎能够更好地理解文档结构,提高网页在搜索结果中的排名。
- 便于维护: 具有语义的HTML使代码更易于理解和维护,降低团队合作的难度。
- 跨平台兼容性: 语义化的HTML有助于在不同设备和平台上获得一致的显示效果。
3)DOCTYPE(⽂档类型) 的作⽤
DOCTYPE声明用于指定HTML文档的版本和类型,告诉浏览器使用哪个HTML规范来解析文档。它的作用包括:
- 触发标准模式: 通过正确声明DOCTYPE,可以让浏览器以标准模式(standards mode)来渲染页面,确保浏览器按照规范进行渲染。
- 确保浏览器正确解析文档: DOCTYPE声明告诉浏览器使用哪个HTML版本的规范解析文档,以确保正确显示页面。
- 提高浏览器渲染性能: 标准模式下的渲染更符合规范,有助于提高页面的性能。
例子:<!DOCTYPE html>
4)script标签中defer和async的区别
- defer:
- 告诉浏览器立即下载文件,但延迟执行脚本,即在文档解析完成后才执行。
- 多个带有defer属性的脚本按照它们在文档中的顺序执行。
- 适用于脚本之间没有依赖关系,且需要在文档解析完成后执行的情况。
- async:
- 告诉浏览器立即下载文件,下载完成后立即执行脚本,不等待其他脚本和文档解析。
- 多个带有async属性的脚本不能保证执行顺序,谁先下载完成就先执行谁。
- 适用于独立的脚本,彼此之间没有依赖关系。
使用示例:
js
<script defer src="script1.js"></script>
<script async src="script2.js"></script>
5)常⽤的meta标签有哪些
<meta charset="UTF-8">
: 指定文档使用UTF-8字符集。<meta name="viewport" content="width=device-width, initial-scale=1.0">
: 针对移动设备设置视口,以确保页面在不同设备上的显示效果良好。<meta name="description" content="描述内容">
: 提供页面的描述,用于搜索引擎显示搜索结果摘要。<meta name="keywords" content="关键词1, 关键词2, ...">
: 指定页面的关键词,有助于搜索引擎优化。<meta name="author" content="作者">
: 指定页面的作者信息。<meta http-equiv="X-UA-Compatible" content="IE=edge">
: 设置IE浏览器使用最新的引擎渲染页面。<meta name="robots" content="index, follow">
: 控制搜索引擎爬虫的行为。
这些meta标签有助于提高网页的可访问性、搜索引擎优化和用户体验。
6)HTML5有哪些更新
- HTML5引入了许多新特性和API,其中一些主要的更新包括:
- 语义化标签: 引入了一系列新的语义化标签,如
<header>
、<nav>
、<article>
、<section>
、<footer>
等,以更清晰地描述文档结构。 - 多媒体支持: 新增了
<audio>
和<video>
标签,提供原生的音频和视频支持。 - Canvas绘图: 引入了
<canvas>
标签,使得通过JavaScript脚本可以进行动态绘图。 - 新表单特性: 引入了一些新的表单元素和属性,如
<input type="date">
、<input type="email">
、<input type="url">
等,以及placeholder
、required
等属性。 - 本地存储: 提供了localStorage和sessionStorage,用于在客户端存储数据。
- Web Workers: 支持在后台运行的多线程脚本,提高前端性能。
- WebSockets: 提供了基于WebSocket协议的API,支持实时双向通信。
- 语义化标签: 引入了一系列新的语义化标签,如
7)img的srcset属性的作⽤?
srcset
属性是<img>
标签的一个属性,用于指定多个图像源,以便根据不同的屏幕尺寸和分辨率选择最合适的图像进行显示。主要作用包括:
- 响应式图像: 根据设备的屏幕尺寸和分辨率,选择合适的图像,以优化页面加载速度和显示效果。
- 节省带宽: 避免在高分辨率设备上加载过大的图像,节省用户的带宽和提高页面加载性能。
- 提高用户体验: 显示适合设备屏幕的图像,提高用户体验和页面的可读性。
示例:
html
<img src="image.jpg" srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x" alt="描述">
8)行内元素有哪些?块级元素有哪些? 空(void)元素有那些?
- 行内元素:
<span>
、<a>
、<strong>
、<em>
、<img>
、<br>
等。- 默认在一行内显示,不会独占一行,只占据自身的宽度。
- 块级元素:
<div>
、<p>
、<h1>
到<h6>
、<ul>
、<ol>
、<li>
等。- 默认独占一行,占据整个可用的宽度。
- 空(void)元素:
- 指没有内容的元素,只有一个开始标签,没有结束标签。
- 如
<br>
、<img>
、<input>
、<hr>
等。
9)说一下 web worker
Web Worker是HTML5引入的一项技术,允许在浏览器中创建后台线程,使得脚本能够在主线程之外运行。主要特点包括:
- 多线程执行: 允许在后台线程中执行脚本,避免阻塞主线程,提高页面性能和响应速度。
- 独立的全局对象: Web Worker拥有自己独立的全局对象,与主线程的全局对象相互独立,无法直接访问主线程中的变量和DOM。
- 通过消息传递通信: 主线程和Web Worker之间通过消息传递进行通信,通过postMessage和onmessage实现。
- 不可操作DOM: Web Worker无法直接操作DOM,主要用于处理计算密集型任务和异步操作。
示例:
js
// 主线程
const worker = new Worker('worker.js');
worker.postMessage('Hello from main thread!');
worker.onmessage = (event) => {
console.log('Received message from Web Worker:', event.data);
};
// Web Worker (worker.js)
onmessage = (event) => {
console.log('Received message in Web Worker:', event.data);
postMessage('Hello from Web Worker!');
};
10)HTML5的离线储存怎么使用,它的工作原理是什么
HTML5的离线储存通过Application Cache实现。使用离线储存,可以使网页在没有网络连接时仍然能够访问并加载。使用步骤包括:
-
创建一个Manifest文件: 在Manifest文件中列出需要离线存储的资源,如HTML文件、CSS、JavaScript、图片等。
-
在HTML文件中引用Manifest文件: 在HTML文件的
<!DOCTYPE html> <html manifest="example.appcache"> </html><html>
标签中通过manifest
属性引用Manifest文件。 -
Manifest文件示例(example.appcache):
CACHE MANIFEST
版本号
注释行,以#开头
明确指定需要缓存的资源
CACHE:
/css/style.css
/js/script.js
/images/logo.png明确指定需要在线获取的资源
NETWORK:
/api/data明确指定不缓存的资源
FALLBACK:
/offline.html
- 浏览器首次访问页面时,会下载Manifest文件中列出的资源,并将它们存储在离线缓存中。
- 之后,如果用户再次访问页面且处于离线状态,浏览器将从离线缓存中加载页面所需的资源,而不需要发起网络请求。
- 如果资源在离线缓存中发生变化,浏览器会在下一次在线访问时检测到,并更新离线缓存中的资源。
- 注意,Manifest文件中的每一行都可能以特定的符号开头,如
CACHE
、NETWORK
、FALLBACK
,它们分别表示缓存的资源、需要在线获取的资源和指定的备用页面。
使用HTML5离线储存有助于提高应用程序的性能和用户体验,特别是在网络连接不稳定或者处于离线状态时。然而,也要注意谨慎使用,确保及时更新资源,以防止用户访问过期或过时的内容。
开源项目地址:https://gitee.com/falle22222n-leaves/vue_-book-manage-system
已 300 + Star!
⭐点赞⭐收藏⭐不迷路!⭐