前端3+1-28、29、30-CSDN博客

本文链接：https://blog.csdn.net/a037777777/article/details/122663395

本文介绍了前端开发中的一些实用技巧，包括HTML的元标签应用、CSS的权重计算规则、JavaScript的数组处理方法等，旨在帮助开发者更好地理解和运用这些基础知识。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

28 html

题目：对meta标签的理解
答案：
描述：元数据，用户不可见，但可以被浏览器、搜索引擎等使用
常用场景：
1、移动端设置视口宽度=设备宽度

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

2、移动端页面设置视口宽度=定宽（比如640px）（常见于微信浏览器）

<meta name="viewport" content="width=640,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

3、禁止将页面中的数字识别为电话 or 忽略邮件识别

<meta name="format-detection" content="telephone=no,email=no" />

4、可以在https下请求http

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

5、设置charset=utf-8以防止乱码

<meta charset="utf-8">

6、设置网页相关信息，供SEO

<meta name="author" content="Tony">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="description" content="My tutorials on HTML, CSS and JavaScript">

7、每30s刷新一次文档

<meta http-equiv="refresh" content="30">

8、低版本ie兼容问题，告知浏览器以何种版本渲染页面

<meta http-equiv="X-UA-Compatible" content="ie=edge">

css

题目：rgba和opatity的透明有何区别
答案：
opacity是属性，会作用于整体（包括背景和内容）
rgba是函数，会作用于背景

js

题目：解释下这段代码的意思

[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) })

答案：
作用：在页面上的所有元素加上一个随机颜色的轮廓
解读：

// 1<<24 => 对二进数1小数点右移24位
// (parseInt(Math.random()*(1<<24)).toString(16)) => 获得了一个位于0-16777216之间的随机整数，也就是随机颜色，再使用toString(16)将它转化为十六进制数。
[].forEach.call(
        document.querySelectorAll('*'),
        function(a){
            a.style.outline="1px solid #" + 
            (parseInt(Math.random()*(1<<24)).toString(16))
        }
    )

29 html

题目：啥是无障碍web，开发过程要怎么做
答案：
描述：让有视听障碍的人也能正常阅读网页
如何做：
1、尽可能使用h5的语义化标签
2、img加alt，button加title
3、表单尽量使用label for和控件id相关联

css

题目：权重计算规则
答案：
！important - 无穷大》内联 - 1000》id - 100》class - 10》tag - 1》* - 0
伪类和属性选择器=class，伪元素=tag
由左往右，上一级相同，才会往下一级比较；若权重相同，则后者会覆盖前者（在css中的后者，而不是class中的后者）

js

题目：获取数组最大值最小值
答案：

// 获取数组最大值最小值
function test(arr) {
  const max = Math.max(...arr);
  const min = Math.min(...arr);
  return [max, min];
}

30 html

题目：网上验证码是为了解决啥问题，有啥种类的验证码
答案：
为啥：为了确保是人为操作，而不是机器操作；防止盗号 or 防止爆刷 - 增加服务器负担；
种类：短信验证码，图形验证码

css

题目：说说图片格式和使用场景
答案：
1、jpg；占用内存小，加载起来较快；有损压缩，会降低图片质量；适合大的背景图、色彩丰富的图片，不适合文字多的图片
2、png；占用内存较大，加载起来较慢；无损压缩，图片质量相对较高；适合小图标
3、gif；动态，无损压缩；适合动态小图标
4、svg；矢量图形，不受像素影响，在任何平台表现相对一致，但渲染起来很慢；适合设计模型的展示

js

题目：判断是否回文字符串
答案：

// 判断是否回文字符串，只判断字母数字，忽略大小写
function test(str) {
  const matchStr = str.match(/[A-Za-z0-9]/ig);
  return matchStr.join('').toLowerCase() === matchStr.reverse().join('').toLowerCase();
}
console.log(test('A man, a plan, a canal: Panama'));
console.log(test('race a car'));