HTML 常用标签速查表

技术文档

HTML 常用标签速查表

标签含义用途说明 HTML文档根元素所有HTML内容的根节点头部信息放置元信息，如标题、引入CSS/JS等页面内容主体所有可视内容的容器

标签含义用途说明

~
标题
最大，依次变小
段落用于段落文本换行强制换行（单标签）
水平线用于分隔内容（单标签）强调加粗语义强调，视觉加粗斜体强调表示语义上强调加粗仅视觉加粗，无语义斜体仅视觉斜体，无语义行内容器无语义，便于样式控制
区块容器无语义，用于布局划分

富文本标签

📋 列表标签
标签含义用途说明
无序列表项目前有圆点
有序列表项目前有编号
列表项用于`ul`或`ol`中
🧩 表格标签
标签含义用途说明 🔗 外部资源标签（超链接和媒体） 🧾 表单相关标签表格容器创建表格表格行一行内容表格单元格表格中的数据格表头单元格表格中的标题格表头区域分离表格头部表格主体表格主体部分表格底部表格汇总行等标签含义用途说明超链接可跳转页面或地址图片显示图片，单标签视频嵌入视频播放音频嵌入音频播放媒体资源配合或使用标签含义用途说明表单容器收集用户输入输入框类型由type决定 </code></td> <td>多行输入</td> <td>文本框</td> <td><code></code></td> <td>下拉框</td> <td>配合<code></code>使用</td> <td><code></code></td> <td>下拉项</td> <td>用于<code></code>中</td> <td><code><label></code></td> <td>标签</td> <td>表单项描述</td> <td><code><button></code></td> <td>按钮</td> <td>提交、重置或自定义行为</td> </tbody> <hr /> <h3>📦 语义化标签（HTML5）</h3> <thead> <th>标签</th> <th>含义</th> <th>用途说明</th> </thead> <tbody> <td><code></p> <header></code></td> <td>页头</td> <td>放logo、导航等</td> <td><code></p> <nav></code></td> <td>导航区域</td> <td>链接菜单等</td> <td><code></code></td> <td>主内容区域</td> <td>页面核心内容</td> <td><code></p> <section></code></td> <td>区块</td> <td>相对独立的内容区域</td> <td><code></p> <article></code></td> <td>文章</td> <td>独立内容，如文章、帖子</td> <td><code></p> <aside></code></td> <td>侧边栏</td> <td>相关信息、推荐等</td> <td><code></p> <footer></code></td> <td>页脚</td> <td>版权、声明等</td> </tbody> </div> <div class="clear"></div> <div class="article_tags"> <div class="tagcloud"> 网络标签：<a href="http://www.csdndoc.com/tag/bq" rel="tag">标签</a> <a href="http://www.csdndoc.com/tag/bg-2" rel="tag">表格</a> <a href="http://www.csdndoc.com/tag/yy-2" rel="tag">语义</a> </div> </div> </div> </div> <div> <ul class="post-navigation row"> <div class="post-previous twofifth"> 上一篇 <br> <a href="http://www.csdndoc.com/thread/1665.html" rel="prev">代码随想录算法训练营第三十天</a> </div> <div class="post-next twofifth"> 下一篇 <br> <a href="http://www.csdndoc.com/thread/1667.html" rel="next">@Subscribe@AllowConcurrentEvents解析这两个注解</a> </div> </ul> </div> <div class="article_container row box article_related"> <div class="related"> <div class="newrelated"> <h2>相关问题</h2> <ul> <li><a href="http://www.pcgg.com.cn/cj/39313.html">过年银行会调休吗</a></li> <li><a href="http://www.pcgg.com.cn/ys/43842.html">pc原神怎么调鼠标</a></li> <li><a href="http://www.pcgg.com.cn/ys/44357.html">原神星空天使怎么搭配</a></li> <li><a href="http://www.pcgg.com.cn/gpqq/10206.html">和平精英如何开麦说话(和平精英如何不开麦)</a></li> <li><a href="http://www.pcgg.com.cn/zxsy/50094.html">诛仙手游怎样更改邮箱</a></li> <li><a href="http://www.pcgg.com.cn/dxcb/59010.html">地下城堡3攻略启明</a></li> <li><a href="http://www.pcgg.com.cn/gl/2961.html">原神漂浮灵拿什么阵容打</a></li> <li><a href="http://www.pcgg.com.cn/gl/1211.html">原神是想要驯服我吗怎么完成</a></li> <li><a href="http://www.pcgg.com.cn/mhxy/60072.html">梦幻西游最省钱的职业</a></li> <li><a href="http://www.pcgg.com.cn/sygl/50585.html">白金光三周目攻略</a></li> </ul> </div> </div> </div> <div class="clear"></div> <div id="comments_box"> </div> </div> <div id="sidebar"> <div id="sidebar-follow"> <div class="search box row"> <div class="search_site"> <form id="searchform" method="get" action="http://www.csdndoc.com/index.php"> <button type="submit" value="" id="searchsubmit" class="button"><i class="fasearch">☚</i></button> <label><input type="text" class="search-s" name="s" x-webkit-speech="" placeholder="请输入搜索内容"></label> </form></div></div> <div class="widget_text widget box row widget_custom_html"><h3>公告</h3><div class="textwidget custom-html-widget"><a target="_blank" href="http://www.5d.ink/deepseek/?d=DeepseekR1_local.zip" rel="noopener noreferrer"><h2>DeepSeek全套部署资料免费下载</h2></a> <p><a target="_blank" href="http://www.5d.ink/deepseek/?d=DeepseekR1_local.zip" rel="noopener noreferrer"><img src="http://css.5d.ink/img/deep.png" alt="DeepSeekR1本地部署部署资料免费下载"></a></p><br /><br /> <a target="_blank" href="http://www.5d.ink/freefonts/?d=FreeFontsdown.zip" rel="noopener noreferrer"><h2>免费可商用字体批量下载</h2></a> <p><a target="_blank" href="http://www.5d.ink/freefonts/?d=FreeFontsdown.zip" rel="noopener noreferrer"><img src="http://css.5d.ink/img/freefont.png" alt="免费可商用字体下载"></a></p></div></div> <div class="widget box row"> <div id="tab-title"> <div class="tab"> <ul id="tabnav"> <li class="selected">猜你想看的文章</li> </ul> </div> <div class="clear"></div> </div> <div id="tab-content"> <ul> <li><a href="http://www.pcgg.com.cn/gpqq/8767.html">和平精英新版本有什么期待(和平精英更新吗?)</a></li> <li><a href="http://www.pcgg.com.cn/lol/22263.html">英雄联盟橙色碎片怎么用</a></li> <li><a href="http://www.pcgg.com.cn/lol/16828.html">今年英雄联盟全球总决赛在哪里</a></li> <li><a href="http://www.pcgg.com.cn/lol/26263.html">lol主动技能怎么释放</a></li> <li><a href="http://www.pcgg.com.cn/lol/15257.html">太lol了是什么意思</a></li> <li><a href="http://www.pcgg.com.cn/ys/33644.html">原神离别怎么获得角色</a></li> <li><a href="http://www.pcgg.com.cn/lol/25275.html">如何删除lol配装方案</a></li> <li><a href="http://www.pcgg.com.cn/lol/25092.html">英雄联盟什么英雄克制狗头</a></li> <li><a href="http://www.pcgg.com.cn/lol/30165.html">英雄联盟射手怎么设置操作</a></li> <li><a href="http://www.pcgg.com.cn/gpqq/10824.html">和平精英显示模拟器登录怎么办</a></li> </ul> </div> </div> </div> </div> </div> </div> <div class="clear"></div> <div id="footer"> <div class="container"> <div class="twothird"> </div> </div> <div class="container"> <div class="twothird"> <div class="copyright"> <p> Copyright © 2012 - 2025 <a href="http://www.csdndoc.com/"><strong>程序员档案馆</strong></a> Powered by <a href="/lists">网站分类目录</a> | <a href="/top100.php" target="_blank">精选推荐文章</a> | <a href="/sitemap.xml" target="_blank">网站地图</a> | <a href="/post/" target="_blank">疑难解答</a> <a href="https://beian.miit.gov.cn/" rel="external">京ICP备05034492号</a> </p> <p>声明：本站内容来自互联网，如信息有错误可发邮件到f_fb#foxmail.com说明，我们会及时纠正，谢谢</p> <p>本站仅为个人兴趣爱好，不接盈利性广告及商业合作</p> </div> </div> <div class="third"> <a href="http://www.xiaoboy.cn" target="_blank">小男孩</a> </div> </div> </div>  <div id="tbox"> <a id="home" href="http://www.csdndoc.com" title="返回首页"><i class="fa fa-gohome"></i></a> <a id="pinglun" href="#comments_box" title="前往评论"><i class="fa fa-commenting"></i></a> <a id="gotop" href="javascript:void(0)" title="返回顶部"><i class="fa fa-chevron-up"></i></a> </div> <script src="//css.5d.ink/body5.js" type="text/javascript"></script> <script> function isMobileDevice() { return /Mobi/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent) || /iPhone|iPad|iPod/i.test(navigator.userAgent) || /Windows Phone/i.test(navigator.userAgent); } // 加载对应的 JavaScript 文件 if (isMobileDevice()) { var script = document.createElement('script'); script.src = '//css.5d.ink/js/menu.js'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } </script> <script> $(document).ready(function() { $("#sidebar-follow").pin({ containerSelector: ".main-container", padding: {top:64}, minWidth: 768 }); $(".mainmenu").pin({ containerSelector: ".container", padding: {top:0} }); $(".swipebox").swipebox(); }); </script> </body></html>