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

网页前端开发之HTML入门

news 2026/2/7 17:18:15

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

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

编程新知 2026/2/5 15:43:30

云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

编程新知 2025/12/14 22:32:59

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

编程新知 2026/1/26 19:25:32

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

编程新知 2025/8/19 2:57:37

【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）

🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...

编程新知 2026/1/31 6:12:22

MySQL 8.0 OCP 英文题库解析（十三）

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

编程新知 2026/1/31 7:25:57

Java求职者面试指南：计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...

编程新知 2025/12/9 14:22:07

django blank 与 null的区别

1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是&#xff0c;要注意以下几点&#xff1a; Django的表单验证与null无关&#xff1a;null参数控制的是数据库层面字段是否可以为NULL&#xff0c;而blank参数控制的是Django表单验证时字…...

编程新知 2025/7/7 3:34:13

Linux部署私有文件管理系统MinIO

最近需要用到一个文件管理服务&#xff0c;但是又不想花钱&#xff0c;所以就想着自己搭建一个&#xff0c;刚好我们用的一个开源框架已经集成了MinIO&#xff0c;所以就选了这个 我这边对文件服务性能要求不是太高&#xff0c;单机版就可以 安装非常简单&#xff0c;几个命令就…...

编程新知 2026/2/2 5:07:37

嵌入式学习之系统编程(九)OSI模型、TCP/IP模型、UDP协议网络相关编程（6.3）

目录 一、网络编程--OSI模型 二、网络编程--TCP/IP模型 三、网络接口 四、UDP网络相关编程及主要函数 ​编辑​编辑 UDP的特征 socke函数 bind函数 recvfrom函数&#xff08;接收函数&#xff09; sendto函数&#xff08;发送函数&#xff09; 五、网络编程之 UDP 用…...

编程新知 2026/2/6 5:57:59