📝CSS 怎样实现动画?
(有哪些)CSS 主要通过**过渡(transitions)和关键帧(keyframes)**实现动画。 (过渡是什么)过渡指的是元素**从一种状态(样式)转变为另一种状态(样式)**的动画效果。过渡经常配合 :hover 或 JS 事件使用(触发元素变为另一种状态)。 (过渡怎么实现)通过设置元素 transition 样式,从而设置元素的过渡效果。当元素某些样式变化后,这种变化会根据预先定义的 transition 样式中规定的过渡效果进行变换(核心!!!)。 (过渡的语法简单说明) 1234567.element{ transition: property duration timing-function delay; /* 过渡属性:none(默认)、all(最常用)、特定属性名(多个属性名以 , 分割) */ /* 持续时间:<number>s/ms(接收两种单位,默认值为 0)(如果给多个属性指定,则多个时间以 , 分割) */ /* 过渡速度曲线: ....... */ /*...
📝你怎么理解 HTML 语义化?语义化有什么优点?
你怎么理解 HTML 语义化? (语义化是什么)HTML 语义化要求开发者尽量使用有意义的标签来组织网页,而不是像 div、span 等无意义的标签,这里的意义就是语义。 (语义化的作用)通过使用语义化标签,开发者在编写网页的同时,还传达了不同内容的特殊含义。 (语义化举例)如 header 常用于定义头部/顶部、nav 常用于定义网页导航、article 常用于定义一篇文章、section 常用于定义一节或一部分内容、aside 常用于定义侧边栏、footer 常用于定义底部、main 常用于定义主体等等。 语义化有什么优点? (对于开发者)语义化可以使代码结构清晰,从而可以使人快速理解网页中每个部分的内容。既提高了可读性,又增强了可维护性。 (对于 SEO)语义化可以让搜索引擎更好地理解网页内容,从而有利于提高网页在搜索结果中的排名。比如,同样的一篇文章,组织在 article 标签中,可以让搜索引擎知道这是一篇文章;如果组织在 div 中,则不利于搜索引擎的判断。 (对于残障人士)与对 SEO...
📝计算机网络中的七四五是什么?
计算机网络中说的七四五是指:OSI 七层模型、TCP/IP 四层模型、OSI 与 TCP/IP 的综合五层模型 OSI 七层模型 OSI 将计算机网络分为了七层,每一层抽象底层的内容,并遵守一定的规则。基于 OSI 模型,网络中的节点(物理设备)得以进行通信。 同一层中的各个节点层次结构和功能相同。 同一节点相邻层通过接口通信。 每一层使用底一层提供的服务,并向顶一层提供服务。 同一层中的不同节点按照协议实现对等层的通信。 层(从底层到顶层) 数据单元 作用 可能会出现的问题 物理层 比特 通过网线、电缆等方式将设备物理连接 电缆失效(电线损坏、连接器村换等)网络硬件设备故障(电路损坏) 数据链路层 帧,包括帧头(源节点和目的节点的 MAC...
📝display=none 和 visibility=hidden 的共性与区别
共性:display: none 和 visibility: hidden 都是用于设置元素可见性的样式 区别 display: none 使元素及其占位完全消失:元素及其所有子元素将从文档流和布局中完全消失,就像它们不存在一样。 触发回流:这种改变会触发页面上的布局重建,因为其他元素会填补被移除元素的空间。 display: hidden 修饰的元素不可见,但还在文档流中。元素的隐藏可以理解为加上了一层使元素不可见的遮罩,不会触发元\素回流,页面布局不变。 使元素不可见,但保留其占位:元素仍然占据文档流中的空间,但不会被显示。 不触发回流:这意味着其他元素会围绕隐藏的元素布局,不会发生重建布局的情况。 代码效果演示(对 Parent 元素上样式) 页面原始布局 display: none 之后的布局 visibility: hidden 之后的布局
📝script 标签中的 defer Vs. async
在 HTML 中,script 标签可以使用 defer 和 async 属性来控制外部 JavaScript 脚本加载和执行的方式。defer 和 async 都可以提高页面的加载性能,主要区别整理如下。 区别点 defer async 加载顺序 按顺序加载 异步加载,不保证加载顺序 执行顺序 按文档中出现的顺序执行 加载完立即执行,不保证执行顺序 执行时机 HTML 文档完全解析后执行,但在 DOMContentLoaded 事件之前 可能在 HTML 文档解析完成之前执行 阻塞行为 不会阻塞 HTML 的解析,浏览器解析 HTML 文档,脚本在后台异步加载 不会阻塞 HTML 的解析,浏览器解析 HTML 文档,脚本在后台异步加载 适用场景 需要保证执行顺序,并在文档解析完成后再执行的脚本。如依赖于 DOM 的脚本。 不依赖其他脚本、不依赖 DOM 的独立脚本。如分析工具或广告脚本。 注意:如果不使用 defer 或 async 属性,浏览器在遇到 <script> 标签时会阻塞 HTML...
📝style 标签写在 body 前和 body 后有什么区别?
style 标签写在 body 前和 body 后有什么区别? 对比项 <style> 放在 <body> 之前 <style> 放在 <body> 之后 渲染速度 【优】所有样式信息在页面加载时可用,用户能够快速看到格式化后的页面 【劣】浏览器需要先解析 body 内容再应用样式,用户可能会先看到未格式化的内容,但只要解析到样式表就会立即渲染格式化后的页面 页面加载时间 【劣】如果样式表很大,可能会延迟页面的渲染时间,影响整体加载速度 【优】页面内容先加载,样式表加载不会阻塞页面内容的显示,有助于提高首屏加载速度 搜索引擎优化(SEO) 【劣】样式信息位于文档顶部,可能影响搜索引擎对页面内容的快速抓取 【优】搜索引擎可以先抓取和索引页面的主要内容,不会被样式信息干扰 JavaScript 与样式的关系 【优】样式表在 JavaScript 之前加载和应用,不会被 JavaScript 阻塞 【劣】如果页面中有大量 JavaScript...