HTML 标签简写及全称:表格内容将通过JavaScript动态生成

最新推荐文章于 2024-09-09 18:35:55 发布

与妖为邻

最新推荐文章于 2024-09-09 18:35:55 发布

阅读量281

点赞数 2

文章标签： javascript 前端 HTML 标签 JS动态生成表格

本文链接：https://blog.csdn.net/lulei5153/article/details/140303860

版权

<!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;
		}

		table.reference th {
			background-color: #555;
			color: #ebf704;
			border: 1px solid #555;
			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;

			&:hover {
				color: rgb(255, 250, 250);
				/* background-color: rgb(191, 210, 255); */
				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) {
			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>标签</th>
						<th>英文全称</th>
						<th>中文说明</th>
					</tr>
				</thead>
				<tbody>
					<!-- 表格内容将通过JavaScript动态生成 -->
				</tbody>
			</table>
		</div>
	</div>
	<script>
		const tagsData = [
			{ tag: 'a', fullName: 'Anchor', description: '锚' },
			{ tag: 'abbr', fullName: 'Abbreviation', description: '缩写词' },
			{ tag: 'acronym', fullName: 'Acronym', description: '取首字母的缩写词' },
			{ tag: 'address', fullName: 'Address', description: '地址' },
			{ tag: 'alt', fullName: 'alter', description: '替用(一般是图片显示不出的提示)' },
			{ tag: 'b', fullName: 'Bold', description: '粗体（文本）' },
			{ tag: 'bdo', fullName: 'Bi-Directional Override', description: '文本显示方向' },
			{ tag: 'big', fullName: 'Big', description: '变大（文本）' },
			{ tag: 'blockquote', fullName: 'Block Quotation', description: '区块引用语' },
			{ tag: 'br', fullName: 'Break', description: '换行' },
			{ tag: 'cell', fullName: 'cell', description: '巢' },
			{ tag: 'cellpadding', fullName: 'cellpadding', description: '巢补白' },
			{ tag: 'cellspacing', fullName: 'cellspacing', description: '巢空间' },
			{ tag: 'center', fullName: 'Centered', description: '居中（文本）' },
			{ tag: 'cite', fullName: 'Citation', description: '引用' },
			{ tag: 'code', fullName: 'Code', description: '源代码（文本）' },
			{ tag: 'dd', fullName: 'Definition Description', description: '定义描述' },
			{ tag: 'del', fullName: 'Deleted', description: '删除（的文本）' },
			{ tag: 'dfn', fullName: 'Defines a Definition Term', description: '定义定义条目' },
			{ tag: 'div', fullName: 'Division', description: '分隔' },
			{ tag: 'dl', fullName: 'Definition List', description: '定义列表' },
			{ tag: 'dt', fullName: 'Definition Term', description: '定义术语' },
			{ tag: 'em', fullName: 'Emphasized', description: '加重（文本）' },
			{ tag: 'font', fullName: 'Font', description: '字体' },
			{ tag: 'h1~h6', fullName: 'Header 1 to Header 6', description: '标题1到标题6' },
			{ tag: 'hr', fullName: 'Horizontal Rule', description: '水平尺' },
			{ tag: 'href', fullName: 'hypertext reference', description: '超文本引用' },
			{ tag: 'i', fullName: 'Italic', description: '斜体（文本）' },
			{ tag: 'iframe', fullName: 'Inline frame', description: '定义内联框架' },
			{ tag: 'ins', fullName: 'Inserted', description: '插入（的文本）' },
			{ tag: 'kbd', fullName: 'Keyboard', description: '键盘（文本）' },
			{ tag: 'li', fullName: 'List Item', description: '列表项目' },
			{ tag: 'nl', fullName: 'navigation lists', description: '导航列表' },
			{ tag: 'ol', fullName: 'Ordered List', description: '排序列表' },
			{ tag: 'optgroup', fullName: 'Option group', description: '定义选项组' },
			{ tag: 'p', fullName: 'Paragraph', description: '段落' },
			{ tag: 'pre', fullName: 'Preformatted', description: '预定义格式（文本 ）' },
			{ tag: 'q', fullName: 'Quotation', description: '引用语' },
			{ tag: 'rel', fullName: 'Reload', description: '加载' },
			{ tag: 's/ strike', fullName: 'Strikethrough', description: '删除线' },
			{ tag: 'samp', fullName: 'Sample', description: '示例（文本' },
			{ tag: 'small', fullName: 'Small', description: '变小（文本）' },
			{ tag: 'span', fullName: 'Span', description: '范围' },
			{ tag: 'src', fullName: 'Source', description: '源文件链接' },
			{ tag: 'strong', fullName: 'Strong', description: '加重（文本）' },
			{ tag: 'sub', fullName: 'Subscripted', description: '下标（文本）' },
			{ tag: 'sup', fullName: 'Superscripted', description: '上标（文本）' },
			{ tag: 'td', fullName: 'table data cell', description: '表格中的一个单元格' },
			{ tag: 'th', fullName: 'table header cell', description: '表格中的表头' },
			{ tag: 'tr', fullName: 'table row', description: '表格中的一行' },
			{ tag: 'tt', fullName: 'Teletype', description: '打印机（文本）' },
			{ tag: 'u', fullName: 'Underlined', description: '下划线（文本）' },
			{ tag: 'ul', fullName: 'Unordered List', description: '不排序列表' },
			{ tag: 'var', fullName: 'Variable', description: '变量（文本）' }
		];

		const tableBody = document.querySelector('#html-tags-table tbody');
		tagsData.forEach((tagInfo, index) => {
			const row = document.createElement('tr');
			row.innerHTML = `
                <td>${index + 1}</td>
                <td>${tagInfo.tag}</td>
                <td>${tagInfo.fullName}</td>
                <td>${tagInfo.description}</td>
            `;
			tableBody.appendChild(row);
		});
	</script>
</body>

</html>