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: '&lt;a href="https://www.baidu.com">百度&lt;/a>' },{ tag: 'abbr', fullName: 'Abbreviation', description: '缩写词', example: '&lt;abbr title="abbreviation">abbr&lt;/abbr>' },{ tag: 'acronym', fullName: 'Acronym', description: '取首字母的缩写词,HTML5 不支持 <acronym> 标签。请使用 <abbr> 标签代替它。', example: 'Can I get this   &lt; acronym title="as soon as possible">ASAP  &lt; /acronym>?' },{ tag: 'address', fullName: 'Address', description: '地址', example: '&lt;address>地址&lt;/address>' },{ tag: 'alt', fullName: 'alter', description: '替用(一般是图片显示不出的提示)', example: '&lt;img src="image.jpg" alt="图片加载失败">' },{ tag: 'b', fullName: 'Bold', description: '粗体(文本)', example: '&lt;b>粗体&lt;/b>' },{ tag: 'bdo', fullName: 'Bi-Directional Override', description: '文本显示方向', example: '&lt;bdo dir="rtl">文本显示方向&lt;/bdo>' },{ tag: 'big', fullName: 'Big', description: '变大(文本)', example: '&lt;big>变大&lt;/big>' },{ tag: 'blockquote', fullName: 'Block Quotation', description: '区块引用语', example: '&lt;blockquote>区块引用语&lt;/blockquote>' },{ tag: 'br', fullName: 'Break', description: '换行', example: '&lt;p>段落&lt;br>换行&lt;/p>' },{ tag: 'cell', fullName: 'cell', description: '巢', example: '&lt;table>&lt;tr>&lt;td>单元格1&lt;/td>&lt;td>单元格2&lt;/td>&lt;/tr>&lt;/table>' },{ tag: 'cellpadding', fullName: 'cellpadding', description: '巢补白', example: '&lt;table>&lt;tr>&lt;td>单元格1&lt;/td>&lt;td>单元格2&lt;/td>&lt;/tr>&lt;/table>' },{ tag: 'cellspacing', fullName: 'cellspacing', description: '巢空间', example: '&lt;table>&lt;tr>&lt;td>单元格1&lt;/td>&lt;td>单元格2&lt;/td>&lt;/tr>&lt;/table>' },{ tag: 'center', fullName: 'Centered', description: '居中(文本)', example: '&lt;center>居中&lt;/center>' },{ tag: 'cite', fullName: 'Citation', description: '引用', example: '&lt;cite>引用&lt;/cite>' },{ tag: 'code', fullName: 'Code', description: '源代码(文本)' , example: '&lt;code>源代码&lt;/code>' },{ tag: 'dd', fullName: 'Definition Description', description: '定义描述' , example: '&lt;dl>&lt;dt>定义术语&lt;/dt>&lt;dd>定义描述&lt;/dd>&lt;/dl>' },{ tag: 'del', fullName: 'Deleted', description: '删除(的文本)' , example: '&lt;del>删除的文本&lt;/del>' },{ tag: 'dfn', fullName: 'Defines a Definition Term', description: '定义定义条目', example: '&lt;dfn>定义定义条目&lt;/dfn>' },{ tag: 'div', fullName: 'Division', description: '分隔' , example: '&lt;div>分隔&lt;/div>' },{ tag: 'dl', fullName: 'Definition List', description: '定义列表', example: '&lt;dl>&lt;dt>定义术语&lt;/dt>&lt;dd>定义描述&lt;/dd>&lt;/dl>' },{ tag: 'dt', fullName: 'Definition Term', description: '定义术语', example: '&lt;dl>&lt;dt>定义术语&lt;/dt>&lt;dd>定义描述&lt;/dd>&lt;/dl>' },{ tag: 'em', fullName: 'Emphasized', description: '加重(文本)' ,	example: '&lt;em>加重的文本&lt;/em>' },{ tag: 'font', fullName: 'Font', description: '字体', example: '&lt;font size="5">字体&lt;/font>' },{ tag: 'h1~h6', fullName: 'Header 1 to Header 6', description: '标题1到标题6' , example: '&lt;h1>标题1&lt;/h1>&lt;h2>标题2&lt;/h2>&lt;h3>标题3&lt;/h3>&lt;h4>标题4&lt;/h4>&lt;h5>标题5&lt;/h5>&lt;h6>标题6&lt;/h6>' },{ tag: 'hr', fullName: 'Horizontal Rule', description: '水平尺', example: '&lt;hr>' },{ tag: 'href', fullName: 'hypertext reference', description: '超文本引用', example: '&lt;a href="https://www.baidu.com">百度&lt;/a>' },{ tag: 'i', fullName: 'Italic', description: '斜体(文本)' , example: '&lt;i>斜体&lt;/i>' },{ tag: 'iframe', fullName: 'Inline frame', description: '定义内联框架' , example: '&lt;iframe src="https://www.baidu.com" width="500" height="500">&lt;/iframe>' },{ tag: 'ins', fullName: 'Inserted', description: '插入(的文本)', example: '&lt;ins>插入的文本&lt;/ins>' },{ tag: 'kbd', fullName: 'Keyboard', description: '键盘(文本)', example: '&lt;kbd>键盘&lt;/kbd>' },{ tag: 'li', fullName: 'List Item', description: '列表项目' , example: '&lt;ul>&lt;li>列表项目1&lt;/li>&lt;li>列表项目2&lt;/li>&lt;/ul>' },{ tag: 'nl', fullName: 'navigation lists', description: '导航列表' , example: '&lt;nav>&lt;ul>&lt;li>导航项目1&lt;/li>&lt;li>导航项目2&lt;/li>&lt;/ul>&lt;/nav>' },{ tag: 'ol', fullName: 'Ordered List', description: '排序列表' , example: '&lt;ol>&lt;li>列表项目1&lt;/li>&lt;li>列表项目2&lt;/li>&lt;/ol>' },{ tag: 'optgroup', fullName: 'Option group', description: '定义选项组' , example: '&lt;select>&lt;optgroup label="组1">&lt;option value="1">选项1&lt;/option>&lt;option value="2">选项2&lt;/option>&lt;/optgroup>&lt;optgroup label="组2">&lt;option value="3">选项3&lt;/option>&lt;option value="4">选项4&lt;/option>&lt;/optgroup>&lt;/select>' },{ tag: 'p', fullName: 'Paragraph', description: '段落' , example: '&lt;p>段落&lt;/p>' },{ tag: 'pre', fullName: 'Preformatted', description: '预定义格式(文本 )', example: '&lt;pre>预定义格式&lt;/pre>' },{ tag: 'q', fullName: 'Quotation', description: '引用语' , example: '&lt;q>引用语&lt;/q>' },{ tag: 'rel', fullName: 'Reload', description: '加载' , example: '&lt;a href="https://www.baidu.com" rel="nofollow">百度&lt;/a>' },{ tag: 's/ strike', fullName: 'Strikethrough', description: '删除线' , example: '&lt;s>删除线&lt;/s>' },{ tag: 'samp', fullName: 'Sample', description: '示例(文本)' , example: '&lt;samp>示例&lt;/samp>' },{ tag: 'small', fullName: 'Small', description: '变小(文本)' , example: '&lt;small>变小的文本&lt;/small>' },{ tag: 'span', fullName: 'Span', description: '范围' , example: '&lt;span>范围&lt;/span>' },{ tag: 'src', fullName: 'Source', description: '源文件链接', example: '&lt;img src="image.jpg" alt="图片加载失败">' },{ tag: 'strong', fullName: 'Strong', description: '加重(文本)' , example: '&lt;strong>加重的文本&lt;/strong>' },{ tag: 'sub', fullName: 'Subscripted', description: '下标(文本)', example: '&lt;sub>下标&lt;/sub>' },{ tag: 'sup', fullName: 'Superscripted', description: '上标(文本)' , example: '&lt;sup>上标&lt;/sup>' },{ tag: 'td', fullName: 'table data cell', description: '表格中的一个单元格' , example: '&lt;table>&lt;tr>&lt;td>单元格1&lt;/td>&lt;td>单元格2&lt;/td>&lt;/tr>&lt;/table>' },{ tag: 'th', fullName: 'table header cell', description: '表格中的表头', example: '&lt;table>&lt;tr>&lt;th>表头1&lt;/th>&lt;th>表头2&lt;/th>&lt;/tr>&lt;/table>' },{ tag: 'tr', fullName: 'table row', description: '表格中的一行' , example: '&lt;table>&lt;tr>&lt;td>单元格1&lt;/td>&lt;td>单元格2&lt;/td>&lt;/tr>&lt;/table>' },{ tag: 'tt', fullName: 'Teletype', description: '打印机(文本)', example: '&lt;tt>打印机&lt;/tt>' },{ tag: 'u', fullName: 'Underlined', description: '下划线(文本)', example: '&lt;u>下划线&lt;/u>' },{ tag: 'ul', fullName: 'Unordered List', description: '不排序列表' , example: '&lt;ul>&lt;li>列表项目1&lt;/li>&lt;li>列表项目2&lt;/li>&lt;/ul>' },{ tag: 'var', fullName: 'Variable', description: '变量(文本)' , example: '&lt;var>变量&lt;/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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/43948.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用c++模拟一个赌博游戏

源码: #include <iostream> #include<stdlib.h> #include<time.h> #define MAXTIMES 20 using namespace std;double multiple;double money; double bet; double add; int times; void betting(); int main() {srand(time(NULL));money=1000.0;while(time…

全面解析C#:现代编程语言

引言 C#&#xff08;读作 “C Sharp”&#xff09;是一种现代、通用、面向对象的编程语言&#xff0c;由微软在2000年开发。它是.NET框架的重要组成部分&#xff0c;广泛应用于桌面应用程序、Web应用程序、游戏开发、企业级解决方案等领域。本文将详细介绍C#的基本概念、高级主…

PHP数据结构之队列

本文由 ChatMoney团队出品 队列是一种基本的数据结构&#xff0c;遵循先进先出&#xff08;FIFO, First In First Out&#xff09;原则&#xff0c;即最先添加的元素将是最先被移除的。在本篇文章中&#xff0c;我们将深入探讨队列的概念&#xff0c;并通过PHP代码实现一个简单…

Android 通知访问权限

问题背景 客户反馈手机扫描三方运动手表&#xff0c;下载app安装后&#xff0c;通知访问权限打不开。 点击提示“受限设置” “出于安全考虑&#xff0c;此设置目前不可用”。 问题分析 1、setting界面搜“授予通知访问权限”&#xff0c;此按钮灰色不可点击&#xff0c;点…

TensorFlow系列:第三讲:MobileNetV2使用介绍

使用TensorFlow官方提供的API进行模型训练&#xff0c;keras系列API中&#xff0c;存在很多算法&#xff0c;使用MobileNetV2进行讲解。 一. MobileNetV2简介 MobileNetV2 是由 Google 在 2018 年发布的一种轻量级深度神经网络架构&#xff0c;旨在优化移动设备和嵌入式设备上…

<PLC><模拟量><SMC>使用SMC温度流量传感器PF3W系列与汇川PLC进行模拟量通讯的接线与设置

前言 本系列是关于PLC相关的博文,包括PLC编程、PLC与上位机通讯、PLC与下位驱动、仪器仪表等通讯、PLC指令解析等相关内容。 PLC品牌包括但不限于西门子、三菱等国外品牌,汇川、信捷等国内品牌。 除了PLC为主要内容外,PLC相关元器件如触摸屏(HMI)、交换机等工控产品,如…

微服务节流阀:Eureka中服务限流策略的精妙实现

微服务节流阀&#xff1a;Eureka中服务限流策略的精妙实现 引言 在微服务架构中&#xff0c;服务的稳定性和可靠性至关重要。限流策略作为保障服务稳定性的一种手段&#xff0c;通过控制服务的访问速率&#xff0c;可以有效避免服务过载和故障扩散。Eureka作为Netflix开源的服…

大小端详解

引例 我们知道整形(int)是4个字节&#xff0c;例如随便举个例子&#xff1a;0x01020304&#xff0c;它一共占了四个地址位&#xff0c;01,02,03,04分别占了一个字节&#xff08;一个字节就对应了一个地址&#xff09;。 那么就会有个问题&#xff1a;我们的01到底是存储在高地…

mysql 5.7.44 32位 zip安装

前言 因为研究别人代码&#xff0c;他使用了5.7的 32位 mysql &#xff0c;同时最新的 8.4 64位 mysql 不能用官方lib连接。所以安装这个版本使用&#xff0c;期间有些坑&#xff0c;在这里记录一下。 下载路径 mysql官方路径&#xff1a;https://downloads.mysql.com/archi…

软考高级第四版备考--第15天(管理团队)Management Team

定义&#xff1a;跟踪团队成员工作表现、提供反馈、解决问题并管理团队变更以优化项目绩效的过程 作用&#xff1a;影响团队行为&#xff0c;管理冲突以及解决问题。 输入&#xff1a;项目管理计划&#xff08;资源管理计划&#xff09;、项目文件&#xff08;问题日志、经验…

Android IdleHandler源码分析

文章目录 Android IdleHandler源码分析概述前提基本用法源码分析添加和删除任务执行任务 应用场景 Android IdleHandler源码分析 概述 IdleHandler是一个接口&#xff0c;它定义在MessageQueue类中&#xff0c;用于在主线程的消息队列空闲时执行一些轻量级的任务。IdleHandle…

Linux——多线程(五)

1.线程池 1.1初期框架 thread.hpp #include<iostream> #include <string> #include <unistd.h> #include <functional> #include <pthread.h>namespace ThreadModule {using func_t std::function<void()>;class Thread{public:void E…

Redis 7.x 系列【21】主从复制

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Redis 版本 7.2.5 源码地址&#xff1a;https://gitee.com/pearl-organization/study-redis-demo 文章目录 1. 概述2. 工作原理2.1 建立连接2.2 全量复制2.3 命令传播2.4 增量复制 3. 拓扑架构3.…

Uniapp表单提交

template中&#xff1a; <template><view class""><button class"tianjia" click"tianjia">添加</button><view class"divOne" v-show"a"><text class"guanbi" click"gua…

本地 HTTP 文件服务器的简单搭建 (deno/std)

首发日期 2024-06-30, 以下为原文内容: 在本地局域网搭建一个文件服务器, 有很多种方式. 本文介绍的是窝觉得比较简单的一种. 文件直接存储在 btrfs 文件系统之中, 底层使用 LVM 管理磁盘, 方便扩容. 使用 btrfs RAID 1 进行镜像备份 (一个文件在 2 块硬盘分别存储一份), 防止…

Python 读取和写入文本文件(txt)、Excel 文件和 JSON 文件的方法

Python 读取和写入文本文件&#xff08;txt&#xff09;、Excel 文件和 JSON 文件的基本方法 读取/写入 txt 文件基本读取txt读取 txt 文件写入 txt 文件按行读取复杂数据处理大txt文本文件&#xff08;逐行读取以节省内存&#xff09; 读取/写入 Excel 文件基本读取读取 Excel…

Transformer和Bert的原理是什么

文章目录 一、Transformer原理二、Bert的原理 一、Transformer原理 Transformer是一种基于注意力机制&#xff08;Attention Mechanism&#xff09;的深度学习模型架构&#xff0c;最早由Vaswani等人在2017年的论文《Attention is All You Need》中提出。Transformer主要用于处…

Tomcat异常处理【Spring源码学习】

当没有指定具体控制器异常处理方法时&#xff0c;默认走的异常会被tomcat捕获&#xff1b; /** * 基于ControllerAdvice的异常处理只能处理Spring层面的异常&#xff1b; * 如果我们自定义了过滤器在过滤器中抛出了异常这种情况下需要更高级的异常捕获 * ControllerAdvice无法…

Go 语言 UUID 库 google/uuid 源码解析:UUID version4 的实现

google/uuid 库地址 本文将解析 googl/uuid 库中 UUID 变体10版本4的实现。 版本 4 的 UUID 采取完全随机的方式实现&#xff0c;简单来说就是将 UUID 中的 122 位全部随机填充&#xff08;剩余的 6 位作标记位&#xff09;。版本 4 的 UUID 存在一定的重复风险&#xff0c;但…

PostgreSQL 复制延迟

PostgreSQL 的流复制&#xff08;Streaming Replication&#xff09;是一种高效的复制机制&#xff0c;用于在主服务器和一个或多个备用服务器之间传输数据&#xff0c;以实现高可用性和负载均衡。然而&#xff0c;复制一旦延迟可能会带来显著的挑战。本文将带您了解有关 Postg…