收集的前端面试题 - HTML 篇

doctype（文档类型）的作用是什么？ TEST
这三种模式的区别是什么？ TEST
HTML、XML和XHTML有什么区别？ TEST
什么是data-*属性？ TEST
对HTML语义化的理解 TEST
HTML5与HTML4的区别 TEST
有哪些常用的meta标签 TEST
src和href的区别 TEST
img的srcset的作用 TEST
还有什么标签可以实现类似的功能？ TEST
前端存储的方式 TEST
这些方式的区别 TEST

富文本里面， 是如何做到划词的

在富文本环境中实现划词（鼠标滑动选择一组字符并对其进行操作）通常涉及以下几个关键步骤和技术：

  • 事件监听
    • 监听鼠标按下、鼠标移动和鼠标松开这三个主要的鼠标事件。当鼠标按下时，标记选择的开始；在鼠标移动过程中，根据鼠标的位置更新选择范围；鼠标松开时，确定最终的选择。
  • 选择范围计算
    • 使用浏览器提供的 Selection 对象来获取和管理选择的范围。在鼠标移动过程中，不断更新 Selection 对象的范围。
  • 操作处理
    • 一旦选择完成，可以根据具体的需求对选中的字符进行操作。例如，修改样式（如加粗、变色）、获取选中的文本内容、执行复制粘贴等操作。

示例（展示了如何获取选中的文本）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <p>这是一段示例文本，您可以尝试选中一部分。</p>

    <script>
      document.addEventListener("mouseup", function () {
        const selection = window.getSelection();
        if (selection) {
          const selectedText = selection.toString();
          console.log("选中的文本: ", selectedText);
        }
      });
    </script>
  </body>
</html>

AMD、CMD 和 CommonJS 的区别

CommonJS
　　CommonJS 是以在浏览器环境之外构建 javaScript 生态系统为目标而产生的写一套规范，主要是为了解决 javaScript 的作用域问题而定义的模块形式，可以使每个模块它自身的命名空间中执行，该规范的主要内容是，模块必须通过 module.exports 导出对外的变量或者接口，通过 require() 来导入其他模块的输出到当前模块的作用域中；目前在服务器和桌面环境中，node.js 遵循的是 CommonJS 的规范；

　　CommonJS 对模块的加载时同步的；

AMD
　　AMD 主要是为前端 js 的表现指定的一套规范；而 CommonJS 是主要为了 js 在后端的表现制定的，它不适合前端；

　　AMD 是 Asynchronous Module Definition 的缩写，意思是 异步模块定义；采用的是异步的方式进行模块的加载，在加载模块的时候不影响后边语句的运行；

　　AMD 也是采用 require() 语句加载模块的，但是不同于 CommonJS ，它有两个参数；require([‘模块的名字’]，callBack)；requireJs 遵循的就是 AMD 规范；

CMD
　　CMD 是 Common Module Definition 的缩写，是 seajs 推荐的一套规范，CMD 也是通过异步的方式进行模块的加载的，不同于 AMD 的是，CMD 的加载是按照就近规则进行的，AMD 依赖的是前置；CMD 在加载的使用的时候会把模块变为字符串解析一遍才知道依赖了哪个模块；

　　CommonJS 其实也有浏览器端的实现，原理是先将所有模块都定义好并通过 id 索引方便的在浏览器环境中进行解析；

　　AMD 的实现其实是通过 define 函数定义在闭包中，例如：define(id?: String，dependencies?: String[]，factory: Function | Object)；

　　　　其中，id 是模块的名字，是一个可选的参数；dependencied 指定了所要依赖的模块列表，是一个数组，每个依赖的模块的输出将作为参数一次传入 factory 中；如果没有指定 dependencies 的话，那么默认的就是 [“require”，”exports”，”module”]；factory 包括了模块的具体实现，它是一个函数或者对象；如果是函数，那么它的返回值就是模块的输出接口或者值；