前端技术文章
-
本文介绍如何利用Python内置模块快速启动一个轻量级HTTP服务器，无需部署即可通过局域网在手机浏览器中访问本地网页项目，实现跨设备响应式调试。444 收藏 -
tbodytr:hover有效需满足：HTML中显式存在tbody标签，且结构符合标准表格（thead/tbody/tfoot）；触屏设备默认不支持hover，需用@media(hover:hover)或touchstart/touchend模拟；避免pointer-events:none、优先级冲突及transition:all引发的布局抖动。444 收藏 -
window.confirm是阻塞式原生确认机制，必须显式判断返回值控制流程，不可用于防刷新/关闭，文案需明确动作后果且语义清晰。444 收藏 -
必须用<section>而非<div>的条件是：内容有独立主题、含<h1>–<h6>标题、能被单独理解或复用；否则应使用<div>，因其无语义，更可靠且兼容性更好。444 收藏 -
可用document.querySelectorAll('audio,video')判断媒体元素是否存在，但需注意执行时机；若需排除空壳元素，应检查src、source子元素或readyState；canPlayType()返回字符串而非布尔值，实际应用推荐监听canplay事件。444 收藏 -
HTML本身不是编程语言，不消耗CPU；网页卡顿主因是JavaScript执行、CSS渲染、DOM重排重绘，在低压CPU上因频率低、缓存小、单核弱而被显著放大。444 收藏 -
CSS定位布局核心是理解position与文档流关系：relative原地微调不脱流，absolute脱离文档流认父定位，fixed锁定视口，sticky滚动时相对转固定。444 收藏 -
data-属性非双向绑定，修改dataset会更新HTML但反之不成立；购物车需用data-id和data-price携带唯一标识与原始单价，读取后须parseFloat()转数字，修改后需手动同步DOM、内存和localStorage。444 收藏 -
必须按link→visited→hover→active顺序写，否则后声明的同优先级样式会覆盖前面的，导致hover和active效果被拦截或不可见。444 收藏 -
table-layout:fixed是CSS中控制表格列宽计算方式的属性，它使浏览器仅依据第一行或col元素的宽度声明来确定列宽，从而实现可控的自适应布局。444 收藏 -
Emit不实现文件上传进度条，真正依赖的是前端XMLHttpRequest的upload.onprogress事件监听上传进度，后端只需常规接收IFormFile即可。444 收藏 -
BigInt解决了JavaScript中大整数精度丢失问题，能精确表示任意大小整数；它与Number类型不同、不可隐式转换，适用于加密、大ID等场景，但不支持Math方法、JSON序列化及小数运算。444 收藏 -
TwitterCard预览图不显示，90%是og:image或twitter:image的路径、尺寸、协议或缓存问题；需确保图片为HTTPS绝对URL、服务器返回200状态码及正确Content-Type，且Twitterbot可直连访问。444 收藏 -
使用:focus伪类可选中处于焦点状态的输入框，支持按类型、class、id或结构进一步限定，常用于提升表单交互体验，建议保留可访问性并合理使用样式替代outline。444 收藏 -
判断导航条是否过顶应监听scroll事件，用getBoundingClientRect().top动态获取其距视口顶部距离，结合requestAnimationFrame优化性能；iOSSafari中sticky导航条需加容差判断top≤1。444 收藏