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

HTML 标签和属性

news 文章来源：https://blog.csdn.net/qq_58631644/article/details/129779471 2025/5/13 18:40:57

一些标签

单双标签

双标签。双标签指标签是成对出现的，也就是有一个开始标签和一个结束标签，开始标签用 <标签名> 表示，结束标签用 </标签名> 表示，只有一对标签一起使用才能表示一个具体的含义。例如 <html></html> 表示一个 HTML 文档。

单标签。单标签指标签不是成对出现的，也就是只用一个标签就能表示一个具体的含义，例如   表示换行、<hr> 表示创建一条水平线。为了符合 W3C 规范，单标签必须在标签后面加一个斜杠，即  、<hr/>，所以单标签通用格式为 <标签名/>。

段落标签

换行标签

水平横线

<hr />

标题标签

<h1 align="center"></h1>

h1-h6

文本样式标签

属性：face字体 size大小 color颜色等

文本格式化标签

粗体 或 

文字下画线 <ins></ins> 或 

文字斜体 或 

文字删除线 <del></del> 或 <s></s>

图像标签

<img src="图像路径"/>

alt 图像不能显示时显示文本

title 鼠标悬停图片显示文本

HTML注释

特殊符号

HTML 原代码	显示结果	描述
<	<	小于号或显示标记
>	>	大于号或显示标记
&	&	可用于显示其它特殊字符
"	“	引号
®	®	已注册
©	©	版权
™	™	商标
&ensp;		半个空白位
&emsp;		一个空白位
		不断行的空白

HTML基本结构

<html>包含<head>、<body>等其他标签
</html>

<head>头部标签元素
</head>

<body>主体内容
</body>

常用的头部标签：

标签	描述
`<title>`	定义页面标题内容（唯一必须的头部标签）。
`<base>`	当前文档的基准地址，其他相对地址都建立在此基准地址之上。
`<meta>`	有关文档本身的元信息，例如文档的作者，用于查询的关键词，关于文档的描述等。
`<style>`	定义 CSS 层叠样式表的内容。
`<link>`	定义外部文件的链接，最常见的用途是链接外部样式表。
`<script>`	定义页面中程序脚本的内容。

设定关键字、描述和字符集

Keywords 表示关键字定义，content 属性值表示关键字内容，关键字之间要用逗号分隔。

<meta name="Keywords" content="value" />

Description 表示描述定义，content 属性值表示描述内容

<meta name="Description" content="value" />

在中国大陆地区，常用的编码是 GB 码，表示简体中文，字符集应设置为 gb2312 ；中国台湾地区常用的编码是 BIG5 码，表示繁体中文；欧洲地区常用 ISO8859-1 表示英文……

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

HTML5 字符集设置简化写法

<meta charset="UTF-8" />

HTML 块级标签

大多数 HTML 元素被定义为块级元素或内联元素，“块级元素”译为 block level element，“内联元素”译为 inline element。两种元素都有各自的特点。其中块级标签的特点为：

总是以新行开始；

高度、行高、外边距和内边距都可以控制；

宽度缺省是它所在容器的 100%，除非设定一个宽度；

可以容纳行内元素和其他块元素。

<div>其他标签或文档</div>

<p>段落内容</p>

对于段落标签，有一个可选的属性 align，用于表示段落相对浏览器窗口在水平位置上的对齐方式。align 属性有四个可取值，每个可取值的含义如表所示：

值	描述
left	段落左对齐
right	段落右对齐
center	段落居中对齐
justify	对行进行伸展，每行都可以有相等的长度

<!DOCTYPE html>
<html><head><meta charset="utf-8" /></head><body><p>学习前端哪里好？</p><p style="width: 200px; background-color: darkgray" align="center">蓝桥软件学院</p></body>
</html>

有序列表

<ol><li>项目一</li><li>项目二</li><li>项目三</li>…
</ol>

对于 <ol> 标签有两个可选的属性，下表列出了每个属性、可取值和简单描述。

属性	可取值	描述
type	A、a、I、i、1	规定列表的类型，默认为数字
start	start_number	规定列表中的起始点，默认为 1

<ol type="A" start="3"><li>华为</li><li>小米</li><li>苹果</li><li>oppo</li><li>三星</li>
</ol>

无序列表

在 HTML 文档中，所谓无序列表，是指以实心圆 ●（默认）、空心圆 ○、实心方块 ■ 开头的，没有顺序的列表项目。

在无序列表中，各个列表项之间没有顺序之分。无序列表由 <ul> 和 </ul> 标签对实现，每个列表项也是由 <li> 标签定义的。

无序列表与有序列表非常类似，不同点在于因为无序列表是无序的，所以不存在 start 这个规定列表起始点的属性。

无序列表的 type 属性可以设置为 disc、circle、square，其中 disc 代表实心圆 ●（默认），circle 代表空心圆 ○、square 代表实心方块 ■。

<ul type="disc"><li>华为</li><li>小米</li><li>苹果</li><li>oppo</li><li>三星</li>
</ul>

定义列表

<dl><dt>列表项</dt><dd>列表描述</dd>
</dl>

HTML 行内标签

超链接

<a href="连接地址或文本">文本或者图片</a>

<a> 标签的 target 属性有一个有 4 个保留的目标名称用作特殊的文档重定向操作：

值	描述
_blank	浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self	浏览器在当前窗口载入目标文档。
_parent	浏览器在父窗口载入目标文档。如果这个引用是在窗口或者在顶级框架中，那么它与 _self 等效。
_top	浏览器在最顶端的框架窗体载入目标文档。

文档书签

当一个页面内容特别多时，可以通过给页面建立书签的方式，对同一页面里的内容进行链接。这样用户在浏览网页时，可以通过书签进行页面内的内容跳转，提高浏览者的用户体验效果。

<a name="书签名称">文字</a>

定义了书签后，链接到该书签的超链接的基本语法为：

<a href="#书签名称">链接点</a>

下面通过一个案例，演示使用超链接跳转至本文档的另一个位置，即当用户单击“查看本文档第三部分”这个内部链接时，即可链接到本页面的第三部分位置

<body><p><a href="#d3">查看本文档第三部分</a></p><h2>第一部分</h2><p>这是第一部分的内容！</p><h2>第二部分</h2><p>这是第二部分的内容！</p><h2><a name="d3">第三部分</a></h2><p>这是第三部分的内容</p><h2>第四部分</h2><p>这是第四部分的内容！</p><h2>第五部分</h2><p>这是第五部分的内容！</p><h2>第六部分</h2><p>这是第六部分的内容！</p><h2>第七部分</h2><p>这是第七部分的内容！</p><h2>第八部分</h2><p>这是第八部分的内容！</p><h2>第九部分</h2><p>这是第九部分的内容！</p><h2>第十部分</h2><p>这是第十部分的内容！</p>
</body>

标签

标签没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。如果不对 应用样式，那么 元素中的文本与其他文本不会任何视觉上的差异。所以可以这样认为： 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式。

<span>选中的文本</span>

短语标签

标签	描述
<em>	呈现为被强调的文本。
<strong>	用来定义重要的文本。
<dfn>	定义一个定义项目。
<code>	定义计算机代码文本。
<samp>	定义样本文本。
<kbd>	定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var>	定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。

HTML 标签和属性

一些标签单双标签双标签。双标签指标签是成对出现的，也就是有一个开始标签和一个结束标签，开始标签用 <标签名> 表示，结束标签用 </标签名> 表示，只有一对标签一起使用才能表示一个具体的含义。例如 <html>&…...

编程日记 2023/4/18 10:35:07

MySQL 连接的使用

MySQL 连接的使用在前几章节中，我们已经学会了如何在一张表中读取数据，这是相对简单的，但是在真正的应用中经常需要从多个数据表中读取数据。本章节我们将向大家介绍如何使用 MySQL 的 JOIN 在两个或多个表中查询数据。你可以在 SEL…...

编程日记 2023/4/18 10:36:14

配置案例丨EtherCAT转Profinet网关连接凯福科技总线步进驱动器

西门子S7-1200/1500系列的PLC，采用PROFINET实时以太网通讯协议，需要连接带EtherCAT的通讯功能的伺服驱动器等设备，就必须进行通讯协议转换。小疆GW-PN-ECATM系列的网关提供了，快速可行的解决方案。GW-PN-ECATM支持两种实时以太网通…...

编程日记 2023/4/15 16:23:10

VSCODE连接ssh服务器时提示could not establish connection to解决方法

VSCODE连接ssh服务器时提示could not establish connection to解决方法 1.点击扩展设置在Remote.ssh：config file中输入config路径重新连接即可，如果是之前连接过ubuntu现在无法连接则需要打开刚刚的地址文件中删掉known_hostsj即可虚拟机中ubuntu安…...

编程日记 2023/4/16 5:53:54

网络安全之防火墙双机热备实验

目录网络安全之防火墙双机热备实验实验图基本配置 PC1 SW2 PC2 编辑 SW3配置登陆防火墙图形界面编辑 FW1的配置 FW2的配置新建trust to untrust 区域的安全策略配置心跳线在FW1与FW2之间拉一条心跳线编辑配置FW1 g 1/0/2 口 ip 编辑配置FW2 g…...

编程日记 2023/4/12 3:06:59

Java高频面试题（2023最新整理）

Java的特点 Java是一门面向对象的编程语言。面向对象和面向过程的区别参考下一个问题。 Java具有平台独立性和移植性。 Java有一句口号：Write once, run anywhere，一次编写、到处运行。这也是Java的魅力所在。而实现这种特性的正是Java虚拟机JVM。已编…...

编程日记 2023/4/18 10:37:20

mongoDB学习笔记

1.大数据定义： 数据量级大 byte kb MB GB TB PB ... 数据种类多数据维度例如：人物画像数据处理速度快数据有价值问题：①.存储 ？ ②.数据分析？ ③.高并发？ 大数据应用领域: 电商（推…...

编程日记 2023/4/12 2:35:24

快速融人，融资的共享模式，实体，线上皆可参考

有一种模式现在非常流行，它既能帮助商家快速收钱，又能帮助商家快速裂变更多客户，这个神奇的模式就是共享股东模式，现在很多老板都在用这个模式。梦龙商业案例分析，带你了解商业背后的秘密这个模式也适用于很多个行…...

编程日记 2023/4/12 3:06:31

纯干货版阿里巴巴国际站入门攻略

阿里巴巴国际站作为目前全球排名名列前茅的B2B电商平台，很多跨境电商卖家都很想入局。但是目前很多公司的国际站都没有专职运营的人员，只是靠外贸业务员操作，所以涉猎的都是比较浅的东西。今天龙哥就来讲讲如果想要深研这个平台的话&#xff…...

编程日记 2023/4/18 10:40:32

jQuery四、其他方法

零、文章目录文章地址个人博客-CSDN地址：https://blog.csdn.net/liyou123456789个人博客-GiteePages：https://bluecusliyou.gitee.io/techlearn 代码仓库地址 Gitee：https://gitee.com/bluecusliyou/TechLearnGithub：https:…...

编程日记 2023/4/18 10:42:13

2023年先进无人飞行系统国际会议(ICAUAS 2023) | IOP JPCS独立出版

会议简介 Brief Introduction 2023年先进无人飞行系统国际会议(ICAUAS 2023) 会议时间：2023年7月13日-16日召开地点：中国哈尔滨&加拿大多伦多双会场大会官网： ICAUAS 2023-2023 International Conference on Advanced Unmanned Aerial …...

编程日记 2023/4/11 6:19:36

2022蓝桥杯省赛——修剪灌木

问题描述爱丽丝要完成一项修剪灌木的工作。有 N 棵灌木整齐的从左到右排成一排。爱丽丝在每天傍晩会修剪一棵灌木, 让灌木的高度变为 0 厘米。爱丽丝修剪灌木的顺序是从最左侧的灌木开始, 每天向右修剪一棵灌木。当修剪了最右侧的灌木后, 她会调转方向, 下一天开始向左修剪…...

编程日记 2023/4/14 8:19:15

Spring Boot Aop初接触

AOP（面向切面编程），或多或少都听过一点。名字比较怪，切面，不容易理解，但其中真正含义，无非就是旁路控制，非侵入式编码之类。比如我想加个操作日志功能，利用AOP&#xff0…...

编程日记 2023/4/12 3:05:40

【创作赢红包】LeetCode：232. 用栈实现队列

🍎道阻且长，行则将至。🍓 🌻算法，不如说它是一种思考方式🍀算法专栏： 👉🏻123 一、🌱232. 用栈实现队列题目描述：请你仅使用两个栈实现先入先出队…...

编程日记 2023/4/12 3:05:20

Mybatis+Mysql 实现向下递归查询

介绍说到递归查询，大家可以想到的技术实现方式主要如下几种： 1、各种主流应用开发语言本身通过算法实现 2、各种数据库引擎自身提供的算法实现本文提到主要是针对第二种和第一种的结合主要技术栈 1、ORM：Mybatis 2、DB：MyS…...

编程日记 2023/4/12 3:05:09

python@调用系统命令行@os.system@subprocess@标准输入输出@sys.stdin@sys.stdout@input@print

文章目录python调用系统命令行os.system标准输入输出sys.stdinsys.stdoutinputprint概要os.systemdemoswindows命令解释器ComSpecsubprocessrecommended🎈基本用法demos标准输入输出sys.stdininput()sys.stdin.inputinput()交互模式小结sys.stdoutsys.stdout.wirte(…...

编程日记 2023/4/15 16:24:36

手握数据智能密钥，诸葛智能打开数字化经营“三重门”

科技云报道原创。如果说上世纪传统麦迪逊大街上的“广告狂人”吸金立足之本，还主要是基于“Big Idea”的话，那么在当下，数据正在成为企业营销和运营的金矿。这是一个“人与机器共同进化”的时代，技术作为延伸人类感觉的媒介之…...

编程日记 2023/4/12 14:31:07

C语言可以实现各种滤波算法

C语言可以实现各种滤波算法，以下是一些常见的滤波算法： 均值滤波（Mean Filter）：将图像中每一个像素周围一定区域内的灰度值取平均值作为该像素的新灰度值，用于去除高斯噪声等随机噪声。下面是一个简单的 C…...

编程日记 2023/4/16 5:55:35

使用Netty，当然也要了解它的连接闲置处理

连接闲置网络连接的闲置指的是当前网络连接处于空闲状态，即没有正在进行的数据传输或通信活动。当我们的某个连接不再发送请求或者接收响应的时候，这个连接就开始处于闲置状态。网络连接的闲置时间越长，说明该连接越不活跃。此时，…...

编程日记 2023/4/15 16:24:43

2、K-Planes

运行配置主页：https://sarafridov.github.io/K-Planes/ 代码：https://github.com/sarafridov/K-Planes 预训练权重：https://drive.google.com/drive/folders/1zs_folzaCdv88y065wc6365uSRfsqITH Neural_3D_Video_Dataset：htt…...

编程日记 2023/4/19 15:13:50

张文海教授课题组在国际高水平期刊《Cerebral Cortex》发表研究成果

调节悲伤情绪对于维持伴侣间的浪漫关系至关重要。人际情绪调节策略包括情感参与（AE）和认知参与（CE），这两种策略在浪漫关系中效用如何？它们是如何通过情感纽带调节伴侣情绪的？其背后的脑际神经互…...

编程日记 2023/4/18 10:42:57

ffmpeg4.1 源码学习之-转封装

前言 ffmpeg 的源码量非常的多，而且非常繁杂，非常多的函数，如果一个函数一个函数看的话要花费比较多的时间。所以本文通过跟踪ffmpeg转封装的过程来学习ffmpeg的源码具体转封装的命令：ffmpeg -i 1_cut.flv -c copy -f mp4 1.mp4在…...

编程日记 2023/4/14 8:19:47

ChatGPT写作文章-快速使用ChatGPT不用注册方式

如何更好地使用ChatGPT批量生成文章：详细教程作为一款强大的文本生成器，ChatGPT可以帮助您快速、高效地批量生成文章。但如果您还不知道如何更好地使用ChatGPT，那么这篇详细的列表教程将会指导您如何使用它来生成高质量的文章，提…...

编程日记 2023/4/15 16:26:44

Nginx配置ip白名单（服务权限控制）

Nginx服务器权限控制：Nginx 是一款高性能的 HTTP 和反向代理服务器。它可以通过配置文件实现权限控制，从而限制或允许特定的 IP 地址、网络或用户访问指定的资源。这里是一些基本的 Nginx 权限控制方法： 1. 基于 IP 地址的访问控制在 Ngin…...

编程日记 2023/4/18 10:44:50

Vue 核心（二）

文章目录Vue 核心（二）八、绑定样式1、 class2、 style九、条件渲染1、渲染指令2、使用示例十、列表渲染1、基本语法2、 key原理3、列表过滤4、列表排序5、数组更新检测6、大总结十一、收集表单数据十二、内置指令1、 v-text2、 v-html3、 v-…...

编程日记 2023/4/16 5:56:41

犯罪现场还原虚拟vr训练平台突破各种教学限制

在当今社会矛盾日益凸显、各式犯罪层出不穷的背景下，创新改革公安院校实战化教学方式，强化对基层公安队伍实战化应用型人才的供给能力具有重要性、紧迫性。案件现场勘查是门技术活，如何让民警快速有效提升技能、服务实战? 常规刑侦专业现场…...

编程日记 2023/4/11 19:33:24

LeetCode 617. 合并二叉树 | C++语言版

LeetCode 617. 合并二叉树 | C语言版LeetCode 617. 合并二叉树题目描述解题思路思路一：使用递归代码实现运行结果参考文章：思路二：减少遍历节点数代码实现运行结果参考文章：LeetCode 617. 合并二叉树题目描述题目地址&#xf…...

编程日记 2023/4/12 14:30:41

Python量化交易08——利用Tushare获取日K数据

总有同学问我要数据...很多第三方接口都能直接获取数据的，本次介绍怎么用Tushare库获取A股日k线行情的数据。 Tushare有两个版本，老版现在快弃用了。新版的官网链接在这：Tushare数据需要注册一个账号，然后改一下资料&#xff0…...

编程日记 2023/4/12 14:30:35

30张精美可视化大屏，无需代码直接套用，解决你95%的大屏需求！

通常制作可视化大屏，一般有两种方式代码开发：写代码调用数据和图表库，比如写JSEcharts ； 可视化工具：用现成的数据可视化工具前者简单直接，直接写代码就完事。但对于大部分人来说门槛较高，维…...

编程日记 2023/4/12 14:30:31

TCP网络事件模型的封装1.0

TCP网络模型的封装最近学习了TCP网络模型的封装，其中运用的封装技术个人感觉有点绕在反复读代码、做思维导图下初步理解了这套封装模型，不禁感叹原来代码还能这样写？神奇！ 为此将源码分享出来并将流程图画出，方便…...

编程日记 2023/4/11 19:35:16