web

# 内核

浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不过习惯将之称为“浏览器内核”。负责对网页语法的解释并渲染（显示）网页。

# Trident

Trident(IE内核)：沿用到IE11，'IE内核'。

# Gecko

Gecko(Firefox内核)

# Presto

Presto(Opera前内核) (已废弃)：该款引擎的特点就是渲染速度的优化达到了极致，然而代价是牺牲了网页的兼容性。Opera现已改用Google Chrome的Blink内核。

# Webkit

Webkit(Safari内核,Chrome内核原型,开源)

Blink是一个由Google和Opera Software开发的浏览器排版引擎。

链接 (opens new window)

# 浏览器内核理解

主要分成两部分：渲染引擎(Layout Engine或Rendering Engine)和JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。 JS引擎：解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

# DOCTYPE

页面添加了<!DOCTYPE html>(注意：大小写不敏感)，那么就等同于开启了标准模式

Doctype：(Document Type)文档类型，它位于文档中最前面的位置，处于标签之前。 告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。 标准模式（Standards mode）以浏览器支持的最高标准运行；混杂模式（Quirks mode）中页面是一种比较宽松的向后兼容的方式显示。

HTML5不基于SGML（ Standard Generalized Markup Language 标准通用标记语言 ），因此不需要对DTD（DTD Document Type Definition 文档类型定义）进行引用，但是需要DOCTYPE来规范浏览器行为。

HTML4.01基于SGML，所以需要引用DTD。才能告知浏览器文档所使用的文档类型，如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • 标准模式：浏览器按照 W3C 标准解析执行代码
  • 怪异模式：浏览器根据自己的方式解析执行代码，因为不同浏览器解析,执行方式不一样，所以叫怪异模式

# 区别：

(仅供参考，测试后发现有的已经不符合实际)

  • 在怪异模式下，盒模型为怪异盒模型 而在标准模式下为标准盒子模型?
  • 图片元素的垂直对齐方式对于行内元素和 table-cell 元素，标准模式下
  • vertical-align 属性默认值是 baseline，而在怪异模式下，table 单元格中的图片的 vertical-align 属性默认值是 bottom，因此在图片底部会有几像素的空间
  • 元素中的字体css中font的属性都是可以继承的，怪异模式下，对于table元素，字体的某些元素不能从其他封装元素继承中得到，特别是 font-size属性
  • 内联元素的尺寸标准模式下，non-replaced inline 元素无法自定义大写，怪异模式下，定义元素的宽高会影响元素的尺寸
  • 元素的百分比高度当一个元素使用百分比高度时，在标准模式下，高度取决于内容变化，在怪异迷失下，百分比被准确应用
  • 元素溢出的处理标准模式下，overflow 取值默认值为 visible，在怪异模式下，这个溢出会被当做扩展 box 对待，就是元素的大小由内容决定，溢出不会裁剪，元素框自动调整，包含溢出内容

查看当前模式:document.compatMode

# HTML5

+ 代码层面：语义化标签
+ 提升用户交互输入：提供各种类型的输入选择器，输入框新属性，定位
+ 提升页面渲染输出：音频，视频，SVG，canvas，embed
+ 增强浏览器性能和功能：websocket，webworker，stroage
+ 拖放drag

新增加了图像、位置、存储、多任务等功能。 新增元素：

  • canvas
  • video和audio元素
  • 本地离线存储。localStorage sessionStorage
  • 语意化更好的内容元素，比如 article footer header nav section
  • 位置API：Geolocation
  • 表单控件，calendar date time email url search
  • 新的技术：web worker(web worker是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行) web socket
  • 拖放API：drag、drop

移除的元素：

  • 纯表现的元素：basefont big center font s strike tt u
  • 性能较差元素：frame frameset noframes

# 区分H5与html

  • DOCTYPE声明的方式是区分重要因素
  • 根据新增加的结构、功能来区分

# title与h1的区别、b与strong的区别、i与em的区别

  1. title属性没有明确意义，只表示标题；h1表示层次明确的标题，对页面信息的抓取也有很大的影响
  2. strong标明重点内容，语气加强含义；b是无意义的视觉表示
  3. em表示强调文本；i是斜体，是无意义的视觉表示
  4. 视觉样式标签：b i u s
  5. 语义样式标签：strong em ins del code

# 前端页面有哪三层构成，分别是什么?作用是什么?

结构层、表示层、行为层。

网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。

网页的表示层（presentation layer） 由 CSS 负责创建。

网页的行为层（behavior layer） Javascript 语言和 DOM 主宰的领域。

# HTML标签滥用影响

不恰当地使用语义标签，反而会造成负面作用。 如ul多数出现正在行文中间，它的上文多数在提示：要列举某些项。但是，如果所有并列关系都用 ul ，会造成大量冗余标签。 错误地使用语义标签，会给机器阅读造成混淆、增加嵌套，给 CSS 编写加重负担。

# 行内元素换行写有间隙的原因及解决办法

行框的排列会受到中间空白（回车\空格）等的影响，因为空格也属于字符,这些空白也会被应用样式，占据空间，所以会有间隔，把字符大小设为0，就没有空格了。

# a标签伪类顺序

上面是伪类的正确顺序，简称 lvha(love-ha)。你一直知道这个顺序但是为什么这样呢？原理是怎么样的？

a:link{color:#f30;} 
a:visited{color:#000;} 
a:hover{color:#fff;} 
a:active{color:#f99;}

首先伪类的特殊性（应用优先级）是同样的，所以后出现的伪类会覆盖先出现的伪类（同时激活）

lvha 规则是由于CSS特殊性导致，css特殊性有一个按顺序的规则（同一条css规则，后出现会覆盖前面的同样规则） 在这里，比如把hover放在active后面，那么实际你在激活（active）链接的时候就触发了hover伪类，hover在后面覆盖了active的颜色，所以始终无法看到active的颜色 如果把visited放在hover的后面，那么已经访问过的链接始终触发visited伪类，根据第一条会覆盖hover里面的颜色。

其实 link visited 这两个伪类，并不需要顺序关系。（他们两的位置可以交换）

# frame和iframe

在HTML5中，确实废除了frame框架（包括<frameset>、<frame>和<noframes>标签），但保留了iframe框架（即<iframe>标签）。这一变化主要基于以下几个方面的考虑：

废除frame框架的原因

  • 性能问题：frame框架容易导致页面加载缓慢，因为浏览器需要分别加载每个frame中的内容，每个frame都会发起独立的网络请求，从而增加了加载时间和带宽占用。
  • 布局问题：frame框架的布局方式与其他HTML元素不兼容，容易引发页面布局问题，影响用户体验。
  • 安全隐患：frame框架可以加载来自不同域名的网页内容，这增加了跨域访问的风险，恶意网站可能利用frame来实施钓鱼攻击或加载恶意代码。 iframe框架的保留与优势

尽管HTML5废除了frame框架，但保留了iframe框架，主要是因为iframe具有一些独特的优势：

  • 分割页面结构：iframe可以将一个大型的网页分割成多个小的模块，每个模块可以独立开发和维护，提高开发效率和代码可维护性。
  • 代码复用：通过iframe，可以将一个网页作为模板在其他网页中引用，避免重复编写相同的代码，提高代码复用性。
  • 跨域通信：iframe可以加载其他域名下的网页，实现跨域通信，这在一些需要跨域操作的应用中非常有用。
  • 加载第三方内容：iframe可以方便地嵌入第三方内容，如地图、视频播放器或社交媒体插件，提升用户体验。
  • 安全隔离：iframe可以将不可信的内容隔离在一个独立的环境中，提高网页的安全性。

然而，使用iframe也需要注意一些问题：

  • SEO问题：搜索引擎可能无法正确解析和索引通过iframe加载的内容，影响网页在搜索结果中的排名。
  • 安全问题：由于iframe可以加载其他域名下的网页，存在一定的安全风险，需要确保嵌入的内容是可信的。
  • 交互问题：iframe中的内容与主页面独立运行，可能存在交互问题，如表单提交等需要特殊处理。
<!-- 不推荐仅仅示范 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"  
   "http://www.w3.org/TR/html4/frameset.dtd">  
<html>  
<head>  
    <title>Frame Example</title>  
</head>  
<frameset cols="25%,*,25%">  
    <frame src="left.html" name="leftFrame" />  
    <frame src="main.html" name="mainFrame" />  
    <frame src="right.html" name="rightFrame" />  
    <noframes>  
        <body>  
            <p>This page uses frames, but your browser doesn't support them.</p>  
        </body>  
    </noframes>  
</frameset>  
</html>

# iframe安全问题

IFRAME安全隔离是指通过<iframe>标签在HTML文档中嵌入另一个文档时，这两个文档（即主文档和嵌入的<iframe>文档）在浏览器中被视为独立的安全上下文。

这种隔离机制有助于防止潜在的安全问题从一个文档传播到另一个文档，从而保护用户数据和网站的安全。

  1. 域名隔离 <iframe>可以在不同的域名下运行，这意味着嵌入的文档可以与主文档有不同的域名。这种域名隔离有助于防止跨站脚本攻击（XSS）和跨站请求伪造（CSRF）等安全威胁，因为攻击者需要分别针对每个域名进行攻击，而不能直接从一个文档跳转到另一个文档执行恶意代码。

  2. 内容安全策略（CSP） 使用内容安全策略（CSP）可以进一步限制<iframe>中可以加载的内容类型。CSP是一种额外的安全层，它允许网站所有者定义哪些动态资源是可信的，并应该被允许加载。通过为<iframe>设置CSP，可以进一步降低安全风险，例如防止嵌入的文档加载不受信任的脚本或样式表。

  3. 防止恶意代码扩散 如果嵌入的<iframe>中包含恶意代码，这些代码将被限制在<iframe>的范围内执行，而不会影响到主文档或其他部分的代码。这种隔离机制有助于防止恶意代码在主文档中扩散，从而保护用户数据和网站的整体安全。

  4. 提高安全性 除了上述直接的隔离效果外，IFRAME安全隔离还通过减少不必要的跨域交互和限制第三方内容的加载来提高网站的整体安全性。例如，通过限制<iframe>的来源和大小，可以防止恶意网站利用<iframe>进行钓鱼攻击或覆盖网站的重要内容。

  5. 遵循最佳实践 为了确保IFRAME的安全隔离效果，开发者应遵循一系列最佳实践，包括：

  • 限制iframe的来源：通过设置X-Frame-Options响应头来限制哪些域名可以将您的网站嵌入到<iframe>中。
  • 使用HTTPS：确保嵌入的<iframe>使用HTTPS协议，以防止中间人攻击。
  • 遵循同源策略：在允许第三方<iframe>时，确保遵循同源策略，以防止跨站脚本攻击（XSS）。
  • 定期更新和检查：确保您使用的第三方库和插件是最新的，并定期检查是否有安全更新。
  • 监控和记录：监控<iframe>的行为，并记录可能的安全事件，以便在发生安全问题时可以快速响应。

综上所述，IFRAME安全隔离是保护网站和用户数据安全的重要机制之一。通过合理利用IFRAME的隔离特性，并采取适当的安全措施，可以有效地降低潜在的安全风险。

X-Frame-Options 响应头是用来告诉浏览器是否允许一个页面被嵌入到 <iframe>、<frame>、<embed> 或 <object> 标签中。这个响应头是在服务器级别上配置的，而不是直接在 <iframe> 标签内部或通过客户端脚本设置的。

const express = require('express');  
const app = express();  
  
app.use((req, res, next) => {  
  // 允许来自相同源的嵌入  
  res.setHeader('X-Frame-Options', 'SAMEORIGIN');  
  
  // 或者，禁止所有嵌入  
  // res.setHeader('X-Frame-Options', 'DENY');  
  
  next();  
});  
  
// 其余的应用路由和中间件...

当你为页面设置 X-Frame-Options 响应头时，你实际上是在控制该页面是否可以被其他页面嵌入，而不是控制 <iframe> 标签的行为。

为<iframe>设置内容安全策略（CSP，Content Security Policy）主要是通过在服务器响应头中添加Content-Security-Policy指令来实现的，而不是直接在<iframe>标签中设置。CSP是一种安全机制，用于减少XSS（跨站脚本攻击）和其他代码注入攻击的风险。

const express = require('express');  
const helmet = require('helmet'); // 需要安装helmet中间件  
  
const app = express();  
  
app.use(helmet.contentSecurityPolicy({  
  directives: {  
    frameAncestors: ["'self'", 'https://allowed-domain.com']  
    //这个指令指定了哪些网页可以嵌入当前应用的页面作为<iframe>、<object>、<embed>或<applet>元素。
  }  
}));  
  
// 其余的应用路由和中间件...

或者在nginx配置

add_header Content-Security-Policy "frame-ancestors 'self' https://allowed-domain.com;";
最后更新: 8/8/2024, 2:30:12 PM

← H5标签 →