前端技术文章-Golang学习网

Go教程 Go问答 MySQL Redis 软件教程人工智能业界新闻 php教程 java教程 python教程 linux 前端常见问题 AI提示词作文画画

文章 · 前端 | 3天前 |

HTML中使用aria-readonly属性可以标记一个表单字段为只读状态，但该属性本身并不阻止用户编辑内容。为了实现“内容可见但不可编辑”的效果，还需要结合readonly或disabled属性。正确用法示例：或者</div> <a href="/article/607318.html" class="img_box"><img src="/uploads/20260522/17794211786a0fcffaa29f3.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">aria-readonly仅向辅助技术传达只读语义，不改变交互行为；必须与原生readonly或事件拦截配合使用，否则会导致语义与实际行为错位。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>423</span> <span class="collectBtn user_collection" data-type="article" data-id="607318"><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/607315.html" class="aBlack">HTML构建阅读模式页面教程</a></div> <a href="/article/607315.html" class="img_box"><img src="/uploads/20260522/17794210406a0fcf702839a.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">阅读模式依赖语义化HTML结构而非CSS隐藏，正文须用<article>或<main>包裹且不嵌套在<nav><header><aside>中，需严格层级的<h1>-<h6>标题、带alt的<img>、含cite的<blockquote>及标准<ul><ol>列表。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>168</span> <span class="collectBtn user_collection" data-type="article" data-id="607315"><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/607313.html" class="aBlack">Fetch 传输大文本内存占用分析</a></div> <a href="/article/607313.html" class="img_box"><img src="/uploads/20260522/17794209896a0fcf3d00952.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">关键不是看页面总内存，而是盯住fetch触发后、响应体开始解析前的内存增量；调用.text()等会一次性解码致内存暴涨，而用response.body.getReader()流式处理可将峰值稳定在5–10MB。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>423</span> <span class="collectBtn user_collection" data-type="article" data-id="607313"><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/607309.html" class="aBlack">HTML时间线动画制作教程</a></div> <a href="/article/607309.html" class="img_box"><img src="/uploads/20260522/17794208066a0fce86dd69d.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">用IntersectionObserver实现滚动触发动画时间线最稳定：设threshold为[0,0.1]提前触发，配合transition而非animation实现进退双向动画，用data-position替代nth-child避免布局错位，移动端加rootMargin适配Safari惯性。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>427</span> <span class="collectBtn user_collection" data-type="article" data-id="607309"><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/607306.html" class="aBlack">HTML动态页面生成方法详解</a></div> <a href="/article/607306.html" class="img_box"><img src="/uploads/20260522/17794206276a0fcdd39c717.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">HTML本身无法动态生成页面，必须依赖JavaScript操作DOM或模板引擎（如Handlebars、Jinja2）及服务端语言；浏览器端需预编译与数据绑定，服务端需防XSS与路径遍历，零依赖方案可用template标签与DOMParser。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>129</span> <span class="collectBtn user_collection" data-type="article" data-id="607306"><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/607299.html" class="aBlack">HTML文件怎么打开修改？记事本操作教程</a></div> <a href="/article/607299.html" class="img_box"><img src="/uploads/20260522/17794203956a0fcceba1795.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">记事本编辑HTML文件必须用UTF-8编码并确保扩展名为.html。常见错误是保存为ANSI编码或index.html.txt，导致中文乱码、无法打开或浏览器不更新；务必用“另存为”，手动输入带引号的"index.html"，并开启系统扩展名显示以确认。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>363</span> <span class="collectBtn user_collection" data-type="article" data-id="607299"><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/607292.html" class="aBlack">Array.join 与模板字符串构建高效 HTML 片段</a></div> <a href="/article/607292.html" class="img_box"><img src="/uploads/20260522/17794200156a0fcb6f52e9e.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">Array.prototype.join()拼接字符串比反复+=更快，配合模板字符串预处理数据可提升性能、可读性与可维护性；应避免频繁DOM操作，一次性innerHTML插入，并做好XSS防护。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>309</span> <span class="collectBtn user_collection" data-type="article" data-id="607292"><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/607286.html" class="aBlack">JavaScript代码测试方法：单元与集成测试详解</a></div> <a href="/article/607286.html" class="img_box"><img src="/uploads/20260522/17794197796a0fca8322c0f.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">JavaScript测试必须覆盖关键路径，单元测试用Jest隔离验证函数/组件，集成测试依场景选Cypress或Vitest，重点保障跨模块数据流与副作用，函数和分支覆盖率比行覆盖率更能暴露风险。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>318</span> <span class="collectBtn user_collection" data-type="article" data-id="607286"><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/607277.html" class="aBlack">响应式表格实现与数据展示优化技巧</a></div> <a href="/article/607277.html" class="img_box"><img src="/uploads/20260522/17794193786a0fc8f21efda.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">必须设table-layout:fixed才能控列宽，配合width:100%和显式列宽（如<thstyle="width:25%">），再结合data-label卡片模式或容器水平滚动，兼顾响应式与可访问性。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>355</span> <span class="collectBtn user_collection" data-type="article" data-id="607277"><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/607271.html" class="aBlack">js删除数组元素shift方法详解</a></div> <a href="/article/607271.html" class="img_box"><img src="/uploads/20260522/17794191856a0fc831bb6ed.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">shift()方法用于移除数组第一个元素并返回该元素，原数组长度减1；若数组为空则返回undefined，且该方法会直接修改原数组。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>110</span> <span class="collectBtn user_collection" data-type="article" data-id="607271"><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/607268.html" class="aBlack">HTML架构标准与文档规范解析要点</a></div> <a href="/article/607268.html" class="img_box"><img src="/uploads/20260522/17794190046a0fc77c9ac7d.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">HTML是定义网页内容结构与语义的标记语言规范，非架构标准；DOCTYPE声明决定解析模式，head与body为强制逻辑分区，标签嵌套、属性书写等细节直接影响语义、可访问性与渲染一致性。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>280</span> <span class="collectBtn user_collection" data-type="article" data-id="607268"><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/607266.html" class="aBlack">简洁登录注册界面设计技巧</a></div> <a href="/article/607266.html" class="img_box"><img src="/uploads/20260522/17794189416a0fc73d0b46a.jpg" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">登录注册界面需3秒内明确“填什么、点哪、错在哪”：表单用<form>包裹，input须有正确name和type；前后端校验分离；错误提示绑定具体输入框；触摸目标≥44px，视觉动线清晰。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>189</span> <span class="collectBtn user_collection" data-type="article" data-id="607266"><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/607264.html" class="aBlack">HTML Canvas零拷贝导出位图方法</a></div> <a href="/article/607264.html" class="img_box"><img src="/uploads/20260522/17794188466a0fc6dede4f6.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">transferToImageBitmap不可用toDataURL替代，因其同步编码阻塞主线程、内存翻倍且无法被Worker直接消费；而transferToImageBitmap实现零拷贝移交图像缓冲区，但需环境支持、绘制完成后再调用，且为单次异步操作。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>393</span> <span class="collectBtn user_collection" data-type="article" data-id="607264"><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/607263.html" class="aBlack">HTML文字环绕形状排版技巧</a></div> <a href="/article/607263.html" class="img_box"><img src="/uploads/20260522/17794188286a0fc6cc5fe10.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">shape-outside仅作用于已浮动的块级替换元素，必须同时满足float显式声明、尺寸固定、CORS合法三条件；否则浏览器忽略该声明。</div> <div class="clear"></div> <div class="opt"> <div class="left"> <span><i class="view"></i>427</span> <span class="collectBtn user_collection" data-type="article" data-id="607263"><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天前 | <a href="javascript:;" class="aLightGray" title="html">html</a> </div> <div class="tit lineTwoOverflow"><a href="/article/607256.html" class="aBlack">手机运行HTML JS文件方法详解</a></div> <a href="/article/607256.html" class="img_box"><img src="/uploads/20260522/17794185136a0fc59163910.png" onerror="this.onerror='';this.src='/assets/images/moren/morentu.png'" alt=""></a> <div class="cont lineFourOverflow">可使用手机浏览器、专用App、Termux服务器或在线平台运行HTML和JS文件。首先将文件保存至手机，用浏览器直接打开可加载页面并执行JavaScript；其次安装如“HTMLViewer”等工具App，支持导入文件和实时预览；再者通过Termux安装Python并启动HTTP服务器，在浏览器访问localhost:8000即可模拟真实环境；最后可借助JSFiddle、CodePen或Replit等在线平台移动端，编写代码后即时运行并保存项目。</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="607256"><i class="collect"></i>收藏</span> </div> <div class="clear"></div> </div> </li> </ul> <div class="mngfPage"><a href="/articlelist/88_new_30_70.html" class="prevPage on"></a> <a href="/articlelist/88_new_30_1.html">1</a><a href="/articlelist/88_new_30_70.html">70</a><a class="currentPage">71</a><a href="/articlelist/88_new_30_72.html">72</a><a href="/articlelist/88_new_30_476.html">476</a> <a href="/articlelist/88_new_30_72.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>