前端技术文章-Golang学习网

文章 · 前端 | 2星期前 |

推荐用data-ext属性存小写后缀并配合[data-ext$="pdf"]选择器，避免href路径干扰；图标用::before+content插入字体图标或Unicode，需设display和font-size；注意大小写敏感，JS提取后缀时应转小写。

456 收藏

文章 · 前端 | 2星期前 |

HTML开发从入门到精通全攻略

<metacharset="UTF-8">必须置于<head>最前面，因为浏览器流式解析HTML时，若此前遇到中文等非ASCII字符而未声明编码，会按默认编码（如GBK或ISO-8859-1）错误解码，导致乱码且无法回溯修正。

456 收藏

文章 · 前端 | 2星期前 |

HTML5老照片滤镜制作教程

最快的老照片效果是filter:sepia()，推荐组合为sepia(0.8)contrast(0.85)brightness(0.92)blur(0.3px)drop-shadow(008pxrgba(140,100,60,0.15))，并可叠加噪点纹理提升真实感。

456 收藏

文章 · 前端 | 2星期前 |

CSS实现灰度模式：filter: grayscale全局应用

仅用html{filter:grayscale(100%);}不够，需补-webkit-filter兼容旧版Safari/安卓WebView，并为IE11添加progid语法；应选html而非body作根选择器以确保全覆盖，且须规避性能拖慢、文本可读性下降及视觉细节崩坏问题。

456 收藏

文章 · 前端 | 2星期前 |

HTML5跨域传密码加密方法

密码不可跨域明文传递，须用WebCryptoAPI的PBKDF2在前端加盐派生密钥（iterations≥100000、SHA-256、后端下发盐），导出十六进制凭证供后端校验，全程内存操作并立即清空原始密码。

456 收藏

文章 · 前端 | 1星期前 |

Nunjucks 嵌套模板包含与数据传递技巧

Nunjucks原生不支持{%include"xxx"with{...}%}语法，但可通过自定义render过滤器安全、递归地传递上下文数据，实现类似React的props下传效果。本文详解替代方案、代码实现及关键注意事项。

456 收藏

文章 · 前端 | 1星期前 |

HTML签名生成演示：secret+payload组合方法

签名生成本质是JS调用crypto.subtle.sign()执行HMAC-SHA256哈希，需将payload转Uint8Array、secret导入为CryptoKey，输出ArrayBuffer再转hex；常见不一致源于payload序列化、secret隐藏字符及编码不统一。

456 收藏

文章 · 前端 | 6天前 |

HTML5中header与footer的标准用法

header和footer是语义容器而非视觉标签，必须依附于body、article等明确作用域；禁止嵌套、滥用或仅作样式用途，否则破坏可访问性、SEO及结构解析。

456 收藏

文章 · 前端 | 6天前 |

HTML实现可拖拽抽屉宽度调节【实战】

纯CSS实现抽屉拖拽需设resize:horizontal与overflow:auto/scroll/hidden，且父容器为flex；Firefox需手动启用；全兼容需JS监听mousedown/mousemove，用requestAnimationFrame节流并持久化至localStorage。

456 收藏

文章 · 前端 | 5天前 |

input标签的作用_HTML input输入框状态切换全攻略

input标签无内置状态切换能力，需属性+CSS伪类+JS配合实现；disabled使元素脱离表单流程，readonly仅禁编辑但仍可聚焦和提交；focus/blur需事件监听，验证状态需reportValidity()等主动触发。

456 收藏

文章 · 前端 | 3天前 |

HTML中，

标签的 form 属性用于将文本框关联到页面中的某个表单。这个属性的值应该是目标表单的 id，这样即使 <textarea> 不在 <form> 标签内部，也可以被提交到该表单。示例：<form id="myForm" action="/submit" method="post">
  <input type="text" name="username" plac</a></div>
                                <a href="/article/612297.html" class="img_box"><img src="/uploads/20260526/17797736136a1530ad1a58a.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">textarea的form属性用于将其关联到页面中任意位置的form元素，实现跨DOM结构提交；需同时设置合法form值（匹配目标form的id）和name属性，且目标form必须已存在并具有id。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>456</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="612297"><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>
                                          |  3天前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/612520.html" class="aBlack">CSS引入MIME类型错误怎么解决</a></div>
                                <a href="/article/612520.html" class="img_box"><img src="/uploads/20260526/17797841996a155a07451d5.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">根本原因是服务器返回的Content-Type响应头不是text/css，现代浏览器（如Chrome90+）会严格校验该值，即使CSS内容正确，只要Header不符就拒绝解析并报“MIMEtypemismatch”。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>456</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="612520"><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>
                                          |  4星期前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/583431.html" class="aBlack">CSS等高布局：padding-bottom与负margin技巧</a></div>
                                <a href="/article/583431.html" class="img_box"><img src="/uploads/20260430/177755704169f35e311cfa5.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">浮动元素底部不齐是正常行为，伪等高需用padding-bottom+负margin-bottom配合overflow:hidden裁剪实现，IE6/7需zoom:1触发hasLayout，现代项目应优先使用flex或grid。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>455</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="583431"><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>
                                          |  3星期前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/586203.html" class="aBlack">CSS如何使用CSS-in-JS处理媒体查询_在组件内定义响应式规则</a></div>
                                <a href="/article/586203.html" class="img_box"><img src="/uploads/20260503/177777351869f6abced4dc5.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">CSS-in-JS中媒体查询应直接用模板字符串写入，如@media(min-width:${tablet})，使用字符串常量而非动态表达式以保障服务端渲染与样式提取正确。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>455</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="586203"><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>
                                          |  3星期前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/588701.html" class="aBlack">如何打包代码_现代javascript项目如何构建【教程】</a></div>
                                <a href="/article/588701.html" class="img_box"><img src="/uploads/20260505/177794464369f948432c94e.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">现代JavaScript项目应选对工具链：新项目用Vite（启动快、热更新准），旧Webpack项目或需IE11/UMD/动态require则留用Webpack；vitebuild默认用Rollup处理define、public目录和hash文件名；部署前须检查base路径、outDir与Nginx配置一致、HTML中script标签是否由Vite自动注入。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>455</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="588701"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                    </ul>
       <div class="mngfPage"><a href="/articlelist/88_hot_30_59.html" class="prevPage on"></a> <a href="/articlelist/88_hot_30_1.html">1</a><a href="/articlelist/88_hot_30_59.html">59</a><a class="currentPage">60</a><a href="/articlelist/88_hot_30_61.html">61</a><a href="/articlelist/88_hot_30_498.html">498</a> <a href="/articlelist/88_hot_30_61.html" class="nextPage on"></a></div>    </div>
</div>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="footer">
    <ul>
      <li  ><a href="/" class="aLightGray"><em class="material-icons">home</em><span>首页</span></a></li>
      <li  class="curr"><a href="/articlelist.html" class="aLightGray"><em class="material-icons">menu_book</em><span>阅读</span></a></li>
      <li  ><a href="/courselist.html" class="aLightGray"><em class="material-icons">school</em><span>课程</span></a></li>
      <li  ><a href="/ai.html" class="aLightGray"><em class="material-icons">smart_toy</em><span>AI助手</span></a></li>
      <li ><a href="/user.html" class="aLightGray"><em class="material-icons">person</em><span>我的</span></a></li>
    </ul>
  </div>
  <script src="/assets/js/require.js" data-main="/assets/js/require-frontend.js?v=1671101972"></script>
<script>
    var _hmt = _hmt || [];
    (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?3dc5666f6478c7bf39cd5c91e597423d";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
<script>
    let flaga = 1;
    var category_id = 88;
    let strbiaoqian = '';
    let zhankaihtml = '';
    // let zhankaihtml = '<div class="zhankaiflag biaoqianone " style="display: inline-block;" onclick="zhankaiflagclick(this);">展开<i></i></div>';
    let shouqihtml = '';
    // let shouqihtml = '<div class="zhankaiflag biaoqianone zhankai" style="display: inline-block;" onclick="zhankaiflagclick(this);">收起<i></i></div>';
    let allhtml = '';
    let fumo = '';
    $(".userInfo1 .biaoqianone").each(function(){
        var href = $(this).attr('href');
        var cat_id = $(this).data('id');
        let cuc = '<a href="'+href+'" class="biaoqianone" style="display: inline-block;">';
        if(category_id!==0&&category_id==cat_id){
            cuc ='<a href="javascript:;" class="biaoqianone hover" style="display: inline-block;">';
        }
        fumo = cuc;
        allhtml+=fumo+$(this).html()+'</a>';

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>