01.说一下对语义化的理解？✅

02.说一下iframe有哪些优点和缺点？✅

03.DOCTYPE的作用？严格模式和混杂模式的区别？

04.说一下渐进增强和优雅降级的区别？

05. <!DOCTYPE html> 标签是否为 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.`<!DOCTYPE html>` 标签是否为 `HTML` 标签？

不是，<!DOCTYPE>声明叫做文件类型定义（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放在<head> 中，不要异步加载CSS
JS放在<body>最下面（或合理使用defer async )
<img>提前定义width height

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) {// 获取消息内容 dataconst { data } = e;
});

如果消息内容是序列化后的对象，还需要将消息内容反序列化。

window.addEventListener('message', function (e) {// 获取消息内容 datalet { 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

前端十五道html面试题相关推荐

SpringBoot：三十五道SpringBoot面试题及答案！
SpringBoot面试前言今天博主将为大家分享三十五道SpringBoot面试题及答案,不喜勿喷,如有异议欢迎讨论! Spring Boot 是微服务中最好的 Java 框架. 我们建议你能够成 ...
java实体类转map_十五道经典面试题-JAVA基础篇
十五道JAVA基础面试题送给有需要的童鞋,但是不得不多提醒一句,打铁还需自身硬,计算机软件这个行业,技术和学历才是王道.好了,废话不多说,上菜: 一:面向对象的特征有哪些方面 1. 抽象:抽象就是忽略 ...
前端—每天5道面试题（十二）
前端-每天5道面试题(十二) 每天进步1% 不多就1% 一.CSS3 新特性有哪些 1.颜色:新增 RGBA,HSLA 模式 2. 文字阴影(text-shadow.) 3.边框: 圆角(borde ...
前端—每天5道面试题（十）
前端-每天5道面试题(十) 每天进步1% 不多就1% 一.用 div+css 布局的好处? 表现和内容相分离将设计部分剥离出来放在一个独立样式文件中,HTML 文件中只存放文本信息. 提高搜索引擎 ...
微软十五道面试题答案
一.微软十五道面试题 1.有一个整数数组,请求出两两之差绝对值最小的值, 记住,只要得出最小值即可,不需要求出是哪两个数. 2.写一个函数,检查字符是否是整数,如果是,返回其整数值. (或者:怎样只用 ...
2017年秋招二十套前端面试题分享
前端面试--四月二十家前端面试题分享 1.正文第一套第二套第三套第四套第五套第六套第七套第八套第九套第十套第十一套第十二套第十三套第十四套第十五套第十六套第十七套第 ...
前端 input怎么显示null_小猿圈WEB前端之HTML5+CSS3面试题（一）
学习是一件非常充实的过程,特别是把自己的乐趣变成工作的时候,很多朋友就喜欢学习web前端,所以学习前端,也希望从事前端的工作,但是因为缺少实战经验,所以很多都是卡在面试这关上,下面小猿圈总结了web前 ...
史上最全的前端十大经典算法，赶紧收藏起来吧
史上最全的前端十大经典算法,赶紧收藏起来吧人生没有白走的路,每一步都算数,大家好,我是王同学,今天,给大家分享的内容是:前端十大算法,原创不易,希望大家多多支持! 一.面试官为什么喜欢问算法,当面试 ...
2021西安大小公司十套前端面试题
2021西安大小公司前端十套面试题作者:莹宝思密达以下题目必问: css垂直水平居 vue方向组件传值,路由传参,vuex必问,nextTick使用和keep-alive有可能问 CORS跨域 ...

前端十五道html面试题

01.说一下对语义化的理解？✅

02.说一下iframe有哪些优点和缺点？✅

03.DOCTYPE的作用？严格模式和混杂模式的区别？

04.说一下渐进增强和优雅降级的区别？

05.`<!DOCTYPE html>` 标签是否为 `HTML` 标签？

06.文本超出部分显示省略号

07.说一下web worker?✅

08.如何让一段文本中的所有英文单词的首字母大写

09.rgba() 和 opacity 的透明效果有什么不同？

10.谈谈你对web标准和W3C的理解和认识。

11.列举常用的结构标签，并描述其作用

12.页面导入样式时，使用link和@import有什么区别？

13、主流浏览器内核私有属性css前缀：

14.请描述下 SEO 中的 TDK？

15.前端页面有哪三层构成，分别是什么？作用是什么？

16 描述从输入url到页面展示的完整过程

17 如何实现多网页多标签tab通讯？

17 如何实现网页和iframe之间的通讯？

前端十五道html面试题相关推荐

最新文章

热门文章

前端十五道html面试题

01.说一下对语义化的理解？✅

02.说一下iframe有哪些优点和缺点？✅

03.DOCTYPE的作用？严格模式和混杂模式的区别？

04.说一下渐进增强和优雅降级的区别？

05.<!DOCTYPE html> 标签是否为 HTML 标签？

06.文本超出部分显示省略号

07.说一下web worker?✅

08.如何让一段文本中的所有英文单词的首字母大写

09.rgba() 和 opacity 的透明效果有什么不同？

10.谈谈你对web标准和W3C的理解和认识。

11.列举常用的结构标签，并描述其作用

12.页面导入样式时，使用link和@import有什么区别？

13、主流浏览器内核私有属性css前缀：

14.请描述下 SEO 中的 TDK？

15.前端页面有哪三层构成，分别是什么？作用是什么？

16 描述从输入url到页面展示的完整过程

17 如何实现多网页多标签tab通讯？

17 如何实现网页和iframe之间的通讯？

前端十五道html面试题相关推荐

最新文章

热门文章

05.`<!DOCTYPE html>` 标签是否为 `HTML` 标签？