HTML 标签简写和全称及其对应的中文说明和实例
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML 标签简写及全称</title><style>* {margin: 0;padding: 0;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.951);}body {background: #2c3e50;}h1 {color: #f85f5faf;background-color: #1b657b4b;text-align: center;}p {color: #f85f5faf;}table.reference {width: 100%;border-collapse: collapse;}details {display: inline-block;color: chocolate;}table.reference th {background-color: #555;color: #ebf704;border: 1px solid #d4d4d4;font-size: 14px;padding: 3px;vertical-align: top;text-align: left;}table.reference tr:nth-child(odd) {background-color: #144756;}table.reference td {line-height: 2em;min-width: 24px;border: 1px solid #d4d4d4;color: hsla(160, 100%, 37%, 0.63);padding: 5px;vertical-align: top;}table.reference td:hover {color: #ebf704;box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);}table.reference td:nth-child(1),table.reference td:nth-child(4),table.reference td:nth-child(7) {width: 1%;color: rgb(255, 250, 250);background-color: #144756;}</style>
</head><body><div class="article-body"><div class="article-intro" id="content"><h1>HTML 标签简写及全称:表格内容将通过JavaScript动态生成</h1><p>下表列出了 HTML 标签简写和全称及其对应的中文说明和实例:</p><table class="reference" id="html-tags-table"><thead><tr><th>序号</th><th>标签<details><summary></summary>实例</details>中文说明</th><th>英文全称</th><th>序号</th><th>标签<details><summary></summary>实例</details>中文说明</th><th>英文全称</th><th>序号</th><th>标签<details><summary></summary>实例</details>中文说明</th><th>英文全称</th></tr></thead><tbody id="html-tags-tbody"><!-- 表格内容将通过JavaScript动态生成 --></tbody></table></div></div><script>const tagsData = [{ tag: 'a', fullName: 'Anchor', description: '锚点', example: '<a href="https://www.baidu.com">百度</a>' },{ tag: 'abbr', fullName: 'Abbreviation', description: '缩写词', example: '<abbr title="abbreviation">abbr</abbr>' },{ tag: 'acronym', fullName: 'Acronym', description: '取首字母的缩写词,HTML5 不支持 <acronym> 标签。请使用 <abbr> 标签代替它。', example: 'Can I get this < acronym title="as soon as possible">ASAP < /acronym>?' },{ tag: 'address', fullName: 'Address', description: '地址', example: '<address>地址</address>' },{ tag: 'alt', fullName: 'alter', description: '替用(一般是图片显示不出的提示)', example: '<img src="image.jpg" alt="图片加载失败">' },{ tag: 'b', fullName: 'Bold', description: '粗体（文本）', example: '<b>粗体</b>' },{ tag: 'bdo', fullName: 'Bi-Directional Override', description: '文本显示方向', example: '<bdo dir="rtl">文本显示方向</bdo>' },{ tag: 'big', fullName: 'Big', description: '变大（文本）', example: '<big>变大</big>' },{ tag: 'blockquote', fullName: 'Block Quotation', description: '区块引用语', example: '<blockquote>区块引用语</blockquote>' },{ tag: 'br', fullName: 'Break', description: '换行', example: '<p>段落<br>换行</p>' },{ tag: 'cell', fullName: 'cell', description: '巢', example: '<table><tr><td>单元格1</td><td>单元格2</td></tr></table>' },{ tag: 'cellpadding', fullName: 'cellpadding', description: '巢补白', example: '<table><tr><td>单元格1</td><td>单元格2</td></tr></table>' },{ tag: 'cellspacing', fullName: 'cellspacing', description: '巢空间', example: '<table><tr><td>单元格1</td><td>单元格2</td></tr></table>' },{ tag: 'center', fullName: 'Centered', description: '居中（文本）', example: '<center>居中</center>' },{ tag: 'cite', fullName: 'Citation', description: '引用', example: '<cite>引用</cite>' },{ tag: 'code', fullName: 'Code', description: '源代码（文本）' , example: '<code>源代码</code>' },{ tag: 'dd', fullName: 'Definition Description', description: '定义描述' , example: '<dl><dt>定义术语</dt><dd>定义描述</dd></dl>' },{ tag: 'del', fullName: 'Deleted', description: '删除（的文本）' , example: '<del>删除的文本</del>' },{ tag: 'dfn', fullName: 'Defines a Definition Term', description: '定义定义条目', example: '<dfn>定义定义条目</dfn>' },{ tag: 'div', fullName: 'Division', description: '分隔' , example: '<div>分隔</div>' },{ tag: 'dl', fullName: 'Definition List', description: '定义列表', example: '<dl><dt>定义术语</dt><dd>定义描述</dd></dl>' },{ tag: 'dt', fullName: 'Definition Term', description: '定义术语', example: '<dl><dt>定义术语</dt><dd>定义描述</dd></dl>' },{ tag: 'em', fullName: 'Emphasized', description: '加重（文本）' , example: '<em>加重的文本</em>' },{ tag: 'font', fullName: 'Font', description: '字体', example: '<font size="5">字体</font>' },{ tag: 'h1~h6', fullName: 'Header 1 to Header 6', description: '标题1到标题6' , example: '<h1>标题1</h1><h2>标题2</h2><h3>标题3</h3><h4>标题4</h4><h5>标题5</h5><h6>标题6</h6>' },{ tag: 'hr', fullName: 'Horizontal Rule', description: '水平尺', example: '<hr>' },{ tag: 'href', fullName: 'hypertext reference', description: '超文本引用', example: '<a href="https://www.baidu.com">百度</a>' },{ tag: 'i', fullName: 'Italic', description: '斜体（文本）' , example: '<i>斜体</i>' },{ tag: 'iframe', fullName: 'Inline frame', description: '定义内联框架' , example: '<iframe src="https://www.baidu.com" width="500" height="500"></iframe>' },{ tag: 'ins', fullName: 'Inserted', description: '插入（的文本）', example: '<ins>插入的文本</ins>' },{ tag: 'kbd', fullName: 'Keyboard', description: '键盘（文本）', example: '<kbd>键盘</kbd>' },{ tag: 'li', fullName: 'List Item', description: '列表项目' , example: '<ul><li>列表项目1</li><li>列表项目2</li></ul>' },{ tag: 'nl', fullName: 'navigation lists', description: '导航列表' , example: '<nav><ul><li>导航项目1</li><li>导航项目2</li></ul></nav>' },{ tag: 'ol', fullName: 'Ordered List', description: '排序列表' , example: '<ol><li>列表项目1</li><li>列表项目2</li></ol>' },{ tag: 'optgroup', fullName: 'Option group', description: '定义选项组' , example: '<select><optgroup label="组1"><option value="1">选项1</option><option value="2">选项2</option></optgroup><optgroup label="组2"><option value="3">选项3</option><option value="4">选项4</option></optgroup></select>' },{ tag: 'p', fullName: 'Paragraph', description: '段落' , example: '<p>段落</p>' },{ tag: 'pre', fullName: 'Preformatted', description: '预定义格式(文本 )', example: '<pre>预定义格式</pre>' },{ tag: 'q', fullName: 'Quotation', description: '引用语' , example: '<q>引用语</q>' },{ tag: 'rel', fullName: 'Reload', description: '加载' , example: '<a href="https://www.baidu.com" rel="nofollow">百度</a>' },{ tag: 's/ strike', fullName: 'Strikethrough', description: '删除线' , example: '<s>删除线</s>' },{ tag: 'samp', fullName: 'Sample', description: '示例（文本)' , example: '<samp>示例</samp>' },{ tag: 'small', fullName: 'Small', description: '变小（文本）' , example: '<small>变小的文本</small>' },{ tag: 'span', fullName: 'Span', description: '范围' , example: '<span>范围</span>' },{ tag: 'src', fullName: 'Source', description: '源文件链接', example: '<img src="image.jpg" alt="图片加载失败">' },{ tag: 'strong', fullName: 'Strong', description: '加重（文本）' , example: '<strong>加重的文本</strong>' },{ tag: 'sub', fullName: 'Subscripted', description: '下标（文本）', example: '<sub>下标</sub>' },{ tag: 'sup', fullName: 'Superscripted', description: '上标（文本）' , example: '<sup>上标</sup>' },{ tag: 'td', fullName: 'table data cell', description: '表格中的一个单元格' , example: '<table><tr><td>单元格1</td><td>单元格2</td></tr></table>' },{ tag: 'th', fullName: 'table header cell', description: '表格中的表头', example: '<table><tr><th>表头1</th><th>表头2</th></tr></table>' },{ tag: 'tr', fullName: 'table row', description: '表格中的一行' , example: '<table><tr><td>单元格1</td><td>单元格2</td></tr></table>' },{ tag: 'tt', fullName: 'Teletype', description: '打印机（文本）', example: '<tt>打印机</tt>' },{ tag: 'u', fullName: 'Underlined', description: '下划线（文本）', example: '<u>下划线</u>' },{ tag: 'ul', fullName: 'Unordered List', description: '不排序列表' , example: '<ul><li>列表项目1</li><li>列表项目2</li></ul>' },{ tag: 'var', fullName: 'Variable', description: '变量（文本）' , example: '<var>变量</var>' }];let html = '';for (let i = 0; i < 20; i++) {const item = tagsData[i];const nextItem = tagsData[i + 20];const nextItem2 = tagsData[i + 40];html += ` <tr><td class="item">${i + 1}</td><td class="tag">${item.tag}<details><summary></summary>${item.example}</details>${item.description}</td><td class="fullName">${item.fullName}</td><td class="item">${nextItem ? i + 21 : ''}</td><td class="tag">${nextItem ? nextItem.tag : ''}<details><summary></summary>${nextItem ? nextItem.example : ''}</details>${nextItem ? nextItem.description : ''}</td><td class="fullName">${nextItem ? nextItem.fullName : ''}</td><td class="item">${nextItem2 ? i + 41 : ''}</td><td class="tag">${nextItem2 ? nextItem2.tag : ''}<details><summary></summary>${nextItem2 ? nextItem2.example : ''}</details>${nextItem2 ? nextItem2.description : ''}</td><td class="fullName">${nextItem2 ? nextItem2.fullName : ''}</td></tr> `;}const tableBody = document.querySelector('#html-tags-tbody');tableBody.innerHTML = `<table>${html}</table>`;</script>
</body></html>
相关文章：
HTML 标签简写和全称及其对应的中文说明和实例
<!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>HTML 标签简写及全称</title><style>…...
(2024)docker-compose实战 (9)部署多项目环境(LAMP+react+vue+redis+mysql+nginx)
前言 本系列最初的想法就是搭建一个多项目的环境, 包含nginx, nodejs, php, html, redis, MongoDB, mysql.本文使用的PHP镜像为php:7.3.6-apache, 这里可以使用上一篇文章中生成好的镜像.LAMP或包含react或vue的前端项目, 本文就各写了一个, 可以按照实际需求, 自行添加多个容…...
全网最适合入门的面向对象编程教程：13 类和对象的 Python 实现-可视化阅读代码神器 Sourcetrail 的安装使用
全网最适合入门的面向对象编程教程：13 类和对象的 Python 实现-可视化阅读代码神器 Sourcetrail 的安装使用 摘要： 本文主要介绍了可视化阅读代码神器Sourcetrail的安装与使用，包括软件简介和特性、下载地址、安装方式、新建工程和如何查看…...
Django 视图 - FBV 与 CBV
Django 视图 - FBV 与 CBV 在 Django 框架中，视图是处理 Web 请求和返回 Web 响应的核心组件。Django 提供了两种主要的视图编写方式：函数基础视图（Function-Based Views，简称 FBV）和类基础视图（Class-Bas…...
AI机器人在未来的应用场景预测：是否会取代人类？华为、百度、特斯拉他们在AI领域都在做什么？
引言 随着人工智能（AI）技术的飞速发展，AI机器人在各个领域的应用变得越来越普遍。从工业自动化到日常生活，AI机器人已经开始展现出强大的潜力和实际应用价值。本文将深入探讨AI机器人在未来的应用场景，并分析它们是否…...
第58期 | GPTSecurity周报
GPTSecurity是一个涵盖了前沿学术研究和实践经验分享的社区，集成了生成预训练Transformer（GPT）、人工智能生成内容（AIGC）以及大语言模型（LLM）等安全领域应用的知识。在这里，您可以找…...
maven 依赖冲突
依赖冲突 1、对于 Maven 而言，同一个 groupId 同一个 artifactId 下，只能使用一个 version。 <!-- https://mvnrepository.com/artifact/org.apache.commons/commons-math3 --><dependency><groupId>org.apache.commons</groupId&…...
demon drone 200无人机标定流程
demon drone 200无人机标定流程 一、飞控固件更新1.1 固件更新1.2 参数更新 二、imu标定2.1 安装imu标定工具（在你自己的电脑上）2.2 录制rosbag(在对应飞机上)2.3 运行标定程序（在你自己的电脑上） 三、双目及imu联合标定3.1 安装标…...
案例开发-日程管理-第一期
九 案例开发-日程管理-第一期 共7期 9.1 登录页及校验 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><style>.ht{text-align: center;color: cadetblue;font-family: 幼…...
【Java 注解，自定义注解，元注解，注解本质，注解解析】
文章目录 什么是注解？Java内置注解自定义注解元注解注解的本质注解解析 什么是注解？ 注解是Java编程语言中的一种元数据，提供了有关程序的额外信息。注解以符号开始，紧跟着注解的名称和一对括号，括号内包含注解的参数…...
染色法判定二分图
什么是二分图？ 二分图，也称作二部图，是图论中的一种特殊模型。在一个无向图G(V,E) 中，如果顶点集合 V 可以被分割成两个互不相交的子集 A 和 B，并且图中的每条边 (i,j) 关联的两个顶点 i 和 j 分别属于这两个不同的顶…...
自动气象站的主要功能优势
在科技日新月异的今天，我们生活的方方面面都受到了科技的影响。其中，自动气象站作为气象观测领域的重要一环，不仅提升了气象数据的准确性和时效性，还为我们的日常生活、农业生产、灾害预防等提供了重要的数据支持。 自动气象站概述…...
Java中实现二维数组（矩阵）的转置
在矩阵运算中，矩阵的转置是一个基本操作，即将矩阵的行变成列，列变成行。在Java中，我们可以通过编写一个方法来实现二维数组的转置。下面，我将详细介绍如何在Java中完成这一任务，并提供完整的代码示例。 编…...
Prometheus+Grafana主机运行数据
目录 介绍 安装Node Exporter 配置Prometheus 验证配置 导入仪表盘 介绍 Prometheus是一款开源的监控和警报工具，而Node Exporter是Prometheus的一个官方插件，用于采集主机上的各种系统和硬件指标。 安装Node Exporter 下载最新版本的Node Export…...
GraphQL在Postman中：释放API查询的强大潜能
🚀 GraphQL在Postman中：释放API查询的强大潜能 Postman作为API开发和测试的领先工具，对GraphQL的支持为开发者提供了一种新的方式来查询和管理数据。GraphQL是一种查询语言，用于API，允许客户端明确指定他们需要哪些数…...
大语言模型里的微调vs RAG vs 模板提示词
文章目录 介绍微调（Fine-tuning）定义优点：缺点：应用场景：技术细节 检索增强生成（RAG，Retrieval-Augmented Generation）定义优点：缺点：应用场景：技…...
网络编程：常用网络测试工具
telnet netstat ping arp wireshark（网络抓包工具） tcpdumpssh2 secure crt ——软件工具sudo ufw disable sudo apt-get install openssh-server openssh-client //两个命令敲完 得重启sudo apt-get install wireshark 1、telnet 远程登录工具&…...
mov视频怎么改成mp4？把mov改成MP4的四个方法
mov视频怎么改成mp4？选择合适的视频格式对于确保内容质量和流通性至关重要。尽管苹果公司的mov格式因其出色的视频表现备受赞誉，但在某些情况下，它并非最佳选择，因为使用mov格式可能面临一些挑战。MP4格式在各种设备（如…...
力扣1472.设计浏览器历史记录
力扣1472.设计浏览器历史记录 用双指针记录历史记录 以及栈顶高度移动时会直接把之前的记录消掉 class BrowserHistory {int pos-1;int top0;string history[5010];public:BrowserHistory(string homepage) {visit(homepage);}void visit(string url) {pos ;top pos;histor…...
准大一新生开学千万要带证件照用途大揭秘
1、提前关注好都有哪些考场，以及这些考场大致在网页的哪个位置。比如我选对外经贸大学，我就直接找到第二个点进去。 2、电脑上同时开了谷歌浏览器和IE浏览器，以及手机也登陆了。亲测下来，同一时间刷新，谷歌浏览器能显示…...
QImage显示图片像素
在Qt中，QImage 类是用来表示和处理图像的。如果你想查看或显示一个图片的像素数据，你可以使用 QImage 提供的方法来访问这些数据。以下是一些基本的方法来获取和显示图片的像素信息： 获取图像的像素格式： 使用 QImage::format() …...
uniapp使用高德地图（公众号+h5）
选择微信小程序的话后果就是你的地图出不来，出来了就报key异常 下面直接放配置和代码： 打包后的高德uni-app,uniCloud,serverless,高德地图,申请高德地图Key,配置使用高德地图,参数说明,高德开放平台用户名,百度地图,申请百度地图Key,配置使用百度地图,…...
深度学习与浅层学习：技术变革下的竞争态势
深度学习与浅层学习：技术变革下的竞争态势 在过去十年中，深度学习的崛起对整个人工智能领域产生了巨大影响，几乎在各种任务中显示出超越传统浅层学习方法的性能。这种变化不仅推动了技术的进步，还对硬件市场，尤其是显…...
LeetCode 219. 存在重复元素 II
LeetCode 219. 存在重复元素 II 给你一个整数数组 nums 和一个整数 k ，判断数组中是否存在两个 不同的索引 i 和 j ，满足 nums[i] nums[j] 且 abs(i - j) < k 。如果存在，返回 true ；否则，返回 false 。 示例 1&am…...
【目标检测】使用自己的数据集训练并预测yolov8模型
1、下载yolov8的官方代码 地址： GitHub - ultralytics/ultralytics: NEW - YOLOv8 🚀 in PyTorch > ONNX > OpenVINO > CoreML > TFLite 2、下载目标检测的训练权重 yolov8n.pt 将 yolov8n.pt 放在ultralytics文件夹下 3、数据集分布 注…...
应用监控SkyWalking调研
参考： 链路追踪( Skyworking )_skywalking-CSDN博客 企业级监控项目Skywalking详细介绍，来看看呀-CSDN博客 SkyWalking 极简入门 | Apache SkyWalking 使用 SkyWalking 监控 ClickHouse Server | Apache SkyWalking https://zhuanlan.zhihu.com/p/3…...
Selenium使用注意事项:
find_element 和 find_elements 的区别 WebDriver和WebElement的区别 问题： 会遇到报错： selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"css selector",&…...
小程序需要进行软件测试吗?小程序测试有哪些测试内容?
在如今移动互联网快速发展的时代，小程序已成为人们生活中不可或缺的一部分。然而，面对日益增长的小程序数量和用户需求，小程序的稳定性和质量问题日益突显。因此，对小程序进行软件测试显得尤为重要。 近期的一项调查显示…...
一文读懂企业租用GPU的注意事项！
在人工智能、大数据处理及高性能计算领域，GPU算力已成为推动技术创新与业务增长的核心动力。尚云Sunclouds作为GPU算力租赁服务提供商，为用户提供了灵活、高效且成本可控的解决方案。对于初次接触GPU算力租赁的用户而言，了解并掌握租用过程中…...
Linux运维：mysql主从复制原理及实验
当一台数据库服务器出现负载的情况下，需要扩展服务器服务器性能扩展方式有向上扩展，垂直扩展。向外扩展，横向扩展。通俗的讲垂直扩展是将一台服务器扩展为性能更强的服务器。横向扩展是增加几台服务器。 主从复制好比存了1000块钱在主上&…...
长沙品质网站建设优点/如何自己建一个网站
写在本文开头，本文所涉及的卡通渲染技术仅使用了基于UE4的蓝图并在后处理阶段完成。因此在许多方面做不到非常深的自定义化，如需要对卡通渲染进行深度自定义的操作，本人还是建议修改引擎添加光照模型以实现卡通渲染。本文谈论的是偏General的…...
wordpress4.0.x 下载/搜索引擎有哪些?
来源：ConsenSys由 ConsenSys 推出的 Infura 提供了世界领先的区块链开发工具套件，其用户基数已经在不到一年的时间里增加了 250%，从 10 万人增加到 35 万人。Infura 平台提供 API 服务，可以快速连接到以太坊和其他网络 (如 IPFS、…...
网络销售应该注册什么公司/电商seo是指
// func3-2.cpp algo3-6.cpp和algo3-7.cpp要调用的函数 char Precede(SElemType t1,SElemType t2) { // 根据教科书表3.1，判断t1，t2两符号的优先关系(#用\n代替)char f;switch(t2){case :case -:if(t1(||t1\n)f<; // t1<t2elsef>; // t1>t2b…...
本地升级wordpress/关键词你们懂的
HTTP 的 Keep-Alive，是由应用层（用户态） 实现的，称为 HTTP 长连接； TCP 的 Keepalive，是由 TCP 层（内核态） 实现的，称为 TCP 保活机制 HTTP 的 Keep-Alive HTTP 是基于…...
wordpress网站模版/站长工具之家
凹面平板探测器市场的企业竞争态势 该报告涉及的主要国际市场参与者有ACTEON、Planmeca Oy、Castellini、Trident、Corix Medical、Carestream、Dentsply Sirona、KaVo Kerr、Denterprise Internationals、Cyber Medical Imaging、Genoray、Dentimax、Allpro Imaging、OWANDY、…...
旧电脑做网站服务器/搜索引擎优化的工具
Martin Fowler最近的一篇文章：LMAX架构。LMAX是一种新型零售金融交易平台，它能够以很低的延迟(latency)产生大量交易(吞吐量). 这个系统是建立在JVM平台上，核心是一个业务逻辑处理器，它能够在一个线程里每秒处理6百万订单. 业务逻…...