超文本标记语言（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高清数字视频压缩…...
前端导出带有合并单元格的列表
// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...
2021-03-15 iview一些问题
1.iview 在使用tree组件时，发现没有set类的方法，只有get，那么要改变tree值，只能遍历treeData，递归修改treeData的checked，发现无法更改，原因在于check模式下，子元素的勾选状态跟父节…...
ServerTrust 并非唯一
NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...
什么是EULA和DPA
文章目录 EULA（End User License Agreement）DPA（Data Protection Agreement）一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA（End User License Agreement） 定义： EULA即…...
leetcodeSQL解题：3564. 季节性销售分析
leetcodeSQL解题：3564. 季节性销售分析 题目： 表：sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...
大模型多显卡多服务器并行计算方法与实践指南
一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术，以解决单机资源不足的问题。分布式训练主要分为两种模式： 数据并行：将数据分片到不同设备，每个设备拥有完整的模型副本 模型并行：将模型分割到不同设备，每个设备处理部分模型计算 现代大模型训练通常结合…...
AI编程--插件对比分析：CodeRider、GitHub Copilot及其他
AI编程插件对比分析：CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展，AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者，分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...
基于matlab策略迭代和值迭代法的动态规划
经典的基于策略迭代和值迭代法的动态规划matlab代码，实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...
HashMap中的put方法执行流程（流程图）
1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中，其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下： 初始判断与哈希计算： 首先，putVal 方法会检查当前的 table（也就…...
【分享】推荐一些办公小工具
1、PDF 在线转换 https://smallpdf.com/cn/pdf-tools 推荐理由：大部分的转换软件需要收费，要么功能不齐全，而开会员又用不了几次浪费钱，借用别人的又不安全。 这个网站它不需要登录或下载安装。而且提供的免费功能就能满足日常…...