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

网页前端开发之HTML入门

news 2025/9/17 23:11:07

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

uniapp 对接腾讯云IM群组成员管理（增删改查）

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

编程新知 2025/7/9 0:22:36

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

编程新知 2025/9/14 13:50:41

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/7/12 7:16:15

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

编程新知 2025/9/5 17:56:03

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/8/6 7:06:58

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2025/9/13 5:42:40

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

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

编程新知 2025/9/9 14:48:41

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

编程新知 2025/8/22 19:54:36

【开发技术】.Net使用FFmpeg视频特定帧上绘制内容

目录 一、目的 二、解决方案 2.1 什么是FFmpeg 2.2 FFmpeg主要功能 2.3 使用Xabe.FFmpeg调用FFmpeg功能 2.4 使用 FFmpeg 的 drawbox 滤镜来绘制 ROI 三、总结 一、目的 当前市场上有很多目标检测智能识别的相关算法&#xff0c;当前调用一个医疗行业的AI识别算法后返回…...

编程新知 2025/9/7 8:51:45

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

编程新知 2025/9/9 2:27:37