← ToolBox / HTML 标签速查

🏷️ HTML 标签速查

完整 HTML5 标签参考，点击展开查看详细说明。

\n'}, {name:'noscript', cat:'脚本', desc:'无脚本时的内容', attrs:'', new:false, deprecated:false, example:''}, {name:'template', cat:'脚本', desc:'模板内容', attrs:'', new:true, deprecated:false, example:''}, {name:'slot', cat:'脚本', desc:'Web Component 插槽', attrs:'name', new:true, deprecated:false, example:''}, // 嵌入内容 {name:'iframe', cat:'嵌入内容', desc:'内联框架', attrs:'src, width, height, sandbox', new:false, deprecated:false, example:''}, {name:'embed', cat:'嵌入内容', desc:'嵌入外部内容', attrs:'src, type, width, height', new:true, deprecated:false, example:''}, {name:'object', cat:'嵌入内容', desc:'嵌入对象', attrs:'data, type, width, height', new:false, deprecated:false, example:''}, {name:'param', cat:'嵌入内容', desc:'对象参数', attrs:'name, value', new:false, deprecated:false, example:''}, {name:'video', cat:'嵌入内容', desc:'视频', attrs:'src, controls, autoplay, loop, muted, poster', new:true, deprecated:false, example:''}, {name:'audio', cat:'嵌入内容', desc:'音频', attrs:'src, controls, autoplay, loop', new:true, deprecated:false, example:''}, {name:'track', cat:'嵌入内容', desc:'字幕轨道', attrs:'src, kind, srclang, label', new:true, deprecated:false, example:''}, {name:'math', cat:'嵌入内容', desc:'MathML 数学公式', attrs:'', new:true, deprecated:false, example:'\n x=1\n'}, // 废弃标签 {name:'center', cat:'废弃', desc:'居中（已废弃）', attrs:'', new:false, deprecated:true, example:'
居中文字（不推荐使用）
'}, {name:'font', cat:'废弃', desc:'字体设置（已废弃）', attrs:'color, size, face', new:false, deprecated:true, example:'文字'}, {name:'marquee', cat:'废弃', desc:'滚动文字（已废弃）', attrs:'direction, behavior', new:false, deprecated:true, example:'滚动文字'}, {name:'frame', cat:'废弃', desc:'框架（已废弃）', attrs:'src, name', new:false, deprecated:true, example:'（已废弃，请使用 iframe）'}, {name:'frameset', cat:'废弃', desc:'框架集（已废弃）', attrs:'rows, cols', new:false, deprecated:true, example:'（已废弃）'}, {name:'noframes', cat:'废弃', desc:'无框架内容（已废弃）', attrs:'', new:false, deprecated:true, example:'不支持框架'}, {name:'big', cat:'废弃', desc:'大号文字（已废弃）', attrs:'', new:false, deprecated:true, example:'大号文字'}, {name:'tt', cat:'废弃', desc:'打字机字体（已废弃）', attrs:'', new:false, deprecated:true, example:'等宽文字'}, {name:'strike', cat:'废弃', desc:'删除线（已废弃）', attrs:'', new:false, deprecated:true, example:'删除线'}, {name:'acronym', cat:'废弃', desc:'首字母缩写（已废弃）', attrs:'', new:false, deprecated:true, example:'NATO（请用 abbr）'}, {name:'dir', cat:'废弃', desc:'目录列表（已废弃）', attrs:'', new:false, deprecated:true, example:'
  • 项目
    • （请用 ul）'}, {name:'basefont', cat:'废弃', desc:'默认字体（已废弃）', attrs:'color, size, face', new:false, deprecated:true, example:'（已废弃）'}, ]; let currentCategory = '全部'; let searchQuery = ''; let openTag = null; function getCategories(){ const cats = ['全部']; TAGS.forEach(t => { if(!cats.includes(t.cat)) cats.push(t.cat); }); return cats; } function renderCategories(){ const cats = getCategories(); document.getElementById('categoryTabs').innerHTML = cats.map(c => `
    ${c}
    ` ).join(''); document.querySelectorAll('.category-tab').forEach(t => { t.addEventListener('click', () => { currentCategory = t.dataset.cat; openTag = null; renderCategories(); renderTags(); }); }); } function renderTags(){ const q = searchQuery.toLowerCase().trim(); const filtered = TAGS.filter(t => { if(currentCategory !== '全部' && t.cat !== currentCategory) return false; if(q){ const text = `${t.name} ${t.desc} ${t.cat} ${t.attrs}`.toLowerCase(); if(!text.includes(q)) return false; } return true; }); document.getElementById('stats').textContent = `共 ${filtered.length} 个标签`; document.getElementById('tagList').innerHTML = filtered.map((t, i) => { const badge = t.deprecated ? '废弃' : t.new ? 'HTML5' : '标准'; return `
    <${t.name}> ${t.desc}
    ${badge}
    ▶
    描述：${t.desc}
    分类：${t.cat}
    属性：${t.attrs || '无'}
    HTML5 新增：${t.new ? '是' : '否'}
    是否废弃：${t.deprecated ? '是（请避免使用）' : '否'}
    示例：
    ${escapeHtml(t.example)}
    `; }).join(''); } function escapeHtml(s){ return s.replace(/&/g, '&').replace(//g, '>'); } function toggleTag(name){ openTag = openTag === name ? null : name; renderTags(); } document.getElementById('searchInput').addEventListener('input', e => { searchQuery = e.target.value; openTag = null; renderTags(); }); renderCategories(); renderTags();