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

网页前端开发之HTML入门

news 2025/7/8 2:44:46

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

19c补丁后oracle属主变化，导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

编程新知 2025/7/7 5:52:06

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

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

编程新知 2025/7/5 9:25:14

使用 SymPy 进行向量和矩阵的高级操作

在科学计算和工程领域&#xff0c;向量和矩阵操作是解决问题的核心技能之一。Python 的 SymPy 库提供了强大的符号计算功能&#xff0c;能够高效地处理向量和矩阵的各种操作。本文将深入探讨如何使用 SymPy 进行向量和矩阵的创建、合并以及维度拓展等操作&#xff0c;并通过具体…...

编程新知 2025/7/6 21:40:59

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

编程新知 2025/7/6 17:04:20

Chrome 浏览器前端与客户端双向通信实战

Chrome 前端&#xff08;即页面 JS / Web UI&#xff09;与客户端&#xff08;C 后端&#xff09;的交互机制&#xff0c;是 Chromium 架构中非常核心的一环。下面我将按常见场景&#xff0c;从通道、流程、技术栈几个角度做一套完整的分析&#xff0c;特别适合你这种在分析和改…...

编程新知 2025/7/7 6:10:00

【Elasticsearch】Elasticsearch 在大数据生态圈的地位 实践经验

Elasticsearch 在大数据生态圈的地位 & 实践经验 1.Elasticsearch 的优势1.1 Elasticsearch 解决的核心问题1.1.1 传统方案的短板1.1.2 Elasticsearch 的解决方案 1.2 与大数据组件的对比优势1.3 关键优势技术支撑1.4 Elasticsearch 的竞品1.4.1 全文搜索领域1.4.2 日志分析…...

编程新知 2025/7/7 19:19:54

vue3 daterange正则踩坑

<el-form-item label"空置时间" prop"vacantTime"> <el-date-picker v-model"form.vacantTime" type"daterange" start-placeholder"开始日期" end-placeholder"结束日期" clearable :editable"fal…...

编程新知 2025/7/7 0:35:57

热门Chrome扩展程序存在明文传输风险，用户隐私安全受威胁

赛门铁克威胁猎手团队最新报告披露&#xff0c;数款拥有数百万活跃用户的Chrome扩展程序正在通过未加密的HTTP连接静默泄露用户敏感数据&#xff0c;严重威胁用户隐私安全。 知名扩展程序存在明文传输风险 尽管宣称提供安全浏览、数据分析或便捷界面等功能&#xff0c;但SEMR…...

编程新知 2025/7/6 10:06:51

【java面试】微服务篇

【java面试】微服务篇 一、总体框架二、Springcloud&#xff08;一&#xff09;Springcloud五大组件&#xff08;二&#xff09;服务注册和发现1、Eureka2、Nacos &#xff08;三&#xff09;负载均衡1、Ribbon负载均衡流程2、Ribbon负载均衡策略3、自定义负载均衡策略4、总结 …...

编程新知 2025/7/7 7:10:29

Java中HashMap底层原理深度解析：从数据结构到红黑树优化

一、HashMap概述与核心特性 HashMap作为Java集合框架中最常用的数据结构之一&#xff0c;是基于哈希表的Map接口非同步实现。它允许使用null键和null值&#xff08;但只能有一个null键&#xff09;&#xff0c;并且不保证映射顺序的恒久不变。与Hashtable相比&#xff0c;Hash…...

编程新知 2025/7/7 5:51:18