HTML基础知识面试题

什么是语义化的HTML

HTML5提供了更加与异化的标签，例如 header， nav，footer，article，section 等标签

• 方便开发者开发和阅读代码
• 方便搜索引擎识别网站结构，有利于SEO
• 方便设备解析（如盲人阅读器等）
• 在没有 CSS 样式下，页面也能呈现出很好地内容结构、代码结构。

回流和重绘

回流就是浏览器布局需要重新排版，重回就是浏览器渲染时重新绘制页面，回流肯定会导致重绘，重绘不一定会导致回流，比如颜色改变

什么情况会导致回流

• 首次渲染页面，页面窗口改变
• 元素大小（width，height），位置发生变化（relative情况下的left，top，right，bottom）
• 字体变化（font）

JS哪些操作会导致回流

常见的操作有以下

client[x] ，offset[x] ，scroll[x]

x 的值有 width , height , top , left

scrollIntoView ，scrollTo getBoundingClientRect

举个例子

const div = document.getElementById('div');
const clientHeight = div.clientHeight;
const scrollHeight = div.scrollHeight;
const rect = div.getBoundingClientRect();

iframe的优缺点？

优点

• 实现跨域

  • 通过 window.name 共享变量

  • 通过 postMessage 传输数据

    window.addEventListener('message', function(e) {
      console.log('接收到的消息:', e.data);
    });
    
    // iframe发送消息
    let targetOrigin = 'http://localhost:8080';
    window.frames[0].postMessage('www.1024nav.com', targetOrigin);

• 可以在一个窗口实现同时加载多个第三方域名下页面内容

• iframe也是实现微前端的解决方案之一

缺点：

• 搜索引擎无法识别
• 会影响页面的首屏加载时间

img标签title和alt的区别

alt：在图片加载失败时，会显示alt的内容，alt有利于SEO

title：在鼠标移动到屏幕上时，会显示title的内容