-
使用border-radius属性可以轻松实现网页元素的圆角边框。1.基本写法是直接设置border-radius值，如border-radius:10px;可使四角均呈现圆角；2.使用百分比值（如border-radius:50%）可灵活创建圆形或椭圆形状；3.可通过border-top-left-radius、border-top-right-radius等属性单独设置某一角的圆角；4.实际应用中可用border-radius:999px;创建胶囊按钮，并配合overflow:hidden显示图片圆角
-
<td>标签的作用是定义表格中的单元格，用于展示数据内容。1）展示数据内容：可包含文本、图片等，结构化展示信息。2）跨行和跨列合并：通过rowspan和colspan属性，增强表格灵活性。3）样式和格式化：支持CSS样式设置，提升表格视觉效果和用户体验。
-
Flex布局的8个关键属性分别是：1.flex-direction，决定主轴方向；2.justify-content，控制主轴对齐；3.align-items，控制交叉轴对齐；4.flex-wrap，决定是否换行；5.align-content，多行交叉轴对齐；6.flex-grow，定义放大比例；7.flex-shrink，定义缩小比例；8.flex-basis，定义初始主轴尺寸，这些属性使Flex布局成为响应式设计的强大工具。
-
图片懒加载的核心是延迟加载非首屏图片，等其进入可视区域时才加载，提升页面性能。具体实现方式包括：1.基于offsetTop和window.innerHeight进行简单判断；2.使用getBoundingClientRect优化可见性检测；3.利用IntersectionObserverAPI异步监听元素可见性，性能更优；4.结合requestAnimationFrame优化滚动事件处理，避免页面卡顿。SEO优化可通过<noscript>标签、服务器端渲染或使用loading="lazy"属性
-
JS实现图片压缩上传的核心在于利用CanvasAPI在客户端进行压缩后再上传，以减少流量和服务器压力。具体步骤为：1.使用<inputtype="file">选择图片并监听change事件获取文件对象；2.通过FileReader读取文件内容（Base64或ArrayBuffer）并注意兼容性问题；3.创建Canvas绘制图片并通过toDataURL设置格式与质量进行压缩，权衡质量和压缩率，并考虑兼容性和性能优化；4.使用XMLHttpRequest或fetchAPI上传压
-
<b>标签在HTML中用于样式变化，不表示语义重点。1)使用<b>标签让文字视觉上突出，但不影响SEO或屏幕阅读器。2)现代设计更倾向于<strong>标签表示重要性。3)在需要灵活样式控制时，<b>标签更方便，但需谨慎使用以免影响可访问性和SEO。
-
WebComponents组件化开发主要通过自定义元素、ShadowDOM、模板插槽和组件通信实现。1.自定义元素是核心，用于封装复杂逻辑，如创建独立的日期选择器组件；2.ShadowDOM提供样式和结构的隔离，防止全局污染；3.模板和插槽增强组件灵活性，允许定义可重用HTML片段并插入自定义内容；4.组件通信通过自定义事件和属性实现，支持组件间交互与控制。掌握这四个技巧可提升代码的可维护性和复用性。
-
在Vue.js应用中防止DDoS攻击需要前后端协同采取措施：1)前端使用setTimeout和setInterval限制用户请求频率；2)后端设置速率限制、负载均衡、缓存和WAF等防御策略。
-
Object.freeze方法用于将对象及其属性设置为不可修改和不可扩展。1)它确保对象在运行时保持不变，保护数据完整性并可能优化性能。2)但它只冻结第一层属性，需递归处理嵌套对象以确保完全不可变性。
-
要实现HTML进度条，需结合CSS和JavaScript。首先，创建包含两个div的结构，外层作为容器，内层表示进度；其次，用CSS定义样式并设置过渡效果；最后，通过JavaScript动态调整宽度。此外，可使用HTML5的progress标签，但自定义样式较复杂。为提升美观性，可添加渐变色、动画、文本显示等效果。对于异步加载，可通过监听事件（如XMLHttpRequest的upload.onprogress）实时更新进度条。
-
要在HTML中设置按钮的宽度和高度，最直接且推荐的方式是通过CSS来控制。1.使用内联样式：在HTML标签的style属性中直接写入width、height等CSS规则，优点是快速方便，缺点是不利于代码维护和复用；2.使用内部样式表：在HTML文档的<head>中通过<style>标签定义CSS规则，优点是样式集中管理可复用，缺点是仅限当前文件；3.使用外部样式表：将CSS规则写入独立的.css文件并通过<link>引入，这是最推荐的方式，优点是样式与结构分离，易于维护
-
CSS中float属性的取值包括：1.none（默认，不浮动）；2.left（浮动到左侧）；3.right（浮动到右侧）；4.inherit（继承父元素的float值）。这些值在创建多栏布局和环绕效果时非常有用，但使用时需注意清除浮动和响应式设计问题。
-
使用CSS美化表单输入框状态的方法包括：1.使用:focus伪类设置输入框获得焦点时的样式，如改变边框颜色和添加阴影；2.使用:disabled伪类设置禁用状态下的背景色；3.使用:valid和:invalid伪类根据验证结果调整边框颜色以提供即时反馈；4.通过::placeholder及浏览器兼容性写法自定义占位符样式，包括颜色、字体大小和透明度；5.结合HTML结构与CSS实现带清除按钮的输入框，利用相邻兄弟选择器控制按钮显示隐藏；6.添加眼睛图标并通过JavaScript切换密码类型实现密码可见/隐
-
div在HTML中有10种用法：1.作为简单容器；2.创建响应式网格布局；3.制作模态对话框；4.构建可折叠面板；5.制作导航菜单；6.创建幻灯片；7.实现标签页；8.语义化使用；9.响应式设计；10.性能优化和可访问性。div的灵活性使其成为前端开发的基石。
-
JavaScript模块化通过import和export实现代码拆分与复用，解决全局污染问题。1.每个文件为独立模块，默认变量不可见，需通过export导出功能；2.import用于引入其他模块的功能，支持命名导入、默认导入及整体导入；3.带来代码隔离、依赖明确、TreeShaking优化等优势；4.使用时注意避免默认与命名导出混淆、循环依赖及保持模块单一职责；5.浏览器原生支持ESM并通过构建工具优化，Node.js则采用CommonJS并逐步支持ESM，存在兼容性差异。
