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

网页前端开发之HTML入门

news 2026/3/28 3:01:21

HTML入门

HTML全称HyperText Markup Language，中文译为：超文本标记语言。
它有一个同胞兄弟叫：XML，全称Extensible Markup Language，中文译为：可扩展标记语言。
简单来讲，它们都是标记语言。

那什么是标记语言？
答：标记语言是一种描述文档结构和内容的语言，与编程语言不同，它仅为书面描述没有运行功能。
它通过使用标记（标签）来构建文档，从而让用户能更专注于信息的组织和表达。

那标记语言的语法该如何写？
答：我们用XML举例（因为它比较好入手）, 如下：

有两个学生的成绩信息：张三同学的语言考80分，李四同学的数学考90分。

该信息用XML语法可以这样写：

<成绩><学生><姓名>张三</姓名><科目>语文</科目><分数>80</分数></学生><学生><姓名>李四</姓名><科目>数学</科目><分数>90</分数></学生>
</成绩>

其换写思路:

  1. 提取关键字：将信息中的关键字（如"姓名"、“科目”、“分数”）提取出来，放在<>括号中形成标签；
  2. 提取值：将关键字对应的值（如"张三"、“数学”、“90”）放在两个同名标签之间作为标签内容（注：结束标签多一个斜杠）；
  3. 分类归纳：将同类别的标签归纳到一个大标签下（标签支持嵌套）；

该信息还可以用属性的方式来写, 如下:

<成绩><学生 姓名="张三" 科目="语文" 分数="80"></学生><学生 姓名="李四" 科目="数学" 分数="90" />
</成绩>

其中
在标签名后面使用属性key="value"的方式来写入键值信息，
而value必须使用 英文的双引号或单引号 括住，因为属性值只支持字符串。
因为上例改用了属性写法，所以标签内容为空，因此也称为：空标签
当为空标签时，可以不用写结束标签，允许使用/>做结尾。

总结XML语法:

  1. 定义标签：首先定义标签，用来存放信息的关键字，标签名可以自定义，然后用<>括住即可；
  2. 结束标签：每个标签都有一个同名的结束标签，格式为</标签名>(多一个斜杠开头)；
  3. 标签内容：在开始标签到结束标签之间的内容可以是 文本 、 嵌套标签 或 留空 （从开始标签到结束标签这一部分称为XML元素）；
  4. 树状结构：XML标签的组织结构是树状结构, 所以第一级标签只能有一个，这个标签也称为 根元素 ；
  5. 属性写法：XML支持属性写法，在标签名后面使用属性key="value"的方式来写入键值信息；

那HTML做为XML的同胞兄弟，它俩的语法区别在哪里?
答：HTML的语法与XML基本上一致，主要的区别点有以下：

  1. 预定义标签：HTML使用的是一组预定义的标签，每个标签都有其特定的名字及作用。在实际开发中，一般不使用自定义标签名；
  2. 根元素：HTML根元素的标签名必须为<html>；
  3. 固定搭配：HTML根元素下通常有两个搭配的子元素：<head>和<body>；

下面是HTML的树状结构示例图：
在这里插入图片描述
其中
html，head，body，div，h1至h6，这些标签皆是HTML的预定义标签, 依次解释如下:

  1. html是根标签；
  2. head标签用来放置不可显示元素 (像网页的描述或链接文件)；
  3. body标签用来放置可显示元素（像文字与嵌套标签）；
  4. div标签是内容分隔标签，主要用来分隔不同的内容，形成各自独立的显示区域；
  5. h1至h6是标题标签, 分别用6种字号来显示其标签内容；

上图对应的HTML代码如下：

<html><head></head><body><div><!-- 可以把所有标签都写在同一行里 --><div><h1>111</h1><h2>222</h2><h3>333</h3></div></div><div name="第二区"><div><h4>four</h4><h5>five</h5></div><div><h6>six</h6></div></div></body>
</html>

注：以<!–开头且以–>结尾是HTML的注解语法，其里面是注解内容。

以上就是HTML的基础知识，下篇起将讲解常见的HTML标签用法。

相关文章：

网页前端开发之HTML入门

HTML入门 HTML全称HyperText Markup Language&#xff0c;中文译为&#xff1a;超文本标记语言。 它有一个同胞兄弟叫&#xff1a;XML&#xff0c;全称Extensible Markup Language&#xff0c;中文译为&#xff1a;可扩展标记语言。 简单来讲&#xff0c;它们都是标记语言。 …...

编程日记 2024/10/17 5:49:13

Python do while 实现案例

在 Python 中没有传统的 do while 循环语法。 但是可以通过使用 while True 结合条件判断来实现类似 do while 的效果。 一、语法 while True:# 执行某些操作#...if not condition:break 这里先无条件地执行一次循环体中的代码&#xff0c;然后在每次循环结束时检查条件&#…...

编程日记 2024/10/17 5:48:12

docker网络管理详解 一

一 生产故障&#xff1a;docker 同一宿主机不能通信 1. 检查容器网络配置 1.1 查看容器的网络信息 使用 docker inspect 命令查看容器的网络配置&#xff0c;确保它们连接到了正确的网络。 docker inspect -f {{json .NetworkSettings.Networks }} container1 docker inspe…...

编程日记 2024/10/17 5:47:11

前端使用Canvas实现网页电子签名（撤销、下载）

前言&#xff1a;一般在一些后台的流程资料以及审核的场景中会需要电子签名&#xff0c;介绍一种用canvas实现的电子签名&#xff0c;此案例用的是原生js 效果展示&#xff1a; 一、html和css&#xff1a; <div class"divCla2"><canvas id"myCanvas&q…...

编程日记 2024/10/17 5:46:10

Lepus安装与配置管理（Lepus Installation and Configuration Management)

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 本人主要分享计算机核心技…...

编程日记 2024/10/17 5:45:09

Tomcat中存放图片文件丢失问题

1、tomcat中存放的图片丢失原因&#xff1a; tomcat 在处理 WAR 包时&#xff0c;会在部署时解压 WAR 包并创建文件夹。如果在 tomcat 运行时删除了 WAR 包&#xff0c;tomcat会检测到这种变化&#xff0c;然后可能会自动清理已解压的文件夹。这是tomcat默认的行为&#xff0c;…...

编程日记 2024/10/17 5:44:08

Webpack一键打包多个环境

1. 安装打包插件 安装如下插件&#xff0c;以便可以在打包命令中设置环境变量区分不同的环境。 npm install --save-dev cross-env 2. 配置打包命令 在package.json中配置正式环境和测试环境打包命令&#xff0c;同时添加一个命令同打包两个环境。 // package.json "…...

编程日记 2024/10/17 5:41:06

Neo4j 构建文本类型的知识图谱

Neo4j 是一个强大的图数据库&#xff0c;用于构建和查询各种类型的图数据结构。构建知识图谱是一项常见任务&#xff0c;尤其在处理自然语言处理 (NLP) 和文本信息时。基于 Neo4j&#xff0c;可以将文本数据转换为知识图谱&#xff0c;使得复杂的文本关系以图结构存储&#xff…...

编程日记 2024/10/17 5:40:04

【SSM详细教程】-03-Spring参数注入

精品专题&#xff1a; 01.《C语言从不挂科到高绩点》课程详细笔记 https://blog.csdn.net/yueyehuguang/category_12753294.html?spm1001.2014.3001.5482https://blog.csdn.net/yueyehuguang/category_12753294.html?spm1001.2014.3001.5482 02. 《SpringBoot详细教程》课…...

编程日记 2024/10/17 5:39:02

深度学习 %matplotlib inline

%matplotlib inline 是在 Jupyter Notebook 中使用的一个魔法命令&#xff0c;主要用于配置 Matplotlib 图形的显示方式。具体来说&#xff0c;这个命令的作用是将 Matplotlib 生成的图形直接嵌入到 notebook 中&#xff0c;而不是在弹出的窗口中显示。 使用方法 在 Jupyter …...

编程日记 2024/10/17 5:38:01

RT-Thread线程的定义和属性

目录 概述 1 RT-Thread线程定义 1.1 优先级设定方法 1.2 内存管理 1.2.1 RT-Thread的线程类别 1.2.2 RT-Thread的线程调度 2 线程重要属性 2.1 线程栈 2.2 线程状态 2.3 线程优先级 2.4 时间片 概述 本文主要介绍RT-Thread线程的定义和属性&#xff0c;其包括线程的…...

编程日记 2024/10/17 5:37:00

【大模型问答测试】大模型问答测试脚本实现（第二版）——接入pytest与代码解耦

背景 接上一篇&#xff0c;【大模型问答测试】大模型问答测试脚本实现&#xff08;第一版&#xff09;。 在实现自动化的时候&#xff0c;原先把很多方法与request请求写在一块了&#xff0c;趁着目前实现接口数量较少&#xff0c;决定对代码进行解耦&#xff0c;并且清晰目录…...

编程日记 2024/10/17 5:35:59

Windows模拟电脑假死之键盘鼠标无响应

Windows模拟电脑假死之键盘鼠标无响应 1. 场景需求 模拟Windows电脑假死&#xff0c;失去键盘鼠标响应。 2. 解决方案 采用Windows系统提供的钩子(Hook) API 拦截系统鼠标键盘消息。 3. 示例程序 【1】. 创建MFC对话框项目 新建一个MFC应用程序项目&#xff0c;项目名称…...

编程日记 2024/10/17 5:34:57

一文详解线程池

什么是线程池&#xff1f; 线程池&#xff1a;就是一个容纳多个线程的容器&#xff0c;其中的线程可以反复使用&#xff0c;省去了频繁创建线程对象的操作&#xff0c;无需反复创建线程而消耗过多资源。 为什么用线程池&#xff1f; 线程池的优势&#xff1a;线程池做的工作…...

编程日记 2024/10/17 5:33:56

网际报文协议ICMP及ICMP重定向实例详解2

之前在一个项目中遇到了与ICMP重定向相关的问题&#xff0c;因为缺乏对ICMP相关内容的了解&#xff0c;排查了很长一段时间才查出来。本文给大家简要地介绍一下ICMP及ICMP重定向相关的内容。 1、ICMP的概念 ICMP&#xff08;Internet Control Message Protocol&#xff09;网际…...

编程日记 2024/10/17 5:32:55

CSS 总结

CSS 总结 引言 CSS（层叠样式表）是网页设计中不可或缺的一部分，它用于控制网页的布局和样式。本文将对CSS的基本概念、关键特性、常用属性以及最佳实践进行总结，旨在帮助读者深入理解并有效运用CSS。 CSS基本概念 1. 什么是CSS？ CSS是一种样式表语言，用于描述HTML或X…...

编程日记 2024/10/17 5:31:54

C语言_指针_进阶

引言&#xff1a;在前面的c语言_指针初阶上&#xff0c;我们了解了简单的指针类型以及使用&#xff0c;下面我们将进入更深层次的指针学习&#xff0c;对指针的理解会有一个极大的提升。从此以后&#xff0c;指针将不再是难点&#xff0c;而是学习底层语言的一把利器。 本章重点…...

编程日记 2024/10/17 5:30:53

chat_gpt回答：python使用writearray写tiff速度太慢，有什么快速的方法吗

如果你在使用 Python 的 tifffile 库&#xff08;或类似库&#xff09;写入 TIFF 文件时速度太慢&#xff0c;以下是几个加速写入的优化方法和替代方案&#xff1a; 1. 优化文件压缩设置 TIFF 支持压缩格式&#xff0c;但压缩过程可能非常耗时。如果你不需要压缩&#xff0c;…...

编程日记 2024/10/17 5:29:52

【时时三省】(C语言基础)函数介绍strcat

山不在高&#xff0c;有仙则名。水不在深&#xff0c;有龙则灵。 ----CSDN 时时三省 strcat 字符串追加 示例&#xff1a; 比如我要把world加到hello后面去 就可以用这个 还有一种方法是这样 这两个代码的意思是一样的 只是写法不一样 写的时候要注意这些 •源字符串必须…...

编程日记 2024/10/17 5:28:51

ESP32C3 开发板在Linux环境下，进行JTAG 调试演示-启明云端乐鑫代理商

JTAG 调试教程 本教程主要演示 esp32c3 开发板在 linux 环境下&#xff0c;通过 vscode 的 esp-idf 插件使用 jtag 调试工具。 esp32c3 不但内置了USB-JTAG&#xff0c;还内置了USB-SERIAL&#xff0c;仅需要一根USB线即可实现下载和调试仿真。 下面演示调试仿真的过程。 创…...

编程日记 2024/10/17 5:27:50

SVPWM/AZSPWM的simulink仿真 AZSPWM（Advanced Zero Se...

SVPWM/AZSPWM的simulink仿真 AZSPWM&#xff08;Advanced Zero Sequence Pulse Width Modulation&#xff0c;先进零序脉宽调制&#xff09;是一种改进的脉宽调制技术&#xff0c;主要应用于三相逆变器中&#xff0c;通过引入零序分量来优化输出电压的波形和性能。 AZSPWM的目标…...

编程新知 2026/3/28 2:45:06

Arduino激光360°扫描库：VL53L0X+28BYJ-48低成本建图方案

1. 项目概述LaserToMap360 是一个面向嵌入式空间感知应用的轻量级 Arduino 库&#xff0c;专为构建低成本、可复现的 360 激光测距扫描系统而设计。其核心目标并非替代专业 SLAM 系统&#xff0c;而是提供一种工程上可快速验证、硬件上可即插即用、数据上可直接对接上位机可视化…...

编程新知 2026/3/28 0:49:33

嵌入式Linux开发必备远程连接工具详解

1. 嵌入式Linux开发常用远程连接工具技术解析1.1 远程连接工具在嵌入式开发中的重要性嵌入式Linux开发过程中&#xff0c;开发人员经常需要远程访问目标设备进行调试、文件传输或系统监控。由于嵌入式设备通常资源有限且缺乏本地交互界面&#xff0c;远程连接工具成为开发流程中…...

编程新知 2026/3/28 0:01:11

如何用Python爬取全国空气质量监测站数据（附完整代码与避坑指南）

Python实战&#xff1a;构建高稳定性的空气质量监测数据爬虫系统 清晨打开天气应用时&#xff0c;那些跳动的PM2.5数值背后&#xff0c;是遍布全国的空气质量监测站在持续工作。作为数据分析师或环境研究者&#xff0c;直接获取这些原始监测数据往往能发现更有价值的规律。但当…...

编程新知 2026/3/27 22:44:24

OpenClaw+Qwen3-32B科研助手：文献综述自动生成与参考文献整理

OpenClawQwen3-32B科研助手&#xff1a;文献综述自动生成与参考文献整理 1. 为什么需要AI科研助手&#xff1f; 作为一名计算机专业的研究生&#xff0c;我每天要处理大量文献。最痛苦的时刻莫过于导师突然说"下周组会做个文献综述"&#xff0c;而我手头只有几十篇…...

编程新知 2026/3/27 22:04:04

PingFangSC 字体技术深度解析：现代Web字体架构实践指南

PingFangSC 字体技术深度解析&#xff1a;现代Web字体架构实践指南 【免费下载链接】PingFangSC PingFangSC字体包文件、苹果平方字体文件&#xff0c;包含ttf和woff2格式 项目地址: https://gitcode.com/gh_mirrors/pi/PingFangSC PingFangSC&#xff08;苹方-简&#…...

编程新知 2026/3/27 21:27:54

Beekeeper Studio：现代跨平台数据库管理工具的技术架构与实战应用

Beekeeper Studio&#xff1a;现代跨平台数据库管理工具的技术架构与实战应用 【免费下载链接】beekeeper-studio beekeeper-studio/beekeeper-studio: Beekeeper Studio 是一款开源的跨平台数据库客户端工具&#xff0c;支持多种数据库&#xff08;如MySQL, PostgreSQL, SQLit…...

编程新知 2026/3/27 18:54:45

HunyuanVideo-Foley音效生成：支持中文prompt理解的城市环境音效精准生成

HunyuanVideo-Foley音效生成&#xff1a;支持中文prompt理解的城市环境音效精准生成 1. 产品概述 HunyuanVideo-Foley是一款专为视频内容创作设计的AI音效生成工具&#xff0c;能够根据中文文本描述精准生成各类环境音效。本镜像为RTX 4090D 24GB显存显卡深度优化的私有部署版…...

编程新知 2026/3/27 18:40:37

蓝桥杯嵌入式备赛：STM32G431引脚复用功能表，一张图搞定定时器与ADC配置

蓝桥杯嵌入式备赛&#xff1a;STM32G431引脚复用功能实战指南 在蓝桥杯嵌入式赛场上&#xff0c;STM32G431作为官方指定开发平台的核心控制器&#xff0c;其引脚复用功能的灵活配置往往是决定项目成败的关键。许多参赛选手在紧张激烈的比赛中&#xff0c;常常因为引脚配置错误…...

编程新知 2026/3/27 18:38:37

求一个V站邀请码

有没有大佬可以给个邀请码~~~~~~~~~~~~~~~~~~...

编程新知 2026/3/27 17:25:57