前端技术文章-Golang学习网

文章 · 前端 | 2星期前 |

lang属性必须写在<html>标签上才有效，写在<body>或子元素中无效；charset和lang缺一不可，且位置、格式、大小写均影响解析与渲染效果。

479 收藏

文章 · 前端 | 2星期前 |

WebSocket.send()可发送DOMString、ArrayBuffer、Blob或TypedArray；不可直接发送对象、undefined或null，须先JSON.stringify()序列化，且需确保ws.readyState为OPEN。

167 收藏

文章 · 前端 | 2星期前 | html如何查漏洞

富文本编辑漏洞检测教程 XSS防范指南

富文本编辑器XSS漏洞检测需贯穿数据生命周期，核心是发现输入过滤、编码处理或上下文渲染中的缺陷。首先注入script标签、事件处理器、javascript:伪协议等Payload，观察是否被正确转义或执行；常见触发点包括onerror、onload等事件属性及SVG、data:URI等非常规标签。绕过机制常利用双重编码、大小写混淆、HTML注释分割、非标准语法或浏览器解析差异。除XSS外，还需防范HTML注入导致的钓鱼与页面破坏、文件上传漏洞引发的任意代码执行、SSRF导致内网探测、信息泄露及CSRF引起

313 收藏

文章 · 前端 | 2星期前 | html

HTML中使用aria-required标注必填字段的方法如下：添加 aria-required="true" 属性在需要标记为必填的表单元素（如、

或 <select>）上，添加 aria-required="true" 属性。<input type="text" name="username" aria-required="true" />结合 requi</a></div>
                                <a href="/article/611976.html" class="img_box"><img src="/uploads/20260526/17797577716a14f2cb96459.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">必须同时写required和aria-required="true"，前者触发浏览器原生校验、影响键盘类型及CSS伪类，后者确保屏幕阅读器正确播报；缺一则导致校验失效或无障碍支持缺失。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>416</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="611976"><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>
                                          |  2星期前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/611968.html" class="aBlack">多重阴影+absolute定位，打造层次感登录框</a></div>
                                <a href="/article/611968.html" class="img_box"><img src="/uploads/20260526/17797574046a14f15cd6322.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">position:absolute易使登录框“飘”出视口，因其默认相对于最近非static祖先定位；若父容器未设position:relative，则回退至视口定位，且top:50%;left:50%仅锚定左上角，不加transform:translate(-50%,-50%)会导致偏移。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>444</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="611968"><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>
                                          |  2星期前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/611967.html" class="aBlack">CSS实现响应式图片布局：max-width与height:auto技巧</a></div>
                                <a href="/article/611967.html" class="img_box"><img src="/uploads/20260526/17797573946a14f152dbe12.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">根本原因是未切断图片固有宽高比约束；解法是max-width:100%配height:auto保比例缩放，object-fit:cover填满不变形，srcset/sizes适配多分辨率，flex中需设align-self或min-height:0防塌陷。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>253</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="611967"><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>
                                          |  2星期前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/611966.html" class="aBlack">HTML5添加图片方法与技巧详解</a></div>
                                <a href="/article/611966.html" class="img_box"><img src="/uploads/20260526/17797573396a14f11b3a906.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">HTML5使用<img>标签嵌入图片，需设src和alt属性；支持srcset/sizes实现响应式；可用<figure><figcaption>增强语义；loading="lazy"实现懒加载；onerror处理图片缺失。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>442</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="611966"><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>
                                          |  2星期前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/611961.html" class="aBlack">闭包捕获权限标识，动态控制按钮显示隐藏</a></div>
                                <a href="/article/611961.html" class="img_box"><img src="/uploads/20260526/17797570936a14f02556008.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">闭包封装权限校验函数，通过工厂函数接收权限数组并返回记忆化校验函数，支持字符串/数组输入及通配符处理，配合Vue模板、自定义指令实现声明式按钮控制，需结合响应式状态确保权限更新同步。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>154</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="611961"><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>
                                          |  2星期前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/611946.html" class="aBlack">请提供需要处理的 HTML 代码或类名，我将帮你提取指定类名元素的 `data-id` 属性并拼接为逗号分隔的字符串。</a></div>
                                <a href="/article/611946.html" class="img_box"><img src="/uploads/20260526/17797563606a14ed48c77fa.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">本文介绍如何使用jQuery精准获取所有带有特定class（如special）的元素的data-id值，并将其高效合并为一个以英文逗号分隔的纯字符串（如"TZ2,KJ1,JQT"），避免常见误区（如误用.each()返回值或混淆jQuery对象与原始数据）。本文介绍如何使用jQuery精准获取所有带有特定class（如`special`）的元素的`data-id`值，并将其高效合并为一个以英文逗号分隔的纯字符串（如`"T</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>294</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="611946"><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>
                                          |  2星期前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/611942.html" class="aBlack">Vue3中watch监听路由变化实现自动刷新</a></div>
                                <a href="/article/611942.html" class="img_box"><img src="/uploads/20260526/17797561936a14eca1b9859.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">Vue中监听路由变化需监听$route具体属性而非对象本身，推荐watch$route.fullPath（含query变化）或$path（仅path），并设immediate:true；Vue3需用watch(()=>route.fullPath)或onBeforeRouteUpdate。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>263</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="611942"><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>
                                          |  2星期前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/611923.html" class="aBlack">HTML健身房团课预约页面开发教程</a></div>
                                <a href="/article/611923.html" class="img_box"><img src="/uploads/20260526/17797552946a14e91e10269.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">用纯HTML+CSS可展示团课表，但选课占位需JavaScript；小屏优先且教室≤5时，table比flex/grid更省心；须用事件委托、数据属性、状态缓存和乐观更新实现防重复提交与实时余量。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>339</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="611923"><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>
                                          |  2星期前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/611914.html" class="aBlack">函数内省解析闭包变量名的实用方法</a></div>
                                <a href="/article/611914.html" class="img_box"><img src="/uploads/20260526/17797548906a14e78a69c8b.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">可通过__closure__和__code__.co_freevars直接读取闭包信息：若__closure__为None则非闭包；否则co_freevars元组与__closure__中cell对象一一对应，可获取变量名及通过cell.cell_contents获取当前值。</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="611914"><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>
                                          |  2星期前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/611912.html" class="aBlack">CSS实现元素水平翻转技巧</a></div>
                                <a href="/article/611912.html" class="img_box"><img src="/uploads/20260526/17797548236a14e7472f72b.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">用父容器scaleX(-1)翻转，子元素再scaleX(-1)抵消即可保持文字正常；该方法不影响布局、事件和顺序，比rotateY(180deg)更轻量兼容。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>296</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="611912"><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>
                                          |  2星期前  |  
                                        <a href="javascript:;" class="aLightGray" title="html">html</a>
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/611903.html" class="aBlack">Vim高效snippet，HTMLCSS代码提速神器！</a></div>
                                <a href="/article/611903.html" class="img_box"><img src="/uploads/20260526/17797544746a14e5ea03a40.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow">使用Vim插件UltiSnips和vim-snippets可大幅提升HTML/CSS编码效率。首先通过Plug安装插件并在.vimrc中配置，接着在~/.vim/after/snippets/目录下创建html.snippets和css.snippets文件，分别定义html5和flex等常用代码片段。输入缩写如html5或flex后按Tab键即可展开为完整代码结构。此外，vim-snippets自带丰富内置片段，如form、ul>li*3和anim等，支持快速生成表单、列表和动画模板，显著减少重复</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>425</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="611903"><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>
                                          |  2星期前  |  
                                    </div>
                <div class="tit lineTwoOverflow"><a href="/article/611900.html" class="aBlack">HTML下拉框optgroup分组优化选择体验</a></div>
                                <a href="/article/611900.html" class="img_box"><img src="/uploads/20260526/17797541696a14e4b9cb6ab.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a>
                                <div class="cont lineFourOverflow"><optgroup>是唯一原生、语义正确且无障碍友好的下拉分组方式，但必须有非空label、直接嵌套于<select>内、禁用仅作用于选项而非标题，且不参与表单提交。</div>
                <div class="clear"></div>
                <div class="opt">
                    <div class="left">
                        <span><i class="view"></i>470</span>
                        <span class="collectBtn user_collection" data-type="article" data-id="611900"><i class="collect"></i>收藏</span>
                    </div>
                    <div class="clear"></div>
                </div>
            </li>
                    </ul>
       <div class="mngfPage"><a href="/articlelist/88_new_90_115.html" class="prevPage on"></a> <a href="/articlelist/88_new_90_1.html">1</a><a href="/articlelist/88_new_90_115.html">115</a><a class="currentPage">116</a><a href="/articlelist/88_new_90_117.html">117</a><a href="/articlelist/88_new_90_500.html">500</a> <a href="/articlelist/88_new_90_117.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>