前端面试问题整理（HTML方向）

一、前言

2022届硕士的前端面试记录，包括问题和代码考察，持续更新中⏳

参考资料

• 2020届硕士的秋招前端面试实战经验
• 书籍《HTML5+CSS3网页设计与布局经典课堂》

标记说明

• 问题后面的🔥代表了我在面试中遇到的频率，数量越多代表该考点出现频率越大。
• 问题前面的 🎃代表了该题需要写代码。

实用资源

• HTML语法检查在线网站：WHATWG-HTML Conformance Checkers

二、问题整理（HTML）

1. 什么是viewport？

• viewport即视区，是指用户的可视化区域，常常使用在响应式开发以及移动web开发中。
• 可以通过meta标签，设置视区，主要是规定视区的宽度、视区的初始缩放值、 视区的最小缩放值、视区的最大缩放值、是否允许用户缩放等。如下

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

2. 什么是HTML语义化？有什么好处？🔥

• HTML语义化是指要使用一些有结构功能的元素，例如HTML5中新增的<article>、<section>、<nav>、<aside>元素
• HTML语义化的优点有：
  • 开发者友好：使用语义类元素增强了可读性，开发者也能够清晰地看出网页的结构，也更为便于团队的开发和维护。
  • 搜索引擎友好： 有利于SEO，有利于搜索引擎爬虫 更好的理解我们的网页，从而获取更多的有效信息，提升网页的权重。
  • 机器友好：语义类还可以支持读屏软件，根据文章可以自动生成目录。方便特殊群体阅读信息，比如屏幕阅读器/盲人阅读器对 strong 会有一个加重的读音。

3. HTML中的元素分哪几类？

• HTML元素主要分为三类
  • 元数据元素：不显示，用来表明页面信息，例如<meta>元素，用于指定页面编码等信息；<link>元素，用于从外部引入链接资源
  • 流元素：按照文档流式摆放的一类元素，例如<a>、<span>
  • 块级元素：独占一行的一类元素，例如<p>、<form>

4. 🎃判断一段字符串是否是合法的HTML片段（标签闭合、且嵌套关系正确）？

• 首先定义一个正则表达式，用来匹配HTML标签；然后利用match函数从字符串中找出所有的HTML标签，并将它们存入一个数组；最后利用栈结构，判断这些标签是否都闭合且合法。

var check = function (s) {
    var reg = /<.*?>/g; //定义正则表达式
    var found = s.match(reg); //将字符串中的HTML标签存入found
    var stack = []; //定义栈结构
    for (var i=0; i<found.length; i++) {  //遍历found
        if (found[i].includes('/')) { //判断是否是结束标签，如果是继续执行判断，不是则入栈
            found[i] = found[i].slice(2,-1); // 切除结束标签首尾的符号</>
            if (stack.pop().includes(found[i])) continue // 栈顶元素出栈，判断栈顶元素与结束标签是否一致，一致则继续，不一致则函数返回false
            else return false;
        }
        else stack.push(found[i]);
    }
    if (stack.length==0) return true; //若for循环结束，栈为空，则函数返回true，否则函数返回false
    else return false;
}
console.log(check("<h1>Winter is coming</h1><a></a>")); //调用函数测试
console.log(check("<h1><a href=\"/element/div\">Winter is coming</h1>")); //调用函数测试