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

超文本标记语言(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> 元素嵌入,包括 srcalt 属性:

<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;一组段落、一个重点信息列表、也可以含有图片和数据表。正如标题所示…...

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

Milvus向量数据库

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

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…...

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

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

JS 中的各种距离 scrollTop?clientHeight?

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

继承-进阶-易错点

子类同名方法隐藏父类方法 即使调用不匹配也不会再去父类寻找&#xff0c;而是直接报错 //下面代码输出结果&#xff1a;( )&#xfeff;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 创建多路图&#xff0c;导入节点和边信息3 绘制线路图4 计算最短路径 1 前言 最近正在学习图神经网络&#xff0c;先pick up了一些最基础的图论知识并学习了一些好玩的应用。 本文启发于B站视频&#xff08;BV1LY411R7HJ&#xff09;&#…...

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&#xff0c;参考链接 第一步&#xff1a;创建flutter项目&#xff0c;即 创建 Flutter module flutter create --template module my_flutter第二步&#xff1a;创建framework&#xff0c;这里选择的是B方式&#xff0c;即 选项 B - 在 Xcode 中…...

【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…...

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

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

C# WinForm —— 35 StatusStrip 介绍

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

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

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

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

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

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

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

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

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

Spring 系统架构图

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

同三维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高清数字视频压缩…...

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

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

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

根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...

现有的 Redis 分布式锁库(如 Redisson)提供了哪些便利?

现有的 Redis 分布式锁库&#xff08;如 Redisson&#xff09;相比于开发者自己基于 Redis 命令&#xff08;如 SETNX, EXPIRE, DEL&#xff09;手动实现分布式锁&#xff0c;提供了巨大的便利性和健壮性。主要体现在以下几个方面&#xff1a; 原子性保证 (Atomicity)&#xff…...

通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器

拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件&#xff1a; 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...

小木的算法日记-多叉树的递归/层序遍历

&#x1f332; 从二叉树到森林&#xff1a;一文彻底搞懂多叉树遍历的艺术 &#x1f680; 引言 你好&#xff0c;未来的算法大神&#xff01; 在数据结构的世界里&#xff0c;“树”无疑是最核心、最迷人的概念之一。我们中的大多数人都是从 二叉树 开始入门的&#xff0c;它…...

轻量级Docker管理工具Docker Switchboard

简介 什么是 Docker Switchboard &#xff1f; Docker Switchboard 是一个轻量级的 Web 应用程序&#xff0c;用于管理 Docker 容器。它提供了一个干净、用户友好的界面来启动、停止和监控主机上运行的容器&#xff0c;使其成为本地开发、家庭实验室或小型服务器设置的理想选择…...