前端3+1-23、24、25

最新推荐文章于 2025-12-20 00:52:11 发布

原创最新推荐文章于 2025-12-20 00:52:11 发布 · 877 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html5

本文介绍了前端开发中的实用技巧，包括form标签的enctype属性、CSS优先级计算、JavaScript中的数值运算陷阱及解决方法等，同时提供了自定义数据属性data-的使用案例。

23 html

题目：说说form标签的enctype属性
答案：设置表单在提交数据时的编码方式。有以下值
1、默认值application/x-www-form-urlencode；对表单数据进行编码（空格转+号，特殊字符转ascii码），若请求方式是post则封装到body，若请求方式是get则拼接到url上
2、multipart/form-data；表单中包含文件（比如图片）必须使用该值
3、text/plain；编码方式为纯文本，即空格转+号，特殊字符不转ascii码

css

题目：css的优先级如何计算
答案：!import>内联>id>class>标签>通配符

js

题目：0.1+0.2、0.1+0.3、0.1*0.2分别等于多少，为啥
答案：

console.log(0.1 + 0.2);
console.log(0.1 + 0.4);
console.log(0.1 * 0.2);
// 0.30000000000000004
// 0.5
// 0.020000000000000004

js使用的是双精度标准，这导致有些树在转成二进制时会有精度丢失的现象，自然在计算后会有误差。（转化后位数无限的会有误差，转化后位数有限且分母是2的倍数的小数大概率不会有误差）

24 html

题目：对属性data-的理解
答案：在html元素中存储自定义数据，有如下用法：（data-*的只能是小写字母，用横线连接，不能用驼峰）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    article::after {
    /* 4、在article元素后添加内容，内容为通过attr()函数获取的data-parent属性的值 */
       content: attr(data-parent);
       color: red;
    }
    /* 5、通过属性选择器设置样式 */
    article[data-column='3'] {
       background-color: deepskyblue;
       width: 50%;
    }
    </style>
</head>

<body>
    <article id="electriccars" data-column="3" data-index-number="1234" data-parent="cars">
        语法非常简单。所有在元素上以data-开头的属性为数据属性。比如说你有一篇文章，而你又想要存储一些不需要显示在浏览器上的额外信息。请使用data属性：
    </article>
</body>

<script>
    var article = document.querySelector('#electriccars');
    
    // 1. 通过getAttribut()方法获取属性值
    console.log(article.getAttribute('data-columns'));
    console.log(article.getAttribute('data-index-number'));
    console.log(article.getAttribute('data-parent'));
   // 2. 通过dataset对象获取属性值，破折号命名需要改写为驼峰命名
    console.log(article.dataset.column);
    console.log(article.dataset.indexNumber);
    console.log(article.dataset.parent);
    // 3、可以重置
    article.dataset.column = 5;
    console.log(article.dataset.columns);
</script>

</html>

css

题目：用过哪些css预处理器，喜欢哪个，原理是啥
答案：用过less、sass。sass用到更多一些。
1、sass。基于ruby，基于服务端处理，功能强大，解析效率更高，上手相对less更难
2、less。基于nodejs，基于客户端处理，功能相对sass简单，解析效率也更低，但更容易上手
核心原理：AST抽象语法树

js

题目：如何让一个数组乱序
答案：

// // 如何快速让一个数组乱序
/**
 * 洗牌方法（Fisher–Yates Shuffle），其基本思想就是从原始数组中随机取一个之前没取过的数字到新的数组中，具体如下：

        1. 初始化原始数组和新数组，原始数组长度为n(已知)；

        2. 从还没处理的数组（假如还剩k个）中，随机产生一个[0, k)之间的数字p（假设数组从0开始）；

        3. 从剩下的k个数中把第p个数取出；

        4. 重复步骤2和3直到数字全部取完；

        5. 从步骤3取出的数字序列便是一个打乱了的数列。
 */
function test(originalArr) {
  const length = originalArr.length;
  let newArr = [];
  for (let i = 0; i < length; i++) {
    const randomI = parseInt(Math.random() * originalArr.length, 10);
    newArr.push(originalArr[randomI]);
    originalArr.splice(randomI, 1);
  }
  return newArr;
}
console.log(test([1, 2, 3, 4, 5]));

25 html

题目：

css

题目：应该使用奇数还是偶数的字体，为啥
答案：偶数。一般设计师给的设计稿大多是偶数，而且用偶数更容易和其它部分样式构成比例关系。

js

题目：写一个判断设备来源的方法
答案：

// 写一个判断设备来源的方法（比如常用的Android和ios判断）
function test() {
  const ua = window.navigator.userAgent;
  if (/android/i.test(ua)) {
    return 'android';
  }
  if (/iphone/i.test(ua)) {
    return 'iphone';
  }
  return null;
}