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>
