HTML 是所有网页制作技术的核心和基础，也是每个网页制作者必须掌握的基本知识，而 html 标签是 html 语言中最基本的单位，是 HTML 最重要的组成部分。
初学者首先要知道 HTML 标签的一些特点：
HTML 标签是与大小写无关的，例如“
实例
P 是段落标签,HTML标签不区分大小写
意思是一样的，推荐使用小写。
尝试一下 »
注：HTML 标签对大小写不敏感，但推荐使用小写！
HTML 标签一般是成对出现的，由开始标签如
单闭合标签
字体效果
| 标签 | 功能 |
... | 标题字(最大) |
... | 标题字(最小) |
| ... | 粗体字 |
| ... | 粗体字(强调) |
| ... | 斜体字 |
| ... | 斜体字(强调) |
| ... | 斜体字(表示定义) |
| ... | 底线 |
| ... | 底线(表示插入文字) |
... | 横线 |
... | 删除线 |
... | 删除线(表示删除) |
| ... | 键盘文字 |
| ... | 打字体 |
| <![CDATA[...]]> | 固定宽度字体(在文件中空白、换行、定位功能有效) |
| <![CDATA[...</plaintext></td> <td>固定宽度字体(不执行标记符号)</td> </tr> <tr> <td><listing>...</listing></td> <td>固定宽度小字体</td> </tr> <tr> <td><font color=00ff00>...</font></td> <td>字体颜色</td> </tr> <tr> <td><font size=1>...</font></td> <td>最小字体</td> </tr> <tr> <td><font style =font-size:100 px>...</font></td> <td>无限增大</td> </tr> </tbody></table> <h2>区断标记</h2><table class="reference"> <tbody> <tr> <td> <p><strong>标签</strong> </p> </td> <td> <p><strong>功能</strong> </p> </td> </tr> <tr> <td><hr></td> <td>水平线</td> </tr> <tr> <td><hr size=9></td> <td>水平线(设定大小)</td> </tr> <tr> <td><hr width=80%></td> <td>水平线(设定宽度)</td> </tr> <tr> <td><hr color=ff0000></td> <td>水平线(设定颜色)</td> </tr> <tr> <td><br></td> <td>(换行)</td> </tr> <tr> <td><nobr>...</nobr></td> <td>水域(不换行)</td> </tr> <tr> <td><p>...</p></td> <td>水域(段落)</td> </tr> <tr> <td><center>...</center></td> <td>置中</td> </tr> </tbody></table> <h2>链接</h2><table class="reference"> <tbody> <tr> <td> <p><strong>标签</strong> </p> </td> <td> <p><strong>功能</strong> </p> </td> </tr> <tr> <td><base href=地址></td> <td>(预设好连结路径)</td> </tr> <tr> <td><a href=地址></a></td> <td>外部连结</td> </tr> <tr> <td><a href=地址 target=_blank></a></td> <td>外部连结(另开新窗口)</td> </tr> <tr> <td><a href=地址 target=_top></a></td> <td>外部连结(全窗口连结)</td> </tr> <tr> <td><a href=地址 target=页框名></a></td> <td>外部连结(在指定页框连结)</td> </tr> </tbody></table> <h2>图像/<a href="http://www.rssso.com/news/list/81/1" target="_blank">音乐</a></h2><table class="reference"> <tbody> <tr> <td> <p><strong>标签</strong> </p> </td> <td> <p><strong>功能</strong> </p> </td> </tr> <tr> <td><img src=图片地址></td> <td>贴图</td> </tr> <tr> <td><img src=图片地址 width=180></td> <td>设定图片宽度</td> </tr> <tr> <td><img src=图片地址 height=30></td> <td>设定图片高度</td> </tr> <tr> <td><img src=图片地址 alt=提示文字></td> <td>设定图片提示文字</td> </tr> <tr> <td><img src=图片地址 border=1></td> <td>设定图片边框</td> </tr> <tr> <td><bgsound src=MID<a href="http://www.rssso.com/news/list/81/1" target="_blank">音乐</a>文件地址></td> <td>背景<a href="http://www.rssso.com/news/list/81/1" target="_blank">音乐</a>设定</td> </tr> </tbody></table> <h2>表格</h2><table class="reference"> <tbody> <tr> <td> <p><strong>标签</strong> </p> </td> <td> <p><strong>功能</strong> </p> </td> </tr> <tr> <td><table align=left>...</table></td> <td>表格位置,置左</td> </tr> <tr> <td><table align=center>...</table></td> <td>表格位置,置中</td> </tr> <tr> <td><table background=图片路径>...</table></td> <td>背景图片的URL=就是路径网址</td> </tr> <tr> <td><table border=边框大小>...</table></td> <td>设定表格边框大小(使用数字)</td> </tr> <tr> <td><table bgcolor=颜色码>...</table></td> <td>设定表格的背景颜色</td> </tr> <tr> <td><table borderclor=颜色码>...</table></td> <td>设定表格边框的颜色</td> </tr> <tr> <td><table borderclordark=颜色码>...</table></td> <td>设定表格暗边框的颜色</td> </tr> <tr> <td><table borderclorlight=颜色码>...</table></td> <td>设定表格亮边框的颜色</td> </tr> <tr> <td><table cellpadding=参数>...</table></td> <td>指定内容与网格线之间的间距(使用数字)</td> </tr> <tr> <td><table cellspacing=参数>...</table></td> <td>指定网格线与网格线之间的距离(使用数字)</td> </tr> <tr> <td><table cols=参数>...</table></td> <td>指定表格的栏数</td> </tr> <tr> <td><table frame=参数>...</table></td> <td>设定表格外框线的显示方式</td> </tr> <tr> <td><table width=宽度>...</table></td> <td>指定表格的宽度大小(使用数字)</td> </tr> <tr> <td><table height=高度>...</table></td> <td>指定表格的高度大小(使用数字)</td> </tr> <tr> <td><td colspan=参数>...</td></td> <td>指定储存格合并栏的栏数(使用数字)</td> </tr> <tr> <td><td rowspan=参数>...</td></td> <td>指定储存格合并列的列数(使用数字)</td> </tr> </tbody></table><p><span style="font-family: inherit; font-size: 30px; font-weight: 600; ">分割窗口</span> <br></p><table class="reference clicked"> <tbody> <tr> <td> <p><strong>标签</strong> </p> </td> <td> <p><strong>功能</strong> </p> </td> </tr> <tr> <td><frameset cols="20%,* "></td> <td>左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整</td> </tr> <tr> <td><frameset rows="20%,* "></td> <td>上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整</td> </tr> <tr> <td><frameset cols="20%,* "></td> <td>分割左右两个框架</td> </tr> <tr> <td><frameset cols="20%,*,20% "></td> <td>分割左中右三个框架</td> </tr> <tr> <td><frameset rows="20%,*,20% "></td> <td>分割上中下三个框架</td> </tr> <tr> <td><! - - ... - -></td> <td>批注</td> </tr> <tr> <td><a href target></td> <td>指定超级链接的分割窗口</td> </tr> <tr> <td><a href=#锚的名称></td> <td>指定锚名称的超级链接</td> </tr> <tr> <td><a href></td> <td>指定超级链接</td> </tr> <tr> <td><a name=锚的名称></td> <td>被连结点的名称</td> </tr> <tr> <td><address>....</address></td> <td>用来显示电子邮箱地址</td> </tr> <tr> <td><b>...</b></td> <td>粗体字</td> </tr> <tr> <td><base target></td> <td>指定超级链接的分割窗口</td> </tr> <tr> <td><basefont size></td> <td>更改预设字形大小</td> </tr> <tr> <td><bgsound src></td> <td>加入背景<a href="http://www.rssso.com/news/list/81/1" target="_blank">音乐</a></td> </tr> <tr> <td><big></td> <td>显示大字体</td> </tr> <tr> <td><blink></td> <td>闪烁的文字</td> </tr> <tr> <td><body text link vlink></td> <td>设定文字颜色</td> </tr> <tr> <td><body></td> <td>显示本文</td> </tr> <tr> <td><br></td> <td>换行</td> </tr> <tr> <td><caption align></td> <td>设定表格标题位置</td> </tr> <tr> <td><caption>...</caption></td> <td>为表格加上标题</td> </tr> <tr> <td><center></td> <td>向中对齐</td> </tr> <tr> <td><cite>...<cite></td> <td>用于引经据典的文字</td> </tr> <tr> <td><code>...</code></td> <td>用于列出一段程序代码</td> </tr> <tr> <td><comment>...</comment></td> <td>加上批注</td> </tr> <tr> <td><dd></td> <td>设定定义列表的项目解说</td> </tr> <tr> <td><dfn>...</dfn></td> <td>显示"定义 "文字</td> </tr> <tr> <td><dir>...</dir></td> <td>列表文字卷标</td> </tr> <tr> <td><dl>...</dl></td> <td>设定定义列表的卷标</td> </tr> <tr> <td><dt></td> <td>设定定义列表的项目</td> </tr> <tr> <td><em></td> <td>强调之用</td> </tr> <tr> <td><font face></td> <td>任意指定所用的字形</td> </tr> <tr> <td><font size></td> <td>设定字体大小</td> </tr> <tr> <td><form action></td> <td>设定户动式窗体的处理方式</td> </tr> <tr> <td><form method></td> <td>设定户动式窗体之资料传送方式</td> </tr> <tr> <td><frame marginheight></td> <td>设定窗口的上下边界</td> </tr> <tr> <td><frame marginwidth></td> <td>设定窗口的左右边界</td> </tr> <tr> <td><frame name></td> <td>为分割窗口命名</td> </tr> <tr> <td><frame noresize></td> <td>锁住分割窗口的大小</td> </tr> <tr> <td><frame scrolling></td> <td>设定分割窗口的滚动条</td> </tr> <tr> <td><frame src></td> <td>将 HTML 文件加入窗口</td> </tr> <tr> <td><frameset cols></td> <td>将窗口分割成左右的子窗口</td> </tr> <tr> <td><frameset rows></td> <td>将窗口分割成上下的子窗口</td> </tr> <tr> <td><frameset>...</frameset></td> <td>划分分割窗口</td> </tr> <tr> <td><h1>~<h6></td> <td>设定文字大小</td> </tr> <tr> <td><head>...</head></td> <td>标示文件信息</td> </tr> <tr> <td><hr></td> <td>加上分网格线</td> </tr> <tr> <td><html>...</html></td> <td>文件的开始与结束</td> </tr> <tr> <td><i>...</i></td> <td>斜体字</td> </tr> <tr> <td><img align></td> <td>调整图形影像的位置</td> </tr> <tr> <td><img alt></td> <td>为你的图形影像加注</td> </tr> <tr> <td><img dynsrc loop></td> <td>加入影片</td> </tr> <tr> <td><img height width></td> <td>插入图片并预设图形大小</td> </tr> <tr> <td><img hspace></td> <td>插入图片并预设图形的左右边界</td> </tr> <tr> <td><img lowsrc></td> <td>预载图片功能</td> </tr> <tr> <td><img src border></td> <td>设定图片边界</td> </tr> <tr> <td><img src></td> <td>插入图片</td> </tr> <tr> <td><img vspace></td> <td>插入图片并预设图形的上下边界</td> </tr> <tr> <td><input type name value></td> <td>在窗体中加入输入字段</td> </tr> <tr> <td><isindex></td> <td>定义查询用窗体</td> </tr> <tr> <td><kbd>...</kbd></td> <td>表示使用者输入文字</td> </tr> <tr> <td><li type>...</li></td> <td>列表的项目 ( 可指定符号 )</td> </tr> <tr> <td><marquee></td> <td>跑马灯效果</td> </tr> <tr> <td><menu>...</menu></td> <td>条列文字卷标</td> </tr> <tr> <td><meta name="refresh " content url></td> <td>自动更新文件内容</td> </tr> <tr> <td><multiple></td> <td>可同时选择多项的列表栏</td> </tr> <tr> <td><noframe></td> <td>定义不出现分割窗口的文字</td> </tr> <tr> <td><ol>...</ol></td> <td>有序号的列表</td> </tr> <tr> <td><option></td> <td>定义窗体中列表栏的项目</td> </tr> <tr> <td><p align></td> <td>设定对齐方向</td> </tr> <tr> <td><p>...</p></td> <td>分段</td> </tr> <tr> <td><person>...</person></td> <td>显示人名</td> </tr> <tr> <td><pre></td> <td>使用原有排列</td> </tr> <tr> <td><samp>...</samp></td> <td>用于引用字</td> </tr> <tr> <td><select>...</select></td> <td>在窗体中定义列表栏</td> </tr> <tr> <td><small></td> <td>显示小字体</td> </tr> <tr> <td><strike></td> <td>文字加横线</td> </tr> <tr> <td><strong></td> <td>用于加强语气</td> </tr> <tr> <td><sub>...</sub></td> <td>下标字</td> </tr> <tr> <td><sup>...</sup></td> <td>上标字</td> </tr> <tr> <td><table border=n></td> <td>调整表格的宽线高度</td> </tr> <tr> <td><table cellpadding></td> <td>调整数据域位之边界</td> </tr> <tr> <td><table cellspacing></td> <td>调整表格线的宽度</td> </tr> <tr> <td><table height></td> <td>调整表格的高度</td> </tr> <tr> <td><table width></td> <td>调整表格的宽度</td> </tr> <tr> <td><table>...</table></td> <td>产生表格的卷标</td> </tr> <tr> <td><td align></td> <td>调整表格字段之左右对齐</td> </tr> <tr> <td><td bgcolor></td> <td>设定表格字段之背景颜色</td> </tr> <tr> <td><td colspan rowspan></td> <td>表格字段的合并</td> </tr> <tr> <td><td nowrap></td> <td>设定表格字段不换行</td> </tr> <tr> <td><td valign></td> <td>调整表格字段之上下对齐</td> </tr> <tr> <td><td width></td> <td>调整表格字段宽度</td> </tr> <tr> <td><td>...</td></td> <td>定义表格的数据域位</td> </tr> <tr> <td><textarea name rows cols></td> <td>窗体中加入多少列的文字输入栏</td> </tr> <tr> <td><textarea wrap></td> <td>决定文字输入栏是自动否换行</td> </tr> <tr> <td><th>...</th></td> <td>定义表格的标头字段</td> </tr> <tr> <td><title>...</title></td> <td>文件标题</td> </tr> <tr> <td><tr>...</tr></td> <td>定义表格美一行</td> </tr> <tr> <td><tt>...</tt></td> <td>打字机字体</td> </tr> <tr> <td><u>...</u></td> <td>文字加底线</td> </tr> <tr> <td><ul type>...</ul></td> <td>无序号的列表 ( 可指定符号 )</td> </tr> <tr> <td><var>...</var></td> <td>用于显示变量</td> </tr> </tbody></table> <h2>跑马灯</h2><table class="reference"> <tbody> <tr> <td> <p><strong>标签</strong> </p> </td> <td> <p><strong>功能</strong> </p> </td> </tr> <tr> <td><marquee>...</marquee></td> <td>普通卷动</td> </tr> <tr> <td><marquee behavior=slide>...</marquee></td> <td>滑动</td> </tr> <tr> <td><marquee behavior=scroll>...</marquee></td> <td>预设卷动</td> </tr> <tr> <td><marquee behavior=alternate>...</marquee></td> <td>来回卷动</td> </tr> <tr> <td><marquee direction=down>...</marquee></td> <td>向下卷动</td> </tr> <tr> <td><marquee direction=up>...</marquee></td> <td>向上卷动</td> </tr> <tr> <td><marquee direction=right>...</marquee></td> <td>向右卷动</td> </tr> <tr> <td><marquee direction=left>...</marquee></td> <td>向左卷动</td> </tr> <tr> <td><marquee loop=2>...</marquee></td> <td>卷动次数</td> </tr> <tr> <td><marquee width=180>...</marquee></td> <td>设定宽度</td> </tr> <tr> <td><marquee height=30>...</marquee></td> <td>设定高度</td> </tr> <tr> <td><marquee bgcolor=ff0000>...</marquee></td> <td>设定背景颜色</td> </tr> <tr> <td><marquee scrollamount=30>...</marquee></td> <td>设定卷动距离</td> </tr> <tr> <td><marquee scrolldelay=300>...</marquee></td> <td>设定卷动时间</td> </tr> </tbody></table><p> <br></p><p> <br></p></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/355F5A1E9577DF03" class="w-100 d-inline-block text-truncate" title=".NET Core 3.1 和 .NET 5 控制台程序发布成独立.exe可以执行程序的方法" target="_blank">
.NET Core 3.1 和 .NET 5 控制台程序发布成独立.exe可以执行程序的方法
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1104/AAE57A2D979890D8" class="w-100 d-inline-block text-truncate" title="Java使用HashMap中的数据初始化HashMap并执行put数据的简洁代码" target="_blank">
Java使用HashMap中的数据初始化HashMap并执行put数据的简洁代码
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1104/3922D878DE2E98CB" class="w-100 d-inline-block text-truncate" title="Java do 关键字(keyword)" target="_blank">
Java do 关键字(keyword)
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1104/288FA0774181CD2D" class="w-100 d-inline-block text-truncate" title="Python 结巴分词(jieba)Tokenize和ChineseAnalyzer的使用及示例代码" target="_blank">
Python 结巴分词(jieba)Tokenize和ChineseAnalyzer的使用及示例代码
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1104/C17D5F59A408570D" class="w-100 d-inline-block text-truncate" title="Python numpy.extract函数方法的使用" target="_blank">
Python numpy.extract函数方法的使用
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1104/8704747C5D86F072" class="w-100 d-inline-block text-truncate" title="Linux 基本实用程序(打印文件，email发送邮件)" target="_blank">
Linux 基本实用程序(打印文件，email发送邮件)
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1107/18A59A36D9739E58" class="w-100 d-inline-block text-truncate" title="Java.util.TreeMap类" target="_blank">
Java.util.TreeMap类
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1108/B209DB19EC17ED26" class="w-100 d-inline-block text-truncate" title="MomentJS - 实用程序" target="_blank">
MomentJS - 实用程序
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1108/6349371BF4D562CC" class="w-100 d-inline-block text-truncate" title="HTML - 短语标签" target="_blank">
HTML - 短语标签
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1108/EAA4BAEEFDDEA398" class="w-100 d-inline-block text-truncate" title="MooTools - Fx.Events" target="_blank">
MooTools - Fx.Events
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1108/CF7C957125CC5273" class="w-100 d-inline-block text-truncate" title="幻灯片在Powerpoint 2010中放大" target="_blank">
幻灯片在Powerpoint 2010中放大
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1108/9D6C8DE545CCAEE2" class="w-100 d-inline-block text-truncate" title="高级Excel - 工作簿分析" target="_blank">
高级Excel - 工作簿分析
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1108/9CBDBD7E8AD55671" class="w-100 d-inline-block text-truncate" title="XAML - 样式" target="_blank">
XAML - 样式
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1108/8E4053D8BE9EA272" class="w-100 d-inline-block text-truncate" title="WPF - 输入" target="_blank">
WPF - 输入
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1108/E0B8FDCFB1071FC0" class="w-100 d-inline-block text-truncate" title="wxPython - Dockable Windows" target="_blank">
wxPython - Dockable Windows
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1108/7E3EE40C08B45D86" class="w-100 d-inline-block text-truncate" title="SAP安全 - 有用的资源" target="_blank">
SAP安全 - 有用的资源
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1108/078E749957AA5F43" class="w-100 d-inline-block text-truncate" title="Lua - 游戏编程" target="_blank">
Lua - 游戏编程
</a>
</li>
<li class="list-group-item">
<a href="/detail/2022/1108/8AE28DC2C6396ED4" class="w-100 d-inline-block text-truncate" title="部署预测系统" target="_blank">
部署预测系统
</a>
</li>
<li class="list-group-item">
<a href="/detail/2023/0201/25B843C63071DFD7" class="w-100 d-inline-block text-truncate" title="CSS 听觉参考手册" target="_blank">
CSS 听觉参考手册
</a>
</li>
<li class="list-group-item">
<a href="/detail/2023/0201/3CBAA5C585A932DB" class="w-100 d-inline-block text-truncate" title="CSS 提示工具(Tooltip)" target="_blank">
CSS 提示工具(Tooltip)
</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-2024 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("57");
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=EF539ABFB06125CC`)
.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>]]></plaintext></td></tr></tbody></table></div></div> |
