面试 HTML 框架八股文十问十答第一期

面试 HTML 框架八股文十问十答第一期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

1）src和href的区别

  1. src和href的区别：
    • src（source）：
      • 用于外部资源的引入，比如<script>标签的src属性用于引入外部JavaScript文件。
      • 浏览器会根据src的值发起请求，并执行相应的资源。
      • 用于替代内嵌内容。
    • href（hypertext reference）：
      • 用于建立当前元素与外部资源之间的关系，比如<link>标签的href属性用于引入外部样式表。
      • 浏览器不会像src一样去获取资源，而是根据href的值建立元素与外部资源的关联。
      • 用于链接到外部资源，例如CSS文件或超链接。

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属性的脚本不能保证执行顺序，谁先下载完成就先执行谁。
    • 适用于独立的脚本，彼此之间没有依赖关系。

使用示例：

<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有哪些更新

  1. 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>标签的一个属性，用于指定多个图像源，以便根据不同的屏幕尺寸和分辨率选择最合适的图像进行显示。主要作用包括：

  • 响应式图像： 根据设备的屏幕尺寸和分辨率，选择合适的图像，以优化页面加载速度和显示效果。
  • 节省带宽： 避免在高分辨率设备上加载过大的图像，节省用户的带宽和提高页面加载性能。
  • 提高用户体验： 显示适合设备屏幕的图像，提高用户体验和页面的可读性。

示例：

<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，主要用于处理计算密集型任务和异步操作。

示例：

// 主线程
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实现。使用离线储存，可以使网页在没有网络连接时仍然能够访问并加载。使用步骤包括：

  1. 创建一个Manifest文件： 在Manifest文件中列出需要离线存储的资源，如HTML文件、CSS、JavaScript、图片等。
  2. 在HTML文件中引用Manifest文件： 在HTML文件的<html>标签中通过manifest属性引用Manifest文件。
<!DOCTYPE html>
<html manifest="example.appcache">
<!-- 页面内容 -->
</html>
  1. 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！

⭐点赞⭐收藏⭐不迷路！⭐

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/650808.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

数据结构与算法教程，数据结构C语言版教程！（第六部分、数据结构树，树存储结构详解）二

数据结构与算法教程，数据结构C语言版教程！（第六部分、数据结构树，树存储结构详解）二

第六部分、数据结构树&#xff0c;树存储结构详解 数据结构的树存储结构&#xff0c;常用于存储逻辑关系为 "一对多" 的数据。 树存储结构中&#xff0c;最常用的还是二叉树&#xff0c;本章就二叉树的存储结构、二叉树的前序、中序、后序以及层次遍历、线索二叉树、…
阅读更多...
300. 最长递增子序列（动态规划）

300. 最长递增子序列（动态规划）

动态规划&#xff1a; 状态定义&#xff1a;dp[i]表示以索引为第i个字符结尾的最长递增子序列的长度&#xff0c;d[n-1]表示以第n-1个字符作为结尾的最长递增子序列的长度&#xff0c;但是这并不是答案&#xff0c;因为整个序列中的最长递增子序列不一定以n-1结尾&#xff0c;…
阅读更多...
Docker部署思维导图工具SimpleMindMap并实现公网远程访问

Docker部署思维导图工具SimpleMindMap并实现公网远程访问

文章目录 1. Docker一键部署思维导图2. 本地访问测试3. Linux安装Cpolar4. 配置公网地址5. 远程访问思维导图6. 固定Cpolar公网地址7. 固定地址访问 SimpleMindMap 是一个可私有部署的web思维导图工具。它提供了丰富的功能和特性&#xff0c;包含插件化架构、多种结构类型&…
阅读更多...
如何重置某个css属性值(unset)

如何重置某个css属性值(unset)

场景 你用了别人的UI框架&#xff0c;然后你发现&#xff0c;你给css动态赋的值&#xff0c;被UI框架的优先级更高的css覆盖了。你可以写js来改变它&#xff0c;但是如果有很多层循环操作&#xff0c;你需要写一大段的js&#xff0c;此时js并不是最优的选择&#xff0c;你真正…
阅读更多...
【Unicode】Character ‘ENQUIRY‘ (U+0005)

【Unicode】Character ‘ENQUIRY‘ (U+0005)

询问 result.append("\u0005");Unicode Character ‘ENQUIRY’ (U0005)
阅读更多...
js中字符串string，遍历json/Object【匹配url、邮箱、电话，版本号，千位分割，判断回文】

js中字符串string，遍历json/Object【匹配url、邮箱、电话，版本号，千位分割，判断回文】

目录 正则 合法的URL 邮箱、电话 字符串方法 千位分割&#xff1a;num.slice(render, len).match(/\d{3}/g).join(,) 版本号比较 判断回文 json/Object 遍历 自身属性 for...inhasOwnProperty(key) Object.获取数组(obj)&#xff1a;Object.keys&#xff0c;Object…
阅读更多...
深度强化学习（王树森）笔记02

深度强化学习（王树森）笔记02

深度强化学习&#xff08;DRL&#xff09; 本文是学习笔记&#xff0c;如有侵权&#xff0c;请联系删除。本文在ChatGPT辅助下完成。 参考链接 Deep Reinforcement Learning官方链接&#xff1a;https://github.com/wangshusen/DRL 源代码链接&#xff1a;https://github.c…
阅读更多...
taro3 + vue3 + ts 跨平台体验记录

taro3 + vue3 + ts 跨平台体验记录

taro3 vue3 ts 跨平台体验记录&#xff0c;根据进度不定期更新。 目标平台包含&#xff1a;H5、微信小程序、APP。开发环境&#xff1a;windows 安装cli【官方安装文档】 npm install -g tarojs/cli常用命令 // 查看taro版本 npm info tarojs/cli创建demo项目 taro init…
阅读更多...
Python+appium自动化测试总结

Python+appium自动化测试总结

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号【互联网杂货铺】&#xff0c;回复 1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 前言 pythonappium自动化测试系列就要告一段落了&#xff0c;本…
阅读更多...
spring-boot redis stream消息队列demo-及死信简单处理

spring-boot redis stream消息队列demo-及死信简单处理

Redis stream 是 Redis 5 引入的一种新的数据结构&#xff0c;它是一个高性能、高可靠性的消息队列&#xff0c;主要用于异步消息处理和流式数据处理。在此之前&#xff0c;想要使用 Redis 实现消息队列&#xff0c;通常可以使用例如&#xff1a;列表&#xff0c;有序集合、发布…
阅读更多...
【C++】istream类型对象转换为逻辑条件判断值

【C++】istream类型对象转换为逻辑条件判断值

前言 大家好吖&#xff0c;欢迎来到 YY 滴 系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY的《Linux》专…
阅读更多...
使用 sorted set 实现令牌桶限流

使用 sorted set 实现令牌桶限流

业务场景为限制消息发送&#xff0c;要求每天不超过一次&#xff0c;每七天不超过三次。 Redission 的 RRateLimiter 虽然功能完备且支持自定义限流配置&#xff0c;但是每个限流器都需要维护三个 key&#xff0c;并且 lua 脚本中的判断逻辑较为复杂。 见&#xff1a;Redisso…
阅读更多...
LiveGBS流媒体平台GB/T28181常见问题-如何快速查看推流上来的摄像头并停止摄像头推流？

LiveGBS流媒体平台GB/T28181常见问题-如何快速查看推流上来的摄像头并停止摄像头推流？

LiveGBS流媒体平台GB/T28181常见问题-如何快速查看推流上来的摄像头并停止摄像头推流&#xff1f; 1、负载信息2、负载信息说明3、会话列表查看3.1、会话列表 4、停止会话5、搭建GB28181视频直播平台 1、负载信息 实时展示直播、回放、播放、录像、H265、级联等使用数目 2、负…
阅读更多...
Python算法题集_接雨水

Python算法题集_接雨水

本文为Python算法题集之一的代码示例 题目42&#xff1a;接雨水 说明&#xff1a;给定 n 个非负整数表示每个宽度为 1 的柱子的高度图&#xff0c;计算按此排列的柱子&#xff0c;下雨之后能接多少雨水 示例 1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1]…
阅读更多...
ElasticSearch7.7.1集群搭建

ElasticSearch7.7.1集群搭建

前言 Elasticsearch&#xff08;ES&#xff09;是一个基于Apache Lucene的分布式、高扩展、近实时的搜索引擎&#xff0c;主要用于海量数据快速存储、实时检索、高效分析的场景。通过简单易用的RESTful API&#xff0c;Elasticsearch隐藏了Lucene的复杂性&#xff0c;使得全文搜…
阅读更多...
数论Leetcode204. 计数质数、Leetcode858. 镜面反射、Leetcode952. 按公因数计算最大组件大小

数论Leetcode204. 计数质数、Leetcode858. 镜面反射、Leetcode952. 按公因数计算最大组件大小

Leetcode204. 计数质数 题目 给定整数 n &#xff0c;返回 所有小于非负整数 n 的质数的数量 。 代码 class Solution:def countPrimes(self, n: int) -> int:if n < 2:return 0prime_arr [1 for _ in range(n)]prime_arr[0], prime_arr[1] 0, 0ls list()for i in…
阅读更多...
Python编程 从入门到实践（项目二：数据可视化）

Python编程 从入门到实践（项目二：数据可视化）

本篇为实践项目二&#xff1a;数据可视化。 配合文章python编程入门学习&#xff0c;代码附文末。 项目二&#xff1a;数据可视化 1.生成数据1.1 安装Matplotlib1.2 绘制简单的折线图1.2.1 修改标签文字和线条粗细1.2.2 校正图形1.2.3 使用内置样式1.2.4 使用scatter()绘制散点…
阅读更多...
点云格式-PCD格式介绍

点云格式-PCD格式介绍

PCD格式介绍 一、概述二、PCD 版本三、文件格式头信息四、数据存储格式类型五、优于其他文件格式的优点六、例子 一、概述 PCD文件格式是PCL库最常用的一种数据格式、也是其提供的一个独有的数据格式&#xff0c;PCD文件格式并不是要重新发明轮子&#xff0c;而是为了补充现有的…
阅读更多...
59.螺旋矩阵II（力扣LeetCode）

59.螺旋矩阵II（力扣LeetCode）

59.螺旋矩阵II 题目描述 给你一个正整数 n &#xff0c;生成一个包含 1 到 n2 所有元素&#xff0c;且元素按顺时针顺序螺旋排列的 n x n 正方形矩阵 matrix 。 示例 1&#xff1a; 输入&#xff1a;n 3 输出&#xff1a;[[1,2,3],[8,9,4],[7,6,5]] 示例 2&#xff1a; 输…
阅读更多...
【测试】测试用例场景设计

【测试】测试用例场景设计

专注 文章目录 用例设计公式登录测试用例测试用例设计思路购物车测试用例水杯设计测试用例发红包测试用例1. 正常情况下的测试用例&#xff1a;2. 边界情况下的测试用例&#xff1a;3. 异常情况下的测试用例&#xff1a;4. 特殊情况下的测试用例&#xff1a; 微信朋友圈1. 正常…
阅读更多...
最新文章

Copyright @ 2022~2023