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

【学习】【HTML】HTML、XML、XHTML

news 2025/9/14 23:11:58

HTML

什么是 HTML？

HTML (HyperText Markup Language) 是一种用于创建和展示网页的标准标记语言。它由一系列的元素组成，这些元素通过标签的形式来告诉浏览器如何显示内容。

HTML 的基本结构是什么？

<!DOCTYPE html>
<html>
<head><title>页面标题</title>
</head>
<body><h1>主标题</h1><p>这是页面的内容。</p>
</body>
</html>
  • <!DOCTYPE html>：声明文档类型为 HTML5。
  • <html>：根元素，包裹整个 HTML 文档。
  • <head>：包含文档的元数据，如标题、字符集、样式表链接等。
  • <title>：定义文档的标题，显示在浏览器的标签页上。
  • <body>：包含文档的所有可见内容，如文本、图像、视频等。

什么是 HTML5？

  • HTML5 是第五个主要版本的 HTML，旨在改进 Web 应用的功能和性能。
  • 引入了许多新特性，如语义化标签、多媒体支持、表单控件、本地存储等。

HTML5 有哪些新特性？

  • 语义化标签：如 <header>, <footer>, <nav>, <article>, <section> 等。
  • 多媒体支持：<audio> 和 <video> 标签。
  • 表单控件：新的输入类型，如 email, date, range 等。
  • 本地存储：localStorage 和 sessionStorage。
  • Canvas：绘图区域，支持动态绘图和动画。
  • Web Workers：后台线程，支持复杂计算任务。

HTML 的 DOCTYPE 是什么？为什么需要它？

DOCTYPE 是什么？
是一个文档类型声明（Document Type Declaration），用于告知浏览器页面使用的 HTML 或 XHTML 版本。它位于 HTML 文档的最前面，紧接在任何其他内容之前。 并不是一个 HTML 标签，而是一个指令，告诉浏览器如何解析和渲染页面。
为什么需要它？
  1. 触发标准模式：
  • 浏览器在解析 HTML 文档时，会根据 <!DOCTYPE> 声明来决定使用哪种模式来渲染页面。如果 <!DOCTYPE> 存在并且格式正确，浏览器将以标准模式（Standards Mode）渲染页面，这意味着浏览器将严格按照 W3C 规范来解析和渲染 HTML 和 CSS。
  • 如果 <!DOCTYPE> 缺失或格式不正确，浏览器可能会进入怪异模式（Quirks Mode）。在怪异模式下，浏览器会模仿旧版浏览器的行为，以保持对旧网站的兼容性。这种方式可能导致页面布局和样式出现不可预测的问题。
  1. 定义文档类型：
  • 声明指定了文档遵循的 HTML 或 XHTML 版本。例如，HTML5 使用 `` 表示这是一个 HTML5 文档。对于早期的 HTML 和 XHTML 版本， 声明会更加详细，包含 DTD（文档类型定义）的引用，这有助于验证文档结构是否符合特定的标准。
  1. 提高跨浏览器兼容性：
  • 正确的 <!DOCTYPE> 声明有助于确保你的网页在不同浏览器中具有一致的表现。因为不同的浏览器在标准模式下的行为更为一致，而在怪异模式下则可能表现各异。使用标准模式可以减少因浏览器差异导致的问题。
    小结
声明虽然简单，但在确保网页正确解析和渲染方面起着至关重要的作用。建议在编写 HTML 文档时，始终在文档的最开始处添加一个合适的 声明，以确保最佳的兼容性和表现。

HTML 中的 meta 标签有什么作用？

  • <meta> 标签用于提供文档的元数据，如字符集、描述、关键词等。例如，<meta charset="UTF-8"> 设置字符编码，<meta name="description" content="页面描述"> 提供页面描述。

XML

什么是 XML？

  • XML 是一种用于存储和传输数据的标记语言。
  • 强调数据的结构化表示，要求所有标签必须正确闭合，并且区分大小写。

XML 的基本结构是什么？

<?xml version="1.0" encoding="UTF-8"?>
<catalog><book id="bk101"><author>Gambardella, Matthew</author><title>XML Developer's Guide</title></book>
</catalog>
  • <?xml version="1.0" encoding="UTF-8"?>：声明文档的版本和字符编码。
  • <catalog>：根元素，包裹整个 XML 文档。
  • <book>：子元素，表示一本书。
  • id="bk101"：属性，提供额外的信息。
  • <author>、<title>：子元素，表示书的不同属性。

什么是 DTD 和 XML Schema？

  • DTD (Document Type Definition)：定义了 XML 文档的合法结构。
  • XML Schema：类似于 DTD，但功能更强大，使用 XML 语法定义，支持数据类型、复杂的数据结构等。

如何解析 XML 数据？

  • 使用 DOMParser 解析器：将整个 XML 文档加载到内存中，形成一个树状结构。

XHTML

什么是 XHTML？

  • XHTML 是 HTML 的一个更严格的版本，结合了 HTML 和 XML 的特性。
  • 要求所有标签必须闭合，属性值必须用引号括起来，且所有标签名和属性名都必须小写。
  • XHTML 提供了模块化的设计，允许开发者根据需要选择不同的模块来构建文档。
  • 最终被 HTML5 取代。

XHTML 的基本结构是什么？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>页面标题</title>
</head>
<body><h1>主标题</h1><p>这是页面的内容。</p>
</body>
</html>
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">：声明文档类型为 XHTML 1.0 严格模式。
  • <html xmlns="http://www.w3.org/1999/xhtml">：根元素，指定命名空间。
  • <head>：包含文档的元数据，如标题、字符集、样式表链接等。
  • <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />：定义文档的字符编码。
  • <title>：定义文档的标题，显示在浏览器的标签页上。
  • <body>：包含文档的所有可见内容，如文本、图像、视频等。
  • <img src="image.jpg" alt="替代文本" />：图像元素，注意所有空标签必须闭合。

相关文章：

【学习】【HTML】HTML、XML、XHTML

HTML 什么是 HTML&#xff1f; HTML (HyperText Markup Language) 是一种用于创建和展示网页的标准标记语言。它由一系列的元素组成&#xff0c;这些元素通过标签的形式来告诉浏览器如何显示内容。 HTML 的基本结构是什么&#xff1f; <!DOCTYPE html> <html> …...

编程日记 2024/11/21 17:22:32

ARM中ZI-data段和RW-data段

ARM中ZI-data段和RW-data段 1、只定义全局变量&#xff0c;不使用&#xff0c;不占用内存空间2、 定义并初始化全局变量为0 占用ZI-Data区域3、定义并初始化全局变量非0 占用RW-Data区域4、增加的是一个int8的数据为什么&#xff0c;size增加不是15、定义的全局变量为0&#xf…...

编程日记 2024/11/21 17:21:30

关联度分析、灰色预测GM(1,1)、GM(1,1)残差模型——基于Python实现

关联度分析 import numpy as np import pandas as pd #关联度分析 #参考序列 Y_0[170,174,197,216.4,235.8] #被比较序列 Y_1[195.4,189.9,187.2,205,222.7] Y_2[308,310,295,346,367]#初始化序列 X_0np.array(Y_0)/Y_0[0] X_1np.array(Y_1)/Y_1[0] X_2np.array(Y_2)/Y_2[0]#计…...

编程日记 2024/11/21 17:20:29

linux常用命令（网络相关）

目录 1. ping - 检查网络连通性 参数 示例 2. ifconfig - 配置网络接口 参数 示例 3. ip - 显示和操作路由、网络设备、接口等 参数 示例 4. netstat - 显示网络连接、路由表、接口统计等信息 参数 示例 5. ss - 更快的netstat替代品 参数 示例 6. nslookup - …...

编程日记 2024/11/21 17:19:28

【uni-app多端】修复stmopjs下plus-websocket无心跳的问题

从这篇文章接着向下看&#xff1a; uniapp plus-websocket 和stompjs连接教程 安卓ios手机端有效 - 简书 按照文章的方式&#xff0c;能够实现APP下stmopjs长连接。但是有一个问题&#xff0c;就是会频繁输出 res-创建连接-1- 跟踪连接&#xff0c;会发现连接都会在大约40s后…...

编程日记 2024/11/21 17:16:24

VScode学习前端-01

小问题合集&#xff1a; vscode按&#xff01;有时候没反应&#xff0c;有时候出来&#xff0c;是因为------>必须在英文状态下输入&#xff01; 把鼠标放在函数、变量等上面&#xff0c;会自动弹出提示&#xff0c;但挡住视线&#xff0c;有点不习惯。 打开file->pre…...

编程日记 2024/11/21 17:15:21

Java-05 深入浅出 MyBatis - 配置深入 动态 SQL 参数、循环、片段

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 大数据篇正在更新&#xff01;https://blog.csdn.net/w776341482/category_12713819.html 目前已经更新到了&#xff1a; MyBatis&#xff…...

编程日记 2024/11/21 17:02:02

突破自动驾驶瓶颈！KoMA：多智能体与大模型的完美融合

0.简介 本推文主要介绍了由来自北京航空航天大学的姜克谋、蔡轩和崔智勇教授等共同提出的一种名为KoMA的知识驱动的多智能体框架。论文《KoMA: Knowledge-driven Multi-agent Framework for Autonomous Driving with Large Language Models》提出了KoMA框架&#xff0c;通过结…...

编程日记 2024/11/21 16:55:56

YOLO入门教程（三）——训练自己YOLO11实例分割模型并预测【含教程源码+一键分类数据集 + 故障排查】

目录 引言前期准备Step0 环境部署1.安装OpenCV2.安装Pytorch3.安装Ultralytics Step1 打标训练Step2 格式转换Step3 整理训练集Step4 训练数据集4.1创建yaml文件4.2训练4.3预测4.4故障排查4.4.1OpenCV版本故障&#xff0c;把OpenCV版本升级到4.0以上4.4.2NumPy版本故障&#xf…...

编程日记 2024/11/21 16:54:55

【加入默语老师的私域】C#面试题

什么是依赖注入&#xff0c;如何实现&#xff1f; 依赖注入是一种设计模式。我们不是直接在另一个类&#xff08;依赖类&#xff09;中创建一个类的对象&#xff0c;而是将对象作为参数传递给依赖类的构造函数。它有助于编写松散耦合的代码&#xff0c;并有助于使代码更加模块…...

编程日记 2024/11/21 16:53:54

称重传感器指示器行业全面且深入的分析

称重传感器指示器是一种用于显示和解释称重传感器输出信号的设备&#xff0c;用于测量力、重量或压力。称重传感器是将物理力&#xff08;如重量&#xff09;转换为电信号的传感器&#xff0c;称重传感器指示器将该电信号转换为可读格式&#xff0c;通常以磅、公斤或牛顿等单位…...

编程日记 2024/11/21 16:48:48

NAT网络地址转换——Easy IP

NAT网络地址转换 Tip&#xff1a; EasylP没有地址池的概念,使用接口地址作为NAT转换的公有地址。EasylP适用于不具备固定公网IP地址的场景:如通过DHCP, PPPOE拨号获取地址的私有网络出口,可以直接使用获取到的动态地址进行转换。 本次实验模拟nat协议配置 AR1配置如下&…...

编程日记 2024/11/21 16:47:47

【Visual Studio系列教程】如何在 VS 上编程？

上一篇博客中&#xff0c;我们介绍了《什么是 Visual Studio&#xff1f;》。本文&#xff0c;我们来看第2篇《如何在 VS 上编程&#xff1f;》。阅读本文大约10 分钟。我们会向文件中添加代码&#xff0c;了解 Visual Studio 编写、导航和了解代码的简便方法。 本文假定&…...

编程日记 2024/11/21 16:43:44

Mybatis-Plus 多租户插件属性自动赋值

文章目录 1、Mybatis-Plus 多租户插件1.1、属性介绍1.2、使用多租户插件mavenymlThreadLocalUtil实现 定义,注入租户处理器插件测试domianservice & ServiceImplmapper 测试mapper.xml 方式 1.3、不使用多租户插件 2、实体对象的属性自动赋值使用1. 定义实体类2. 实现 Meta…...

编程日记 2024/11/21 16:38:37

AWTK-WIDGET-WEB-VIEW 实现笔记 (4) - Ubuntu

Ubuntu 上实现 AWTK-WIDGET-WEB-VIEW 开始以为很简单&#xff0c;后来发现是最麻烦的。因为 Ubuntu 上的 webview 库是 基于 GTK 的&#xff0c;而 AWTK 是基于 X11 的&#xff0c;两者的窗口系统不同&#xff0c;所以期间踩了几个大坑。 1. 编译 AWTK 在使用 Linux 的输入法时…...

编程日记 2024/11/21 16:35:32

Python入门（7）--高级函数特性详解

Python高级函数特性详解 &#x1f680; 目录 匿名函数&#xff08;Lambda&#xff09;装饰器的使用生成器与迭代器递归函数应用实战案例&#xff1a;文件批处理工具 1. 匿名函数&#xff08;Lambda&#xff09;深入解析 &#x1f3af; 1.1 Lambda函数基础与进阶 1.1.1 基本…...

编程日记 2024/11/21 16:34:31

【数据库原理】理解数据库，基础知识

第一代&#xff1a;网状数据库&#xff1b;第二代&#xff1a;关系数据库&#xff1b;第三代&#xff1a;新一代数据库系统BigData 一、理解数据库 什么是数据&#xff1a;信息&#xff0c;对事物的存在方方式、运动状态及特征的描述。数据&#xff0c;记录信息的识别方式有数…...

编程日记 2024/11/21 16:32:27

VConsole——（H5调试工具）前端开发使用于手机端查看控制台和请求发送

因为开发钉钉H5微应用在手机上一直查看不到日志等&#xff0c;出现安卓和苹果上传图片一边是成功的&#xff0c;一边是失败的&#xff0c;所以找了这个&#xff0c;之前在开发微信小程序进行调试的时候能看到&#xff0c;之前没想到过&#xff0c;这次被人提点发现可以单独使用…...

编程日记 2024/11/21 16:29:23

论文分享 | FuzzLLM：一种用于发现大语言模型中越狱漏洞的通用模糊测试框架

大语言模型是当前人工智能领域的前沿研究方向&#xff0c;在安全性方面大语言模型存在一些挑战和问题。分享一篇发表于2024年ICASSP会议的论文FuzzLLM&#xff0c;它设计了一种模糊测试框架&#xff0c;利用模型的能力去测试模型对越狱攻击的防护水平。 论文摘要 大语言模型中…...

编程日记 2024/11/21 16:28:21

vmWare虚拟环境centos7安装Hadoop 伪分布式实践

背景&#xff1a;近期在研发大数据中台&#xff0c;需要研究Hadoop hive 的各种特性&#xff0c;需要搭建一个Hadoop的虚拟环境&#xff0c;本来想着使用dock &#xff0c;但突然发现docker 公共仓库的镜像 被XX 了&#xff0c;无奈重新使用vm 搭建虚拟机。 大概经历了6个小时完…...

编程日记 2024/11/21 16:26:18

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

编程新知 2025/9/13 15:40:26

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

编程新知 2025/8/13 18:32:28

将对透视变换后的图像使用Otsu进行阈值化，来分离黑色和白色像素。这句话中的Otsu是什么意思？

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

编程新知 2025/7/23 16:26:20

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

编程新知 2025/8/9 0:31:20

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/8/21 20:18:45

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

编程新知 2025/8/5 9:30:07

Unity | AmplifyShaderEditor插件基础（第七集：平面波动shader）

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

编程新知 2025/9/9 22:50:58

力扣热题100 k个一组反转链表题解

题目: 代码: func reverseKGroup(head *ListNode, k int) *ListNode {cur : headfor i : 0; i < k; i {if cur nil {return head}cur cur.Next}newHead : reverse(head, cur)head.Next reverseKGroup(cur, k)return newHead }func reverse(start, end *ListNode) *ListN…...

编程新知 2025/9/14 8:32:04

手机平板能效生态设计指令EU 2023/1670标准解读

手机平板能效生态设计指令EU 2023/1670标准解读 以下是针对欧盟《手机和平板电脑生态设计法规》(EU) 2023/1670 的核心解读&#xff0c;综合法规核心要求、最新修正及企业合规要点&#xff1a; 一、法规背景与目标 生效与强制时间 发布于2023年8月31日&#xff08;OJ公报&…...

编程新知 2025/9/5 14:54:22

掌握 HTTP 请求：理解 cURL GET 语法

cURL 是一个强大的命令行工具&#xff0c;用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中&#xff0c;cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...

编程新知 2025/7/9 20:52:19