我是靠谱客的博主 谨慎跳跳糖,最近开发中收集的这篇文章主要介绍HTML5元素类型,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

今天在读《HTML5权威指南》的时候接触到了HTML元素种类的问题:

“HTML5规范将元素分为三大类:元数据元素(metadata element)、流元素(flow element)、和短语元素(parsing element)。”

乍一看上面一段话,一时半会还不能从字面理解这三种元素的含义。后来我查阅了HTML5规范的官方文档

HTML Standardicon-default.png?t=M0H8https://html.spec.whatwg.org/multipage/syntax.html发现官方权威的分类似乎和书上说的不一致:

There are six different kinds of elements: void elements, the template element, raw text elements, escapable raw text elements, foreign elements, and normal elements.

尽力翻译一下:

(在HTML5中)有六种不同的元素:空元素、模板元素、原始文本元素、可逃逸原始文本元素(这个真不知道咋翻,有没有兄弟指点一下谢谢)、外国元素和普通元素。

这六种元素的介绍大家可以通过以上链接获取,我复述不会比人家官网讲的清楚。

但至于元数据元素、流元素和短语元素,我在百度找到一个很贴切的解释:

什么是HTML5的流元素_百度知道https://zhidao.baidu.com/question/746872579592282052.html

最后

以上就是谨慎跳跳糖为你收集整理的HTML5元素类型的全部内容,希望文章能够帮你解决HTML5元素类型所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(59)

相关文章

html常用语义化元素和全局属性整理WWW<HTML>元素全局属性<id>全局属性<class>全局属性<title>全局属性<lang>全局属性标签与元素<link>外部资源链接元素<a>内联元素<artice>块级元素<section>块级元素<nav>块级元素<aside>块级元素<h1~h6>块级元素<header>块级元素<footer>块级元素<address>块级元素<p>块级元素<hr>块级元素<pre>块级元素<blockquote>块级元素<ol>块级元素<ul>块级元素<l
html常用语义化元素和全局属性整理WWW元素全局属性全局属性全局属性全局属性<lang>全局属性标签与元素<link>外部资源链接元素<a>内联元素<artice>块级元素<section>块级元素<nav>块级元素<aside>块级元素<h1~h6>块级元素<header>块级元素<footer>块级元素<address>块级元素<p>块级元素<hr>块级元素<pre>块级元素<blockquote>块级元素<ol>块级元素<ul>块级元素<l</a></h5> </div> <div class="col-sm-3 col-xs-6"> <a href="/article/k-p-k_14_uzo_6_fx_13_z_2_5.html" class="img-zoom"> <div class="embed-responsive embed-responsive-4by3"> <img src="/uploads/reation/bcimg6.png" alt="HTML5学习笔记-常用标记" class="embed-responsive-item"> </div> </a> <h5 class="text-center"><a href="/article/k-p-k_14_uzo_6_fx_13_z_2_5.html">HTML5学习笔记-常用标记</a></h5> </div> <div class="col-sm-3 col-xs-6"> <a href="/article/k-p-k_14_uzo_6_fx_13_zcw.html" class="img-zoom"> <div class="embed-responsive embed-responsive-4by3"> <img src="/uploads/reation/bcimg7.png" alt="HTML元素的分类" class="embed-responsive-item"> </div> </a> <h5 class="text-center"><a href="/article/k-p-k_14_uzo_6_fx_13_zcw.html">HTML元素的分类</a></h5> </div> <div class="col-sm-3 col-xs-6"> <a href="/article/k-p-k_14_uzo_6_fx_13_zcx.html" class="img-zoom"> <div class="embed-responsive embed-responsive-4by3"> <img src="/uploads/reation/bcimg8.png" alt="HTML5所有常用元素和属性HTML5所有常用元素和属性" class="embed-responsive-item"> </div> </a> <h5 class="text-center"><a href="/article/k-p-k_14_uzo_6_fx_13_zcx.html">HTML5所有常用元素和属性HTML5所有常用元素和属性</a></h5> </div> <div class="col-sm-3 col-xs-6"> <a href="/article/k-p-k_14_uzo_6_fx_13_zcy.html" class="img-zoom"> <div class="embed-responsive embed-responsive-4by3"> <img src="/uploads/reation/bcimg9.png" alt="HTML5元素类型" class="embed-responsive-item"> </div> </a> <h5 class="text-center"><a href="/article/k-p-k_14_uzo_6_fx_13_zcy.html">HTML5元素类型</a></h5> </div> <div class="col-sm-3 col-xs-6"> <a href="/article/k-p-k_14_uzo_6_fx_13_zcz.html" class="img-zoom"> <div class="embed-responsive embed-responsive-4by3"> <img src="/uploads/reation/bcimg10.png" alt="H5学习笔记之元素分类" class="embed-responsive-item"> </div> </a> <h5 class="text-center"><a href="/article/k-p-k_14_uzo_6_fx_13_zcz.html">H5学习笔记之元素分类</a></h5> </div> <div class="col-sm-3 col-xs-6"> <a href="/article/k-p-k_14_uzo_6_fx_13_zc0.html" class="img-zoom"> <div class="embed-responsive embed-responsive-4by3"> <img src="/uploads/reation/bcimg11.png" alt="CSS选择器命名规则" class="embed-responsive-item"> </div> </a> <h5 class="text-center"><a href="/article/k-p-k_14_uzo_6_fx_13_zc0.html">CSS选择器命名规则</a></h5> </div> <div class="col-sm-3 col-xs-6"> <a href="/article/k-p-k_14_uzo_6_fx_13_zc1.html" class="img-zoom"> <div class="embed-responsive embed-responsive-4by3"> <img src="/uploads/reation/bcimg12.png" alt="h5元素定义" class="embed-responsive-item"> </div> </a> <h5 class="text-center"><a href="/article/k-p-k_14_uzo_6_fx_13_zc1.html">h5元素定义</a></h5> </div> <!-- E 相关文章 --> </div> </div> <div class="clearfix"></div> </div> </div> <div class="panel panel-default" id="comments"> <div class="panel-heading"> <h3 class="panel-title">评论列表<small>共有 <span>0</span> 条评论</small></h3> </div> <div class="panel-body"> <div id="comment-container"> <!-- S 发表评论 --> <div id="postcomment"> <h3>发表评论 <a href="javascript:;"> <small>取消回复</small> </a></h3> <form action="/comment/post.html" method="post" id="postform"> <input type="hidden" name="__token__" value="f7131db7ae13184a40c95b32b8932f90" /> <input type="hidden" name="type" value="archives"/> <input type="hidden" name="artid" value="351772"/> <input type="hidden" name="pid" id="pid" value="0"/> <div class="form-group"> <textarea name="content" class="form-control" disabled placeholder="请登录后再发表评论" id="commentcontent" cols="6" rows="5" tabindex="4"></textarea> </div> <div class="form-group"> <a href="/index/user/login.html" class="btn btn-primary">登录</a> <a href="/index/user/register.html" class="btn btn-outline-primary">注册新账号</a> </div> </form> </div> <!-- E 发表评论 --> </div> </div> </div> </main> <aside class="col-xs-12 col-md-4"> <!--@formatter:off--> <!-- S 关于作者 --> <div class="panel panel-default about-author no-padding" data-id="88523" itemProp="author" itemscope="" itemType="http://schema.org/Person"> <meta itemProp="name" content="谨慎跳跳糖"/> <meta itemProp="image" content="/assets/img/avatar.png"/> <meta itemProp="url" content="/u/k-p-k_12_u_23_ogf1_14_j_14__27_.html"/> <div class="panel-body no-padding"> <div class="author-card"> <div class="author-head" style="background-image:url('/assets/img/author-head.jpeg');"></div> <div class="author-avatar"> <a href="/u/k-p-k_12_u_23_ogf1_14_j_14__27_.html"> <img src="/assets/img/avatar.png"> </a> </div> <div class="author-basic"> <div class="author-nickname"> <a href="/u/k-p-k_12_u_23_ogf1_14_j_14__27_.html">谨慎跳跳糖</a> </div> <span class="text-muted"></span> </div> <div class="row author-statistics"> <div class="col-xs-4"> <div class="statistics-text">文章</div> <div class="statistics-nums"><a href="/u/k-p-k_12_u_23_ogf1_14_j_14__27_.html">4</a></div> </div> <div class="col-xs-4"> <div class="statistics-text">资源</div> <div class="statistics-nums"><a href="/u/k-p-k_12_u_23_ogf1_14_j_14__27_.html?type=soft">0</a></div> </div> <div class="col-xs-4"> <div class="statistics-text">加入时间</div> <div class="statistics-nums">3年前</div> </div> </div> </div> </div> </div> <!-- E 关于作者 --> <!--@formatter:on--> <div class="panel panel-blockimg"> </div> <!-- S 热门文章 --> <div class="panel panel-default hot-article"> <div class="panel-heading"> <h3 class="panel-title">热门文章</h3> </div> <div class="panel-body"> <div class="media media-number"> <div class="media-left"> <span class="num tag">1</span> </div> <div class="media-body"> <a class="link-dark" href="/article/k-p-k_14_uzokf0_14_z_6__27_.html" title="Maya怎么设计逼真的Trooper轻骑兵模型?">Maya怎么设计逼真的Trooper轻骑兵模型?</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">2</span> </div> <div class="media-body"> <a class="link-dark" href="/article/k-p-k_14_u_7_o_14_fy_12__23__14_y.html" title="菜鸟必备:3dsMax的10种贴图方法">菜鸟必备:3dsMax的10种贴图方法</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">3</span> </div> <div class="media-body"> <a class="link-dark" href="/article/k-p-k_14_ujogfy_13_j_2_z.html" title="28335的EPWM模块学习一、首先从时基模块开始TB 二、比较模块CB 三、动作模块AQ 四、死区模块DB 五、斩控控制模块PC 六、故障保护TZ模块 七、事件触发模块ET 八、高精度PWM配置寄存器HRCNFG 九、计数比较A高精度寄存器">28335的EPWM模块学习一、首先从时基模块开始TB 二、比较模块CB 三、动作模块AQ 四、死区模块DB 五、斩控控制模块PC 六、故障保护TZ模块 七、事件触发模块ET 八、高精度PWM配置寄存器HRCNFG 九、计数比较A高精度寄存器</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">4</span> </div> <div class="media-body"> <a class="link-dark" href="/article/k-p-k_14_uzo_6_fx_13_zcy.html" title="HTML5元素类型">HTML5元素类型</a> </div> </div> </div> </div> <!-- E 热门文章 --> <!-- S 热门资讯 --> <div class="panel panel-default hot-article"> <div class="panel-heading"> <h3 class="panel-title">推荐资讯</h3> </div> <div class="panel-body"> <div class="media media-number"> <div class="media-left"> <span class="num tag">1</span> </div> <div class="media-body"> <a class="link-dark" href="/news/k-p-k_13_uzo_26_fx_13__7__18__27_.html" title="儿子游戏充值 母亲气上20米高压电塔:网友称应理智处理情绪">儿子游戏充值 母亲气上20米高压电塔:网友称应理智处理情绪</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">2</span> </div> <div class="media-body"> <a class="link-dark" href="/news/k-p-k_13_uzo_26_fx_13__7__22__27_.html" title="电动自行车强制性国家标准正式发布:要求具备北斗定位、不再强制脚踏">电动自行车强制性国家标准正式发布:要求具备北斗定位、不再强制脚踏</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">3</span> </div> <div class="media-body"> <a class="link-dark" href="/news/k-p-k_13_uzo_26_fx_13__7__26__27_.html" title="《射雕英雄传:侠之大者》定档:黄晓明说大年初一去看郭伯伯">《射雕英雄传:侠之大者》定档:黄晓明说大年初一去看郭伯伯</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">4</span> </div> <div class="media-body"> <a class="link-dark" href="/news/k-p-k_13_uzo_26_fx_13__23_k_27_.html" title="萌娃参加父母婚礼说我就是贵子 发言逗乐全场">萌娃参加父母婚礼说我就是贵子 发言逗乐全场</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">5</span> </div> <div class="media-body"> <a class="link-dark" href="/news/k-p-k_13_uzo_26_fx_13__23_g_27_.html" title="苹果高开低走 调查显示大部分iPhone用户对苹果AI不感兴趣">苹果高开低走 调查显示大部分iPhone用户对苹果AI不感兴趣</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">6</span> </div> <div class="media-body"> <a class="link-dark" href="/news/k-p-k_13_uzo_26_fx_13__23_c_27_.html" title="国内AI初创企业MiniMax被爱奇艺起诉索赔!被指侵犯版权">国内AI初创企业MiniMax被爱奇艺起诉索赔!被指侵犯版权</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">7</span> </div> <div class="media-body"> <a class="link-dark" href="/news/k-p-k_13_uzo_26_fx_13__23__2__27_.html" title="479元起!玄派玄熊猫PD100M机械键盘上市:全铝机身、标配旋钮屏幕">479元起!玄派玄熊猫PD100M机械键盘上市:全铝机身、标配旋钮屏幕</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">8</span> </div> <div class="media-body"> <a class="link-dark" href="/news/k-p-k_13_uzo_26_fx_13__23__6__27_.html" title="鹿晗全平台账号被禁止关注!工作室发文道歉:直播中做出不良示范">鹿晗全平台账号被禁止关注!工作室发文道歉:直播中做出不良示范</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">9</span> </div> <div class="media-body"> <a class="link-dark" href="/news/k-p-k_13_uzo_26_fx_13__23__10__27_.html" title="大二男生滑跪送花给老师:现场瞬间沸腾">大二男生滑跪送花给老师:现场瞬间沸腾</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">10</span> </div> <div class="media-body"> <a class="link-dark" href="/news/k-p-k_13_uzo_26_fx_13__23__14__27_.html" title="i3默秒全再也看不到了!AMD:Intel如今的CPU太差劲 导致我们不愁卖">i3默秒全再也看不到了!AMD:Intel如今的CPU太差劲 导致我们不愁卖</a> </div> </div> </div> </div> <!-- E 热门资讯 --> <div class="panel panel-blockimg"> <a href="https://www.aliyun.com/daily-act/ecs/activity_selection?userCode=2qwpuaqd" rel="nofollow" title="推荐企业服务器" target="_blank"> <img src="/uploads/store/aliyun-sidebar.png" class="img-responsive" alt=""> </a> </div> <!-- S 热门标签 --> <div class="panel panel-default hot-tags"> <div class="panel-heading"> <h3 class="panel-title">热门标签</h3> </div> <div class="panel-body"> <div class="tags"> <a href="/u/k-p-k_12_u_23_ogf1_14_j_14__27_/category/k-p-k_14_uzo_18_fz_14_jky.html" class="tag"> <span>MAYA</span></a> <a href="/u/k-p-k_12_u_23_ogf1_14_j_14__27_/category/k-p-k_13_u_23_o_26_fw_13_z_6_1.html" class="tag"> <span>3DMAX教程</span></a> <a href="/u/k-p-k_12_u_23_ogf1_14_j_14__27_/category/k-p-k_13_u_7_o_14_fw_13__7__14_0.html" class="tag"> <span>28335学习</span></a> <a href="/u/k-p-k_12_u_23_ogf1_14_j_14__27_/category/k-p-k_13_u_7_okf4_12__7_c4.html" class="tag"> <span>html5</span></a> </div> </div> </div> <!-- E 热门标签 --> <!-- S 推荐下载 --> <div class="panel panel-default recommend-article"> <div class="panel-heading"> <h3 class="panel-title">推荐下载</h3> </div> <div class="panel-body"> <div class="media media-number"> <div class="media-left"> <span class="num tag">1</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_fz_12__10__27__27_.html" title="古龙风云录|中字-国语|Build.14142398-重要更新-狂雷陨落-剑破苍穹+DLC+修改器|解压即玩">古龙风云录|中字-国语|Build.14142398-重要更新-狂雷陨落-剑破苍穹+DLC+修改器|解压即玩</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">2</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_fz_13__10__27__27_.html" title="1012部SWITCH作品合集(阿里云盘|)">1012部SWITCH作品合集(阿里云盘|)</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">3</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_f0_14__26__27__27_.html" title="三国真龙传|官方中文|Build.15084242-重要更新-古剑掠影-龙啸九天|解压即玩">三国真龙传|官方中文|Build.15084242-重要更新-古剑掠影-龙啸九天|解压即玩</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">4</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_fz_12__26__27__27_.html" title="超级机器人大战系列 (T/V/X) 港版 中文 整合版 XCI">超级机器人大战系列 (T/V/X) 港版 中文 整合版 XCI</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">5</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_fz_13__26__27__27_.html" title="3DS中文游戏全集CIA(官中+汉化)(275个打包下载)">3DS中文游戏全集CIA(官中+汉化)(275个打包下载)</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">6</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_fz_13_w_27__27_.html" title="PS3中文 游戏全集(官中+汉化)(257个)">PS3中文 游戏全集(官中+汉化)(257个)</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">7</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_f0_14__10__27__27_.html" title="Clash for windows版本">Clash for windows版本</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">8</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_f0_14_w_27__27_.html" title="AE或PR 启动不了桌面弹出 Crash缺失 文件">AE或PR 启动不了桌面弹出 Crash缺失 文件</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">9</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_fz_13_g_27__27_.html" title="PSV中文 游戏全集(官中+汉化)(479个)">PSV中文 游戏全集(官中+汉化)(479个)</a> </div> </div> <div class="media media-number"> <div class="media-left"> <span class="num tag">10</span> </div> <div class="media-body"> <a href="/soft/k-p-k_12_u_7_o_10_f0_14_g_27__27_.html" title="After Effects 2018版软件下载">After Effects 2018版软件下载</a> </div> </div> </div> </div> <!-- E 推荐下载 --> <div class="panel panel-blockimg"> <a href="/" target="_blank"><img src="/uploads/store/enterprisehost.png" class="img-responsive"/></a> </div> <div class="panel panel-blockimg"> <!-- You may also like --> </div> </aside> </div> </div> </main> <footer> <!-- S 底部版权 --> <div id="footer"> <div class="container"> <div class="row footer-inner"> <div class="col-xs-12"> <div class="pull-left"> <p>网站内容,均来自于用户原创和互联网,若有侵犯到您的权益请联系我们,核实删除。</p> <p>本站为非营利性网站,靠谱客的资源均来自网络收集整理,个人纯属学习交流之用,如有侵犯您的版权请与我联系(wx:kaopuke),我们会马上改正并在下载24小时内删除!</p> <p>Copyright © 2023 All Rights Reserved. <a href="https://beian.miit.gov.cn" rel="nofollow" target="_blank">黔ICP备17011320号-2</a> <a href="https://beian.mps.gov.cn/#/query/webSearch?code=52272602002071" rel="noreferrer" target="_blank">贵公网安备52272602002071</a></p> </div> </div> </div> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?e749fb7b04b857116f3a8b682641b74d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <!-- E 底部版权 --> </footer> <div id="floatbtn"> <!-- S 浮动按钮 --> <a class="hover" href="/index/user/addarticle.html" target="_blank"> <i class="fa fa-paint-brush fa-lg"></i> <em>立即<br>投稿</em> </a> <div class="floatbtn-item floatbtn-share"> <i class="fa fa-share-alt fa-lg"></i> <div class="floatbtn-wrapper" style="height:50px;top:0"> <div class="social-share" data-initialized="true" data-mode="prepend"> <a href="#" class="social-share-icon icon-weibo" target="_blank"></a> <a href="#" class="social-share-icon icon-qq" target="_blank"></a> <a href="#" class="social-share-icon icon-qzone" target="_blank"></a> <a href="#" class="social-share-icon icon-wechat"></a> </div> </div> </div> <a id="back-to-top" class="hover" href="javascript:;"> <i class="fa fa-reply fa-lg"></i> <em>返回<br>顶部</em> </a> <!-- E 浮动按钮 --> </div> <script type="text/javascript" src="/assets/libs/jquery/dist/jquery.min.js?v=1.0.2"></script> <script type="text/javascript" src="/assets/libs/bootstrap/dist/js/bootstrap.min.js?v=1.0.2"></script> <script type="text/javascript" src="/assets/libs/fastadmin-layer/dist/layer.js?v=1.0.2"></script> <script type="text/javascript" src="/assets/libs/art-template/dist/template-native.js?v=1.0.2"></script> <script type="text/javascript" src="/assets/js/jquery.autocomplete.js?v=1.0.2"></script> <script type="text/javascript" src="/assets/js/swiper.min.js?v=1.0.2"></script> <script type="text/javascript" src="/assets/js/share.min.js?v=1.0.2"></script> <script type="text/javascript" src="/assets/js/cms.js?v=1.0.2"></script> <script type="text/javascript" src="/assets/js/common.js?v=1.0.2"></script> <script type="text/javascript"> (window.slotbydup = window.slotbydup || []).push({ id: "u6850766", container: "_upguagn2t8", async: true }); (window.slotbydup = window.slotbydup || []).push({ id: "u6850838", container: "_12s5gcmjcvx", async: true }); </script> <script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async="async" defer="defer" ></script> <!-- 复制 --> <script src="/static/tool/clipboard.min.js"></script> <script> //代码高亮溢出显示滚动条 $('.main-content pre').each(function(){ var code = $(this).text(); $(this).wrap('<div class="auto" style="overflow:auto; position:relative;"></div>'); $(this).before('<span class="copyCode">复制代码</span><textarea style="display:none;">'+code+'</textarea>'); $(this).removeAttr("style",""); // $(this).wrap('<pre><code></code></pre>'); }); $('.main-content .codebody').each(function(){ var code = $(this).text(); $(this).wrap('<div class="auto" style="overflow:auto; position:relative;"></div>'); $(this).before('<span class="copyCode">复制代码</span><textarea style="display:none;">'+code+'</textarea>'); // $(this).wrap('<pre><code></code></pre>'); }); function unescapeSpecialChars(str) { return str .replace(/</g, '<') .replace(/>/g, '>') .replace(/&/g, '&') .replace(/ /g, ' ') .replace(/"/g, '"') .replace(/'/g, '\''); } //复制代码 $('.copyCode').on('click',function(){ var txt = $(this).next().html(); txt = unescapeSpecialChars(txt); new ClipboardJS('.copyCode', {text: function() {return txt;}}); layer.msg('复制成功',{time:1000,offset:'100px'}); }); </script> <script> document.addEventListener("DOMContentLoaded", function() { const preElements = document.querySelectorAll("pre"); // 获取所有 <pre> 元素 preElements.forEach(pre => { const codeText = pre.innerHTML.trim(); // 获取代码块的内容 const lines = codeText.split("\n").length; // 计算代码行数 // 创建行号容器 const lineNumbers = document.createElement("div"); lineNumbers.className = 'line-numbers'; // 生成行号内容 let lineNumbersHtml = ''; for (let i = 1; i <= lines; i++) { lineNumbersHtml += i + '<br>'; } // 插入行号容器到 pre 元素中 lineNumbers.innerHTML = lineNumbersHtml; pre.appendChild(lineNumbers); // 保持代码块的格式化 pre.innerHTML = `<div class="line-numbers">${lineNumbersHtml}</div>` + `<div style="padding-left:40px;">${codeText}</div>`; }); }); </script> <style> .copyCode{ position:absolute; right:1px; z-index:999; background:rgba(255,255,255,0.5); border-bottom:1px solid #ddd; padding:2px 8px; font-size:11px !important; border-radius:4px; line-height:24px; cursor:pointer; } .copyCode:hover{ background:#fff; } pre code{ font-family: consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace; } .hljs { border-radius:4px; padding: 8px !important; } .hljs-ln td { padding: 2px 8px; } .hljs-ln-numbers { text-align: center; color: #abb2bf; background-color: #282c34; border-right: 1px solid #c5c5c5; vertical-align: top; } /* for block of code */ td .hljs-ln-code { padding-left: 5px; } pre { position: relative; padding-left: 5px; /* 为行号留出空间 */ background-color: #f8f9fa; border: 1px solid #e1e1e1; border-radius: 4px; font-size: 14px; line-height: 1.5; overflow-x: auto; } /* 设置行号样式 */ pre .line-numbers { position: absolute; left: 0; top: 0; padding: 10px 10px; background-color: #f1f1f1; border-right: 1px solid #e1e1e1; text-align: right; user-select: none; color: #888; } </style> </body> </html>