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

白骑士的HTML教学基础篇 1.1 HTML简介

news 2026/3/27 12:48:36

        在现代互联网的世界里，HTML（HyperText Markup Language）是所有网页的基础语言。无论是简约的个人博客还是复杂的商业网站，HTML都扮演着不可或缺的角色。掌握HTML是学习前端开发的第一步，这不仅能够帮助你构建静态网页，还能为后续学习CSS和JavaScript等前端技术打下坚实的基础。

什么是HTML？

        HTML，全称HyperText Markup Language，即超文本标记语言。它是一种用于创建网页和Web应用的标准标记语言。HTML使用一系列标签（tags）来描述网页的结构和内容，这些标签告诉浏览器如何显示网页元素。每个标签通常成对出现，包含一个开始标签和一个结束标签。例如：

<p>这是一个段落。</p>

        在上述例子中，‘<p>‘是段落标签，它包围的内容将被浏览器显示为一个段落。

HTML的历史与发展

        HTML最早由Tim Berners-Lee于1989年提出，他当时在欧洲核子研究中心（CERN）工作。最初的HTML版本相对简单，仅包含少量的标签，主要用于描述文本、链接和图像。随着互联网的快速发展，HTML不断演进，增加了许多新功能和新标签，以适应日益复杂的网页需求。

  • HTML 1.0（1991年）：首个公开版本，功能非常基础。
  • HTML 2.0（1995年）：引入了一些新的标签和属性，标准化了之前的非正式扩展。
  • HTML 3.2（1997年）：加入了对表格、脚本和样式表的支持。
  • HTML 4.01（1999年）：引入了更多的结构性元素和属性，强调了网页的语义化。
  • XHTML（2000年）：作为HTML的严格版本，要求更为严格的标签使用规则。
  • HTML5（2014年）：当前的主要版本，增加了许多新元素和API，增强了多媒体支持和复杂应用开发能力。

设置HTML开发环境

        在开始编写HTML代码之前，需要设置一个合适的开发环境。虽然可以使用任何文本编辑器来编写HTML代码，但使用专业的代码编辑器能大大提升编码效率和舒适度。

选择代码编辑器

        一些常见的代码编辑器包括：

  • Visual Studio Code：微软开发的一款免费开源的代码编辑器，具有丰富的插件支持。
  • Sublime Text：轻量级、高性能的代码编辑器，支持多种编程语言。
  • Atom：由GitHub开发的一款开源编辑器，具有强大的自定义功能。

安装代码编辑器

        以Visual Studio Code（VS Code）为例：

  1. 访问VS Code官网。
  2. 下载适用于你操作系统的安装包（Windows、macOS或Linux）。
  3. 安装并启动VS Code。

创建HTML文件

        在VS Code中，创建一个新的HTML文件非常简单：

  1. 打开VS Code，点击左侧的文件图标，选择“新建文件”。
  2. 在文件中输入以下基本HTML代码： 
    <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>我的第一个网页</title>
</head>
<body><h1>欢迎来到我的第一个网页</h1><p>这是一个段落。</p>
</body>
</html>

  3. 保存文件，文件名为‘index.html‘。

预览HTML文件

        保存文件后，可以在浏览器中打开‘index.html‘文件来预览效果。大多数代码编辑器都支持直接在编辑器中预览HTML文件，在VS Code中，可以安装Live Server扩展，实现实时预览。

总结

        通过本篇博客，你了解了HTML的基本概念、发展历史以及如何设置HTML开发环境。HTML是网页开发的基础，掌握HTML能够为你后续学习前端技术打下坚实的基础。在下一篇文章中，我们将深入探讨HTML的基本语法和常用标签，帮助你更好地理解和应用HTML。欢迎继续关注我们的HTML系列教程，开启你的网页开发之旅！

相关文章：

白骑士的HTML教学基础篇 1.1 HTML简介

在现代互联网的世界里&#xff0c;HTML&#xff08;HyperText Markup Language&#xff09;是所有网页的基础语言。无论是简约的个人博客还是复杂的商业网站&#xff0c;HTML都扮演着不可或缺的角色。掌握HTML是学习前端开发的第一步&#xff0c;这不仅能够帮助你构建静态网页&…...

编程日记 2024/8/17 4:57:47

c语言基础知识学习

1. C 语言简介 定义&#xff1a;C 语言是一种过程式编程语言&#xff0c;设计用于系统编程和应用程序开发。特点&#xff1a;高效、灵活、接近硬件&#xff0c;支持指针和内存操作。 1. 基本语法 程序结构&#xff1a; C 语言程序由函数组成&#xff0c;main 函数是程序的入口…...

编程日记 2024/8/17 4:56:46

Qt/QML学习-Dial

QML学习 Dial例程视频讲解代码 main.qml import QtQuick 2.15 import QtQuick.Window 2.15 import QtQuick.Controls 2.15Window {width: 640height: 480visible: truetitle: qsTr("Hello World")Dial {anchors.fill: parentid: dial// 设置旋钮的范围from: 0to: …...

编程日记 2024/8/17 4:55:44

达梦数据库系列—48.DMHS实现Mysql到DM8的同步

目录 DMHS实现Mysql到DM8的同步 1、准备介质 2、安装 3、准备源端Mysql和目标端DM8 软件安装 数据库创建 打开归档 开启附加日志 创建辅助表 Mysql客户端驱动 Mysql端安装ODBC 检查依赖包 创建连接用户 创建测试表 4、同步配置 修改服务配置 Mysql到Dm单向同步…...

编程日记 2024/8/17 4:54:43

PostgreSQL的启动过程

PostgreSQL的启动过程 PostgreSQL的启动过程中主要做了以下几件事&#xff1a; 初始化数据目录&#xff1a;如果数据目录是第一次使用&#xff0c;PostgreSQL会进行初始化&#xff0c;创建必要的系统表和目录结构。 读取配置文件&#xff1a;PostgreSQL会读取并解析配置文件&…...

编程日记 2024/8/17 4:52:40

ActiveMQ、RabbitMQ、Kafka、RocketMQ的区别简介

目录 1. 基本概述 2. 性能与吞吐量 3. 消息模型与特性 4. 生态系统与社区支持 5. 复杂性与运维成本 6.在优先级队列、延迟队列、死信队列、重试队列、消费模式、广播模式方面的区别 7.在消息回溯、消息堆积持久化、消息追踪、消息过滤方面的区别 8.在多租户、多协议支持…...

编程日记 2024/8/17 4:51:39

7.1 多态案例

一、案例1&#xff1a;计算器类 1.1 普通方式实现 #include <iostream> #include <string> using namespace std;class Calculator { public:int num1;int num2;int result(string oper){if (oper "")return num1 num2;else if (oper "-"…...

编程日记 2024/8/17 4:50:38

革新测试管理：集远程、协同、自动化于一身的统一测试管理平台

一、研发背景 当下汽车电子测试领域随着不断发展&#xff0c;自动化、智能化的软硬件一体测试解决方案已经成为趋势。能够整合各种测试资源、自动化测试流程&#xff0c;并提供数据分析和可视化报告&#xff0c;从而提高测试效率、降低成本&#xff0c;并确保汽车电子系统的可…...

编程日记 2024/8/17 4:48:36

HAProxy的详解

一、介绍 1.1 定义 HAProxy是一个使用C语言编写的自由及开放源代码软件&#xff0c;其提供高可用性、负载均衡&#xff0c;以及基于TCP和HTTP的应用程序代理。 HAProxy特别适用于那些负载特大的web站点&#xff0c;这些站点通常又需要会话保持或七层处理。HAProxy运行在当前…...

编程日记 2024/8/17 4:47:35

网络安全实训第一天(dami靶场搭建，XSS、CSRF、模板、任意文件删除添加、框架、密码爆破漏洞)

1.环境准备&#xff1a;搭建漏洞测试的基础环境 安装完phpstudy之后&#xff0c;开启MySQL和Nginx&#xff0c;将dami文件夹复制到网站的根目录下&#xff0c;最后访问安装phptudy机器的IP地址 第一次登录删除dami根目录下install.lck文件 如果检测环境不正确可以下载php5.3.2…...

编程日记 2024/8/17 4:46:34

4.1 SQL的起源与发展

欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;欢迎订阅相关专栏&#xff1a; 工&#x1f497;重&#x1f497;hao&#x1f497;&#xff1a;野老杂谈 ⭐️ 全网最全IT互联网公司面试宝典&#xff1a;收集整理全网各大IT互联网公司技术、项目、HR面试真题.…...

编程日记 2024/8/17 4:45:33

android中实现禁掉有线网络

1.首先初始化mINetworkManagementServiceProxy // INetworkManagementService mNwService; Object mINetworkManagementServiceProxy;public void init() {// IBinder b ServiceManager.getService(Context.NETWORKMANAGEMENT_SERVICE);// mNwService INetworkManagementSe…...

编程日记 2024/8/17 4:43:31

docker-compose安装MongoDB 7.0.12

文章目录 一. Mac1.1 创建目录1.2 docker-compose.yaml默认不开启relSet开启relSet&#xff08;数据同步&#xff09; 1.3 部署1.4 卸载1.5 replSet配置1.5.1 初始化replSet1.5.2 创建超管用户1.5.3 验证用户1.5.4 查看replSet状态 二. Centos72.1 创建目录2.2 docker-compose.…...

编程日记 2024/8/17 4:40:27

Ubuntu下NFS和SSH服务

本篇文章记录Ubuntu下如何对NFS和SSH服务进行配置和开启。 目录 一、NFS服务 二、SSH服务 1、安装SSH服务 2. 启动和检查SSH服务 3. 配置SSH服务 4. 连接到SSH服务 5. 设置防火墙 6. 测试连接 三、结语 一、NFS服务 NFS&#xff08;Network File System&#xff0…...

编程日记 2024/8/17 4:37:25

游戏管理系统

目录 Java程序设计课程设计 游戏管理系统 1系统简介 1.1需求分析 1.2 编程环境与工具 2系统总体设计 2.1 系统的功能模块图。 2.2 各功能模块简介。 3主要业务流程 &#xff08;1&#xff09;用户及管理员登录流程图 &#xff08;2&#xff09;信息添加流程 &#x…...

编程日记 2024/8/17 4:36:23

坐牢第二十七天（聊天室）

基于UDP的网络聊天室 一.项目需求&#xff1a; 1.如果有用户登录&#xff0c;其他用户可以收到这个人的登录信息 2.如果有人发送信息&#xff0c;其他用户可以收到这个人的群聊信息 3.如果有人下线&#xff0c;其他用户可以收到这个人的下线信息 4.服务器可以发送系统信息…...

编程日记 2024/8/17 4:35:22

C++自学笔记33（数据类型总结与变量）

数据类型 类型位范围char1 个字节-128 到 127 或者 0 到 255unsigned char1 个字节0 到 255signed char1 个字节-128 到 127int4 个字节-2147483648 到 2147483647unsigned int4 个字节0 到 4294967295signed int4 个字节-2147483648 到 2147483647short int2 个字节-32768 到…...

编程日记 2024/8/17 4:34:21

游戏引擎phaser.js3的使用之玩家和静态物理组碰撞

玩家和静态物理组都加载好了&#xff0c;那就应该开始操作玩家动态和静态之间的碰撞了 下面是通过点击图片按钮来操作碰撞的 sky.on(pointerdown, function () { console.log(图片被点击了&#xff01;); }) 图片点击后让动态的玩家和静态的物理组碰撞&#xff0c;就可以这…...

编程日记 2024/8/17 4:32:18

springboot整合mybatis以及mybatis-plus 开发

一、springboot整合mybatis 1.注解版 1.1 导入坐标 <dependencies><!--mybatis坐标--><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>2.2.2</…...

编程日记 2024/8/17 4:31:17

大语言模型微调框架Unsloth：简化模型微调流程，提升模型性能

Unsloth 将 Llama-3、Mistral、Phi-3 和 Gemma 等大型语言模型的微调速度提高了 2 倍&#xff0c;内存使用量减少了 70%&#xff0c;而且准确性不会降低&#xff01; 特点 通过手动派生所有计算繁重的数学步骤和手写 GPU 内核&#xff0c;unsloth 可以在不更改任何硬件的情况…...

编程日记 2024/8/17 4:30:16

OpenClaw版本升级：nanobot镜像迁移全记录

OpenClaw版本升级&#xff1a;nanobot镜像迁移全记录 1. 升级背景与准备工作 去年我在本地部署了基于OpenClaw v1.2的nanobot镜像&#xff0c;这套系统一直稳定运行着我的自动化办公流程。直到上个月收到社区通知&#xff0c;新版本v2.1重构了核心架构&#xff0c;特别是技能…...

编程新知 2026/3/27 12:30:47

s2-pro GPU算力适配实战：显存优化部署让语音合成延迟降低40%

s2-pro GPU算力适配实战&#xff1a;显存优化部署让语音合成延迟降低40% 1. 专业语音合成新选择 s2-pro是Fish Audio开源的专业级语音合成模型镜像&#xff0c;它让高质量的文本转语音变得触手可及。与普通语音合成工具不同&#xff0c;s2-pro支持通过参考音频复用音色&#…...

编程新知 2026/3/27 12:18:27

【Mojo跨语言互操作权威配置白皮书】：实测TensorFlow/NumPy/Pandas三方库零报错接入方案

第一章&#xff1a;Mojo跨语言互操作的核心原理与架构定位Mojo并非传统意义上的独立运行时语言&#xff0c;而是以“Python超集”为设计原点、深度嵌入LLVM生态的系统级编程语言。其跨语言互操作能力不依赖FFI桥接层或胶水代码&#xff0c;而是通过统一的中间表示&#xff08;M…...

编程新知 2026/3/27 11:19:58

GIL已死，GIL万岁？——2024大厂Python并发岗面试题库首发（含性能压测对比数据）

第一章&#xff1a;GIL已死&#xff0c;GIL万岁&#xff1f;——2024大厂Python并发岗面试题库首发&#xff08;含性能压测对比数据&#xff09;一道高频真题&#xff1a;为什么 asyncio.run() 启动的协程无法被 multiprocessing.Process 并发执行&#xff1f; 该问题直指 Pyth…...

编程新知 2026/3/27 10:29:44

人体关键点检测实战：如何用OKS和AP评估模型性能（附Python代码示例）

人体关键点检测实战&#xff1a;OKS与AP指标深度解析与Python实现 在计算机视觉领域&#xff0c;人体姿态估计一直是热门研究方向&#xff0c;而准确评估模型性能则是项目落地的关键环节。不同于常规的目标检测任务&#xff0c;人体关键点检测需要更精细的评估体系——这正是OK…...

编程新知 2026/3/27 10:05:23

VSCode + CMake + MinGW 配置踩坑实录：从‘make’命令报错到一键编译调试全搞定

VSCode CMake MinGW 配置踩坑实录&#xff1a;从‘make’命令报错到一键编译调试全搞定 如果你正在尝试用VSCode搭建C开发环境&#xff0c;大概率已经看过无数篇教程&#xff0c;但依然会在某个环节卡住——可能是CMake找不到编译器&#xff0c;可能是调试器无法启动&#x…...

编程新知 2026/3/27 9:59:20

OpenClaw 的 Skill免费开源的

OpenClaw 的 Skill 生态非常丰富&#xff0c;其中绝大部分都是免费开源的。以下为您推荐几类实用的免费插件&#xff0c;您可以根据需求选择安装。&#x1f6e1;️ 一、安全与权限控制 (强烈建议优先安装)skill-vetter / clawsec功能&#xff1a;安装插件前自动扫描代码&#x…...

编程新知 2026/3/27 8:46:40

vLLM-v0.17.1实操手册：vLLM服务升级策略与滚动更新最佳实践

vLLM-v0.17.1实操手册&#xff1a;vLLM服务升级策略与滚动更新最佳实践 1. vLLM框架概述 vLLM是一个专为大型语言模型(LLM)设计的高性能推理和服务库&#xff0c;最新发布的v0.17.1版本带来了多项性能优化和功能增强。这个开源项目最初由加州大学伯克利分校的研究团队开发&am…...

编程新知 2026/3/27 8:34:33

别再滥用Tick了！UE5里Cast To的正确打开方式与性能实测

UE5性能优化实战&#xff1a;Tick事件中Cast To的高效替代方案 在虚幻引擎5的项目开发中&#xff0c;性能优化往往隐藏在那些看似无害的日常操作里。Tick事件中的Cast To操作就像房间里的大象——人人都知道它存在&#xff0c;却常常低估它的影响。当项目规模扩大、逻辑复杂度提…...

编程新知 2026/3/27 8:30:32

用SUSE Linux+PHPStudy快速搭建FusionAccess测试环境（避坑指南）

用SUSE LinuxPHPStudy快速搭建FusionAccess测试环境&#xff08;避坑指南&#xff09; 在数字化转型浪潮中&#xff0c;桌面云技术正成为企业IT架构革新的关键推手。FusionAccess作为业界领先的虚拟桌面解决方案&#xff0c;其灵活性和高效性备受开发者青睐。然而&#xff0c;传…...

编程新知 2026/3/27 7:30:13