欢迎来到本次 HTML 教程！🌟 在这一章节中，我们将深入探讨 HTML 中的无序列表和有序列表的使用方法。 在日常生活中，我们经常需要使用列表来组织信息，例如准备食谱时列出食材，或购物时列出购买清单。 HTML 提供了两种主要的列表类型：无序列表和有序列表。 无序列表使用 <ul> 标签表示，有序列表使用 <ol> 标签表示。 接下来，我们将逐步演示如何创建这两种列表。 无序列表用<ul>来表示，有序列表用<ol>来表示 那我们先来创造一个无序列表 创建无序列表 首先使用 <ul> 标签定义无序列表的开始和结束。 之后在 <ul> 标签内，使用 <li> 标签为每个列表项定义内容，比如说第一个是苹果，第二个是香蕉，第三个是橘子，按下存储，这样就产生了一个无序列表，在无序列表中，每个列表项前会有一个默认的圆点符号。 创建有序列表 那我们来试试看有序列表该怎么使用，无序列表的使用方式跟有序列表是一模一样的，先宣告一个<ol> 然后在 <ol> 标签内，使用 <li> 标签为每个列表项定义内容，输入列表的物件，按下储存，在有序列表中，每个列表项前会有一个数字，表示其顺序。 总结 通过本教程，您已经学会了如何在 HTML 中创建无序和有序列表。 这些列表可以帮助您更好地组织网页内容，使其结构清晰、易于阅读。 接下来，我们将探讨更多 HTML 标签的使用，敬请期待。 感谢您阅读本教程！如果在学习过程中有任何疑问，或者有其他想了解的内容，欢迎在评论区与我们互动~👇 我会尽力解答您的问题，并期待与大家一起交流学习！🌈 您的每一个分享和反馈，都会让更多初学者受益哦！😊
Leon Lim 
前端 HTML 教程（四）：小白也能自己”换行、注解、空格“！
欢迎来到本次 HTML 教程！🌟 在这一章节中，我们将深入探讨 HTML 中的换行、注释和空格的使用方法。 这些基础知识对于编写清晰、结构良好的网页代码至关重要。 即使您是初学者，也能轻松掌握这些技巧，为您的网页开发之旅打下坚实的基础。 无论您是想创建个人博客、设计作品集，还是为未来的前端开发学习做准备，这篇文章都将是一个理想的起点。 准备好了吗？让我们一起开始吧！💻✨ 本教程将指导您如何在 HTML 中实现换行、添加注释和插入空格，这些都是编写整洁、可读代码的基本技巧。” 步骤 1：打开项目并设置标题 上一章我们了解 了HTML 的结构，还没了解的小白可以点击这里进入前端 HTML 教程（三）：小白也能自己”制作第一个网站“！先了解什么是HTML的结构哟。 首先打开我们的index.html，这里我已经换上我们这次章节的标题。 步骤 2：在 <body> 中添加内容 在 <body> 标签内添加标题和段落。 步骤 3：在段落之间添加空行 然后在两个段落之间加入一些空间，我们按下Enter然后存储，你会发现并没有改变，这是由于在HTML中如何你输入一个空格，他是没有作用的。 步骤 4：使用 <br> 标签实现换行 在HTML中，我们使用<br>来换行，在需要换行的地方插入 <br> 标签，每个标签代表一个换行。 步骤 5：添加注释 接下来来介绍HTML中的注解，注解通常是给开发者使用的，就是你可以标识某段HTML是在做些什么东西。 首先我们先输入一段描述的文字，在代码中添加注释，使用快捷键 Ctrl + /（Windows）或 Cmd + /（macOS），注释格式为 <!– 注释内容 …
前端 HTML 教程（三）：小白也能自己”制作第一个网站“！
欢迎来到本次 HTML 教程！在这个章节中，我们将带您从零开始创建一个简单的 HTML 网页，无需编程经验也能轻松上手。本教程不仅会逐步向您展示如何构建网页的基本结构，还会讲解每个步骤背后的原理，让您对 HTML 有更深入的理解。不管您是想尝试搭建个人博客、设计作品集，还是为未来的前端开发学习打下基础，这篇文章都将是一个很好的起点。准备好了吗？让我们一起开始吧！ 步骤 1：打开项目并启动服务器 开发环境安装完毕之后我们来建立我们的第一个网站。 还没安装开发环境的的小白可以点击这里进入《前端 HTML 教程（二）：小白也能自己”安装开发环境“！》自己安装开发环境哟。 打开上个教程的HTML项目，并且按下右下方的Go Live运行我们的网站。 步骤 2：清理文件并添加标题 先把原有的东西全部都删除掉只留下<h1>Hello World</h1>然后保存。 步骤 3：了解 HTML 结构 首先我们介绍一下这个自动生成的html他是什么意思？ 最上面这一行是声明HTML档案的格式，惊叹号”!”就是最新的版本，现在最新的版面是HTML5，所以我们使用的会是HTML5，以后如果有更新版本的话，他也会自动套用最新的版本。 这个<html>标签就是网站的主体，主体里面有分头部<head>和身体<body>，在身体<body>里面就是我们网页的内容，在头部<head>里面就会存储一些描述网页的资讯。 步骤 4：修改网页标题 现在我们网页标题是一个网址 我们现在新增一个<title>标签，并输入<title>里输入”我的第一个网页”，然后保存。 网页标题就会改变了。 步骤 5：添加段落内容 然后我们在<body>里面添加一个段落<p>，段落我们用生成假文的方式，在VS Code里面输入”lorem”按下Enter后就会生成一段假文。 他可以模仿段落的效果。 总结： 以上就是我们做第一个网页的练习，你可以把里面的内容改成任何你想要的东西，通过本教程，您已经学会了创建一个简单的 HTML 网页。接下来，我们将深入探讨 HTML 的更多功能，敬请期待。 感谢您阅读本教程！如果在操作过程中遇到问题，或者有任何疑问和建议，欢迎在下方留言与我们互动。我们非常期待与您交流，并会尽力解答您的问题。同时，也希望您能分享您的学习成果或心得，让更多初学者从中受益！
前端 HTML 教程（二）：小白也能自己”安装开发环境“！
开发环境准备 接着我们来准备我们的开发环境。 首先我们需要一个文字编辑器用来撰写HTML和一个游览器。 这里我们使用Google Chrome，或者你要使用其他的游览器也可以。Google Chrome 下载页面 文字编辑器我们使用Visual Studio Code简称VS Code，VS Code是一个integrated development environment (IDE) ，中文名集成开发环境 。 打开游览器，搜索vscode，打开第一个链接，或点击下方直接到VS Code官方页面。Visual Studio Code 官方网站 进入官网之后，按下download，下载就会直接开始。 下载完成后我们把他打开，然后点击Next和Install直到完成安装。 安装完成后打开VS Code，VS Code一开始会显示Welcome页面，关闭Welcome页面，点击上方的File，然后Open Folder… 在任意地方建立一个新的资料夹，选择你的资料夹然后点击Select Folder。 如果出现以下画面，打钩选项，然后点击Yes, I trust the authors，没有出现的话就可以跳过。 在左边的EXPLORER里面已经打开了我们选中的资料夹，在资料夹内点击右键，选择”New File…”新增一个文件，并命名index.html 接着在我们新增的index.html里面写入html，这时候VS Code就会出现自动补全选项，用滑鼠点击html:5，或用键盘上下方向键选择html:5，然后按下Tab键。还不了解什么是HTML的小白们，可以点击这里进入 《HTML 教程（一）：小白也能看懂的”什么是HTML?”》了解什么是HTML哟。 这时候VS Code就会帮我们生成一个基本格式的html档案。 接着我们在<body></body>之间输入一个h1，这时候VS Code会自动跳出一个选项，按下Tab键或Enter，VS Code就会帮我们自动补全。在<h1></h1>的中间输入Hello World!，然后在上方的File选择Save，或者按下Ctrl+s (Windows)或是cmd+s (macOS)。 储存了以后，打开我们建立的资料夹，双击index.html文件，就可以看到我们的第一个html网站就成功建立了。 接下来我们再优化一下开发的流程。 …
前端 HTML 教程（一）：小白也能看懂的”什么是HTML?”
网页三大元素 什么是网页三大元素？ 在开始介绍HTML之前，让我们来了解什么是网页三大元素。 HTML、CSS还有JavaScript是网页的三大元素，那么它们的关系是什么呢？ HTML 与 CSS 和 JavaScript 配合创建完整网页 HTML 提供结构，CSS 负责美化，JavaScript 增强交互功能。通过三者配合，可以实现：响应式布局：自适应不同设备的屏幕尺寸。动态网页效果：如轮播图、下拉菜单、弹窗提示等。 如果把网页比作一间房子，那么 HTML 就是房子的结构框架，负责搭建墙壁和房间布局；CSS 是用来装饰房子的，比如刷墙、摆放家具，让房子更加美观；而 JavaScript 则赋予房子功能性，比如安装洗衣机让它能洗衣服、装上音响可以听音乐，或者打开冷气享受凉爽等功能。 什么是HTML Hyper Text Markup Language HTML的全名叫HyperText Markup Language，是一种标记语言，他的中文是超文本标记语言，用来定义网页内容的结构和展示方式。 HTML 是网站开发的基础语言，它决定了网页的结构、内容和可访问性，是构建任何网站不可或缺的一部分。即使是复杂的应用程序，也需要依赖 HTML 来呈现内容并与用户交互。 超文本HyperText 超文本是什么意思呢？ 超文本就是说你撰写的网页，别人可以透过一些连接来连到你的网页，你也可以透过连接连到其他人的网页。 这就是超文本的意思。 标记语言 Markup Language 那标记语言是什么意思呢？ 标记语言就像我们现在这张图一样，有左边的挂号跟右边的挂号，左边的挂号叫做起始标签，右边的括号叫做结束标签。 那透过这样的方式呢就可以标记出一个段落它是什么样类型的元素。 HTML 是网页的框架 HTML 是浏览器识别的语言 HTML 是内容与功能的桥梁 你能用HTML做什么？ HTML …
2024总结🌏世界前十的编程语言排行
编程语言千千万，但哪些是2024年开发者最爱的“王牌语言”呢？最近的开发者调查结果揭晓了答案，让我们一起来看看世界前十的编程语言排行！📊 🥇 第1名：JavaScript (JS) – 62.3% 毫无悬念，JavaScript再一次稳居第一！作为前端开发的灵魂语言，JS广泛应用于网站交互、动态效果、以及后端开发（Node.js）。如果你还没学过JS，是时候行动了！ 🥈 第2名：HTML/CSS – 52.9% 虽然严格来说HTML和CSS并不是“编程语言”，但它们却是前端开发的基石。没有HTML/CSS，就没有美观的网页。新手程序员的必修课！ 🥉 第3名：Python (PY) – 51% Python依旧保持高人气。无论是人工智能、数据分析，还是后端开发，Python都能胜任。其语法简单，非常适合初学者。 🏅 第4名：SQL – 51% 数据驱动时代，SQL依然是管理和操作数据库的利器。每个开发者都应该掌握它！ 🏆 第5名：TypeScript (TS) – 38.5% TypeScript是JavaScript的超集，因其类型检查功能越来越受开发者欢迎，特别是在大型项目中表现优异。 🎖️ 第6名：Bash/Shell – 33.9% 在自动化脚本和系统管理领域，Bash和Shell脚本是不可或缺的工具。尤其是DevOps工程师的最爱！ 🎖️ 第7名：Java – 30.3% Java这个经典的老牌语言依然强势。它广泛应用于企业级开发、安卓开发和大数据领域。 🎖️ 第8名：C# – 27.1% C#是开发游戏和Windows应用的首选语言，Unity引擎让它在游戏开发领域大放异彩。 🎖️ 第9名：C++ – 23% 作为系统编程和高性能应用的王者，C++在游戏引擎、图形处理和嵌入式领域有着不可动摇的地位。 🎖️ …
什么是Babel？前端开发中的‘魔法转换器’：让你的JavaScript代码兼容所有浏览器
在现代前端开发中，JavaScript已经成为不可或缺的一部分。然而，不同的浏览器对JavaScript语言的支持并不完全一致。这时，Babel作为一种强大的编译工具，帮助开发者解决了兼容性问题，使开发过程更加流畅高效。 1. Babel是什么？ Babel 是一个开源的JavaScript编译器，它的主要功能是将现代JavaScript代码（包括ES6+标准的语法）转译为向后兼容的旧版本JavaScript代码，从而可以在更多的浏览器中运行。除此之外，Babel还支持一些扩展语法（如JSX）以及新特性（如TypeScript、Polyfill）。 简单来说，Babel是一种工具，可以让你的代码即便在老旧的浏览器中也能正常运行。 2. 为什么需要Babel？ 随着JavaScript语言的快速发展，新特性和语法被不断引入，比如箭头函数（Arrow Functions）、模块（Modules）、解构赋值（Destructuring Assignment）等。然而，并不是所有的浏览器都支持这些特性。比如： 为了在开发中使用这些现代特性，而不必担心兼容性问题，Babel应运而生。 3. Babel的主要功能 3.1 编译现代语法 Babel可以将现代JavaScript代码转译为ES5版本，确保它能够在所有主流浏览器上运行。例如： 现代JavaScript代码： 转译后的代码： 3.2 支持JSX JSX是React中常用的语法扩展，它允许在JavaScript代码中书写类似HTML的结构。由于JSX并不是JavaScript的原生语法，Babel会将它转译为普通的JavaScript代码。 JSX代码： 转译后的代码： 3.3 Polyfill支持 除了语法的转译，Babel还可以通过结合core-js等库，为不支持的API提供Polyfill。例如： 现代API代码： 在老旧浏览器中，这段代码可能无法运行，但通过Babel注入Polyfill，它可以正常工作。 3.4 模块化与优化 Babel支持将ES模块转译为CommonJS等模块规范，使其能够被现代打包工具（如Webpack或Vite）进一步处理，同时支持树摇（Tree Shaking），减少最终打包的文件大小。 4. Babel的工作原理 Babel的工作过程可以分为三个阶段： 如下图所示，Babel的核心流程简单明了： 5. 如何在项目中使用Babel？ 在现代前端开发中，脚手架工具（如create-react-app或Vite）通常已经内置了Babel。如果需要手动配置Babel，可以按照以下步骤操作： 5.1 安装Babel 通过npm安装Babel及其相关依赖： 如果项目使用React，还需要安装React的预设： 5.2 配置Babel 在项目根目录创建一个名为babel.config.json或.babelrc的配置文件： 5.3 运行Babel 使用Babel …
如何通过独立开发网站和游戏赚钱：我的经验分享
随着科技的发展，网站和游戏开发成为了许多人赚钱的重要途径。作为一名独立开发者，我在这条路上积累了一些经验，希望通过这篇文章帮助想要进入这个行业的你找到方向。 我的开发旅程 我是一名来自马来西亚的全栈开发者，同时也有Unity游戏开发的经验。我曾独立开发了多个展示房地产项目的网站。这些项目不仅让我积累了开发经验，还让我感受到将想法变为现实的成就感。 在我开始独立开发之前，我和许多人一样，不知道从哪里开始。后来我发现，专注于一个具体领域，比如ReactJS、Vite、或者Unity，可以让我快速掌握核心技能，从而更快地交付项目。 你需要哪些技能？ 无论是开发网站还是游戏，一些核心技能是必不可少的： 如何找到客户？ 刚开始时，找到客户可能是一个挑战。以下是我的建议： 增加收入的其他方式 除了开发网站或游戏，你还可以通过Affiliate（联盟营销）增加收入。例如，我最近申请了 ShareASale 的计划，这让我可以通过推广相关产品和工具赚取佣金。如果你有自己的博客，分享有价值的内容可以吸引更多读者并增加收入来源。 实际案例：第一个网站开发 在开发第一个网站时，我使用了 ReactJS 和 Vite 来确保网站快速加载，并加入了响应式设计以适应不同设备。这是我第一次尝试将滚动动画和图片动画结合，尽管遇到了一些技术难题，但最终成功交付客户需求，得到了很好的反馈。 结语 无论是开发网站还是游戏，最重要的是开始行动。学习开发技能、接触客户、完成第一个项目，你会发现这条路充满挑战和乐趣。如果你正在犹豫是否要进入这个行业，现在就是最好的时机！ 如果你有任何问题，欢迎在评论区留言，我们一起探讨！
Kokiyo Studio: 引领现代网页开发的创新之路
Kokiyo Studio 的起源与使命 Kokiyo Studio 的创立源于一个简单却强大的愿景：通过分享个人开发经验和技术知识，帮助更多开发者和企业打造令人惊艳且功能强大的数字体验。作为一个独立开发者，Kokiyo Studio 的作者希望通过部落格传递现代开发技术的魅力，同时展现对网页设计和开发的热爱。 内容与专业领域 Kokiyo Studio 部落格涵盖了丰富的网页开发相关内容，帮助读者在不同领域提升技能： 这些内容特别注重结合作者的实际经验，确保每篇文章都能为读者提供实用价值。 成功案例与读者反馈 Kokiyo Studio 的内容已经帮助众多读者解决了实际开发中的问题。不少开发者通过文章优化了自己的项目，取得了显著成果。例如： 技术实力与创新驱动 作为独立开发者，Kokiyo Studio 的作者始终关注技术的最前沿，持续学习和分享诸如 WebGPU 和 AI 工具等最新技术。部落格内容以实际应用为导向，致力于为读者提供具有实际价值的开发技巧和经验总结。 个人化与社区互动 Kokiyo Studio 不仅是一个分享技术的平台，更是与读者互动的桥梁。通过评论和社交媒体，作者与读者保持紧密的交流，解答问题并听取建议，共同进步。 展望未来 未来，Kokiyo Studio 计划继续扩展内容覆盖范围，探索更多新兴技术的实际应用，如虚拟现实和增强现实的整合开发。同时，作者希望通过持续更新内容，帮助更多开发者提升技能，实现个人或团队项目的突破。 总结 无论您是刚入门的开发者还是经验丰富的从业者，Kokiyo Studio 都是一个值得关注的技术部落格。在这里，技术与创意相辅相成，丰富的内容为您的开发旅程提供源源不断的灵感和支持。