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

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

news 2025/11/6 0:24:09

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

HTML 语义化

目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案&#xff1a; 语义化标签&#xff1a; <header>&#xff1a;页头<nav>&#xff1a;导航<main>&#xff1a;主要内容<article>&#x…...

编程新知 2025/10/27 5:01:21

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

编程新知 2025/11/1 22:53:57

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

编程新知 2025/10/6 14:17:21

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

编程新知 2025/11/2 20:21:50

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

编程新知 2025/10/31 17:03:04

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

编程新知 2025/8/15 18:53:03

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

编程新知 2025/10/28 0:36:19

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

编程新知 2025/11/5 4:40:56

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/9/30 5:23:30

如何在最短时间内提升打ctf（web)的水平？

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

编程新知 2025/11/1 3:10:07