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

超文本标记语言（HTML）简介

news 2026/2/6 22:19:40

HTML 基础

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。正如标题所示，本文将对 HTML 及其功能做一个基本介绍。

HTML 是什么？

HTML 不是一门编程语言，而是一种用于定义内容结构的标记语言。HTML 由一系列的元素组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。例如：

<p>My cat is very grumpy</p>

HTML 元素详解

HTML 元素由以下主要部分组成：

  • 开始标签（Opening tag）：例如 <p>，表示元素的开始。
  • 结束标签（Closing tag）：例如 </p>，表示元素的结束。
  • 内容（Content）：元素的实际内容，如文本或图片。
  • 属性（Attribute）：提供关于元素的额外信息，如 class="editor-note"。

属性应该包含：

  • 属性名称后跟等号和属性值，通常用引号包围。

嵌套元素

可以将一个元素置于其他元素之中，称作嵌套。例如：

<p>My cat is <strong>very</strong> grumpy.</p>

空元素

不包含任何内容的元素称为空元素，例如 <img>：

<img src="images/firefox-icon.png" alt="My test image" />

HTML 文档详解

单个元素如何构成一个完整的 HTML 页面：

<!doctype html>
<html lang="en-US"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width" /><title>My test page</title></head><body><img src="images/firefox-icon.png" alt="My test image" /></body>
</html>

重要元素解释：

  • <!DOCTYPE html>：文档类型声明。
  • <html>：根元素，包含整个页面内容。
  • <head>：包含不展示给用户的内容，如CSS和元数据。
  • <meta>：字符集和视口设置。
  • <title>：页面标题。
  • <body>：用户可以看到的所有内容。

图像

图像通过 <img> 元素嵌入，包括 src 和 alt 属性：

<img src="images/firefox-icon.png" alt="My test image" />

alt 属性重要性：

  • 为视觉障碍用户提供图像描述。
  • 当图像无法显示时提供文本信息。

标记文本

标题（Heading）

HTML 提供六个级别的标题，从 <h1> 到 <h6>：

<h1>主标题</h1>
<h2>顶层标题</h2>

段落（Paragraph）

<p>这是一个段落</p>

列表（List）

  • 无序列表（Unordered List）：<ul> 和 <li>
  • 有序列表（Ordered List）：<ol> 和 <li>
<ul><li>列表项1</li><li>列表项2</li>
</ul>

链接

链接使用 <a> 元素创建，通过 href 属性指定链接地址：

<a href="https://www.mozilla.org/zh-CN/about/manifesto/">Mozilla Manifesto</a>

结语

HTML 是构建网页的基础，通过本篇文章，我们对 HTML 的基本元素和结构有了初步了解。HTML 的学习是一个不断实践和探索的过程，希望本文能为你的前端之旅提供一些帮助。

相关文章：

超文本标记语言（HTML）简介

HTML 基础 超文本标记语言&#xff08;英语&#xff1a;HyperText Markup Language&#xff0c;简称&#xff1a;HTML&#xff09;是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是&#xff1a;一组段落、一个重点信息列表、也可以含有图片和数据表。正如标题所示…...

编程日记 2024/6/15 8:19:15

使用thymeleaf直接渲染字符串

目录 一、依赖 二、示例代码 一、依赖 <--JAVA 8--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId><version>2.7.18</version></dependency><-…...

编程日记 2024/6/15 8:17:12

Spring Boot整合发送QQ邮箱功能

1. 创建Spring Boot项目 使用Spring Initializr&#xff08;https://start.spring.io/&#xff09;创建一个新的Spring Boot项目&#xff0c;并添加spring-boot-starter-mail依赖。 2. 添加配置 在application.properties或application.yml文件中添加QQ邮箱的SMTP配置。这里…...

编程日记 2024/6/15 8:16:10

Milvus向量数据库

Milvus 是一个开源的向量数据库&#xff0c;专为处理高维向量数据而设计&#xff0c;常用于大规模向量相似性搜索和基于向量的机器学习应用。它支持高效地管理、搜索和操作嵌入&#xff08;如文本、图像、音频的特征向量&#xff09;&#xff0c;在推荐系统、图像检索、语义搜索…...

编程日记 2024/6/15 8:15:09

python cls的使用

import threadingclass Test:# new方法用于创建类的实例def __new__(cls, *args, **kwargs):print("__new__:", cls.__class__.__name__)return object.__new__(cls) # 返回实例给init self参数# init用于初始化类的实例&#xff0c;实例由new方法传递过来的&#xf…...

编程日记 2024/6/15 8:13:07

idea中maven下载依赖缓慢解决方法

解决IDEA中Maven下载依赖包过慢或报错的问题_maven 下载依赖要很久-CSDN博客...

编程日记 2024/6/15 8:12:06

JS 中的各种距离 scrollTop？clientHeight?

元素的各种距离 DOM 对象 属性描述offsetWidth只读&#xff0c;返回元素的宽度&#xff08;包括元素宽度、内边距和边框&#xff0c;不包括外边距&#xff09;offsetHeight只读&#xff0c;返回元素的高度&#xff08;包括元素高度、内边距和边框&#xff0c;不包括外边距&am…...

编程日记 2024/6/15 8:09:02

继承-进阶-易错点

子类同名方法隐藏父类方法 即使调用不匹配也不会再去父类寻找&#xff0c;而是直接报错 //下面代码输出结果&#xff1a;( )&#xfeff;class A { public:void f(){ cout<<"A::f()"<<endl; }int a; };class B : public A { public:void f(int a){c…...

编程日记 2024/6/15 8:08:00

【图论应用】使用多路图（multigraph）对上海地铁站点图建模，并解决最短路径问题

文章目录 1 前言2 导包导入数据集3 创建多路图&#xff0c;导入节点和边信息3 绘制线路图4 计算最短路径 1 前言 最近正在学习图神经网络&#xff0c;先pick up了一些最基础的图论知识并学习了一些好玩的应用。 本文启发于B站视频&#xff08;BV1LY411R7HJ&#xff09;&#…...

编程日记 2024/6/15 8:05:58

RabbitMQ安装配置，封装工具类，发送消息及监听

1. Get-Started docker安装rabbitmq 拉取镜像 [rootheima ~]# docker pull rabbitmq:3.8-management 3.8-management: Pulling from library/rabbitmq 7b1a6ab2e44d: Pull complete 37f453d83d8f: Pull complete e64e769bc4fd: Pull complete c288a913222f: Pull complet…...

编程日记 2024/6/15 8:04:56

iOS接入Flutter

在现有的iOS项目上接入Flutter&#xff0c;参考链接 第一步&#xff1a;创建flutter项目&#xff0c;即 创建 Flutter module flutter create --template module my_flutter第二步&#xff1a;创建framework&#xff0c;这里选择的是B方式&#xff0c;即 选项 B - 在 Xcode 中…...

编程日记 2024/6/15 8:03:55

【ubuntu】用户添加root权限

添加root用户添加新用户并赋予权限 文件只读&#xff0c;无法更改 rootubuntu-server:/home/ubuntu# vi /etc/sudoers rootubuntu-server:/home/ubuntu# vi /etc/sudoers rootubuntu-server:/home/ubuntu# chmod -R 777 /etc/sudoers rootubuntu-server:/home/ubuntu# vi /et…...

编程日记 2024/6/15 8:01:54

设计通用灵活的LabVIEW自动测试系统

为了在不同客户案例中灵活使用不同设备&#xff08;如采集卡、Modbus模块&#xff09;且保持功能一致的LabVIEW自动测试系统&#xff0c;需要采用模块化的软件架构、配置文件管理、标准化接口和良好的升级维护策略。本文从软件架构、模块化设计、配置管理、升级维护、代码管理和…...

编程日记 2024/6/15 8:00:52

C# WinForm —— 35 StatusStrip 介绍

1. 简介 状态栏 StatusStrip&#xff0c;默认在软件的最下方&#xff0c;用于显示系统时间、版本、进度条、账号、角色信息、操作位置信息等 可以在状态栏中添加的控件类型有&#xff1a;StatusLabel、ProgressBar、DropDownButton、SplitButton 2. 属性 属性解释(Name)控…...

编程日记 2024/6/15 7:59:51

如何应对生活中的不确定性：仁者安仁，知者利仁。

有较高自尊水平的人&#xff0c;接近于孔子说的&#xff1a;仁者。 ——— 有着稳定的高自尊&#xff0c;无论外在环境如何变化&#xff0c;对其影响都不大&#xff0c;他能够愉快地生活。 相反&#xff1a;一个人处于低自尊状态&#xff0c;就会活得很痛苦&#xff0c;对自己…...

编程日记 2024/6/15 7:58:48

C#面：请解释C#接口的显式实现有什么意义

C#接口的显式实现是指在实现接口成员时&#xff0c;使用接口名称进行限定的方式。这种方式可以在一个类中实现多个接口&#xff0c;并且可以避免接口成员之间的命名冲突。显式实现接口的成员只能通过接口类型来访问&#xff0c;而不能通过类的实例来访问。 显式实现接口的主要…...

编程日记 2024/6/15 7:56:46

STM32项目分享：智能窗帘系统

目录 一、前言 二、项目简介 1.功能详解 2.主要器件 三、原理图设计 四、PCB硬件设计 1.PCB图 2.PCB板打样焊接图 五、程序设计 六、实验效果 七、资料内容 项目分享 一、前言 项目成品图片&#xff1a; 哔哩哔哩视频链接&#xff1a; https://www.bilibili.c…...

编程日记 2024/6/15 7:54:43

【算法-力扣】72. 编辑距离(动态规划)

目录 一、题目描述 二、解题思路 三、参考答案 一、题目描述 编辑距离 给你两个单词 word1 和 word2&#xff0c; 请返回将 word1 转换成 word2 所使用的最少操作数 。 你可以对一个单词进行如下三种操作&#xff1a; 插入一个字符 删除一个字符 替换一个字符 示例 1&#…...

编程日记 2024/6/15 7:49:37

Spring 系统架构图

Spring 系统架构图 Spring Framework是Spring生态圈中最基础的项目&#xff0c;是其他项目的根基。 Spring Framework的发展也经历了很多版本的变更&#xff0c;每个版本都有相应的调整 Spring Framework的5版本目前没有最新的架构图&#xff0c;而最新的是4版本&#xff0c;…...

编程日记 2024/6/15 7:48:34

同三维T80005EHS-4K60 4K60 HDMI/SDI编码器

1路4K60 HDMI或12G SDI输入&#xff0c;2路3.5MM音频输入&#xff0c;对应HDMI或SDI&#xff0c;1个USB口和1个SD卡槽&#xff0c;可录像到U盘/移动硬盘/SSD硬盘/TF卡 产品简介&#xff1a; 同三维T80005EHS-4K60 4K60HDMI/SDI H.265编码器采用最新高效H.265高清数字视频压缩…...

编程日记 2024/6/15 7:47:31

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility

Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...

编程新知 2026/1/26 21:57:45

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

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

编程新知 2026/1/9 19:36:58

从零开始打造 OpenSTLinux 6.6 Yocto 系统（基于STM32CubeMX）（九）

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

编程新知 2026/2/5 12:11:18

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

编程新知 2026/1/31 6:38:50

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

编程新知 2025/11/8 16:42:13

让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

编程新知 2026/1/28 2:18:46

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

编程新知 2025/9/9 8:40:47

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

编程新知 2026/2/4 13:10:38

MFC 抛体运动模拟：常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时，我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点，详细解析原因并提供解决方案，同时兼顾界面美化，让模拟效果更专业、更高效。 问题一：历史轨迹与小球残影残留 现象 小球运动后，历史位置的 “残影”…...

编程新知 2026/1/29 12:12:12

第7篇：中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

编程新知 2025/12/11 0:27:15