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://xiahunao.cn/news/3224445.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

Linux udp编程

我最近开了几个专栏&#xff0c;诚信互三&#xff01; > |||《算法专栏》&#xff1a;&#xff1a;刷题教程来自网站《代码随想录》。||| > |||《C专栏》&#xff1a;&#xff1a;记录我学习C的经历&#xff0c;看完你一定会有收获。||| > |||《Linux专栏》&#xff1…

效果惊人!LivePortrait开源数字人技术,让静态照片生动起来

不得了了,快手已经不是众人所知的那个短视频娱乐平台了。 可灵AI视频的风口尚未过去,又推出了LivePortrait--开源的数字人项目。LivePortrait让你的照片动起来,合成逼真的动态人像视频,阿里通义EMO不再是唯一选择。 让图像动起来 LivePortrait 主要提供了对眼睛和嘴唇动作的…

20_Inception V3深度学习图像分类算法

回顾GoogleNet:传送门 1.1 介绍 InceptionV3是Google开发的一种深度卷积神经网络架构&#xff0c;它是Inception系列网络中的第三代模型&#xff0c;由Christian Szegedy等人在论文《Rethinking the Inception Architecture for Computer Vision》中提出&#xff0c;该论文发…

gitee上传和下载idea项目的流程

环境&#xff1a;idea2022 一、上传项目 1、在gitee中新建一个仓库。 2、打开所要上传的项目的文件夹&#xff0c;点击Git Bash&#xff0c;生成.git文件夹。 3、在idea中打开所要上传的项目&#xff0c;在控制台的Terminal菜单中&#xff0c;输入git add . (注意&#xf…

解决分布式环境下session共享问题

在分布式环境下&#xff0c;session会存在两个问题 第一个问题:不同域名下&#xff0c;浏览器存储的jsessionid是没有存储的。比如登录时认证服务auth.gulimall.com存储了session&#xff0c;但是搜索服务search.gulimall.com是没有这个session的&#xff1b; 第二个问题&…

鸟类领域超大规模检测实践,基于YOLOv8轻量级检测模型开发构建超大规模生活场景下500种鸟类检测识别分析系统

关于鸟类的检测、识别相关的开发实践在前面的系列博文中也有不少的实践记录&#xff0c;感兴趣的话可以自行移步阅读即可&#xff1a; 【检测类】 《AI识鸟&#xff0c;基于YOLOv5【n/s/m/l/x】全系列参数模型开发构建工业野外场景下鸟类检测识别分析系统》 《基于轻量级YOL…

Eyes Wide Shut Exploring the Visual Shortcomings of Multimodal LLMs

Eyes Wide Shut? Exploring the Visual Shortcomings of Multimodal LLMs 近两年多模态大模型&#xff08;Multimodal LLM&#xff0c;MLLM&#xff09;取得了巨大的进展&#xff0c;能够基于图片与人类对话&#xff0c;展现出强大的识别甚至推理能力。然而&#xff0c;在某些…

游戏AI的创造思路-技术基础-蒙特卡洛树搜索(2)

接上一篇&#xff0c;让我们来看更多的例子 目录 7. 更多例子 7.1. 国际象棋实例 7.2. RTS类游戏实例 7.3. FPS类游戏实例 7. 更多例子 蒙特卡洛树搜索&#xff08;Monte Carlo Tree Search&#xff0c;MCTS&#xff09;在游戏AI中有着广泛的应用&#xff0c;尤其是在那些…

孟德尔随机化--代谢生活方式与消化道癌

写在前面 今天阅读的文献是多种暴露与某结局的孟德尔随机化&#xff0c;算是以量取胜了。 The effect of metabolism-related lifestyle and clinical risk factors on digestive system cancers in East Asian populations: a two-sample Mendelian randomization analysis …

使用tkinter拖入excel文件并显示

使用tkinter拖入excel文件并显示 效果代码 效果 代码 import tkinter as tk from tkinter import ttk from tkinterdnd2 import TkinterDnD, DND_FILES import pandas as pdclass ExcelViewerApp(TkinterDnD.Tk):def __init__(self):super().__init__()self.title("Excel…

谷歌摸鱼神器来了:推出AI会议替身,一键总结提问发言_会议预约 ai对话

饱受会议折磨的打工人&#xff0c;终于可以解放了&#xff01; 就在刚刚举办的Google Cloud Next’23大会上&#xff0c;谷歌宣布了一系列科技新进展&#xff0c;最瞩目的要属其中的“开会AI替身”了。 只需要一句“帮我参加”&#xff0c;AI就能替你开会&#xff0c;并在合适…

设计模式探索:装饰器模式

1. 装饰器模式定义 装饰器模式&#xff08;Decorator Pattern&#xff09; 装饰器模式是一种结构型设计模式&#xff0c;允许向一个对象动态添加行为。在不改变类的接口的情况下&#xff0c;装饰器模式在原始类上增加额外的职责&#xff0c;并且支持多个装饰器嵌套使用。 装…

车载聚合路由器应用场景分析

乾元通QYT-X1z车载式1U多卡聚合路由器&#xff0c;支持最多8路聚合&#xff0c;无论是应急救援&#xff0c;还是车载交通&#xff0c;任何宽带服务商无法覆盖的区域&#xff0c;聚合路由器可提供现场需要的稳定、流畅、安全的视频传输网络&#xff0c;聚合路由器可无缝接入应急…

安装nodejs | npm报错

nodejs安装步骤: 官网&#xff1a;https://nodejs.org/en/ 在官网下载nodejs: 双击下载下来的msi安装包&#xff0c;一直点next&#xff0c;我选的安装目录是默认的: 测试是否安装成功&#xff1a; 输入cmd打开命令提示符&#xff0c;输入node -v可以看到版本&#xff0c;说…

idea创建dynamic web project

由于网课老师用的是eclipse,所以又得自己找教程了…… 解决方案&#xff1a; https://blog.csdn.net/Awt_FuDongLai/article/details/115523552

有没有适合全体质猫咪的主食冻干?全价冻干:希喂大橙罐实测分享

作为一个注重猫咪身体健康和幸福感的铲屎官&#xff0c;怎么会不喂主食冻干。毕竟&#xff0c;除了猫咪爱吃外&#xff0c;高含肉量、高营养的主食冻干也能给猫咪的健康带来一系列的好处。 最近&#xff0c;我给我家猫猫们入手了一款性价比超高的主食冻干&#xff1a;希喂CPMR2…

mybatis中的标签

在MyBatis中&#xff0c;除了基本的SQL映射功能外&#xff0c;还有许多用于动态SQL构建的标签。这些标签允许我们根据不同的条件和需求构建复杂的SQL语句。主要的动态SQL标签包括<if>, <choose>, <when>, <otherwise>, <trim>, <set>, <…

deepstream段错误

&#x1f610; 错误&#xff1a; 探针中由于使用了pyds.get_nvds_buf_surface(hash(gst_buffer), frame_meta.batch_id)导致的段错误&#xff08;segmentation fault&#xff09;。 解决方式&#xff1a;

彩带插画:成都亚恒丰创教育科技有限公司

彩带插画&#xff1a;色彩斑斓的艺术世界 在浩瀚的艺术海洋中&#xff0c;彩带插画以其独特的魅力&#xff0c;如同一条绚烂的彩绸&#xff0c;轻轻拂过人们的心田&#xff0c;留下一抹抹难以忘怀的色彩。成都亚恒丰创教育科技有限公司它不仅仅是一种视觉上的享受&#xff0c;…

二叉树超详细解析

二叉树 目录 二叉树一级目录二级目录三级目录 1.树的介绍1.1树的定义1.2树的基本术语1.3相关性质 2.二叉树介绍2.1定义2.2 性质 3.二叉树的种类3.1 满二叉树3.2完全二叉树3.3 二叉查找树特点&#xff1a;二叉查找树的节点包含的基本信息&#xff1a; 3.4 平衡二叉树 4.二叉树的…