软件开发者资料库

HTML 标签列表（功能排序）

HTML参考手册-(HTML5标准)功能排序New :HTML5新标签标签描述基础 <!DOCTYPE> 定义文档类型。<html>定义一个HTML文档<title>为文档定义一个标题<body>定义文档的主体<h1

HTML 参考手册- (HTML5 标准)

功能排序

New : HTML5 新标签

标签	描述
基础
	定义文档类型。
	定义一个 HTML 文档
</a> </td> <td>为文档定义一个标题</td> </tr> <tr> <td><a href="2203E6F6C8EFE1AF"><body></a> </td> <td>定义文档的主体</td> </tr> <tr> <td><a href="44B04D67929380AA"><h1> to <h6></a> </td> <td>定义 HTML 标题</td> </tr> <tr> <td><a href="F614F6516B3D96AA"><p></a> </td> <td>定义一个段落</td> </tr> <tr> <td><a href="9D97F6E1C7CAF5E9"><br></a> </td> <td>定义简单的折行。</td> </tr> <tr> <td><a href="822BC1C9802BFD06"><hr></a> </td> <td>定义水平线。</td> </tr> <tr> <td><a href="BB8FC7E3EB1030CF"><!--...--></a> </td> <td>定义一个注释</td> </tr> <tr> <td><strong>格式</strong> </td> <td> </td> </tr> <tr> <td><a href="6E06AA9D1D46C3B1"><acronym></a> </td> <td><span class="deprecated">HTML5不再支持。</span> 定义只取首字母的缩写。</td> </tr> <tr> <td><a href="9831ED36381122A7"><abbr></a> </td> <td>定义一个缩写。</td> </tr> <tr> <td><a href="C807D17363A7F33E"><address></a> </td> <td>定义文档作者或拥有者的联系信息。</td> </tr> <tr> <td><a href="75B81D5E44F90E09"><b></a> </td> <td>定义粗体文本。</td> </tr> <tr> <td><a href="51D47C41605A92FC"><bdi></a><span class="new">New</span> </td> <td>允许您设置一段文本，使其脱离其父元素的文本方向设置。</td> </tr> <tr> <td><a href="65B99963E1CD6FA3"><bdo></a> </td> <td>定义文本的方向。</td> </tr> <tr> <td><a href="1EC404768A3BE632"><big></a> </td> <td><span class="deprecated">HTML5不再支持。</span> 定义大号文本。</td> </tr> <tr> <td><a href="24393063048C6C4A"><blockquote></a> </td> <td>定义块引用。</td> </tr> <tr> <td><a href="6BCD697EEACE2AE5"><center></a> </td> <td><span class="deprecated">HTML5不再支持。 HTML 4.01 已废弃。</span>定义居中文本。</td> </tr> <tr> <td><a href="13AAFB5C19D87879"><cite></a> </td> <td>定义引用(citation)。</td> </tr> <tr> <td><a href="4BE21F58324519F0"><code></a> </td> <td>定义计算机代码文本。</td> </tr> <tr> <td><a href="645D474059A15814"><del></a> </td> <td>定义被删除文本。</td> </tr> <tr> <td><a href="BED9B06EFA092E01"><dfn></a> </td> <td>定义定义项目。</td> </tr> <tr> <td><a href="604F4EBA945AFD33"><em></a> </td> <td>定义强调文本。 </td> </tr> <tr> <td><a href="1F2E2C324928FF0D"><font></a> </td> <td><span class="deprecated">HTML5不再支持。 HTML 4.01 已废弃。</span> 定义文本的字体、尺寸和颜色</td> </tr> <tr> <td><a href="DAA6D812E4CD9AF7"><i></a> </td> <td>定义斜体文本。</td> </tr> <tr> <td><a href="16028A090E5C042A"><ins></a> </td> <td>定义被插入文本。</td> </tr> <tr> <td><a href="FBD193CDB5744E46"><kbd></a> </td> <td>定义键盘文本。</td> </tr> <tr> <td><a href="C4BEE1E9A97AF11A"><mark></a><span class="new">New</span> </td> <td>定义带有记号的文本。</td> </tr> <tr> <td><a href="073C6E748E90A568"><meter></a><span class="new">New</span> </td> <td>定义度量衡。仅用于已知最大和最小值的度量。</td> </tr> <tr> <td><a href="09A4EBDA311A2A29"><pre></a> </td> <td>定义预格式文本</td> </tr> <tr> <td><a href="090112B710A140F7"><progress></a><span class="new">New</span> </td> <td>定义运行中的任务进度（进程）。</td> </tr> <tr> <td><a href="624D400388940571"><q></a> </td> <td>定义短的引用。</td> </tr> <tr> <td><a href="E57BD5A2A75CEE4E"><rp></a><span class="new">New</span> </td> <td>定义不支持 ruby 元素的浏览器所显示的内容。</td> </tr> <tr> <td><a href="312C6E0071739069"><rt></a><span class="new">New</span> </td> <td>定义字符（中文注音或字符）的解释或发音。</td> </tr> <tr> <td><a href="EF9E2985A213F1BD"><ruby></a><span class="new">New</span> </td> <td>定义 ruby 注释（中文注音或字符）。</td> </tr> <tr> <td><a href="CF4CF12FF57256A5"><s></a> </td> <td>定义加删除线的文本。</td> </tr> <tr> <td><a href="9064CF593AA1A94A"><samp></a> </td> <td>定义计算机代码样本。</td> </tr> <tr> <td><a href="3EC3080DADB9458D"><small></a> </td> <td>定义小号文本。</td> </tr> <tr> <td><a href="1A6F8698594D7C48"><strike></a> </td> <td><span class="deprecated">HTML5不再支持。 HTML 4.01 已废弃。</span> 定义加删除线的文本。</td> </tr> <tr> <td><a href="40A422861954268B"><strong></a> </td> <td>定义语气更为强烈的强调文本。</td> </tr> <tr> <td><a href="6DAE61E53724DE6E"><sub></a> </td> <td>定义下标文本。</td> </tr> <tr> <td><a href="B370D4F35A8E82F6"><sup></a> </td> <td>定义上标文本。</td> </tr> <tr> <td><a href="A0B2A2D073D0EABB"><time></a><span class="new">New</span> </td> <td>定义一个日期/时间</td> </tr> <tr> <td><a href="6C4161EF109C0A74"><tt></a> </td> <td><span class="deprecated">HTML5不再支持。</span> 定义打字机文本。</td> </tr> <tr> <td><a href="DAF277BE48622C30"><u></a> </td> <td>定义下划线文本。</td> </tr> <tr> <td><a href="1D88A183D0C92F8A"><var></a> </td> <td>定义文本的变量部分。</td> </tr> <tr> <td><a href="7BE0A77CC67D0C7B"><wbr></a><span class="new">New</span> </td> <td>规定在文本中的何处适合添加换行符。</td> </tr> <tr> <td><strong>表单</strong> </td> <td> </td> </tr> <tr> <td><a href="14164EA2FAB4E5E7"><form></a> </td> <td>定义一个 HTML 表单，用于用户输入。</td> </tr> <tr> <td><a href="612BF4F7D9499CE0"><input></a> </td> <td>定义一个输入控件</td> </tr> <tr> <td><a href="E63281893ED50D32"><textarea></a> </td> <td>定义多行的文本输入控件。</td> </tr> <tr> <td><a href="42061D1BEB08574B"><button></a> </td> <td>定义按钮。</td> </tr> <tr> <td><a href="1E4434221C5BE614"><select></a> </td> <td>定义选择列表（下拉列表）。</td> </tr> <tr> <td><a href="1150225AE347A768"><optgroup></a> </td> <td>定义选择列表中相关选项的组合。</td> </tr> <tr> <td><a href="C0A7B5D9FC152326"><option></a> </td> <td>定义选择列表中的选项。</td> </tr> <tr> <td><a href="4053D7B4BD00226F"><label></a> </td> <td>定义 input 元素的标注。</td> </tr> <tr> <td><a href="F643D674B67B7081"><fieldset></a> </td> <td>定义围绕表单中元素的边框。</td> </tr> <tr> <td><a href="F5394AB7A303D2E3"><legend></a> </td> <td>定义 fieldset 元素的标题。</td> </tr> <tr> <td><a href="3B5768C30970DEEE"><datalist></a><span class="new">New</span> </td> <td>规定了 input 元素可能的选项列表。</td> </tr> <tr> <td><a href="855D7533C88B4FC4"><keygen></a><span class="new">New</span> </td> <td>规定用于表单的密钥对生成器字段。</td> </tr> <tr> <td><a href="C8DD20770B907738"><output></a><span class="new">New</span> </td> <td>定义一个计算的结果</td> </tr> <tr> <td><strong>框架</strong> </td> <td> </td> </tr> <tr> <td><a href="87CDC1E2D149A370"><frame></a> </td> <td><span class="deprecated">HTML5不再支持。</span> 定义框架集的窗口或框架。</td> </tr> <tr> <td><a href="5A8F862A9CED0FDF"><frameset></a> </td> <td><span class="deprecated">HTML5不再支持。</span>定义框架集。</td> </tr> <tr> <td><a href="569136797DD59376"><noframes></a> </td> <td><span class="deprecated">HTML5不再支持。</span> 定义针对不支持框架的用户的替代内容。</td> </tr> <tr> <td><a href="E4215FE9364F43D1"><iframe></a> </td> <td>定义内联框架。</td> </tr> <tr> <td><strong>图像</strong> </td> <td> </td> </tr> <tr> <td><a href="BC2BFEB430B79502"><img></a> </td> <td>定义图像。</td> </tr> <tr> <td><a href="980F1F9FBF195FCD"><map></a> </td> <td>定义图像映射。</td> </tr> <tr> <td><a href="87AE0C88E1C25D60"><area></a> </td> <td>定义图像地图内部的区域。</td> </tr> <tr> <td><a href="135563D1D47020E6"><canvas></a><span class="new">New</span> </td> <td>通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。</td> </tr> <tr> <td><a href="A49700FA2A5EB874"><figcaption></a><span class="new">New</span> </td> <td>定义一个 caption for a <figure> element</td> </tr> <tr> <td><a href="E9CEB8B160683A56"><figure></a><span class="new">New</span> </td> <td>figure 标签用于对元素进行组合。</td> </tr> <tr> <td><strong>Audio/Video</strong> </td> <td> </td> </tr> <tr> <td><a href="D541B644C2F8A859"><audio></a><span class="new">New</span> </td> <td>定义声音，比如<a href="http://www.rssso.com/news/list/81/1" target="_blank">音乐</a>或其他音频流。</td> </tr> <tr> <td><a href="EAA379BDE9A50722"><source></a><span class="new">New</span> </td> <td>定义media元素 (<video> 和 <audio>)的媒体资源。media</td> </tr> <tr> <td><a href="573B284FE914E9F0"><track></a><span class="new">New</span> </td> <td>为媒体(<video> 和 <audio>)元素定义外部文本轨道。</td> </tr> <tr> <td><a href="7732BC2086696291"><video></a><span class="new">New</span> </td> <td>定义一个音频或者<a href="http://www.rssso.com" target="_blank">视频</a></td> </tr> <tr> <td><strong>链接</strong> </td> <td> </td> </tr> <tr> <td><a href="9A8DA5D87D098AD8"><a></a> </td> <td>定义一个链接</td> </tr> <tr> <td><a href="C8D796EF475601E5"><link></a> </td> <td>定义文档与外部资源的关系。</td> </tr> <tr> <td><a href="BA53D29A65C3BC50"><nav></a><span class="new">New</span> </td> <td>定义导航链接</td> </tr> <tr> <td><strong>列表</strong> </td> <td> </td> </tr> <tr> <td><a href="EE41C194990083FD"><ul></a> </td> <td>定义一个无序列表</td> </tr> <tr> <td><a href="AF166E543193F517"><ol></a> </td> <td>定义一个有序列表</td> </tr> <tr> <td><a href="D14441221B4CAABE"><li></a> </td> <td>定义一个列表项</td> </tr> <tr> <td><a href="3031ABAF2DA07FD8"><dir></a> </td> <td><span class="deprecated">HTML5不再支持。 HTML 4.01 已废弃。</span> 定义目录列表。</td> </tr> <tr> <td><a href="71937F04C0BAF9AF"><dl></a> </td> <td>定义一个定义列表</td> </tr> <tr> <td><a href="0E7E1826BB988681"><dt></a> </td> <td>定义一个定义定义列表中的项目。</td> </tr> <tr> <td><a href="D0CB27F2D838F233"><dd></a> </td> <td>定义定义列表中项目的描述。</td> </tr> <tr> <td><a href="4BA768A201B3890F"><menu></a> </td> <td>定义菜单列表。</td> </tr> <tr> <td><a href="E1544A9F6DE5B57F"><command></a><span class="new">New</span> </td> <td>定义用户可能调用的命令（比如单选按钮、复选框或按钮）。</td> </tr> <tr> <td><strong>表格</strong> </td> <td> </td> </tr> <tr> <td><a href="D65593A0310051FA"><table></a> </td> <td>定义一个表格</td> </tr> <tr> <td><a href="1AC2AD586696500D"><caption></a> </td> <td>定义表格标题。</td> </tr> <tr> <td><a href="B31127C9F516F515"><th></a> </td> <td>定义表格中的表头单元格。</td> </tr> <tr> <td><a href="1A1DFBFE7ADE92AE"><tr></a> </td> <td>定义表格中的行。</td> </tr> <tr> <td><a href="DBBE401578163B45"><td></a> </td> <td>定义表格中的单元。</td> </tr> <tr> <td><a href="33B72AAE68B26923"><thead></a> </td> <td>定义表格中的表头内容。</td> </tr> <tr> <td><a href="B7BDD7DB36EA9F93"><tbody></a> </td> <td>定义表格中的主体内容。</td> </tr> <tr> <td><a href="214E5DED41D23A69"><tfoot></a> </td> <td>定义表格中的表注内容（脚注）。</td> </tr> <tr> <td><a href="9EC76CB7A9D60ABD"><col></a> </td> <td>定义表格中一个或多个列的属性值。</td> </tr> <tr> <td><a href="0AA0F8ACA37C94D0"><colgroup></a> </td> <td>定义表格中供格式化的列组。</td> </tr> <tr> <td><strong>样式/节</strong> </td> <td> </td> </tr> <tr> <td><a href="6E550ECEEFC9D64E"><style></a> </td> <td>定义文档的样式信息。</td> </tr> <tr> <td><a href="E5923CEE2F53C1C5"><div></a> </td> <td>定义文档中的节。</td> </tr> <tr> <td><a href="0D32BD9D06D81FAC"><span></a> </td> <td>定义文档中的节。</td> </tr> <tr> <td><a href="BCE38EC8424383F1"><header></a><span class="new">New</span> </td> <td>定义一个文档头部部分</td> </tr> <tr> <td><a href="94EB9A7E4DC63F75"><footer></a><span class="new">New</span> </td> <td>定义一个文档底部</td> </tr> <tr> <td><a href="05E759DD6F6D12FA"><section></a><span class="new">New</span> </td> <td>定义了文档的某个区域</td> </tr> <tr> <td><a href="A7B78DB6AFF5DFF9"><article></a><span class="new">New</span> </td> <td>定义一个文章内容</td> </tr> <tr> <td><a href="3F42F8A0E1D875CE"><aside></a><span class="new">New</span> </td> <td>定义其所处内容之外的内容。</td> </tr> <tr> <td><a href="856EFB9408237C9F"><details></a><span class="new">New</span> </td> <td>定义了用户可见的或者隐藏的需求的补充细节。</td> </tr> <tr> <td><a href="A6F9E04EB4C2EE9E"><dialog></a><span class="new">New</span> </td> <td>定义一个对话框或者窗口</td> </tr> <tr> <td><a href="E6D06562CDD4DB49"><summary></a><span class="new">New</span> </td> <td>定义一个可见的标题。当用户点击标题时会显示出详细信息。</td> </tr> <tr> <td><strong>元信息</strong> </td> <td> </td> </tr> <tr> <td><a href="91209239F79AA00F"><head></a> </td> <td>定义关于文档的信息</td> </tr> <tr> <td><a href="B7D10FFCAE3163DD"><meta></a> </td> <td>定义关于 HTML 文档的元信息。</td> </tr> <tr> <td><a href="3ED8745C0A701FFF"><base></a> </td> <td>定义页面中所有链接的默认地址或默认目标。</td> </tr> <tr> <td><a href="9D1A5F9A5B8ED9DB"><basefont></a> </td> <td><span class="deprecated">HTML5不再支持。 HTML 4.01 已废弃。</span>定义页面中文本的默认字体、颜色或尺寸。</td> </tr> <tr> <td><strong>程序</strong> </td> <td> </td> </tr> <tr> <td><a href="AA88273F06F5990C"><script></a> </td> <td>定义客户端脚本。</td> </tr> <tr> <td><a href="695B9F8978DF2972"><noscript></a> </td> <td>定义针对不支持客户端脚本的用户的替代内容。</td> </tr> <tr> <td><a href="93A09AC7CF734206"><applet></a> </td> <td><span class="deprecated">HTML5不再支持。 HTML 4.01 已废弃。</span> 定义嵌入的 applet。</td> </tr> <tr> <td><a href="EBE90E8BAFAE2F5B"><embed></a><span class="new">New</span> </td> <td>定义了一个容器，用来嵌入外部应用或者互动程序（插件）。</td> </tr> <tr> <td><a href="2117E2CA4897BEB4"><object></a> </td> <td>定义嵌入的对象。</td> </tr> <tr> <td><a href="75D29FC820414217"><param></a> </td> <td>定义对象的参数。</td> </tr> </tbody> </table></div> </div> </article> </div> </div> </ggg> <aside class="d-none d-lg-block col-lg-2"> <section> <div class=""> <form action="/helpdoc/Search" target="_blank" autocomplete="off"> <div class="input-group"> <input type="text" name="kw" value="" class="form-control" placeholder="输入关键词搜索"> <button class="btn btn-outline-secondary" type="submit">搜索</button> </div> </form> </div> <div class="list-group-item-heading mt-2"> <h4>推荐阅读</h4> </div> <ul class="list-group mb-2 sticky-top"> <li class="list-group-item"> <a href="/detail/2022/1104/1C651E7C445584BD" class="w-100 d-inline-block text-truncate" title=".Net(C#)自动属性提供默认值的方法" target="_blank"> .Net(C#)自动属性提供默认值的方法 </a> </li> <li class="list-group-item"> <a href="/detail/2022/1104/A2E225CB2453AAB1" class="w-100 d-inline-block text-truncate" title="Python2 和Python3 面向对象区别" target="_blank"> Python2 和Python3 面向对象区别 </a> </li> <li class="list-group-item"> <a href="/detail/2022/1107/81EB48EE9A1C5E91" class="w-100 d-inline-block text-truncate" title="Java.util.PropertyResourceBundle类" target="_blank"> Java.util.PropertyResourceBundle类 </a> </li> <li class="list-group-item"> <a href="/detail/2022/1108/1C6B8D175276F0CD" class="w-100 d-inline-block text-truncate" title="使用Ruby的JSON" target="_blank"> 使用Ruby的JSON </a> </li> <li class="list-group-item"> <a href="/detail/2022/1108/26D1D9594CEAAF4F" class="w-100 d-inline-block text-truncate" title="java.lang.reflect - 数组类" target="_blank"> java.lang.reflect - 数组类 </a> </li> <li class="list-group-item"> <a href="/detail/2022/1108/F00FC217B3C08BB2" class="w-100 d-inline-block text-truncate" title="BabylonJS - 视差映射" target="_blank"> BabylonJS - 视差映射 </a> </li> <li class="list-group-item"> <a href="/detail/2022/1108/B4A506B05AC027D9" class="w-100 d-inline-block text-truncate" title="Laravel - 错误和记录" target="_blank"> Laravel - 错误和记录 </a> </li> <li class="list-group-item"> <a href="/detail/2022/1108/78E590CE57E73CD0" class="w-100 d-inline-block text-truncate" title="Consul - 介绍" target="_blank"> Consul - 介绍 </a> </li> <li class="list-group-item"> <a href="/detail/2022/1108/7E432EF0DB603836" class="w-100 d-inline-block text-truncate" title="Puppet - 清单文件" target="_blank"> Puppet - 清单文件 </a> </li> <li class="list-group-item"> <a href="/detail/2022/1108/851A7C1F6A2AB48B" class="w-100 d-inline-block text-truncate" title="SAS - 环境" target="_blank"> SAS - 环境 </a> </li> <li class="list-group-item"> <a href="/detail/2022/1108/FF40A6634FEFA73B" class="w-100 d-inline-block text-truncate" title="Tableau - 重命名工作表" target="_blank"> Tableau - 重命名工作表 </a> </li> <li class="list-group-item"> <a href="/detail/2022/1108/159571BE1DA1FFDD" class="w-100 d-inline-block text-truncate" title="Hive Drop Table" target="_blank"> Hive Drop Table </a> </li> <li class="list-group-item"> <a href="/detail/2022/1108/F2CB5630CF2E9EF3" class="w-100 d-inline-block text-truncate" title="Python 3 - 模块" target="_blank"> Python 3 - 模块 </a> </li> <li class="list-group-item"> <a href="/detail/2023/0131/C7FB1B46612F9B71" class="w-100 d-inline-block text-truncate" title="F＃代表" target="_blank"> F＃代表 </a> </li> <li class="list-group-item"> <a href="/detail/2023/0201/022F46F12B75FDBC" class="w-100 d-inline-block text-truncate" title="SQL WHERE 子句" target="_blank"> SQL WHERE 子句 </a> </li> <li class="list-group-item"> <a href="/detail/2023/0201/14992CD144912F1C" class="w-100 d-inline-block text-truncate" title="CSS 图像拼合技术" target="_blank"> CSS 图像拼合技术 </a> </li> <li class="list-group-item"> <a href="/detail/2023/0306/A874F2F0DE991431" class="w-100 d-inline-block text-truncate" title="CSS3 text-outline 属性" target="_blank"> CSS3 text-outline 属性 </a> </li> <li class="list-group-item"> <a href="/detail/2023/0413/FE54F02AC71C0683" class="w-100 d-inline-block text-truncate" title="jQuery EasyUI 拖放 – 创建拖放的购物车" target="_blank"> jQuery EasyUI 拖放 – 创建拖放的购物车 </a> </li> <li class="list-group-item"> <a href="/detail/2023/0414/374B84B40F94CF42" class="w-100 d-inline-block text-truncate" title="jQuery UI API 类别 – UI 核心" target="_blank"> jQuery UI API 类别 – UI 核心 </a> </li> <li class="list-group-item"> <a href="/detail/2023/0414/87C5205AA0DB8F29" class="w-100 d-inline-block text-truncate" title="jQuery UI API 类别 – 特效" target="_blank"> jQuery UI API 类别 – 特效 </a> </li> </ul> </section> </aside> </article> </main> </section> <footer class="footer"> <div class="container-fluid footer-widget"> <div class="container"> <div class="row"> <div class="col-12 col-md-4 col-lg-4"> <h3 class="text-start">幻海十年，专注互联网</h3> <ul class="d-flex px-0" style="text-align: left; flex-wrap: wrap"> <li class="item-3 mb-1"> <a target="_blank" href="https://wx.jonvie.com" rel="noopener noreferrer" title="几微助手"> <span>几微助手</span> </a> </li> <li class="item-3"> <a target="_blank" href="http://www.wonhero.com/" rel="noopener noreferrer" title="幻海官网"> <span>幻海官网</span> </a> </li> <li class="item-3"> <a target="_blank" href="http://www.rssso.com/" rel="noopener noreferrer" title="幻海优品"> <span>幻海优品</span> </a> </li> <li class="item-3 mb-1"> <a target="_blank" href="http://www.xct.cn" rel="noopener noreferrer" title="新彩天"> <span>新彩天</span> </a> </li> </ul> </div> <div class="col-12 col-md-4 col-lg-4"> <h3 class="text-start">关于</h3> <div class="text-start"> <span> 幻海科技成立于2009年，是一家集互联网基础技术服务、网络平台运营服务、软件产品研发、行业软件定制、自营电商平台于一体的专业互联网公司 </span> </div> </div> <div class="col-12 col-md-4 col-lg-4"> <h3 class="text-center">联系</h3> <div> <img src="http://www.jonvie.com/static/images/rightbar/QRcode.png?v=23" width="80" height="80" alt="微信公众号" /> </div> </div> </div> </div> </div> <div class="container-fluid" style="margin-top: 10px;"> <div class="row"> <div class="col-12 site-info"> <div class="item"> <a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener external nofollow noreferrer"> 粤ICP备09219857号 </a> </div> </div> <div class="item">2009-2025 Copyright Wonhero.Com All Rights Reserved</div> <div class="item">深圳幻海软件技术有限公司版权所有</div> </div> </div> </footer> <div id="toTop" style="display: none">返回顶部</div> <script src="//static.jonvie.com/wonhero/jquery/jquery.min.js"></script> <script src="//static.jonvie.com/wonhero/bootstrap/bootstrap.min.js"></script> <script> document.querySelectorAll('pre.prettyprint').forEach(el => { hljs.highlightElement(el); }); </script> <script> const total = Number("89"); let loading = document.querySelector(".loading"); loading.style.display = "none"; let currentpage = 2; let limit = 50; let isMore = total > limit; // 用于计算当前元素距离浏览器顶部距离 function getElementTop(el) { if (el.offsetParent ) { return getElementTop(el.offsetParent ) + el.offsetTop } return el.offsetTop } // 监听滚动条 document.addEventListener("scroll",init); // 临界点判断 function init(){ let scrollTop = document.body.scrollTop \|\| document.documentElement.scrollTop // 滚动条 let sidebarTop = getElementTop(document.querySelector(".sort-sidebar")); let sidebarHeight = document.querySelector(".classify").offsetHeight; if (sidebarTop + sidebarHeight < (scrollTop + document.documentElement.clientHeight) && isMore) { getSideBar(currentpage, limit) // 请求数据 } } init(); // 获取数据 function getSideBar(page, limit) { try { isMore = false; fetch(`/api/ManagerApi/GetPageArtitlesByCls?page=${page}&limit=${limit}&channel=devdoc&clsId=4A3415E9BEBA0C01`) .then(resp => resp.json()) .then(res => { if (res.Success) { isMore = (page - 1) * limit + res.Data.Item2.length < total; if (isMore) currentpage += 1; renderSidebar(res.Data.Item2); // 渲染列表 } }); } catch (e) { console.log(e, 23) } } // 渲染列表 function renderSidebar(list = []) { if (!list.length) return; let template = list.map(item => { return `<li class="list-group-item" style="border: 0px"> <a class="w-100 d-inline-block text-truncate" title="${item.ContentTitle}" href="/detail/${item.ContentID}" target="_blank"> ${item.ContentTitle} </a> </li>` }).join(""); document.querySelector(".classify").innerHTML = document.querySelector(".classify").innerHTML + template; } </script> <script> ;(()=>{ var height = $(window).height(); $(window).scroll(function() { if ($(window).scrollTop() > height) { $("#toTop").fadeIn(500); } else { $("#toTop").fadeOut(500); } }); $("#toTop").click(function() { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); })(); </script> <script> var _hmt = _hmt \|\| []; (function () { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?843cad737da0ae856cb26e84eafcd9bb"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> <script>LA.init({ id: "Jzndc69N7BtnPgpT", ck: "Jzndc69N7BtnPgpT" })</script> </body> </html>