前端基础入门三大核心之html
文章平均质量分 95
以实战为线素,逐步深入HTML开发各个环节,掌握前端常用性能体验优化思路,打造完整前端工作流,提升工程化编码能力和思维能力。
DTcode7
专注于《前端开发》、《微信小程序》领域 ,同时WEB开发、小程序开发、AIGC、IT信息化等领域摸爬滚打多年,深谙网页js,上班摸鱼、自动化打工等领域。略懂的前端开发、数据库、油猴脚本、Vue等框架,具备一定实操经验。让学习成为一种习惯,与君共享,携手共进!
我没有把枪口对向妇孺,而是选择对向自己。紧紧握住的是人性中的野蛮,涌溅出的是精神之海的浊秽。风雨大作之后呆滞的眼神是我最后倔强。让我们把握住贤者时间疯狂学习,努力提升自己!
展开
-
自定义事件监听 & LocalStorage 事件监听
基本概念与作用1. 自定义事件2. LocalStorage 事件监听示例一:创建自定义事件示例二:自定义事件在组件间的通信示例三:使用 LocalStorage 存储数据示例四:监听 LocalStorage 变化示例五:综合应用功能使用思路多种场景下的应用使用技巧在现代前端开发中,事件监听是一种非常重要的交互方式。它不仅限于浏览器默认提供的点击、滑动等事件,还可以通过自定义事件来实现更复杂的业务逻辑。此外,随着Web存储技术的发展,成为了客户端存储的一种常见选择。但是,如何在数据发生变化时得到通知呢?原创 2024-08-09 10:40:27 · 708 阅读 · 0 评论 -
SVG蒙版(mask)和剪切(clipPath)学习
svg蒙版和剪切原创 2024-08-09 08:29:09 · 1055 阅读 · 0 评论 -
回流和重绘
本文将深入探讨回流(reflow)和重绘(repaint)这两个概念,它们是页面渲染过程中两个关键的性能瓶颈点。通过上述的内容,我们应该对回流和重绘有了更深入的理解。无论是对于初学者还是有经验的开发者来说,了解这些概念和技巧都将有助于编写出更加高效、流畅的Web应用。欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。一个做过前端开发的产品经理,经历过睿智产品的折磨导致脱发之后,励志要翻身农奴把歌唱,原创 2024-08-09 06:19:12 · 832 阅读 · 0 评论 -
Vue2.x 路由实现地址栏变化的API
Vue Router 是一个基于Vue.js的路由管理器。它提供了声明式的路由配置方式,并且集成了Vue的核心功能,使得我们可以轻松地构建SPA应用。原创 2024-08-09 03:37:41 · 937 阅读 · 0 评论 -
Script 标签 type=module, defer, async 的作用
属性可以帮助我们更好地管理脚本的加载流程,从而提高页面的加载速度和用户体验。本文将深入探讨这些属性的工作原理、应用场景以及它们之间的区别,并通过详细的代码示例来展示如何在实践中使用它们。希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。标签的属性是如何帮助我们更好地管理和优化脚本的加载与执行过程的。一个做过前端开发的产品经理,经历过睿智产品的折磨导致脱发之后,励志要翻身农奴把歌唱,标签的属性对于控制JavaScript的加载和执行顺序至关重要。原创 2024-08-09 01:05:18 · 793 阅读 · 0 评论 -
iframe跨域消息通信(postMessage和message事件)
在现代Web开发中,跨域通信是一个常见的需求,尤其是在涉及多个子域或第三方服务的情况下。和message事件是实现跨域通信的一种有效方式。本文将详细介绍如何利用这两种技术来进行iframe与父窗口之间的消息通信,并提供丰富的示例代码和实践技巧。原创 2024-08-08 22:17:44 · 1195 阅读 · 0 评论 -
Promise.prototype.then().then() 学习
[toc](Promise.prototype.then().then() 学习)在现代前端开发中,异步编程占据了重要地位。JavaScript 的Promise对象提供了优雅的异步编程解决方案,使我们能够更轻松地管理异步流程。本篇技术博客将深入探讨方法的使用,并通过多个示例来演示如何链式调用then()方法,以及它在实际开发中的应用。原创 2024-08-08 19:54:25 · 601 阅读 · 0 评论 -
String.prototype.slice() & Array.prototype.slice() 实现克隆数据
[toc](String.prototype.slice() & Array.prototype.slice() 实现克隆数据)在前端开发中,数据的复制和克隆是一项常见且重要的任务。无论是字符串还是数组,都需要在不改变原始数据的情况下创建新的副本。本篇文章将深入探讨如何使用和方法来实现数据的克隆,并通过不同的示例展示这些方法的使用技巧和注意事项。原创 2024-08-08 17:04:16 · 676 阅读 · 0 评论 -
浏览器视角看 —— 消息队列和事件循环、宏任务和微任务
JavaScript 是一门单线程的语言,这意味着它在同一时间只能做一件事。为了管理异步行为,JavaScript 引入了事件循环(Event Loop)的概念。事件循环是JavaScript引擎的核心组件之一,它负责管理JavaScript的执行流程,包括同步代码的执行和异步回调的调度。通过本文的讲解,我们深入了解了JavaScript的消息队列和事件循环机制,以及宏任务和微任务的区别和执行顺序。理解这些核心概念有助于我们写出更高效、更可靠的代码,并且能够在实际开发中有效地处理各种异步问题。原创 2024-08-08 14:44:11 · 537 阅读 · 0 评论 -
前端中的跨域请求及其解决方案
浏览器出于安全考虑,实施了同源策略(Same-origin policy)。当一个网页请求另一个来源的资源时,如果这两个来源不是同一个源,则会受到限制。这里的“源”指的是协议、域名和端口的组合。例如,和被认为是不同的源。原创 2024-08-08 11:34:12 · 801 阅读 · 0 评论 -
DOCTYPE 是什么作用?
DOCTYPE是文档类型声明的缩写,它告诉浏览器正在处理的文档是哪种类型的 HTML 或 XML 文档。原创 2024-08-08 10:52:33 · 837 阅读 · 0 评论 -
HTML 是什么?它的全称是什么?
HTML 是一种用于构建和呈现 Web 内容的标记语言。它由一系列标签组成,这些标签被用来定义文档的结构和意义。原创 2024-08-08 06:37:47 · 1037 阅读 · 0 评论 -
空元素是什么?
空元素是指那些没有内容的HTML元素,它们通常只有一个开始标签,并且在开始标签中结束自身。例如,和等都是典型的空元素。原创 2024-08-08 04:07:51 · 667 阅读 · 0 评论 -
Meta标签是什么?它的作用是什么?常见的 meta 属性有哪些?
meta>标签是HTML文档头部(部分)的一个组成部分,用于提供关于文档的元数据。这些元数据可以帮助浏览器解析页面内容、指导搜索引擎索引页面以及告知开发者关于页面兼容性的信息。< meta name = " description " content = " 这里是页面的描述,应该简洁明了地概括页面内容。" >< meta name = " description " content = " 这里是页面的描述,应该简洁明了地概括页面内容。" >原创 2024-08-08 01:08:20 · 859 阅读 · 0 评论 -
什么是块级元素和行内元素?有何区别?
引言1. 块级元素 (Block-Level Elements)基本概念作用说明示例一:使用 `` 创建容器示例二:使用 `` 创建文章2. 行内元素 (Inline Elements)基本概念作用说明示例三:使用 `` 创建文本样式示例四:使用 `` 创建链接使用技巧混合使用示例五:使用 `` 包裹 `` 来组合元素CSS 控制示例六:使用 CSS 将 `` 变为行内元素示例七:使用 CSS 将 `` 变为块级元素。原创 2024-08-07 22:15:18 · 821 阅读 · 0 评论 -
Link 和 @import 是什么?他们的区别是什么?
希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。然而,在某些特定场景下,如需要在一个样式表文件内部引用其他样式表,本文将深入探讨这两种方法,并通过具体的示例来展示它们之间的差异以及如何根据不同的场景选择最合适的方案。在前端开发过程中,我们经常需要引入外部资源,如 CSS 文件、JavaScript 文件、字体文件等。一个做过前端开发的产品经理,经历过睿智产品的折磨导致脱发之后,励志要翻身农奴把歌唱,专栏系列(点击解锁)学习路线(点击解锁)原创 2024-08-07 20:14:23 · 962 阅读 · 0 评论 -
HTML5 新特性详解
HTML5不仅增强了网页的表现力,还引入了一系列新的功能,使得Web应用更加丰富、互动性更强。与之前的版本相比,HTML5最大的变化在于它引入了许多新的元素和属性,以简化Web开发流程并增强网页的多媒体功能。HTML5提供了本地存储机制,如localStorage和sessionStorage,以及离线应用缓存,使得Web应用即使在网络断开的情况下也能继续运行。希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。专栏系列(点击解锁)原创 2024-08-07 17:06:12 · 803 阅读 · 0 评论 -
Script 标签中 async 和 defer 属性的作用分别是什么?
属性的工作原理及应用场景,我们可以更好地优化Web应用的性能,为用户提供更快的加载速度和更流畅的交互体验。在实际项目中,合理地利用这两种属性,可以显著改善页面加载效率,提高整体的用户体验。希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。本文将深入探讨这两个属性的工作原理及其应用场景,旨在帮助前端开发者更好地理解并利用它们来提升网站性能。一个做过前端开发的产品经理,经历过睿智产品的折磨导致脱发之后,励志要翻身农奴把歌唱,专栏系列(点击解锁)原创 2024-08-07 14:50:46 · 567 阅读 · 0 评论 -
前端如何在页面中插入图片?
在Web开发中,图片不仅是网页美观的重要组成部分,也是传达信息的有效方式。本文将深入探讨如何在前端项目中正确地插入图片,并通过一系列示例来展示不同的方法和技术,帮助开发者更好地理解并运用到实际工作中。希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。通过这些扩展内容的学习,你可以进一步提升你的前端技能,并创造出更加丰富多彩的Web体验。一个做过前端开发的产品经理,经历过睿智产品的折磨导致脱发之后,励志要翻身农奴把歌唱,专栏系列(点击解锁)原创 2024-08-07 11:33:24 · 569 阅读 · 0 评论 -
前端如何创建超链接?a标签的属性
希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。接下来,你可以尝试在自己的项目中应用这些知识,看看是否能够进一步提升页面的功能性和可用性。在 HTML 中,超链接由。标签创建超链接,还学习了如何利用其丰富的属性来优化链接的表现和功能。在这个例子中,“访问 Example.com”是链接的文本,用户点击它就会被导航到。一个做过前端开发的产品经理,经历过睿智产品的折磨导致脱发之后,励志要翻身农奴把歌唱,对于没有明确文本内容的链接,如图标链接,使用。原创 2024-08-07 08:51:08 · 904 阅读 · 0 评论 -
如何创建无序列表和有序列表
通过 CSS 可以改变列表项的项目符号,例如使用图片或者更改样式。< ul class = " custom-bullets " > < li > 列表项 1 < li > 列表项 2 < li > 列表项 3 < ul class = " custom-bullets " > < li > 列表项 1 < li > 列表项 2 < li > 列表项 3原创 2024-08-07 05:33:32 · 689 阅读 · 0 评论 -
浏览器Chrome资源的优先级, Preload和Prefetch介绍
引言资源加载的优先级基本概念作用说明Preload基本概念作用说明示例一:预加载关键CSS文件示例二:预加载关键JavaScript文件示例三:预加载字体资源示例四:预加载图片资源示例五:预加载视频资源Prefetch基本概念作用说明示例六:预取下一个页面的资源示例七:预取图片资源示例八:预取字体资源不同角度的功能使用思路优化策略按需加载利用条件加载使用媒体查询实际工作经验分享1. 使用Preload和Prefetch的注意事项2. 优化懒加载图片3. 利用服务器推送结合实践经验。原创 2024-08-07 02:17:53 · 914 阅读 · 0 评论 -
浏览器视角看——重绘、重排
解决这个问题的一个方法是将所有行一次性添加到一个离屏容器中,再整体插入到DOM中,这样就可以显著减少重排的次数。接下来,你可以尝试在自己的项目中应用这些知识,看看是否能够进一步提升页面的性能表现。希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。在可能的情况下,使用CSS动画而不是JavaScript来控制元素的动画效果,因为CSS动画由浏览器优化,可以减少重排和重绘。重绘只涉及视觉效果的改变,不涉及元素位置的调整,因此它的性能开销相对较小。原创 2024-08-07 00:17:27 · 841 阅读 · 0 评论 -
从Vue.extend API了解到Object.create实现继承
Vue.extend是Vue提供的一个方法,用于基于给定的选项创建一个新的Vue构造器。这个构造器可以被用来创建新的Vue实例。它接受一个Vue组件选项对象作为参数,返回一个Vue构造函数。原创 2024-08-06 21:49:22 · 883 阅读 · 0 评论 -
HTML链接标签a实现Canvas下载
为了让用户界面更加友好,我们可以给下载链接添加一些CSS样式,并在用户点击按钮时动态地显示和隐藏下载链接。// 显示链接 link . click();// 触发点击 link . style . display = 'none';// 隐藏链接 } // 显示链接 link . click();// 触发点击 link . style . display = 'none';原创 2024-08-06 19:16:32 · 876 阅读 · 0 评论 -
HTML画表格table边线重合问题
掌握表格边框的处理技巧对于前端开发者来说是非常重要的,尤其是当涉及到复杂的数据展示和布局设计时。通过本文提供的各种示例和技巧,你可以灵活地调整表格边框的样式,使其满足项目的具体需求。当表格的边框设置不当时,可能会导致视觉上的混乱,尤其是在边框宽度不一致或边框颜色不同的情况下。本文将深入探讨这一问题,并提供详细的解决方案,包括 CSS 属性的使用技巧以及一些实用的代码示例。希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。来调整单元格之间的间距。原创 2024-08-06 17:17:02 · 846 阅读 · 0 评论 -
Async Await 实现 Sleep 等待效果
希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。我们将从基础概念开始,逐步介绍如何实现这一功能,并通过多个示例展示不同的使用场景。函数,它接收一个毫秒数作为参数,并返回一个 Promise,这个 Promise 在指定的时间后 resolve。本文将深入探讨如何利用。的表达式时,JavaScript 引擎会暂停函数的执行直到 Promise 完成,之后再恢复执行。一个做过前端开发的产品经理,经历过睿智产品的折磨导致脱发之后,励志要翻身农奴把歌唱,原创 2024-08-06 14:35:51 · 833 阅读 · 0 评论 -
在 Input 和 Textarea 光标处添加字符串
例如,在聊天应用中,我们可能会在用户键入 “@” 符号时触发自动完成建议,这时候需要确保插入的文本不会破坏现有的输入流。希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。为了在光标位置插入文本,我们需要获取光标的位置,然后根据该位置分割原始文本,插入新文本,最后重新拼接文本。对于富文本编辑器来说,插入格式化的文本时,我们可能需要考虑如何保持光标位置不变,或者如何处理嵌套的标签。在文本输入框中,插入点指的是用户光标所在的位置。专栏系列(点击解锁)原创 2024-08-06 11:58:02 · 786 阅读 · 0 评论 -
MutationObserver 监听 DOM 变化
在性能方面,我们需要注意不要过度监听 DOM 的变化,特别是那些频繁变化的元素。它比传统的事件监听器更加灵活,因为它可以监听到任意类型的 DOM 变化,包括元素的添加、删除、属性的修改等。在 Web 开发中,我们经常会遇到需要监听 DOM 元素的变化以响应某些行为的情况。希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。一个做过前端开发的产品经理,经历过睿智产品的折磨导致脱发之后,励志要翻身农奴把歌唱,专栏系列(点击解锁)学习路线(点击解锁)原创 2024-08-06 09:00:17 · 822 阅读 · 0 评论 -
escape, encodeURI, encodeURIComponent 区别
它会将字符串中的每个字符转换成相应的百分号编码(%xx 形式),除了一些保留字符会被保留原样。希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。最后,编码和解码的过程应当经过充分的测试,以确保它们能够在各种情况下正常工作。在处理特殊字符时,务必注意编码函数的选择,因为不当的编码可能会导致数据丢失或解析错误。主要用于编码完整的URI,它可以确保整个URI被安全地传输。在Web开发中,经常需要对字符串进行编码,以确保它们能在不同的环境中安全传输。原创 2024-08-06 05:45:29 · 855 阅读 · 0 评论 -
offsetX, pageX, clientX, offsetHeight, offsetParent, 和 offsetLeft
在Web前端开发中,理解DOM元素的位置和尺寸是非常重要的。特别是当我们需要处理用户的交互行为,如鼠标点击事件时,了解鼠标的坐标以及元素的位置和大小对于构建响应式的UI至关重要。希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。在处理复杂的用户交互时,这些技巧和技术可以极大地提高用户体验和应用程序的整体性能。例如,当需要实现复杂的拖拽功能时,一个做过前端开发的产品经理,经历过睿智产品的折磨导致脱发之后,励志要翻身农奴把歌唱,专栏系列(点击解锁)原创 2024-08-06 03:15:12 · 925 阅读 · 0 评论 -
大量PNG图片实现动画实现方案
在Web开发中,使用大量的PNG图片来制作动画是一种常见的技术手段,特别是在需要高度定制化和控制的场景下。本文将详细介绍如何使用大量PNG图片来实现动画效果,从基本概念入手,逐步深入到具体的技术实现细节,并通过多个示例帮助读者理解整个过程。此外,合理地利用缓存机制和图片压缩工具,可以大大减少带宽消耗,提高用户体验。希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。一个做过前端开发的产品经理,经历过睿智产品的折磨导致脱发之后,励志要翻身农奴把歌唱,原创 2024-08-06 00:03:38 · 775 阅读 · 0 评论 -
浏览器绑定快捷键 KeyboardEvent
是一个用于表示键盘事件的对象,它提供了许多有用的属性和方法,使得开发者能够监听键盘上的按键操作。原创 2024-08-05 21:49:33 · 1288 阅读 · 0 评论 -
Clipboard 剪贴板
剪贴板是操作系统提供的一个临时存储区域,主要用于暂存从一个地方复制的数据,以便在另一个地方粘贴。Web平台也提供了一个剪贴板API,允许开发者在网页中复制或粘贴文本。现代浏览器支持的剪贴板API主要通过接口来实现。这个API允许开发者执行复制和粘贴操作,而不必依赖Flash插件或者复杂的JavaScript库。原创 2024-08-05 18:46:26 · 621 阅读 · 0 评论 -
HTML 元素的属性有哪些
属性是HTML元素的一部分,位于开始标签中,用于指定元素的特性。每个属性都由一个名称和一个值组成,通常以键值对的形式出现,例如。属性可以影响元素的样式、行为以及与其他元素的交互方式。原创 2024-08-05 16:12:38 · 1022 阅读 · 0 评论 -
HTML中元素和标签有什么区别?
在HTML(HyperText Markup Language)的世界里,“元素”和“标签”这两个术语经常被提及,但它们之间存在着细微而重要的差别。通过以上示例和技巧,我们可以看到元素和标签在HTML中的重要性以及它们之间的区别。希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。在响应式设计中,我们通常使用特定的元素来构建网页布局,这些元素可以通过CSS媒体查询来适应不同的屏幕尺寸。表单元素是HTML中最常用的部分之一,它们用于收集用户输入的数据。原创 2024-08-05 13:43:51 · 1013 阅读 · 0 评论 -
前端框架中的虚拟DOM和实际DOM之间的关系
它的目的是为了减少直接与浏览器的实际DOM交互的次数,因为频繁的操作DOM会导致重绘和回流,从而降低页面性能。一旦虚拟DOM发生变化,框架会计算出最有效的DOM更新策略,并将其应用到实际DOM上。通过以上的例子和技巧,我们可以看到虚拟DOM与实际DOM之间的紧密联系,以及如何利用这种机制来构建高性能的应用。希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。一个做过前端开发的产品经理,经历过睿智产品的折磨导致脱发之后,励志要翻身农奴把歌唱,原创 2024-08-05 13:21:29 · 620 阅读 · 0 评论 -
前端页面如何创建表格?table的结构、属性有哪些?
通过本文的学习,我们深入了解了 HTML 表格的基本结构、属性以及如何使用 CSS 进行样式化。此外,还介绍了如何通过 JavaScript 实现动态功能,以及如何根据不同的应用场景调整表格的样式和布局。希望这些知识能够帮助你在实际项目中更好地使用表格组件。欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。DTcode7的博客首页。原创 2024-08-01 11:11:00 · 377 阅读 · 0 评论 -
前端如何设置表格边框样式和单元格间距?
合理设置表格的边框样式和单元格间距不仅能让表格看起来更加美观,还能提高数据的可读性。本文将详细介绍如何使用 CSS 来定制表格的外观,包括边框样式和单元格间距,以及一些实际工作中可能会遇到的问题和解决方案。希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。通过本文的介绍和示例,希望你能更好地掌握如何设置表格的边框样式和单元格间距。在长表格中,当滚动页面时,表头往往会消失,这降低了数据的可读性。让表格边框合并为单一的边框,避免出现双线的情况。原创 2024-08-01 08:03:25 · 660 阅读 · 0 评论 -
如何使用媒体查询来适配不同设备上的样式?
媒体查询(Media Queries)是 CSS3 中引入的一项关键特性,它允许开发者针对不同的设备和屏幕尺寸定义特定的样式规则。通过媒体查询,你可以编写适应不同设备和屏幕尺寸的样式表,使网页在各种设备上都能呈现良好的用户体验。在这个例子中,我们定义了三个不同的媒体查询,每个查询都对应不同的屏幕尺寸范围,并设置了相应的字体大小。希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。例如,高 DPI 的设备可能需要更高的字体大小和更大的元素间距。原创 2024-08-01 04:52:55 · 1016 阅读 · 0 评论