超文本标记语言（HTML）简介
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 基础 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是：一组段落、一个重点信息列表、也可以含有图片和数据表。正如标题所示…...
使用thymeleaf直接渲染字符串
目录 一、依赖 二、示例代码 一、依赖 <--JAVA 8--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId><version>2.7.18</version></dependency><-…...
Spring Boot整合发送QQ邮箱功能
1. 创建Spring Boot项目 使用Spring Initializr（https://start.spring.io/）创建一个新的Spring Boot项目，并添加spring-boot-starter-mail依赖。 2. 添加配置 在application.properties或application.yml文件中添加QQ邮箱的SMTP配置。这里…...
Milvus向量数据库
Milvus 是一个开源的向量数据库，专为处理高维向量数据而设计，常用于大规模向量相似性搜索和基于向量的机器学习应用。它支持高效地管理、搜索和操作嵌入（如文本、图像、音频的特征向量），在推荐系统、图像检索、语义搜索…...
python cls的使用
import threadingclass Test:# new方法用于创建类的实例def __new__(cls, *args, **kwargs):print("__new__:", cls.__class__.__name__)return object.__new__(cls) # 返回实例给init self参数# init用于初始化类的实例，实例由new方法传递过来的…...
idea中maven下载依赖缓慢解决方法
解决IDEA中Maven下载依赖包过慢或报错的问题_maven 下载依赖要很久-CSDN博客...
JS 中的各种距离 scrollTop？clientHeight?
元素的各种距离 DOM 对象 属性描述offsetWidth只读，返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）offsetHeight只读，返回元素的高度（包括元素高度、内边距和边框，不包括外边距&am…...
继承-进阶-易错点
子类同名方法隐藏父类方法 即使调用不匹配也不会再去父类寻找，而是直接报错 //下面代码输出结果：( )class A { public:void f(){ cout<<"A::f()"<<endl; }int a; };class B : public A { public:void f(int a){c…...
【图论应用】使用多路图（multigraph）对上海地铁站点图建模，并解决最短路径问题
文章目录 1 前言2 导包导入数据集3 创建多路图，导入节点和边信息3 绘制线路图4 计算最短路径 1 前言 最近正在学习图神经网络，先pick up了一些最基础的图论知识并学习了一些好玩的应用。 本文启发于B站视频（BV1LY411R7HJ）&#…...
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…...
iOS接入Flutter
在现有的iOS项目上接入Flutter，参考链接 第一步：创建flutter项目，即 创建 Flutter module flutter create --template module my_flutter第二步：创建framework，这里选择的是B方式，即 选项 B - 在 Xcode 中…...
【ubuntu】用户添加root权限
添加root用户添加新用户并赋予权限 文件只读，无法更改 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…...
设计通用灵活的LabVIEW自动测试系统
为了在不同客户案例中灵活使用不同设备（如采集卡、Modbus模块）且保持功能一致的LabVIEW自动测试系统，需要采用模块化的软件架构、配置文件管理、标准化接口和良好的升级维护策略。本文从软件架构、模块化设计、配置管理、升级维护、代码管理和…...
C# WinForm —— 35 StatusStrip 介绍
1. 简介 状态栏 StatusStrip，默认在软件的最下方，用于显示系统时间、版本、进度条、账号、角色信息、操作位置信息等 可以在状态栏中添加的控件类型有：StatusLabel、ProgressBar、DropDownButton、SplitButton 2. 属性 属性解释(Name)控…...
如何应对生活中的不确定性：仁者安仁，知者利仁。
有较高自尊水平的人，接近于孔子说的：仁者。 ——— 有着稳定的高自尊，无论外在环境如何变化，对其影响都不大，他能够愉快地生活。 相反：一个人处于低自尊状态，就会活得很痛苦，对自己…...
C#面：请解释C#接口的显式实现有什么意义
C#接口的显式实现是指在实现接口成员时，使用接口名称进行限定的方式。这种方式可以在一个类中实现多个接口，并且可以避免接口成员之间的命名冲突。显式实现接口的成员只能通过接口类型来访问，而不能通过类的实例来访问。 显式实现接口的主要…...
STM32项目分享：智能窗帘系统
目录 一、前言 二、项目简介 1.功能详解 2.主要器件 三、原理图设计 四、PCB硬件设计 1.PCB图 2.PCB板打样焊接图 五、程序设计 六、实验效果 七、资料内容 项目分享 一、前言 项目成品图片： 哔哩哔哩视频链接： https://www.bilibili.c…...
【算法-力扣】72. 编辑距离(动态规划)
目录 一、题目描述 二、解题思路 三、参考答案 一、题目描述 编辑距离 给你两个单词 word1 和 word2， 请返回将 word1 转换成 word2 所使用的最少操作数 。 你可以对一个单词进行如下三种操作： 插入一个字符 删除一个字符 替换一个字符 示例 1&#…...
Spring 系统架构图
Spring 系统架构图 Spring Framework是Spring生态圈中最基础的项目，是其他项目的根基。 Spring Framework的发展也经历了很多版本的变更，每个版本都有相应的调整 Spring Framework的5版本目前没有最新的架构图，而最新的是4版本，…...
同三维T80005EHS-4K60 4K60 HDMI/SDI编码器
1路4K60 HDMI或12G SDI输入，2路3.5MM音频输入，对应HDMI或SDI，1个USB口和1个SD卡槽，可录像到U盘/移动硬盘/SSD硬盘/TF卡 产品简介： 同三维T80005EHS-4K60 4K60HDMI/SDI H.265编码器采用最新高效H.265高清数字视频压缩…...
窗口效率革命：WindowResizer重构数字空间管理新范式
窗口效率革命：WindowResizer重构数字空间管理新范式 【免费下载链接】WindowResizer 一个可以强制调整应用程序窗口大小的工具 项目地址: https://gitcode.com/gh_mirrors/wi/WindowResizer 问题诊断：被忽视的数字空间效率黑洞 现代办公的隐形枷…...
Windows下WVP+ZLMediaKit联动实战：5分钟搞定GB28181摄像头接入（附端口避坑清单）
Windows下WVPZLMediaKit联动实战：5分钟搞定GB28181摄像头接入（附端口避坑清单） 在智能视频监控领域，GB28181协议作为国家标准协议，正在成为设备互联的主流选择。但对于刚接触这一领域的开发者来说，从零开始…...
丹青幻境功能全解析：宣纸UI、动态LoRA、文艺交互实操
丹青幻境功能全解析：宣纸UI、动态LoRA、文艺交互实操 1. 数字艺术创作新范式 在数字艺术创作领域，丹青幻境Z-Image Atelier带来了一场界面革命。这款工具将4090显卡的强大算力隐藏在仿古宣纸界面背后，为创作者提供了前所未有的沉浸式体验。…...
城通网盘限速破解：ctfileGet让下载效率提升10倍的技术革命
城通网盘限速破解：ctfileGet让下载效率提升10倍的技术革命 【免费下载链接】ctfileGet 获取城通网盘一次性直连地址 项目地址: https://gitcode.com/gh_mirrors/ct/ctfileGet 在数字化协作日益频繁的今天，网盘已成为信息传递的重要枢纽。然而城通…...
【仅限头部金融科技团队内部流通】FastAPI 2.0 AI流式响应安全加固方案：防内存溢出、防连接耗尽、防Token泄露（含OWASP ASVS v4.0合规对照表）
第一章：FastAPI 2.0 AI流式响应安全加固方案全景概览FastAPI 2.0 引入了对 Server-Sent Events（SSE）与异步生成器的原生增强支持，使大语言模型（LLM）的流式响应（如 token-by-token 输出ÿ…...
Pixel Couplet Gen入门必看：Streamlit Components封装像素春联React组件
Pixel Couplet Gen入门必看：Streamlit Components封装像素春联React组件 1. 项目介绍 Pixel Couplet Gen是一款基于ModelScope大模型驱动的创意春联生成器。与传统春联设计不同，它采用了独特的8-bit像素游戏风格，将中国传统春节元素与复古电…...
【等保三级Java安全加固实战指南】：20年专家亲授7大高危漏洞修复清单与合规落地路径
第一章：等保三级Java安全加固的合规基线与实施全景图等保三级对Java应用系统提出了覆盖身份鉴别、访问控制、安全审计、通信保密性、代码安全及运行环境防护等多维度强制性要求。其合规基线并非单一技术点的叠加，而是以《GB/T 22239-2019 信息安全技术 网…...
TDengine IDMP 工业数据建模 —— 数据标准化
3.4 数据标准化 工业环境通常从多个数据源采集数据，这些数据往往命名不一致、物理单位各异、数据结构不同。如果没有标准化，跨资产分析、AI 生成洞察和数据汇聚将变得不可靠甚至无法实现。TDengine IDMP 提供了多种机制，对整个资产模型中的数…...
Android Studio中文界面汉化终极指南：5分钟打造舒适开发环境
Android Studio中文界面汉化终极指南：5分钟打造舒适开发环境 【免费下载链接】AndroidStudioChineseLanguagePack AndroidStudio中文插件(官方修改版本） 项目地址: https://gitcode.com/gh_mirrors/an/AndroidStudioChineseLanguagePack 还在为An…...
DriverStore Explorer：突破Windows驱动管理瓶颈，释放系统空间提升80%存储效率
DriverStore Explorer：突破Windows驱动管理瓶颈，释放系统空间提升80%存储效率 【免费下载链接】DriverStoreExplorer Driver Store Explorer [RAPR] 项目地址: https://gitcode.com/gh_mirrors/dr/DriverStoreExplorer 诊断存储异常：设…...