前端十五道html面试题
目录
01.说一下对语义化的理解？✅
02.说一下iframe有哪些优点和缺点？✅
03.DOCTYPE的作用？严格模式和混杂模式的区别？
04.说一下渐进增强和优雅降级的区别？
05. 标签是否为 HTML 标签？
06.文本超出部分显示省略号
07.说一下web worker?✅
08.如何让一段文本中的所有英文单词的首字母大写
09.rgba() 和 opacity 的透明效果有什么不同？
10.谈谈你对web标准和W3C的理解和认识。
11.列举常用的结构标签，并描述其作用
12.页面导入样式时，使用link和@import有什么区别？
13、主流浏览器内核私有属性css前缀：
14.请描述下 SEO 中的 TDK？
15.前端页面有哪三层构成，分别是什么？作用是什么？
01.说一下对语义化的理解？✅
- 对开发者友好，让人更容易读懂，利于代码可读性
- 对机器友好，让搜索引擎更容易读懂，利于seo
02.说一下iframe有哪些优点和缺点？✅
- 优点：展现嵌入的网页；加载速度较慢的内容，如广告；可以跨子域通信；
- 缺点：iframe会阻塞主页面onload事件；不利于搜索引擎识别；增加http请求；
03.DOCTYPE的作用？严格模式和混杂模式的区别？
！DOCTYPE告诉浏览器以HTML5标准解析页面，如果不写，则进入混杂模式
严格模式（标准模式）：以w3c标准解析代码
混杂模式（怪异模式）：浏览器用自己的方式解析代码，混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作
HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的方法，实现时，已经尽可能大的实现了向后兼容(HTML5 没有严格和混杂之分)。
04.说一下渐进增强和优雅降级的区别？
- 渐进增强是针对低版本浏览器也能保证基础功能，然后对高级浏览器改进追加功能；
- 优雅降级是一开始构建完整功能，再对低版本进行兼容
05.HTML 标签？
不是，
声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。
06.文本超出部分显示省略号
单行：
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; // 最多显示几行
overflow: hidden;07.说一下web worker?✅
Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行
Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。
通过postMessage将结果回传到主线程，这样复杂操作的时候，就不会阻塞主进程了
08.如何让一段文本中的所有英文单词的首字母大写
text-transform：uppercase（全大写）
text-transform：lowercase（全小写）
text-transform：capitalize（首字母大写）
09.rgba() 和 opacity 的透明效果有什么不同？
- opacity 作用于元素，以及元素内的所有内容的透明度，rgba()只作用于元素的颜色或其背景色
- 设置rgba透明的元素的子元素不会继承透明效果
10.谈谈你对web标准和W3C的理解和认识。
web标准主要强调的是一个网站的结构,样式,行为相分离，**（优点）**从而达到结构清晰，易于阅读，易于维护的目的。
W3C对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点：
1.对于结构的要求有：标签字母要小写、标签要闭合、标签不允许随意嵌套。用标签语义化来提高搜索引擎对页面的抓取效率。
2.对于样式和行为的要求有：
尽量使用外链css样式表和js脚本。这样做符合结构,样式,行为分离规范。同时提高页面渲染速度，提高用户的体验。
样式尽量少用行间样式表，使代码易维护、可复用。
11.列举常用的结构标签，并描述其作用
结构标签是专门用于标识页面的不同结构，相对于使用元素而言，结构标签可以实现标签的语义化。
常用的结构标签有以下几种：
header标签，用于定义文档的页眉。
nav标签，用于定义页面的导航链接部分。
section标签，用于定义文档中的节，表示文档中的一个具体的组成部分。
article标签，常用于定义独立于文档其他部分的内容。
aside标签，常用于定义页面的一些额外组成部分，如广告栏，侧边栏和相关引用信息。
footer标签，定义某区域的脚注信息。
12.页面导入样式时，使用link和@import有什么区别？
区别1：link是XHTML标签，除了加载CSS外，还能用于定义RSS, 定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;
区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本(IE5及以下)的浏览器不支持。
区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。
13、主流浏览器内核私有属性css前缀：
- mozilla内核 (firefox,flock等) -moz
- webkit内核(safari,chrome等) -webkit
- opera内核(opera浏览器) -o
- trident内核(ie浏览器) -ms
14.请描述下 SEO 中的 TDK？
答案：在 SEO 中，所谓的 TDK 其实就是 title、description、keywords 这三个标签，title 标题标签，description 描述标签，keywords 关键词标签
15.前端页面有哪三层构成，分别是什么？作用是什么？
答案：分成：结构层、表示层、行为层。
结构层（structural layer）
由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”
表示层（presentation layer）
由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。
行为层（behaviorlayer）
负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。
16 描述从输入url到页面展示的完整过程
- 网络请求
- 解析
- 渲染
1)网络请求:
DNS查询（得到IP ) ，建立TCP连接（三次握手)
浏览器发起HTTP请求
收到请求响应，得到HTML 源代码
继续请求静态资源
解析HTML过程中，遇到静态资源还会继续发起网络请求
JS CSS图片视频等
注意:静态资源可能有强缓存，此时不必请求
2)解析:字符串->结构化数据:
HTML构建 DOM树
CSS构建CSSOM树( style tree )
两者结合，形成render tree
题外话：优化解析
CSS放在
JS放在最下面（或合理使用defer async )
3）渲染: Render Tree云制到页面
计算各个DOM的尺寸、定位，最后绘制到页面
遇到JS 可能会执行（参考defer async )
异步CSS、图片加载，可能会触发重新渲染
17 如何实现多网页多标签tab通讯？
1》使用WebSocket
无跨域限制
需要服务端支持，成本高
2》通过localStorage通讯
同域的多个页面
A页面设置localStorage
其他页面可监听到localStorage值的修改
3》通过SharedWorker 通讯
SharedWorker是WebWorker的一种
WebWorker可开启子进程执行JS，但不能操作DOM
SharedWorker可单独开启一个进程，用于同域页面通讯
总结：
WebSocket 需要服务端，成本较高 可以跨越
localStorage简单易用，推荐 只能同域
SharedWorker调试不方便，不兼容IE11 只能同域
17 如何实现网页和iframe之间的通讯？
iframe 向 父级页面发送消息
在 iframe 页面，使用 window.parent 调用 postMessage 方法，即可发送消息给父级页面。
window.parent.postMessage(message, '*');message 只能是 String 类型，所以如果想发送多条数据，可以使用 JSON 序列化对象。
// 序列化对象
const message = JSON.stringify({
message: 'Hello',
date: Date.now(),
});
window.parent.postMessage(message, '*');使用 JSON.stringify 方法对内容进行序列话，即可在传入 postMessage 方法。
父级页面向 iframe 发送消息
在父级页面，使用 iframe.contentWindow 调用 postMessage 方法，即可发送消息给 iframe。
iframeEl.contentWindow.postMessage(message, '*');iframeEl 表示 iframe DOM 对象。
通过上面两个例子，我们可以得到一个信息。
向谁发送消息，那么调用者对象就是这个发送消息的目标对象，而不是当前对象。
这一点需要非常注意，这里是很容里踩坑的。
接收消息
无论是在 iframe 页面还是父级页面，都是使用 window 监听 message 事件接收消息。
window.addEventListener('message', function (e) {
// 获取消息内容 data
const { data } = e;
});
如果消息内容是序列化后的对象，还需要将消息内容反序列化。
window.addEventListener('message', function (e) {
// 获取消息内容 data
let { data } = e;
data = JSON.parse(data);
});使用 JSON.parse 方法对内容进行反序列化，即可的到传递过来的内容对象。
指定发送消息的域名
上面我们使用 postMessage 方法，传递的第二个参数都是 *，这里的含义是指任何域名都能接收消息。
建议如果知道消息接收方的域名，第二个参数请传递消息接收方的域名。因为这里是会存在安全隐患的，任何站点都可以向你的站点发送消息，如果没有做相关安全处理，是很容易造成攻击的。
iframeEl.contentWindow.postMessage(message, 'https://www.baidu.com');上面的示例代码标识仅当 iframe 的指向 https://www.baidu.com 时才会发送消息。
通过制定域名的的方式，避免安全隐患。
原文链接：https://blog.csdn.net/CH9704/article/details/126517119