前端技术文章-Golang学习网

文章 · 前端 | 1个月前 |

list-style-position:outside是对齐混乱的根源，因序号绘制在内容框外且不参与盒模型计算，导致序号与文字左边缘错位；应设为inside并统一重置ul/ol的margin和padding，配合box-sizing:border-box与明确line-height确保稳定对齐。

213 收藏

文章 · 前端 | 1个月前 |

HTML HTTPS结合混合内容使用方法

HTTPS页面加载HTTP资源会被现代浏览器默认阻止，主动混合内容（如script、iframe）直接报错阻断，被动内容（如img）在Chrome94+也统一阻止；应将所有http://替换为https://，并检查API、第三方SDK及构建流程。

446 收藏

文章 · 前端 | 1个月前 |

点击生成水波纹，CSS伪元素动画实现

水波纹动画不必强制使用::after或::before，但伪元素最稳妥；需父容器relative定位、content:""、translate(-50%,-50%)居中，JS计算点击相对坐标，搭配cubic-bezier缓动与animation-fill-mode:forwards。

274 收藏

文章 · 前端 | 1个月前 |

HTML中可以通过CSS的::placeholder伪元素来自定义输入框（或

）中占位文字（placeholder）的样式。以下是一个简单的示例，展示如何修改占位文字的颜色、字体大小和字体样式：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>自定义占位文字样式</a></div>
                                <a href="/article/612816.html" class="img_box"><img src="/uploads/20260526/17797973866a158d8aa5c6c.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="HTML中可以通过CSS的::placeholder伪元素来自定义输入框（<input>或<textarea>）中占位文字（placeholder）的样式。以下是一个简单的示例，展示如何修改占位文字的颜色、字体大小和字体样式：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>自定义占位文字样式"></a>
                                <div class="cont lineFourOverflow">::placeholder伪元素仅能美化已通过HTMLplaceholder属性设置的占位文字，不可添加内容；必须写全四套浏览器前缀（::-webkit-input-placeholder、::-moz-placeholder、:-ms-input-placeholder、::placeholder）才兼容各环境，且仅支持color、font-size、opacity等有限文本样式，禁用background、padding等盒模型属性。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>330</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="612816"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                        <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                          |  1个月前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/612802.html" class="aBlack">如何识别函数作用域在SPA中的优化分层策略</a></div>
                                <a href="/article/612802.html" class="img_box"><img src="/uploads/20260526/17797968346a158b629109b.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="如何识别函数作用域在SPA中的优化分层策略"></a>
                                <div class="cont lineFourOverflow">函数作用域优化是分层实践：第一层组件级管理局部状态与生命周期；第二层模块级封装复用逻辑并隔离副作用；第三层服务级按需注入、延迟初始化；第四层运行时控制执行流与临时上下文。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>234</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="612802"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                        <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                          |  1个月前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/612799.html" class="aBlack">如何制作带社交链接的页脚区域</a></div>
                                <a href="/article/612799.html" class="img_box"><img src="/uploads/20260526/17797966456a158aa5624bf.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="如何制作带社交链接的页脚区域"></a>
                                <div class="cont lineFourOverflow">页脚社交链接应使用带https://、rel="noopenernoreferrer"和target="_blank"的标签，图标优先内联SVG并添加aria-label，用CSSGrid实现响应式布局，确保移动端点击区域≥44×44px。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>267</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="612799"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                        <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                          |  1个月前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/612797.html" class="aBlack">CSS角标通知图标实现方法</a></div>
                                <a href="/article/612797.html" class="img_box"><img src="/uploads/20260526/17797965826a158a6614ed7.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="CSS角标通知图标实现方法"></a>
                                <div class="cont lineFourOverflow">用::after而非span因更轻量、语义干净且不增加DOM节点，但必须设父容器position:relative，否则定位错乱；::after需content:""，且不被屏幕阅读器识别，重要信息须配合aria-label。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>388</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="612797"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                        <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                          |  1个月前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/612788.html" class="aBlack">iOS背景图固定失效怎么解决</a></div>
                                <a href="/article/612788.html" class="img_box"><img src="/uploads/20260526/17797961136a15889112a27.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="iOS背景图固定失效怎么解决"></a>
                                <div class="cont lineFourOverflow">iOSSafari从初版起就明确不支持background-attachment:fixed，会静默降级为scroll；AndroidChrome也存在兼容性问题，推荐用::before伪元素+position:fixed替代，并注意z-index、clip-path、backface-visibility等关键细节。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>471</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="612788"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                        <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                          |  1个月前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/612787.html" class="aBlack">CSS sticky 定位兼容性处理及 fixed 降级方案</a></div>
                                <a href="/article/612787.html" class="img_box"><img src="/uploads/20260526/17797960976a1588818f470.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="CSS sticky 定位兼容性处理及 fixed 降级方案"></a>
                                <div class="cont lineFourOverflow">Sticky定位需降级处理：先用position:fixed兜底，再用@supports检测并覆盖为sticky；不支持时可用JS检测加类名模拟，但须修复fixed导致的布局断裂问题。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>292</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="612787"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                        <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                          |  1个月前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/612783.html" class="aBlack">Qt实现跨平台WebSocket客户端消息传输方法</a></div>
                                <a href="/article/612783.html" class="img_box"><img src="/uploads/20260526/17797960316a15883f2f9f7.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="Qt实现跨平台WebSocket客户端消息传输方法"></a>
                                <div class="cont lineFourOverflow">QtC++实现WebSocket客户端需正确初始化QWebSocket、绑定信号（推荐Qt::QueuedConnection）、显式链接websockets模块（QT+=websockets），并确保URL协议与服务端模式匹配（ws://对应NonSecureMode，wss://对应SecureMode），否则运行时崩溃或静默失败。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>395</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="612783"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                        <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                          |  1个月前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/612765.html" class="aBlack">HTML控制页眉页脚转PDF的技巧</a></div>
                                <a href="/article/612765.html" class="img_box"><img src="/uploads/20260526/17797951096a1584a51add8.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="HTML控制页眉页脚转PDF的技巧"></a>
                                <div class="cont lineFourOverflow">Chrome打印预览中页眉页脚开关在Ctrl+P/Cmd+P打开的打印面板右下角“更多设置”内，需取消勾选“页眉和页脚”复选框；@page仅支持页边距设置，:first伪类不可嵌套样式；position:fixed页眉页脚在PDF中仅首屏渲染；页码必须用class="pageNumber"和"totalPages"，否则不生效。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>468</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="612765"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                        <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                          |  1个月前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/612762.html" class="aBlack">HTML分页导航怎么添加\_列表分页实现方法【教程】</a></div>
                                <a href="/article/612762.html" class="img_box"><img src="/uploads/20260526/17797949566a15840c57e93.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="HTML分页导航怎么添加\_列表分页实现方法【教程】"></a>
                                <div class="cont lineFourOverflow">页码导航需JavaScript控制数据切片与DOM更新，配合语义化HTML（如<navaria-label="Pagination"><ol>）和CSS，确保无障碍、可打印及URL同步。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>257</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="612762"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                        <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                          |  1个月前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/612760.html" class="aBlack">提取 HTML 属性中的纯文本内容时，避免使用正则表达式是关键，因为 HTML 的复杂性和多样性可能导致正则表达式失效或产生意外结果。以下是安全高效的方法：1. 使用 DOM 解析器（推荐）DOM 解析器可以正确解析 HTML 结构，避免正则表达式的陷阱。示例（Python）：from bs4 import BeautifulSoup

html = '<div class="example" i</a></div>
                                <a href="/article/612760.html" class="img_box"><img src="/uploads/20260526/17797948496a1583a1a249d.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="提取 HTML 属性中的纯文本内容时，避免使用正则表达式是关键，因为 HTML 的复杂性和多样性可能导致正则表达式失效或产生意外结果。以下是安全高效的方法：1. 使用 DOM 解析器（推荐）DOM 解析器可以正确解析 HTML 结构，避免正则表达式的陷阱。示例（Python）：from bs4 import BeautifulSoup

html = '<div class="example" i"></a>
                                <div class="cont lineFourOverflow">本文介绍为何不应使用多层正则替换清理HTML标签，推荐使用DOMParser解析并提取innerText的健壮方案，兼顾安全性、可维护性与浏览器兼容性。本文介绍为何不应使用多层正则替换清理HTML标签，推荐使用DOMParser解析并提取innerText的健壮方案，兼顾安全性、可维护性与浏览器兼容性。在前端开发中，常需从HTML属性（如title）中提取“无标签的纯文本”。初学者易倾向用链式.replace()配合多个正</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>435</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="612760"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                        <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                          |  1个月前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/612751.html" class="aBlack">CSS :valid 与 pattern 实现表单验证样式</a></div>
                                <a href="/article/612751.html" class="img_box"><img src="/uploads/20260526/17797944896a15823920155.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="CSS :valid 与 pattern 实现表单验证样式"></a>
                                <div class="cont lineFourOverflow">pattern属性是:valid生效的前提，仅对文本类输入有效且需注意全匹配机制、移动端兼容性及JS补位校验。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>326</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="612751"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                        <li class="li2">
                <div class="info lineOverflow">
                                        <a href="/articlelist/19_new_0_1.html" class="aLightGray" title="文章">文章</a> ·
                                        <a href="/articlelist/88_new_0_1.html" class="aLightGray" title="前端">前端</a>
                                          |  1个月前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/612739.html" class="aBlack">JavaScript优化与代码分割技巧</a></div>
                                <a href="/article/612739.html" class="img_box"><img src="/uploads/20260526/17797939956a15804b9cb88.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt="JavaScript优化与代码分割技巧"></a>
                                <div class="cont lineFourOverflow">提升JavaScript性能需从执行逻辑、资源加载和模块组织入手，首先减少主线程负担，通过任务分片、requestIdleCallback和WebWorker避免阻塞；其次按需加载，利用动态import实现路由级和组件级代码分割；再者借助Webpack或Vite配置splitChunks、vendorchunk和manualChunks优化打包；最后减少闭包开销，避免内存泄漏，合理管理事件监听与全局变量。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>143</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="612739"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                    </ul>
       <div class="mngfPage"><a href="/articlelist/88_new_90_106.html" class="prevPage on"></a> <a href="/articlelist/88_new_90_1.html">1</a><a href="/articlelist/88_new_90_106.html">106</a><a class="currentPage">107</a><a href="/articlelist/88_new_90_108.html">108</a><a href="/articlelist/88_new_90_500.html">500</a> <a href="/articlelist/88_new_90_108.html" class="nextPage on"></a></div>    </div>
</div>
<div class="footer">
    <ul>
      <li  ><a href="/" class="aLightGray"><em class="navIcon navIconHome"></em><span>首页</span></a></li>
      <li  class="curr"><a href="/articlelist.html" class="aLightGray"><em class="navIcon navIconRead"></em><span>阅读</span></a></li>
      <li  ><a href="/courselist.html" class="aLightGray"><em class="navIcon navIconCourse"></em><span>课程</span></a></li>
      <li  ><a href="/ai.html" class="aLightGray"><em class="navIcon navIconAi"></em><span>AI助手</span></a></li>
      <li ><a href="/user.html" class="aLightGray"><em class="navIcon navIconUser"></em><span>我的</span></a></li>
    </ul>
  </div>
  <script src="/assets/js/frontend/common.js" defer></script>
  <script src="/assets/js/juejin-theme.js?v=20260613b" defer></script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?e34c3e8ab31ba35d7e1c48ea8d77315f";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

strbiaoqian+=fumo+$(this).html()+'</a>';
        // if(flaga<=8){
        // }
        flaga++;
    });
    strbiaoqian+=zhankaihtml;
    allhtml+=shouqihtml;
    $(".userInfo1").html(strbiaoqian);
    // function zhankaiflagclick(obj){
    //     if($(obj).html()=='展开<i></i>'){
    //         $(obj).html('收起<i></i>');
    //         $(obj).addClass('zhankai');
    //         $(".userInfo1").html(allhtml);
    //     }else{
    //         $(obj).html("展开<i></i>");
    //         $(obj).removeClass('zhankai');
    //         $(".userInfo1").html(strbiaoqian);
    //     }
    // }

$('.timeLimitBox').click(function(){
        $(this).toggleClass('hover')
    })
</script>
</body>
</html>