当前位置： 首页 > news >正文

HTML 基础 (快速入门)详细步骤和示例

news 2026/2/9 16:28:34

目录

创建基本的 HTML 文件

添加内容到页面

页面布局与链接

HTML（超文本标记语言）是构建网页的基础技术，以下是 HTML 基础的详细步骤和示例：

创建基本的 HTML 文件

  • 步骤一：新建文件
    • 在本地计算机上选择一个合适的文件夹，用于存放 HTML 文件。在该文件夹内，使用文本编辑器（如 Notepad++、Sublime Text、Visual Studio Code 等）创建一个新的文本文件。
  • 步骤二：命名文件
    • 将文件保存为以.html为后缀的文件名，例如index.html。这个文件名就是你网页的文件名，后续可以通过浏览器访问这个文件来查看网页效果。
  • 步骤三：编写基本结构
    • 在文本编辑器中，输入以下 HTML 基本结构代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的第一个HTML页面</title>
</head>
<body></body>
</html>
  • <!DOCTYPE html>：这是 HTML5 的文档类型声明，告诉浏览器该文件是一个 HTML5 文档。
  • <html>标签：是 HTML 文档的根标签，所有其他 HTML 元素都包含在这个标签内。lang="en"属性指定了文档的语言为英语，也可以根据实际情况设置为zh-CN等其他语言代码。
  • <head>标签：包含了关于 HTML 文档的元信息，如文档标题、字符编码、样式表链接等。这些信息不会直接显示在网页内容中，但对网页的正确显示和功能起着重要作用。
  • <meta charset="UTF-8">：指定了文档的字符编码为 UTF-8，这样可以支持各种语言和特殊字符的正确显示。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">：用于设置网页的视口，确保网页在不同设备上能够正确适配和显示。
  • <title>标签：定义了网页的标题，显示在浏览器的标题栏或标签页上。

添加内容到页面

  • 步骤四：添加标题和段落
    • 在<body>标签内，添加以下代码来创建标题和段落：
<body><h1>欢迎来到我的HTML页面</h1><p>这是一个简单的HTML页面示例，展示了HTML的基本用法。</p>
</body>

  • <h1>标签：表示一级标题，HTML 还提供了<h2>到<h6>等不同级别的标题标签，用于表示文档中的不同层次结构。
  • <p>标签：用于定义段落，其中的文本会在浏览器中以段落的形式显示。
  • 步骤五：添加列表
    • 可以在页面中添加无序列表或有序列表，示例代码如下：
<body><h1>欢迎来到我的HTML页面</h1><p>这是一个简单的HTML页面示例，展示了HTML的基本用法。</p><h2>水果列表</h2><ul><li>苹果</li><li>香蕉</li><li>橙子</li></ul><h2>数字列表</h2><ol><li>1</li><li>2</li><li>3</li></ol>
</body>
  • <ul>标签：表示无序列表，其中的每个列表项使用<li>标签表示，在浏览器中会以项目符号的形式显示。
  • <ol>标签：表示有序列表，列表项会按照数字顺序进行编号。

页面布局与链接

  • 步骤六：使用 div 进行布局
    • <div>标签是一个常用的块级元素，用于对页面内容进行分组和布局。可以为<div>标签添加class或id属性，以便通过 CSS 样式来控制其样式和布局。示例代码如下：
<body><div id="header"><h1>我的网站标题</h1></div><div class="content"><p>这里是页面的主要内容区域。</p></div><div id="footer"><p>版权所有 &copy; 2025</p></div>
</body>
  • 步骤七：添加链接
    • 使用<a>标签来创建链接，示例代码如下：
<body><p>这是一个简单的HTML页面示例，展示了HTML的基本用法。</p><p>访问 <a href="https://www.example.com">示例网站</a> 了解更多信息。</p>
</body>
  • <a>标签的href属性指定了链接的目标地址，用户点击链接时，浏览器会跳转到该地址。还可以使用target="_blank"属性让链接在新窗口中打开。

以上就是 HTML 基础的一些主要步骤和示例，通过不断学习和实践，可以创建出更复杂、更美观的网页。

相关文章：

HTML 基础 (快速入门)详细步骤和示例

目录 创建基本的 HTML 文件 添加内容到页面 页面布局与链接 HTML&#xff08;超文本标记语言&#xff09;是构建网页的基础技术&#xff0c;以下是 HTML 基础的详细步骤和示例&#xff1a; 创建基本的 HTML 文件 步骤一&#xff1a;新建文件 在本地计算机上选择一个合适的…...

编程日记 2025/2/28 5:48:55

力扣-动态规划-139 单词拆分

思路 dp数组定义&#xff1a;用wordDict数组可以完成不超过j的字符串的可能为dp[j]递推公式&#xff1a; tmp s.substr(j - wordDict[i].size(), wordDict[i].size()); dp[j] (dp[j - wordDict[i].size()] && wordDict[i] tmp) || dp[j]; dp数组初始化&#xff1a;…...

编程日记 2025/2/28 5:46:52

建筑能耗监测系统数据采集装置 物联网网关功能参数介绍

安科瑞刘鸿鹏 摘要 随着物联网&#xff08;IoT&#xff09;技术的迅猛发展&#xff0c;现代物联网系统的规模和复杂度不断增加&#xff0c;各种智能设备和传感器的广泛应用为数据采集和分析提供了丰富的信息源。然而&#xff0c;面对不同协议、标准和通信方式的设备&#xff…...

编程日记 2025/2/28 5:45:51

vue深拷贝：1、使用JSON.parse()和JSON.stringify()；2、使用Lodash库；3、使用深拷贝函数（采用递归的方式）

文章目录 引言三种方法的优缺点在Vue中，实现数组的深拷贝I JSON.stringify和 JSON.parse的小技巧深拷贝步骤缺点：案例1：向后端请求路由数据案例2： 表单数据处理时复制用户输入的数据II 使用Lodash库步骤适用于复杂数据结构和需要处理循环引用的场景III 自定义的深拷贝函数（…...

编程日记 2025/2/28 5:44:50

ES 删除index 的curl

以下是使用 `curl` 命令删除 Elasticsearch 索引的格式和示例： ### 基本格式 ```bash curl -XDELETE "http://<node-ip|hostname>:9200/<index-name>" ``` - `<node-ip|hostname>`：Elasticsearch 节点的 IP 地址或主机名。 - `<index-name&g…...

编程日记 2025/2/28 5:43:47

游戏引擎学习第124天

仓库:https://gitee.com/mrxiao_com/2d_game_3 回顾/复习 今天是继续完善和调试多线程的任务队列。之前的几天&#xff0c;我们已经介绍了多线程的一些基础知识&#xff0c;包括如何创建工作队列以及如何在线程中处理任务。今天&#xff0c;重点是解决那些我们之前没有注意到…...

编程日记 2025/2/28 5:42:46

第十四届蓝桥杯Scratch11月stema选拔赛真题——小猫照镜子

编程实现&#xff1a; 小猫照镜子。(背景非源素材) 具体要求&#xff1a; 1). 运行程序&#xff0c;角色、背景如图所示&#xff1b; 完整题目可点击下方链接查看&#xff0c;支持在线编程~ 小猫照镜子_scratch_少儿编程题库学习中心-嗨信奥https://www.hixinao.com/tiku/s…...

编程日记 2025/2/28 5:40:42

使用vscode导出Markdown的PDF无法显示数学公式的问题

我的硬件环境是M2的MacBook air&#xff0c;在vscode中使用了Markdown PDF来导出md文件对应的PDF。但不管导出html还是PDF文件&#xff0c;数学公式都是显示的源代码。 我看了许多教程&#xff0c;给的是这个方法&#xff1a;在md文件对应的html文件中加上以下代码&#xff1a…...

编程日记 2025/2/28 5:39:40

前端系列之：Blob

Blob 与二进制 什么是二进制&#xff1f; 二进制是计算机数据的基本表示形式&#xff0c;只使用 0 和 1 两个数字来表示数值。任何类型的数据&#xff08;无论是文本、图片、音频文件等&#xff09;都可以通过二进制表示。 什么是 Blob&#xff1f; 全称 Binary Large Object&a…...

编程日记 2025/2/28 5:38:37

【项目管理】基于 C 语言的 QQ 聊天室实现（TCP + 多线程 + SQLite3）

基于 C 语言的 QQ 聊天室（TCP + 多线程 + SQLite3） 项目功能基础功能: 登录、注册、添加好友、私聊、创建群聊、群聊扩展功能: 删除好友、注销账号、好友在线状态、群管理（拉人/踢人）、VIP 特权、邮件通知等 功能介绍：模拟QQ聊天客户端：登录界面：1、登录2、注册 //将用…...

编程日记 2025/2/28 5:37:36

Apache Flink：实时数据流处理的终极武器

Apache Flink&#xff1a;实时数据流处理的终极武器 在当今这个数据驱动的世界&#xff0c;实时数据流处理已经成为各行各业的核心需求。从金融风控到电商推荐&#xff0c;从物联网监控到网络安全&#xff0c;毫秒级的响应能力决定了一家公司在市场中的竞争力。而在众多流式计…...

编程日记 2025/2/28 5:36:35

点云处理入门--PointNetPointNet++论文与代码详解

基础知识 点云数据&#xff1a; 点云是一种通过三维扫描设备或计算机图形学技术获取的三维空间数据&#xff0c;通常由一系列点组成&#xff0c;每个点包含其在三维空间中的坐标&#xff08;如 x,y,z&#xff09;&#xff0c;有时还可能包含颜色、强度等附加信息。 介绍几种常…...

编程日记 2025/2/28 5:35:34

通过Nginx负载均衡+Keepalived实现业务高可用

通过Nginx负载均衡和Keepalived可以实现业务的高可用&#xff0c;以下是详细的实现步骤&#xff1a; 环境准备 假设我们有3台服务器&#xff0c;IP地址分别为&#xff1a; 服务器1&#xff08;Nginx Keepalived 主节点&#xff09;&#xff1a;192.168.1.100服务器2&#x…...

编程日记 2025/2/28 5:34:33

Spark技术系列（三）：Spark算子全解析——从基础使用到高阶优化

Spark技术系列（三）：Spark算子全解析——从基础使用到高阶优化 1. 算子核心概念与分类体系 1.1 算子本质解析 延迟执行机制：转换算子构建DAG，行动算子触发Job执行任务并行度：由RDD分区数决定（可通过spark.default.parallelism全局配置）执行位置优化：基于数据本地性的…...

编程日记 2025/2/28 5:33:30

ES6模块化详解：导入与导出方式

在现代 JavaScript 开发中&#xff0c;模块化是代码管理和组织的重要工具。ES6&#xff08;ECMAScript 2015&#xff09;引入了模块化的概念&#xff0c;通过 import 和 export 来组织代码&#xff0c;使得模块的管理变得更加清晰和简洁。本文将详细介绍 ES6 中的各种模块导入导…...

编程日记 2025/2/28 5:31:23

每日学习Java之一万个为什么？[MySQL面试篇]

分析SQL语句执行流程中遇到的问题 前言1 MySQL是怎么在一台服务器上启动的2 MySQL主库和从库是同时启动保持Alive的吗&#xff1f;3 如果不是主从怎么在启动的时候保证数据一致性4 ACID原则在MySQL上的体现5 数据在MySQL是通过什么DTO实现的6 客户端怎么与MySQL Server建立连接…...

编程日记 2025/2/28 5:30:21

常用空间数据结构对比

空间数据结构是用来组织和查询多维空间数据的算法结构。它们在地理信息系统 (GIS)、计算机图形学、机器人导航、机器学习等领域非常重要。以下是几种常见空间数据结构的对比&#xff1a; 1. 四叉树&#xff08;Quadtree&#xff09; 适用场景&#xff1a;二维空间数据&#x…...

编程日记 2025/2/28 5:29:16

AnythingLLM+LM Studio本地知识库构建

前置操作&#xff1a; 已经安装以下软件&#xff0c;并配置后&#xff1a; DeepSeek-R1-Distill-Llama-8B-Q4_K_M.ggufLM-Studio-0.3.10-6-x64 软件准备&#xff1a; 下载AnythingLLM&#xff1a;AnythingLLM | The all-in-one AI application for everyone 点击"Dow…...

编程日记 2025/2/28 5:27:14

使用 Java 更新 Word 文档中的图表数据-超详细

使用 Java 更新 Word 文档中的图表数据 在日常的工作中&#xff0c;尤其是在数据分析和报告自动化的场景中&#xff0c;可能会遇到需要定期更新 Word 文档中的图表数据的需求。比如&#xff0c;生成数据报告时&#xff0c;我们需要在图表中更新一些动态的数据值。今天&#xf…...

编程日记 2025/2/28 5:25:11

Qt常用控件之下拉框QComboBox

下拉框QComboBox QComboBox 是一个下拉框控件。 1. QComboBox属性 属性说明currentText当前选中的文本。currentIndex当前选中的条目下标&#xff08;从 0 开始&#xff0c;如果没有条目被选中则该值为 -1&#xff09;。editable是否允许被修改。为 true 时&#xff0c;QCom…...

编程日记 2025/2/28 5:24:08

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2026/2/8 20:43:07

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

编程新知 2026/2/5 4:23:49

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

编程新知 2026/1/26 14:24:46

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

编程新知 2026/1/31 9:33:18

高防服务器能够抵御哪些网络攻击呢？

高防服务器作为一种有着高度防御能力的服务器&#xff0c;可以帮助网站应对分布式拒绝服务攻击&#xff0c;有效识别和清理一些恶意的网络流量&#xff0c;为用户提供安全且稳定的网络环境&#xff0c;那么&#xff0c;高防服务器一般都可以抵御哪些网络攻击呢&#xff1f;下面…...

编程新知 2025/9/3 19:14:38

DeepSeek 技术赋能无人农场协同作业：用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

编程新知 2025/9/24 13:35:36

深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

编程新知 2026/1/26 13:29:00

【前端异常】JavaScript错误处理：分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...

编程新知 2026/1/1 23:11:45

软件工程 期末复习

瀑布模型&#xff1a;计划 螺旋模型&#xff1a;风险低 原型模型: 用户反馈 喷泉模型:代码复用 高内聚 低耦合&#xff1a;模块内部功能紧密 模块之间依赖程度小 高内聚&#xff1a;指的是一个模块内部的功能应该紧密相关。换句话说&#xff0c;一个模块应当只实现单一的功能…...

编程新知 2026/2/7 0:13:47

【FTP】ftp文件传输会丢包吗？批量几百个文件传输，有一些文件没有传输完整，如何解决？

FTP&#xff08;File Transfer Protocol&#xff09;本身是一个基于 TCP 的协议&#xff0c;理论上不会丢包。但 FTP 文件传输过程中仍可能出现文件不完整、丢失或损坏的情况&#xff0c;主要原因包括&#xff1a; ✅ 一、FTP传输可能“丢包”或文件不完整的原因 原因描述网络…...

编程新知 2025/8/17 3:31:21