超文本标记语言（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高清数字视频压缩…...
React state（及组件） 的保留与重置
当在树中相同的位置渲染相同的组件时，React 会一直保留着组件的 state return (<div><Counter />{showB && <Counter />} </div> ) // 当 showB 为 false, 第二个计数器停止渲染，它的 state 完全消失了。这是因为 React…...
flask返回的数据怎么是转义后的字符串啊
Flask在返回JSON数据时，默认情况下会对特殊字符进行转义，以确保数据能安全地在HTML页面中展示，避免XSS（跨站脚本攻击）等安全问题。如果不希望Flask对JSON响应中的字符串自动转义，通常是因为你希望在前端直接使用这些数据（例如作为JavaScript的一部分），那么需要确保数据…...
C++17并行算法与HIPSTDPAR
C17 parallel algorithms and HIPSTDPAR — ROCm Blogs (amd.com) C17标准在原有的C标准库中引入了并行算法的概念。像std::transform这样的并行版本算法保持了与常规串行版本相同的签名，只是增加了一个额外的参数来指定使用的执行策略。这种灵活性使得已经使用C标准…...
【什么是几度cms，主要功能有什么】
几度CMS内容管理框架是基于 PHP 语言采用最新 Thinkphp 作为开发框架生产的网站 内容管理框架，提供“电脑网站 手机网站 多终端 APP 接口”一体化网站技术解 决方案。她拥有强大稳定底层框架，以灵活扩展为主的开发理念，二次开发方便且…...
组合和外观模式
文章目录 组合模式1.引出组合模式1.院系展示需求2.组合模式基本介绍3.组合模式原理类图4.解决的问题 2.组合模式解决院系展示1.类图2.代码实现1.AbsOrganizationComponent.java 总体抽象类用于存储信息和定义方法2.University.java 第一层，University 可以管理 Coll…...
设置服务器禁止和ip通信
要禁止服务器与特定 IP 地址的通信，可以使用防火墙来设置规则。在 Ubuntu 上，iptables 是一个常用的防火墙工具。以下是使用 iptables 设置禁止与特定 IP 通信的步骤： 阻止所有进出的通信 如果你想阻止服务器与特定 IP 地址的所有通信&…...
中文技术文档的写作规范(搬运)
阮一峰老师的《中文技术文档的写作规范》搬运。 链接指路： https://github.com/ruanyf/document-style-guide/tree/master 内容：对中文技术文档从标题、文本、段落、数值、标点符号、文档体系、参考链接等七大方面进行了简明扼要的介绍。...
「实战应用」如何用DHTMLX将上下文菜单集成到JavaScript甘特图中（一）
DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。 DHTMLX Gantt是一个高度可定制的工具，可以与项目管理应用程序所需的其他功能相补充。在本文中您将学习如何使用自定义上…...
Python使用策略模式生成TCP数据包
使用策略模式（Strategy Pattern）来灵活地生成不同类型的TCP数据包。 包括三次握手、数据传输和四次挥手。 from scapy.all import * from scapy.all import Ether, IP, TCP, UDP, wrpcap from abc import ABC, abstractmethodclass TcpPacketStrategy(A…...
无文件落地分离拆分-将shellcode从文本中提取-file
马子分为shellcode和执行代码. --将shellcode单独拿出,放在txt中---等待被读取执行 1-cs生成python的payload. 2-将shellcode进行base64编码 import base64code b en_code base64.b64encode(code) print(en_code) 3-将编码后的shellcode放入文件内 4-读取shellcod…...