- 博客(31)
- 收藏
- 关注
RSS订阅原创 拿来即用的响应式布局方法
Viewport 是用户在浏览器中看到网页的区域，可以通过以下方式设置 Viewport 标签来适应不同设备的屏幕大小。响应式设计是一种灵活的方法，可以根据不同的项目需求进行调整和实现。：使用 CSS 媒体查询可以根据设备的特性（如屏幕宽度、高度、方向等）来应用不同的样式。：使用媒体查询时，从移动设备的样式开始编写，然后逐渐添加更大屏幕的样式。响应式设计在前端是一个很重要的内容，每一个前端开发都要了解并会使用，在实际的开发中，，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。
2024-04-28 20:34:22
512
原创 初学者的HTML5 Geolocation API入门指南！
用户可以选择允许或拒绝。以上是 HTML5 中 Geolocation API 的内容，在平时的开发中其实我们用百度地图 API、高德地图 API 会比较多，但原理都是一样的，所以了解这部分的内容是非常有必要的。文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 HTML 的部分，瑶琴会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。：在 successCallback 中，您可以处理获取到的地理位置信息，这些信息通常包括纬度、经度、精度等。
2024-04-28 20:28:52
376
原创 前端初学者必读的 Web Workers指南
文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 HTML 的部分，瑶琴会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。以上是 HTML5 中 Web Workers 的内容，在平时的开发过程中用的比较少，除非需要多线程处理数据时会用到，但作为一个合格的前端开发者，了解这部分的内容是非常有必要的。这个文件将包含要在后台线程中执行的代码。在这个场景中，我们将使用 Web Worker 在后台计算一个大型数组的总和，以避免在主线程中阻塞用户界面。
2024-04-28 18:50:27
488
原创 小白轻松掌握多种本地存储机制
Web Storage 提供了两个对象，localStorage 和 sessionStorage，它们都允许在浏览器中存储键值对的数据。以上是 HTML5 中本地存储的内容，其中 localStorage 和 sessionStorage 在平时的开发中用的比较多。数据也存储在用户的浏览器中，但是当用户关闭浏览器或标签页后，数据会被清除。这些本地存储的方式是为了提供更好的用户体验，使开发者能够在客户端存储数据，而无需依赖服务器。，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。
2024-04-27 21:05:59
240
原创 一文总结 HTML5 新增的表单控件
今天瑶琴带大家学习 HTML5 中新增的表单控件，这块的内容在前端工作用的比较多，很多组件的表单控件都是基于 HTML5 表单控件封装。以上是 HTML5 中新增表单控件的内容，初学者不用对这些容死记硬背，在平时开发中可以查阅自己的笔记，用的多了也就掌握了。，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。可以创建滑块控件，用户可以通过滑动来选择一个范围内的值。分别用于输入邮箱地址和网址，浏览器会在输入时进行验证。用户可以选择时间，通常会展示一个时间选择器。用于输入电话号码，适用于移动设备。
2024-04-27 21:00:39
338
原创 零基础轻松学习 canvas
以上是 HTML5 中 <canvas> 标签的内容，<canvas> 标签在动画、签名、图表中都是常用的，也是新手要掌握的内容之一，初学者可以根据今天的内容，用canvas 画一些图形，了解它的基本用法。使用路径方法（如 beginPath()、moveTo()、lineTo() 和 closePath()）创建复杂的形状，然后使用 fill() 或 stroke() 渲染路径。通过 <canvas>，您可以实现许多炫酷的特效和过渡效果，如页面背景变化、元素的飞入、淡入淡出等。
2024-04-26 14:23:25
320
原创 一文总结 HTML5 多媒体标签
以上是 HTML5 中多媒体标签的内容，在很多组件库里对原生的标签进行了封装，也可以直接拿过来用。3.<source>：用于在 <audio> 和 <video> 标签中指定多个媒体源，以便在不同浏览器中选择适合的格式。5.<canvas>：用于绘制图形、动画等多媒体内容，通过 JavaScript API 控制。4.<iframe>：虽然通常用于嵌入其他网页，但也可用于嵌入包含多媒体内容的页面。，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。2.<video>：用于嵌入视频内容。
2024-04-25 18:38:08
273
原创 html5 语义化标签实用指南
以上就是 HTML5 中语义化标签的内容，这些内容在面试中也可能被问到，在平时写页面时留意下每个标签对应的含义，用在正确的位置才能发挥语义化标签最大的作用。：<figure> 用于表示独立的内容块，如图片、图表、代码示例等，而 <figcaption> 用于为这些内容块添加标题或说明。：表示导航部分，用于包含页面的主要导航链接。：表示一个独立的区块，可以包含一组相关的内容。：表示页面的侧边内容，通常是与页面主要内容相关但可以独立存在的内容。，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。
2024-04-24 22:30:41
416
原创 小白进阶 HTML5
HTML5 引入了许多新的语义元素，如 、、、、、 等，用于更准确地描述文档的结构，提高页面的可读性和可访问性。：HTML5 引入了一些新的表单控件，如 、,、 等，使表单交互更加丰富和用户友好。，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。
2024-04-23 18:57:07
309
原创 iframe 详解和避坑
2.SEO 问题：搜索引擎可能无法正确地解析 <iframe> 中的内容，这可能影响页面的搜索引擎优化（SEO）。比如之前瑶琴遇到的一个小需求，需要在 PC 端显示移动端的某个商品详情页面，由 pc 端拼接参数到移动端链接上，获取到具体的商品信息后显示页面，就是用的 <iframe> 标签。始终确保嵌入的内容是可信的。上面就是关于 <iframe> 标签的用法了，<iframe> 标签在写网页中不常用到，但在一些特殊的场景中，还是会用到的。2）如果使用 <iframe>，请确保嵌入的内容来自可信任的源。
2024-04-22 09:42:30
700
原创 零基础轻松掌握 select
在这个例子中，用户可以从 "选项 1" 和 "选项 2" 中选择一个。每个 标签都有一个 value 属性，它定义了在用户选择该选项时发送到服务器的值，或者在 JavaScript 中进行处理的值。每个 标签都有一个 value 属性，它定义了在用户选择该选项时发送到服务器的值，或者在 JavaScript 中进行处理的值。2.添加选项 元素 在 标签内添加一个或多个 标签，每个 表示一个可选项。
2024-04-21 22:40:13
656
1
原创 小白都能看懂的 textarea 的用法
当在 HTML 表单中需要用户输入多行文本时，会使用 <textarea> 元素，它是一个文本域控件。rows 指定文本域显示的行数，cols 指定文本域显示的列数。今天的内容就是这些了，这就是 textarea 的全部用法了，相信零基础的你已经学会了，将上面的示例复制到编辑器中试试把。通过使用 <textarea> 元素，你可以方便地收集多行文本输入，为用户提供更大的输入空间。2.name：指定文本域的名称，将在提交表单时用作标识字段的名称。，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。
2024-04-21 22:33:15
391
1
原创 input 标签的多种形态
10.日期和时间输入 (type="date", type="time", type="datetime-local")： 分别用于输入日期、时间以及日期和时间。：适用于 type="number" 和 type="date" 等输入框，用于设置输入的最小和最大值。12.隐藏字段 (type="hidden")： 不可见的输入字段，用于在提交表单时携带额外的数据。：适用于 type="text"，指定一个正则表达式，用于验证输入内容是否符合指定的模式。：指定输入元素的名称，用于标识该元素的数据。
2024-04-20 20:03:32
783
原创 一文讲透 form 表单（建议收藏）
后端服务器可以使用不同的编程语言（如 PHP、Python、Node.js 等）来处理接收到的数据，并根据业务逻辑进行相应的操作，如存储数据、发送邮件等。以上就是关于表单的知识点，从用户填写表单提交到服务器处理的过程，包括初学者在使用 form 表单时的注意点也很全，建议初学者可以多看几遍，了解表单处理的整个流程，了解表单使用的基本知识，避免踩坑。需要注意的是，为了确保页面的可访问性和用户友好性，应使用适当的标签和属性，并提供必要的标签标记和错误提示。这有助于您理解表单在网页中的工作原理和数据流动。
2024-04-19 21:38:03
1029
原创 行内元素 or 块级元素 怎么选？
需要注意的是，HTML5 引入了更多的语义化元素，例如 、、、 等，它们有助于更好地描述页面结构和内容。以上就是关于块级元素和行内元素的内容，大家不用死记硬背，在写页面时用多了自然就记住了，记得要多多练习呀，希望每一个初学者都能成为一个优秀的前端开发工程师，加油。可以设置完整样式：块级元素可以设置完整的样式，包括宽度、高度、外边距、内边距等盒模型属性。只占据内容的宽度：行内元素的宽度只占据其包裹的内容宽度，不会主动撑开父元素。
2024-04-17 14:33:26
367
原创 有序、无序、定义，一次了解三种列表魔法
在 HTML 中，列表标签用于创建不同类型的列表，如有序列表、无序列表和描述列表。（Description List）： 描述列表使用 标签创建，其中每个列表项由 （描述标题）和 （描述内容）标签组成。 表示描述列表， 表示定义术语， 表示对应的描述。默认情况下，浏览器会为描述列表添加一些默认的样式，但您可以使用 CSS 来自定义列表项的外观，以适应您的页面设计。注意：列表相互嵌套时，要避免过多的嵌套，保持适度的嵌套层次，以确保内容的可读性和清晰度。
2024-04-17 14:29:26
310
原创 详解 table 属性
在这个示例中，外部表格包含员工信息，而每个员工行的最后一个单元格中嵌套了一个内部表格，显示员工参与的项目信息。这是通过在一个单元格中插入另一个表格来实现的。上面展示了表格中常用的属性，给出嵌套表格的用法，可以直接将上面的代码示例复制到编辑器运行看效果。在前一篇文章中我们学习了表格的相关知识，今天学习表格属性相关的知识点。，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。
2024-04-16 19:25:46
398
原创 网页表格达人 table
看到这里的朋友，关于 <table> 标签的用法应该了解了，初学者在学习 HTML 内容时要多多写些静态页面来练习，比如你看到某个页面时，可以思考如果是自己来写，会怎么实现这个页面。<table> 表格在网页中的是很重要的元素，尤其在后台管理系统中，表格的使用最为频繁，今天学习表格相关的知识点。解决方法：使用响应式设计，通过媒体查询来调整表格在不同屏幕尺寸下的布局，以确保在小屏幕上也能正常显示。应用场景：在一个公司内部使用的数据报告中，使用表格来展示不同部门的绩效数据。
2024-04-15 23:19:35
535
1
原创 深入解析 img 标签的多维应用
在上述代码中，首先选择所有带有 data-src 属性的图像元素，然后通过 Intersection Observer 监听这些图像是否进入视口，一旦进入视口，将 data-src 属性的值赋给 src 属性，从而实现懒加载。看到这里的朋友，关于 <img> 标签的内容，可以好好吸收下，<img> 标签的懒加载和预加载都是面试中常考的知识点，上面内容中关于 HTML5 和 javascript 的内容在后续的系列中都会学到。8.图像预加载：通过在页面加载前预加载图像，可以提高用户体验。
2024-04-14 22:13:18
805
1
原创 a 标签，不只是超链接
总的来说，<a> 标签非常灵活，可以通过添加不同的属性和样式，适应各种不同的需求和场景。今天来学习 a 标签，<a> 标签是超链接，用来跳转网页，但其实 <a> 标签的用法很多种，在网页中，可以充分利用 <a> 来达到我们想要的效果，今天就来看看它有那些隐藏用法。3.锚点链接：通过设置 href 属性为页面内的元素 ID，可以创建页面内的锚点链接，方便用户快速跳转到页面的不同部分。看到这里的朋友，可以回顾下，在平时的开发中你用到了哪几种呢，这里瑶琴补充下，<a> 标签作为。
2024-04-14 22:04:30
630
1
原创 p 标签的万能用法
5.SEO（搜索引擎优化）：搜索引擎通常会将 标签内的文本视为网页的重要内容，因此合理使用 标签有助于优化页面的排名。 标签是段落的意思，但是很多时候初学者在学代码的时候并没有真正把它用作段落来写，那么 标签的正确用法到底有哪些？4.文本样式化：你可以通过 CSS 样式为 标签中的文本设置不同的字体、颜色、大小等样式，从而使段落的呈现更加美观。3.网页布局：在一些简单的网页布局中，也可以使用 标签来划分不同的文本块，从而使页面的结构更加清晰。
2024-04-09 17:15:42
354
原创 不万能的 div
相信看到这里的朋友，都知道了 <div> 标签的用法，在写代码的时候也要合理的使用，尽量多使用语义化的标签，希望今天的内容对你有帮助，学习是一个持续的过程，不断学习和实践将使你逐渐成为一名出色的前端开发者。对于一些更具有语义含义的内容，比如文章、标题、段落等，应该使用具有语义化的 HTML 标签，例如 <article>、<h1>、<p> 等。初学者写页面的时候，最常用到的就是 <div> 标签，但注意 <div> 标签更多的是一个容器的作用，不是语义化标签，也就是说不利于 SEO。最后啰嗦一句，所谓，
2024-04-08 22:13:59
446
原创 h1 ~ h6 谁是网页之王？
这些标签表示标题的层级，从 <h1> 到 <h6>，层级逐渐降低，<h1> 是最高级别的标题，而 <h6> 是最低级别的标题。以上就是今天学习的内容了，相信看到这里的朋友，都知道了标题标签的用法，希望今天的内容对你有帮助，学习是一个持续的过程，不断学习和实践将使你逐渐成为一名出色的前端开发者。标题应该用于表示页面或内容的结构，搜索引擎和屏幕阅读器等工具也会根据标题的级别和结构来理解网页的内容，它应该用于最重要的内容。6.<h6>: 表示最低级别的标题，用于细化五级标题的内容，一般不常使用。
2024-04-08 22:08:15
316
原创 详解 HMTL 结构
看到这里的朋友可以回顾下，HTML 的基本结构，每个标签的含义和用法你掌握了吗，好了，希望今天的内容对你有帮助，学习是一个持续的过程，不断学习和实践将使你逐渐成为一名出色的前端开发者。3.：这是文档的头部部分，用于包含与文档相关的元信息，如页面标题、字符编码等。6.：主体标签用于定义文档的主体部分，其中包含了所有在网页上显示的内容。在标签中，通常有一个标签用于指定网页的标题。2. 标签：用于定义网页的标题，将显示在浏览器的标签页上。
2024-04-05 16:13:58
496
1
原创 HTML 到底怎么学？
ChatGPT 给了我们学习 HTML 的路线，列出了 HTML 学习的内容，接下来，瑶琴会参照这些内容，在后面的学习中补充和详细的带大家学习，好了，希望今天的内容对你有帮助，学习是一个持续改进的过程，不断学习和实践将使你逐渐成为一名出色的前端开发者。打开一个代码编辑器，创建一个新的 HTML 文件（文件为xxx.html），然后按照上面学到的知识，编写一个简单的 HTML 网页。在学习 HTML 的同时，可以了解一些与 HTML 相关的技术，如 CSS用于样式设计，JavaScript 用于交互效果等。
2024-04-04 23:09:48
644
1
原创 前端基石之 HTML
它旨在提高网页的可靠性和可扩展性。初学前端的朋友是不是感觉 HTML的内容还算比较好了解呢，在后面的文章中，瑶琴将带大家系统的学习 HTML，从一个个小知识点，带大家将 HTML 学透，希望今天的内容可以让大家更加了解 HTML，帮助到想要系统学习前端的朋友。HTML 的发展历史可以追溯到 20 世纪 90 年代初，随着互联网的普及和技术的发展，HTML 经历了多个版本的演进和改进。HTML 1.0 是第一个正式发布的 HTML 版本，它定义了最基本的 HTML 标记，用于创建简单的网页结构和内容。
2024-04-04 23:01:23
213
1
原创 ChatGPT 辅助编程 | 没用的前端工具扔了吧
上面也是瑶琴每天写代码都会用到的工具，像早期写代码时也使用过 sublimeText 编辑器，这款编辑器适合刚入门前端的朋友，VSCode 适合模块化和工程化项目，在公司做项目时，用的也是它，里面有很多帮助前端开发者便捷开发的插件，下次瑶琴专门写篇文章分享。npm (https://www.npmjs.com/): npm是Node.js的包管理器，用于安装和管理JavaScript库和工具。Git (https://git-scm.com/): Git是一个流行的版本控制系统，用于跟踪代码的变更。
2024-04-03 15:07:47
354
1
原创 ChatGPT 辅助编程 | 一站式前端学习必备
瑶琴觉得上面 ChatGPT 给的视频和网站及书籍是比较全的，并且附上了地址，瑶琴刚开始学前端的时候，看的最多的就是慕课网，早期写代码时需要查阅相关资料是在 MDN 和 W3Schools，阮一峰老师的网站是极力推荐的，希望今天的内容可以帮助想要系统学习前端的朋友。W3Schools是一个经典的前端教程网站，提供了丰富的HTML、CSS、JavaScript等前端教学内容，适合初学者入门。DevDocs是一个整合了多个技术文档的在线平台，包括HTML、CSS、JavaScript、React等。
2024-04-03 15:05:19
430
原创 ChatGPT 辅助编程 | 90年代到现在的前端进化
（2010s - 至今）：随着前端框架和库的兴起，例如React、Vue.js等，前端工程师的工作变得更加高效、模块化和组件化。前端主要涉及网页和应用程序的用户界面(UI)和用户体验(UX)的开发，包括网页的布局、样式、交互效果以及与后端交互的功能。（2010s - 至今）：随着移动设备的普及，前端工程师需要考虑多平台适配和响应式设计，以提供在不同设备上都有良好用户体验的网页和应用程序。随着互联网的发展和技术的不断进步，前端工程师的角色和职责也在不断演变和发展。前端工程化的理念和工具也得到广泛应用。
2024-04-02 15:10:21
334
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人