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

网页前端开发之HTML入门

news 2025/11/6 16:53:31

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

华为云AI开发平台ModelArts

华为云ModelArts&#xff1a;重塑AI开发流程的“智能引擎”与“创新加速器”&#xff01; 在人工智能浪潮席卷全球的2025年&#xff0c;企业拥抱AI的意愿空前高涨&#xff0c;但技术门槛高、流程复杂、资源投入巨大的现实&#xff0c;却让许多创新构想止步于实验室。数据科学家…...

编程新知 2025/11/5 22:32:32

C++实现分布式网络通信框架RPC(3)--rpc调用端

目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中&#xff0c;我们已经大致实现了rpc服务端的各项功能代…...

编程新知 2025/10/29 11:04:36

stm32G473的flash模式是单bank还是双bank？

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

编程新知 2025/10/30 15:52:04

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

编程新知 2025/10/29 9:59:43

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

编程新知 2025/11/1 2:29:10

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

编程新知 2025/7/27 10:03:12

关于nvm与node.js

1 安装nvm 安装过程中手动修改 nvm的安装路径&#xff0c; 以及修改 通过nvm安装node后正在使用的node的存放目录【这句话可能难以理解&#xff0c;但接着往下看你就了然了】 2 修改nvm中settings.txt文件配置 nvm安装成功后&#xff0c;通常在该文件中会出现以下配置&…...

编程新知 2025/11/2 23:12:51

Auto-Coder使用GPT-4o完成：在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

编程新知 2025/9/20 4:34:47

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

编程新知 2025/10/16 23:42:48

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...

编程新知 2025/11/4 22:16:08