前端知识-02

千寻_BMW
51 阅读13分钟

HTML4 与 HTML5 有什么区别

HTML5 和 HTML4 的区别涵盖了多个方面，涉及结构、语义、功能性、以及多媒体支持等。以下是详细的比较:

1.Doctype 声明****

。HTML4: Doctype 声明非常冗长，分为三种类型(严格、过渡、框架集)，例如: html 复制代码

HTML5: Doctype 简化，统一为一行，书写简洁: html 复制代码

2.语义标签 HTML4: 使用大量非语义化的

和来构建页面结构，缺乏语义化标签HTML5:引入了新的语义化标签，帮助开发者和搜索引擎更好地理解页面结构和内容:

:定义页头 :定义页脚 :独立的内容块. :内容部分 :导航栏 .:侧边栏或补充内容

3.多媒体支持

HTML4: 不支持原生多媒体，音频和视频通常通过 Flash 或插件实现。 HTML5: 增加了原生多媒体支持，不需要依赖第三方插件: :嵌入音频文件 .:嵌入视频文件 :用于指定音频/视频资源的多种格式，以支持不同的浏览器 示例: html 复制代码 Your browser does not support the video tag.

4.图像绘制和动画 HTML4: 没有提供原生的图形绘制和动画功能，通常使用 Flash、JavaScript 或外部库。 HTML5:引入了<canvas》元素，用于绘制图形和制作动画，允许开发者通过JavaScript 动态绘制图像和图形内容。 。示例: html 复制代码

5.表单控件的增强

HTML4: 表单元素较为有限，不能处理复杂的表单验证，通常依赖JavaScript 实现 HTML5:引入了许多新的表单输入类型和属性，增强了表单的功能性和可用性。和 新的输入类型: :用于输入电子邮件地址 :用于输入 URL :用于选择日期 :滑动条 :用于输入数字 还添加了诸如 placeholder、autofocus、required 等属性，简化了表单验证和交互设计:

6.本地存储

    HTML4:没有本地存储机制，
    依赖于 Cookies 来存储少量数据，
    但 CooKies 有大小限制目每次请求都
    会被发送到服务器，效率较低HTML5: 提
    供了更强大的本地存储 API:

LocalStorage:可存储较大的数据目不会随 HTT P 请求发送到服务器，数据没有过期时 间，除非手动删除。SessionStorage:只 在当前会话有效，浏览器关闭后数据会被清除。示例: javascript 复制代码 localStorage.setItem("key","value"); var data=localstorage.getItem("key");

7.CSS3与 HTML5 的配合

HTML4: 仅支持 CSS2，大多数复杂的样式效果需要通过图片或复杂的JavaScript 来实现。 HTML5:与 CSS3 紧密结合，CSS3 提供了丰富的样式和动画支持，包括渐变、阴影、圆角、过渡效果和媒体查询(响应式设计)。

8.拖放(Drag and Drop)功能

HTML5: 内置拖放 API，允许开发者轻松实现元素拖放功能。 ·示例: html 复制代码

Drag me
Drop here
9.WebSocket 和服务器事件

。HTML4: 没有原生的实时双向通信支持，通常使用长轮询或 Comet 技术。 HTML5:引入了 WebSocket 协议，支持全双工通信，以及 Server-Sent Events(SSE)，用于服务器向客户端推送消息.

10.文档结构的变化

HTML4:标签中通常需要指定字符编码和其他元信息, ·HTML5: 更加简化，只需在标签中声明字符编码: html 复制代码

11.废弃的元素

HTML4:包含一些不再推荐使用的过时标签，例如、

、等 HTML5:完全移除了这些标签，推荐使用 CSS 来控制样式和布局。

12.离线支持

HTML5:引入了应用程序缓存(AppCache)，允许网页内容被缓存，从而在没有网络连接时仍能访问。虽然 Appcache 已被 Senvice Workers逐步取代，但它营是 HTML5 中的一大亮 点。

总结

HTML5 相比 HTML4更加现代、语义化，提供了丰富的多媒体支持、表单处理、数据存储和 AP!功能，增强了与 JavaScipt和 CSS3的结合，极大简化了 Web 开发，提高了用户体验和开发效率。

2.iframe 有哪些优点和缺点?

    seo（搜索引擎优化）

《ifrare》是一个非常强大的 HTML元素，允许我们在当前网页中嵌入另一个独立的网页，在集成第三方内容如视频、地图等方面非常有用。但是用了太多的<iframe)会影响页面加载速度，并对 SEO 和网页的可访问性带来挑战。

优点

1)内容隔离:将第三方内容(如视频、地图)嵌入页面，不影响主页面的样式和脚本

2)防止嵌入内容的恶意脚本:可以阻止嵌入内容与主页面直接交互，减少 XSS 风险。

3)应用集成:方便集成支付网关、社交媒体等外部服务，无需重构页面。

4)简化管理:适用于频繁更新的内容(如新闻、天气)，集中管理更简单。

缺点

1)性能问题:每个<iframe〉都需要独立的 HTTP 请求，会增加页面加载时间，会阻塞主页面的 onload 事件，特别是多个<iframe〉时。

2)SEO 影响:搜索引擎会忽略中的内容，影响搜索排名。

3)可访问性:对屏幕阅读器不友好，需要适当的标题和描述。

4)布局和响应式设计:固定大小的难以适应不同屏幕，需要额外的 CSS 调整。

5)跨域问题:同源政策限制了与不同域的内容交互，但绕过这些限制可能带来安全风险。

说说你对 BFC 的理解，如何创建 BFC?

回答重点

BFC(块级格式化上下文，Block Fomating Context)是CSS中一种非常重要的布局概念，是一个独立的染区域，使其内部的布局不受外部元素影响。了解 BFC有助于解决浮动、清除浮动、边距重叠等常见布局问题。 创建 BFC 非常简单，常见的方法有:

1.设置元素的 float 属性为 left 或 right 。

2.设置元素的 position属性为 absolute或 fixed。

3.设置元素的 display属性为inline-block或table-ce11等

4.设置元素的overflow属性为 hidden、auto或 scro11。

扩展知识

简单总结之后，我再详细说说BFC的几个常见使用场暴和影响规则吧，

1、浮动元素的清除: 当在设计页面布局时，需要清除浮动影响来保证父元素正确的高度，这时可以利用创建BFC来实现。这种方法比给父元素添加一个空的 iv 进行清除浮动更优雅。

2、防止外边距(Margin)重叠: 如果两个相邻的普通流定位的块元素相遇，它们的垂直外边距会发生重叠(取较大值)。通过创建 BFC，可以将两个元素的外边距分离，避免重叠现象。

3、自适应容器: BFC 可以包含浮动元素。例如，在一个浮动子元素里，如果父元素也是 BFC，则父元素就会包含子元素的高度。

4、隔离 float 元素: 上面提到，foat 元素被包含在BFC里会被包含其高度，如果我们不想其他元毒被 foat 元毒影响布局，那么我们可以给该元毒创造一个 BFC当深入了解BFC及其使用场景后，

    还有一些相关的概念你也得知晓:

。IFC(lnline Formating Context):内联格式化上下文，它和 BFC 一样是 CSS 布局中的一种概念。IFC 主要是指文本在其父级块元素中的布局规则。

Fex 和 Grid 布局:现代前端布局中， Flex和 Grid 布局也在逐渐替代部分传统布局技巧。了解和掌握它们也非常重要。

说说你对 Flex 布局的理解及其使用场景

Flex布局，即弹性盒布局(Flexible Box Layout)，它的核心思想是通过定义容器和子项的关系，以及如何分布和排列子项，来动态适应是一种用于设计更灵活、更高效的响应式布局的 CSS 布局模式。 不同屏幕和容器大小。 具体来说，Flex 布局的重点包括以下几个方面:

1.flex-container:定义为 Flex 布局的父容器;通过设置 display:flex 来启用 Flex 布局。

2.flex-item:定义在 Flex 容器中的子元素;这些子元素可以根据各种属性(如 fex-direction、justify-content )灵活排列。

    3.主轴和交叉轴:Flex 布局包含主轴(
    默认是水平方向)和与之垂直的交叉轴;轴的
    方向可以通过 flex-direction 属性来设置。
    
    4,项目的排列和对齐:使用 justify-c
    ontent来控制子项在主轴上的排列，
    使用 align-items和a1ign-content 来控制子项在交叉轴上的对齐方式

扩展知识

Flex 布局的优势在于它能够简化复杂的布局方案，特别是在处理不同终端设备的响应式布局时。我们可以通过以下一些常见属性来深入了解它的强大功能。 常见属性

。flex-direction : 决定主轴的方向，属性值包括row(默认值)、row-reverse、column、column-reverse。举个例子，当我们设置 flex-direction:column 时，主轴变为垂直方向，子项会垂直排列。

2、flex-wrap :

控制子项是否换行，常见属性值有 nowrap(默认，子项不换行)、wrap(子项换行)、wrap-reverse(逆反方向换行)。这个属性特别有用，当容器宽度缩小时，超出部分会自动换行排列，不会溢出容器。

3、justify-content:

在主轴方向上对齐子项，常见属性值有flex-start、center、flex-end、space-between、space-around。。如果我们想让子项在主轴上均匀分布，我们可以设置 justify-content:space-between，子项会均匀分布，首尾没有空隙,

4.align-items :

在交叉轴方向上对齐所有子项，常见属性值包括stretch(默认，拉伸子项来填满容器)、flex-start、center、flex-end、baseline。 当我们想要所有子项在交叉轴上居中对齐时，可以设置align-items:center。

5.flex-grow、flex-shrink和flex-basis:

分别控制子项的放大、缩小以及基础尺寸。 例如，设置一个子项的flex-grow:1表示所有剩余空间将在这个子项中均匀分布。 使用场景例子

1.导航栏布局:在导航栏中，可能需要一些项目在左侧排列，一些在右侧排列。通过 Flex布局的 justify-cantent:spce-between 属性，很容易实现这种效果

2.响应式网格布局:我们可以使用 Flex 布局来创建动态响应的网格布局，子项能够根据屏幕宽度自动调整。

3.垂直居中:在传统的布局模式中，实现垂直居中对齐需要一些技巧，而 Fex布局通过合理设置a1ign-items或aligp-content 属性很容易实现垂直居中。

escape、encodeURl、encodeURlComponent 的区别是什么?

escape、encodeURl和 encodeURlComponent 这三个函数都是处理 URL 编码的问题的，下面我们具体看一下区别

escape()

首先，escape( 函数已经被废弃了，我们不应该再在新的代码中使用它。但是我们可能在维护旧代码时遇到它。所以需要了解escape( 主要用于对字符串进行编码。它会将所有非字母数字字符转换为它们的十六进制转义序列，除了 @+-./这些字符。例女口: "javascript 复制代码 console.log(escape("Hello world!@+-./")); //输出:Hello%20World%21%20@+-

encodeURl()

encodeURl0 用于编码完整的 URI。它会编码所有对 UR| 有特殊含义的字符，除了,/?:@&=+$# 这些在 URI 中有特定含义的字符。

javascript

复制代码
    
            console.log(encodeURI("https://example.com/path?name=张三&age=18"));//出:https://example.com/path?name-%E5%BCXA0%E4%B8%89&age-18

encodeURiComponent()

encodeURlComponent()用于编码 UR! 的组成部分。它会编码所有对 UR! 有特殊含义的字符，包括,/?:@&=+$# 这些字符。

    javascript
复制代码
            console.log(encodeURIComponent("https://example.com/path?name=张=&age=18"));
    //翰出:https%3A%2F%2Fexample.com%2Fpath%3Fname%3D%E5%BC%A0%E4%B8%89%26age%3D18

主要区别:

1.escape() 主要用于字符串编码，而 encodeURl0)和 encodeURIComponent0 用于 URL 编码.

2.encodeURl() 不会编码 UR|中的功能字符(如&=)，而 encodeURlComponent() 会编码这些字符。

3.encodeURlComponent0 编码的字符最多，通常用于编码 URL的参数。

4.escape() 不能正确处理非 ASCI 字符，而 encodeURl() 和 encodeURIComponent0) 可以.

拓展 在实际开发中，我通常会这样使用它们:

当我需要编码整个 URL时，我会使用 encodeURl0。 当我需要编码 URL参数时，我会使用 encodeURlComponent0)， 我会避免使用 escape()，因为它已经被废弃了，

ws和wss是什么？

一、ws（WebSocket）（心态检测，我是A，我是B，我是小满！）

  • 定义：WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，允许客户端和服务器之间进行实时、双向的数据传输。

  • 工作原理：

    • 它通过 HTTP 协议进行初始握手，客户端发送一个特殊的 HTTP 请求，其中包含 WebSocket 协议的相关头部信息，服务器收到后如果支持 WebSocket 协议，则返回一个特定的响应，完成握手过程，之后连接就会升级为 WebSocket 连接。
    • 一旦连接建立，客户端和服务器可以随时向对方发送消息，而不需要像传统的 HTTP 请求那样，客户端发送请求，服务器响应后连接就关闭。这种实时通信能力使得 WebSocket 非常适合用于需要实时更新数据的应用场景，如聊天应用、实时数据监控、在线游戏等。

  • 应用场景示例：

    • 在一个多人在线聊天系统中，当一个用户发送消息时，服务器可以通过 WebSocket 立即将消息推送给其他所有在线用户，而不需要用户不断地刷新页面或发送 HTTP 请求来获取新消息，从而提供了更加流畅和实时的用户体验。

二、wss（WebSocket Secure）

  • 定义：wss 是 WebSocket 的安全版本，它是基于 TLS/SSL 加密的 WebSocket 协议。

  • 与 ws 的区别：

    • 主要区别在于安全性，wss 使用加密通道来传输数据，确保数据在传输过程中不被窃取或篡改。这对于处理敏感信息的应用非常重要，如金融交易、用户认证等场景。
    • 在连接建立时，wss 的握手过程与 ws 类似，但会使用 HTTPS 协议进行初始握手，并且在后续的数据传输中使用加密算法对数据进行加密和解密。

  • 应用场景示例：

    • 在一个网上银行系统中，用户与服务器之间的实时通信（如账户余额更新、交易通知等）需要使用 wss 来确保数据的安全性和隐私性，防止用户的账户信息和交易数据被黑客截获和篡改。

总之，ws 提供了一种高效的实时通信方式，而 wss 在其基础上增加了安全性，开发者可以根据应用的具体需求选择使用 ws 或 wss。

java局部变量与成员变量

public class Example {
    private int num = 10; // 成员变量

    public void method() {
        int num = 20; // 局部变量，与成员变量同名
        System.out.println(num); // 输出 20，这里访问的是局部变量
    }
}
        
        
        
        java

public class Example { private int value;

public void setValue(int value) {
    this.value = value; // 通过this关键字来访问成员变量，这里的value是方法参数
}

}

在 Java 中，this关键字主要有以下几种重要作用：

（有很多作用，这里就学了一个，后面再补充）

1. 引用当前对象的实例变量

当类的成员变量与方法中的局部变量同名时，使用this关键字可以明确地引用当前对象的成员变量，以区分局部变量

%是父级元素, vw是屏幕（一个小知识）

avatar
文章
阅读
粉丝