表单在网页开发中扮演着非常重要的角色，尤其是注册、登录、搜索等功能的实现都离不开表单。在这篇文章中，我将详细讲解如何用 HTML 创建一个表单，并逐步展示如何添加输入框、设置属性以及实现简单的验证功能。无论你是初学者还是有一定经验的开发者，这篇教程都适合你。 1. 什么是 HTML 表单？ HTML 表单是用来收集用户输入的一种工具。通过表单，用户可以填写信息并将其发送到服务器进行处理。典型的表单使用场景包括： 表单在 HTML 中使用 <form> 标签创建，基本结构如下： 小提示：如果你是新手，不清楚 action 的具体内容，可以暂时留空，但记得一定要设置 method，否则默认是 GET。 2. 创建一个简单的表单 现在我们来创建一个最简单的表单，包括用户名、密码输入框，以及一个提交按钮。 代码解析： 显示效果： 3. 添加更多输入类型 表单不仅限于用户名和密码，还可以接受其他类型的输入。例如，用户注册时通常需要填写邮箱。以下是如何添加 Email 输入框的代码： 代码解析： 实际效果： 4. 添加更多功能： (1) 提供默认提示文字 有时候我们希望在输入框内提供提示信息，例如“请输入用户名”。可以通过 placeholder 属性实现： (2) 限制输入框的长度 为了防止用户输入过长的内容，可以使用 maxlength 属性： 这样用户名的输入长度被限制为最多 20 个字符。 (3) 密码要求 可以设置密码的最小长度： 用户必须输入至少 …
Leon Lim 
前端 HTML 教程（九）：小白也能自己加入”图片“！
欢迎来到本次 HTML 教程！🌟 在这一章节中，我们将探讨如何在 HTML 中插入图片。图片是网页设计中不可或缺的元素，能够增强视觉效果，丰富内容展示。 步骤 1：准备图片 首先，我们需要一张图片来练习。您可以在网络上搜索，例如搜索“猫”，找到喜欢的图片，右键点击并选择“另存为”，将其命名为 cat.jpg，然后保存。 步骤 2：将图片添加到项目中 将刚刚下载的 cat.jpg 图片拖入您的项目文件夹中，确保它与您的 index.html 文件位于同一目录。 步骤 3：在 HTML 中插入图片 打开您的 index.html 文件，并启动 Live Server 以实时预览效果。 要插入图片，我们使用自闭合的 <img> 标签。输入 <img>，并为其添加两个属性： alt：图片的替代文本，当图片无法加载时显示。例如，alt=”猫猫图”。 src：图片的来源路径。在这里，我们输入 src=”./cat.jpg”。 步骤 4：调整图片大小 如果没有设置尺寸，图片会以原始大小显示，可能过大或过小。我们可以使用 width 和 height 属性来调整图片尺寸。例如，设置高度为 200 像素，宽度会按比例自动调整： 步骤 5：处理图片加载错误 当图片路径错误或图片不存在时，浏览器会显示替代文本（alt）。您可以在 alt 属性中添加描述，以告知用户图片的内容或用途。 步骤 6：将图片作为超链接 …
前端 HTML 教程（八）：小白也能自己建立”锚点“！
在网页开发中，锚点链接是一种简单却强大的功能，能够让用户快速跳转到页面中的特定位置，尤其适合长篇内容或多章节页面。通过设置锚点，你可以提升用户体验，帮助他们快速定位到所需信息。无论是目录导航还是FAQ（常见问题解答）页面，这个功能都非常实用。接下来，让我们一步步学习如何实现锚点链接！ 1. 什么是锚点链接？ 锚点链接通过超链接与页面内的特定内容块进行关联。它的实现原理是： 举个例子：在一篇包含“鸟类”和“狗类”内容的文章中，你可以为每个部分创建一个锚点链接，方便用户快速跳转 2. 创建锚点链接的步骤 步骤一：创建目录导航在页面的顶部创建一个导航目录，列出所有需要跳转的内容。用 <ul> 列表标签将内容分组，用 <a> 标签实现超链接： 首先我们先创建一个<h1>标签，接着我们创建一个无序列表，里面加入<li>，然后呢加入<a>，我们在上一章学到的，第一个链接我们想要跳转到birds区块和第二个链接我们想要跳转到dogs区块。 步骤二：为目标内容添加标记使用 <h2> 等标签为页面内容添加标题，并为需要跳转的部分指定唯一的 id 属性。 接下来我们来构建我们需要的区块，创建区块的时候我们还要加上id=””，对应的就是上面的birds和dogs。那这个#字号就代表是id的意思，就是你按下这个<a>，就会跳对应的<h2>，接下来我们按下储存后，会发现它的几个区块都是连在一起的。 步骤三：美化页面布局为了让跳转效果更明显，你可以在内容区块的上下方添加一些空白。使用 <br> 标签或 CSS 样式进行布局调整： 我们要加一些空行让它效果更显著，那我们一个<br>就等于空一行，我们这里空个十行，在每个区块的上方和下方都加入十行空格，按下储存，现在每个区块它已经有很大的空间了。 步骤四：测试功能 当我们按下跳转到鸟类，它就会直接跳转到鸟类的区块，按下跳转到狗类，它就会跳转到狗类的区块。 这就是网页中锚点的使用方法。 总结 锚点链接的功能不仅简单易用，还能大幅提升网页的可用性，尤其是在内容较长的页面中。例如： 通过今天的学习，你掌握了如何创建锚点链接，并实现新手友好的页面跳转功能。如果你觉得有帮助，不妨尝试将这个功能应用到自己的项目中，打造更友好、更高效的用户体验吧！ ⭐ 喜欢这个教程？欢迎点赞收藏！👉 更多网页开发技巧，请持续关注！
前端 HTML 教程（七）：小白也能自己建立”超链接“！
欢迎来到本次 HTML 教程！在这一章节中，我们一起来学习如何使用 HTML 创建超链接。超链接是网页中非常重要的元素，它能让用户通过点击文字或按钮跳转到其他页面，无论是外部网站还是内部页面。下面，我会带你逐步学习如何建立超链接并实现多种功能。 什么是超链接？ 超链接是 HTML 中使用 <a> 标签创建的，它可以引导用户跳转到： 1. 创建一个简单的外部链接 要建立一个超链接，我们需要使用 <a> 标签并设置 href 属性，指向目标网页地址。例如，我们想要链接到 Google： 步骤： 点击链接后，你会跳转到 Google 页面。 2. 在新标签页中打开链接 默认情况下，点击超链接会在当前标签页中打开。如果你想在新标签页中打开链接，可以添加 target=”_blank” 属性。例如： 效果： 3. 链接到自己的页面 接下来，我们学习如何链接到自己创建的页面。假设我们有一个新页面 page2.html，步骤如下： 创建新的 HTML 文件： 在项目文件夹中新增一个文件，命名为 page2.html，并添加简单内容： 设置链接到新页面：使用相对路径链接到 page2. 效果：点击链接后，跳转到 page2.html。 使用浏览器的“返回”按钮可以回到上一页 4. 添加电子邮件超链接 除了跳转网页，你还可以创建一个邮件超链接，点击后打开用户默认的邮件客户端。实现方式如下： 效果： 代码汇总示例 以下是完整的代码示例，包含了所有功能： 总结 …
前端 HTML 教程（六）：小白也能自己”创建表格“！
欢迎来到本次 HTML 教程！在这一章节中，我们一起来学习如何使用 HTML 来创建和美化表格。通过这个教程，你将学会如何用 HTML 创建结构化的表格数据展示，并使用 CSS 为表格添加样式，让它更加美观。 为什么要学习 HTML 表格？ 当你需要处理大量数据时，HTML 的表格功能可以帮助你高效地展示这些信息。通过清晰的表格布局，使用者可以快速理解数据内容，提升用户体验。 第一步：创建基本的表格结构 要创建一个表格，我们需要使用 <table> 标签。以下是基本步骤： 保存文件后，你将看到一个简单的表格，包含标题和一行数据。 第二步：为表格添加内容 定义表格标题（<th>）和单元格（<td>） 使用 <th> 表示标题，使用 <td> 表示具体的单元格内容。 我们为表格添加更多数据。例如： 通过重复添加 <tr> 和 <td> 标签，你可以增加更多行，展示更多数据 第三步：使用 CSS 美化表格 仅有表格结构可能看起来比较单调。为了让表格更具吸引力，我们可以为它添加 CSS 样式。 在 <head> 部分使用 <style> 标签定义样式： 为我们的table, th, td加入CSS，目前不了解CSS语法没有关系，这章节我们主要是教表格，顺便演示为表格添上CSS样式后的效果给大家看。 最终效果 应用以上代码后，你的表格将变得清晰且美观： 样式解释： 总结 …
前端 HTML 教程（五）：小白也能自己”创造无序和有序列表“！
欢迎来到本次 HTML 教程！🌟 在这一章节中，我们将深入探讨 HTML 中的无序列表和有序列表的使用方法。 在日常生活中，我们经常需要使用列表来组织信息，例如准备食谱时列出食材，或购物时列出购买清单。 HTML 提供了两种主要的列表类型：无序列表和有序列表。 无序列表使用 <ul> 标签表示，有序列表使用 <ol> 标签表示。 接下来，我们将逐步演示如何创建这两种列表。 无序列表用<ul>来表示，有序列表用<ol>来表示 那我们先来创造一个无序列表 创建无序列表 首先使用 <ul> 标签定义无序列表的开始和结束。 之后在 <ul> 标签内，使用 <li> 标签为每个列表项定义内容，比如说第一个是苹果，第二个是香蕉，第三个是橘子，按下存储，这样就产生了一个无序列表，在无序列表中，每个列表项前会有一个默认的圆点符号。 创建有序列表 那我们来试试看有序列表该怎么使用，无序列表的使用方式跟有序列表是一模一样的，先宣告一个<ol> 然后在 <ol> 标签内，使用 <li> 标签为每个列表项定义内容，输入列表的物件，按下储存，在有序列表中，每个列表项前会有一个数字，表示其顺序。 总结 通过本教程，您已经学会了如何在 HTML 中创建无序和有序列表。 这些列表可以帮助您更好地组织网页内容，使其结构清晰、易于阅读。 接下来，我们将探讨更多 HTML 标签的使用，敬请期待。 感谢您阅读本教程！如果在学习过程中有任何疑问，或者有其他想了解的内容，欢迎在评论区与我们互动~👇 我会尽力解答您的问题，并期待与大家一起交流学习！🌈 您的每一个分享和反馈，都会让更多初学者受益哦！😊
前端 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 …