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

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

news 2026/2/9 23:13:13

        在现代互联网的世界里，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

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

编程新知 2025/9/11 15:27:32

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

编程新知 2026/1/21 14:29:57

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/9/14 18:41:15

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2026/1/24 10:00:31

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

编程新知 2025/11/30 16:55:32

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

编程新知 2026/1/20 14:36:39

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

编程新知 2026/2/8 3:03:01

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作（核心）三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结，涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

编程新知 2025/8/11 1:05:59

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/12/12 8:42:24

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

编程新知 2026/1/31 11:18:29