Compartir tecnología

La abreviatura y el nombre completo de las etiquetas HTML y sus correspondientes descripciones y ejemplos en chino.

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.  
  4. <head>
  5. 	<meta charset="UTF-8">
  6. 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. 	<title>HTML 标签简写及全称</title>
  8. 	<style>
  9. 		* {
  10. 			margin: 0;
  11. 			padding: 0;
  12. 			text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.951);
  13. 		}
  14.  
  15. 		body {
  16. 			background: #2c3e50;
  17. 		}
  18.  
  19. 		h1 {
  20. 			color: #f85f5faf;
  21. 			background-color: #1b657b4b;
  22. 			text-align: center;
  23. 		}
  24.  
  25. 		p {
  26. 			color: #f85f5faf;
  27. 		}
  28.  
  29. 		table.reference {
  30. 			width: 100%;
  31. 			border-collapse: collapse;
  32. 		}
  33.  
  34. 		details {
  35. 			display: inline-block;
  36. 			color: chocolate;
  37. 		}
  38.  
  39. 		table.reference th {
  40. 			background-color: #555;
  41. 			color: #ebf704;
  42. 			border: 1px solid #d4d4d4;
  43. 			font-size: 14px;
  44. 			padding: 3px;
  45. 			vertical-align: top;
  46. 			text-align: left;
  47. 		}
  48.  
  49. 		table.reference tr:nth-child(odd) {
  50. 			background-color: #144756;
  51. 		}
  52.  
  53. 		table.reference td {
  54. 			line-height: 2em;
  55. 			min-width: 24px;
  56. 			border: 1px solid #d4d4d4;
  57. 			color: hsla(160, 100%, 37%, 0.63);
  58. 			padding: 5px;
  59. 			vertical-align: top;
  60. 		}
  61.  
  62. 		table.reference td:hover {
  63. 			color: #ebf704;
  64. 			box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
  65. 		}
  66.  
  67. 		table.reference td:nth-child(1),
  68. 		table.reference td:nth-child(4),
  69. 		table.reference td:nth-child(7) {
  70. 			width: 1%;
  71. 			color: rgb(255, 250, 250);
  72. 			background-color: #144756;
  73. 		}
  74. 	</style>
  75. </head>
  76.  
  77. <body>
  78. 	<div class="article-body">
  79. 		<div class="article-intro" id="content">
  80. 			<h1>HTML 标签简写及全称:表格内容将通过JavaScript动态生成</h1>
  81. 			<p>下表列出了 HTML 标签简写和全称及其对应的中文说明和实例:</p>
  82. 			<table class="reference" id="html-tags-table">
  83. 				<thead>
  84. 					<tr>
  85. 						<th>序号</th>
  86. 						<th>标签
  87. 							<details>
  88. 								<summary></summary>
  89. 								实例
  90. 							</details>
  91. 							中文说明
  92. 						</th>
  93. 						<th>英文全称</th>
  94. 						<th>序号</th>
  95. 						<th>标签
  96. 							<details>
  97. 								<summary></summary>
  98. 								实例
  99. 							</details>
  100. 							中文说明
  101. 						</th>
  102. 						<th>英文全称</th>
  103. 						<th>序号</th>
  104. 						<th>标签
  105. 							<details>
  106. 								<summary></summary>
  107. 								实例
  108. 							</details>
  109. 							中文说明
  110. 						</th>
  111. 						<th>英文全称</th>
  112. 					</tr>
  113. 				</thead>
  114. 				<tbody id="html-tags-tbody">
  115. 					<!-- 表格内容将通过JavaScript动态生成 -->
  116. 				</tbody>
  117. 			</table>
  118. 		</div>
  119. 	</div>
  120. 	<script>
  121. 		const tagsData = [
  122. 			{ tag: 'a', fullName: 'Anchor', description: '锚点', example: '&lt;a href="https://www.baidu.com">百度&lt;/a>' },
  123. 			{ tag: 'abbr', fullName: 'Abbreviation', description: '缩写词', example: '&lt;abbr title="abbreviation">abbr&lt;/abbr>' },
  124. 			{ tag: 'acronym', fullName: 'Acronym', description: '取首字母的缩写词,HTML5 不支持 <acronym> 标签。请使用 <abbr> 标签代替它。', example: 'Can I get this   &lt; acronym title="as soon as possible">ASAP  &lt; /acronym>?' },
  125. 			{ tag: 'address', fullName: 'Address', description: '地址', example: '&lt;address>地址&lt;/address>' },
  126. 			{ tag: 'alt', fullName: 'alter', description: '替用(一般是图片显示不出的提示)', example: '&lt;img src="image.jpg" alt="图片加载失败">' },
  127. 			{ tag: 'b', fullName: 'Bold', description: '粗体（文本）', example: '&lt;b>粗体&lt;/b>' },
  128. 			{ tag: 'bdo', fullName: 'Bi-Directional Override', description: '文本显示方向', example: '&lt;bdo dir="rtl">文本显示方向&lt;/bdo>' },
  129. 			{ tag: 'big', fullName: 'Big', description: '变大（文本）', example: '&lt;big>变大&lt;/big>' },
  130. 			{ tag: 'blockquote', fullName: 'Block Quotation', description: '区块引用语', example: '&lt;blockquote>区块引用语&lt;/blockquote>' },
  131. 			{ tag: 'br', fullName: 'Break', description: '换行', example: '&lt;p>段落&lt;br>换行&lt;/p>' },
  132. 			{ tag: 'cell', fullName: 'cell', description: '巢', example: '&lt;table>&lt;tr>&lt;td>单元格1&lt;/td>&lt;td>单元格2&lt;/td>&lt;/tr>&lt;/table>' },
  133. 			{ tag: 'cellpadding', fullName: 'cellpadding', description: '巢补白', example: '&lt;table>&lt;tr>&lt;td>单元格1&lt;/td>&lt;td>单元格2&lt;/td>&lt;/tr>&lt;/table>' },
  134. 			{ tag: 'cellspacing', fullName: 'cellspacing', description: '巢空间', example: '&lt;table>&lt;tr>&lt;td>单元格1&lt;/td>&lt;td>单元格2&lt;/td>&lt;/tr>&lt;/table>' },
  135. 			{ tag: 'center', fullName: 'Centered', description: '居中（文本）', example: '&lt;center>居中&lt;/center>' },
  136. 			{ tag: 'cite', fullName: 'Citation', description: '引用', example: '&lt;cite>引用&lt;/cite>' },
  137. 			{ tag: 'code', fullName: 'Code', description: '源代码（文本）' , example: '&lt;code>源代码&lt;/code>' },
  138. 			{ tag: 'dd', fullName: 'Definition Description', description: '定义描述' , example: '&lt;dl>&lt;dt>定义术语&lt;/dt>&lt;dd>定义描述&lt;/dd>&lt;/dl>' },
  139. 			{ tag: 'del', fullName: 'Deleted', description: '删除（的文本）' , example: '&lt;del>删除的文本&lt;/del>' },
  140. 			{ tag: 'dfn', fullName: 'Defines a Definition Term', description: '定义定义条目', example: '&lt;dfn>定义定义条目&lt;/dfn>' },
  141. 			{ tag: 'div', fullName: 'Division', description: '分隔' , example: '&lt;div>分隔&lt;/div>' },
  142. 			{ tag: 'dl', fullName: 'Definition List', description: '定义列表', example: '&lt;dl>&lt;dt>定义术语&lt;/dt>&lt;dd>定义描述&lt;/dd>&lt;/dl>' },
  143. 			{ tag: 'dt', fullName: 'Definition Term', description: '定义术语', example: '&lt;dl>&lt;dt>定义术语&lt;/dt>&lt;dd>定义描述&lt;/dd>&lt;/dl>' },
  144. 			{ tag: 'em', fullName: 'Emphasized', description: '加重（文本）' ,	example: '&lt;em>加重的文本&lt;/em>' },
  145. 			{ tag: 'font', fullName: 'Font', description: '字体', example: '&lt;font size="5">字体&lt;/font>' },
  146. 			{ 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>' },
  147. 			{ tag: 'hr', fullName: 'Horizontal Rule', description: '水平尺', example: '&lt;hr>' },
  148. 			{ tag: 'href', fullName: 'hypertext reference', description: '超文本引用', example: '&lt;a href="https://www.baidu.com">百度&lt;/a>' },
  149. 			{ tag: 'i', fullName: 'Italic', description: '斜体（文本）' , example: '&lt;i>斜体&lt;/i>' },
  150. 			{ tag: 'iframe', fullName: 'Inline frame', description: '定义内联框架' , example: '&lt;iframe src="https://www.baidu.com" width="500" height="500">&lt;/iframe>' },
  151. 			{ tag: 'ins', fullName: 'Inserted', description: '插入（的文本）', example: '&lt;ins>插入的文本&lt;/ins>' },
  152. 			{ tag: 'kbd', fullName: 'Keyboard', description: '键盘（文本）', example: '&lt;kbd>键盘&lt;/kbd>' },
  153. 			{ tag: 'li', fullName: 'List Item', description: '列表项目' , example: '&lt;ul>&lt;li>列表项目1&lt;/li>&lt;li>列表项目2&lt;/li>&lt;/ul>' },
  154. 			{ 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>' },
  155. 			{ tag: 'ol', fullName: 'Ordered List', description: '排序列表' , example: '&lt;ol>&lt;li>列表项目1&lt;/li>&lt;li>列表项目2&lt;/li>&lt;/ol>' },
  156. 			{ 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>' },
  157. 			{ tag: 'p', fullName: 'Paragraph', description: '段落' , example: '&lt;p>段落&lt;/p>' },
  158. 			{ tag: 'pre', fullName: 'Preformatted', description: '预定义格式(文本 )', example: '&lt;pre>预定义格式&lt;/pre>' },
  159. 			{ tag: 'q', fullName: 'Quotation', description: '引用语' , example: '&lt;q>引用语&lt;/q>' },
  160. 			{ tag: 'rel', fullName: 'Reload', description: '加载' , example: '&lt;a href="https://www.baidu.com" rel="nofollow">百度&lt;/a>' },
  161. 			{ tag: 's/ strike', fullName: 'Strikethrough', description: '删除线' , example: '&lt;s>删除线&lt;/s>' },
  162. 			{ tag: 'samp', fullName: 'Sample', description: '示例（文本)' , example: '&lt;samp>示例&lt;/samp>' },
  163. 			{ tag: 'small', fullName: 'Small', description: '变小（文本）' , example: '&lt;small>变小的文本&lt;/small>' },
  164. 			{ tag: 'span', fullName: 'Span', description: '范围' , example: '&lt;span>范围&lt;/span>' },
  165. 			{ tag: 'src', fullName: 'Source', description: '源文件链接', example: '&lt;img src="image.jpg" alt="图片加载失败">' },
  166. 			{ tag: 'strong', fullName: 'Strong', description: '加重（文本）' , example: '&lt;strong>加重的文本&lt;/strong>' },
  167. 			{ tag: 'sub', fullName: 'Subscripted', description: '下标（文本）', example: '&lt;sub>下标&lt;/sub>' },
  168. 			{ tag: 'sup', fullName: 'Superscripted', description: '上标（文本）' , example: '&lt;sup>上标&lt;/sup>' },
  169. 			{ 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>' },
  170. 			{ 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>' },
  171. 			{ 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>' },
  172. 			{ tag: 'tt', fullName: 'Teletype', description: '打印机（文本）', example: '&lt;tt>打印机&lt;/tt>' },
  173. 			{ tag: 'u', fullName: 'Underlined', description: '下划线（文本）', example: '&lt;u>下划线&lt;/u>' },
  174. 			{ tag: 'ul', fullName: 'Unordered List', description: '不排序列表' , example: '&lt;ul>&lt;li>列表项目1&lt;/li>&lt;li>列表项目2&lt;/li>&lt;/ul>' },
  175. 			{ tag: 'var', fullName: 'Variable', description: '变量（文本）' , example: '&lt;var>变量&lt;/var>' }
  176. 		];
  177.  
  178. 		let html = '';
  179.  
  180. 		for (let i = 0; i < 20; i++) {
  181. 			const item = tagsData[i];
  182. 			const nextItem = tagsData[i + 20];
  183. 			const nextItem2 = tagsData[i + 40];
  184.  
  185. 			html += `	<tr>
  186. 						<td class="item">${i + 1}</td>
  187. 						<td class="tag">
  188. 							${item.tag}
  189. 							<details>
  190. 								<summary></summary>
  191. 								${item.example}
  192. 							</details>
  193. 							${item.description}
  194. 						</td>
  195. 						<td class="fullName">${item.fullName}</td>
  196. 						<td class="item">${nextItem ? i + 21 : ''}</td>
  197. 						<td class="tag">
  198. 							${nextItem ? nextItem.tag : ''}
  199. 							<details>
  200. 								<summary></summary>
  201. 								${nextItem ? nextItem.example : ''}
  202. 							</details>
  203. 							${nextItem ? nextItem.description : ''}
  204. 						</td>
  205. 						<td class="fullName">${nextItem ? nextItem.fullName : ''}</td>
  206. 						<td class="item">${nextItem2 ? i + 41 : ''}</td>
  207. 						<td class="tag">
  208. 							${nextItem2 ? nextItem2.tag : ''}
  209. 							<details>
  210. 								<summary></summary>
  211. 								${nextItem2 ? nextItem2.example : ''}
  212. 							</details>
  213. 							${nextItem2 ? nextItem2.description : ''}
  214. 						</td>
  215. 						<td class="fullName">${nextItem2 ? nextItem2.fullName : ''}</td>
  216. 					</tr> `;
  217. 		}
  218.  
  219. 		const tableBody = document.querySelector('#html-tags-tbody');
  220. 		tableBody.innerHTML = `<table>${html}</table>`;
  221. 	</script>
  222. </body>
  223.  
  224. </html>

Perfil personal

Se ha dedicado a la investigación de tecnología durante más de 30 años y domina varios lenguajes como java, linux, javascript, php, css, etc. Ha realizado muchas contribuciones en el campo del código abierto. Estación de documentación para desarrolladores para compartir algunos problemas en el desarrollo de tecnología para referencia futura.

Mi informacion de contacto

Correo