宜春做网站,未来网登录网址,泰安网站seo,佛山企业网站建设流程目录
1.为什么会出现margin塌陷#xff1f;
2.如何解决margin塌陷#xff1f;
3.HTML5有哪些新特性#xff1f;
4.常见的语义化标签有哪些#xff1f;语义化标签的好处#xff1f;
5.使用css和js做动画有何优劣
6.如何实现文本超出展示省略号
7.deep在css中存在吗
2.如何解决margin塌陷
3.HTML5有哪些新特性
4.常见的语义化标签有哪些语义化标签的好处
5.使用css和js做动画有何优劣
6.如何实现文本超出展示省略号
7.deep在css中存在吗
8.xhtml和html的区别 9.script标签中defer和async的区别
10.什么是强缓存、协商缓存 11.Cookie、Session、LocalStorage、SessionStorage的区别
12. 输入一个URL到页面过程中发生了什么
13. DNS解析的过程
14.Cookie有哪些配置项 1.为什么会出现margin塌陷 设计初衷 CSS规范中设定Margin塌陷是为了简化内容排版。例如段落p默认有上下外边距若多个段落垂直排列合并外边距可使间距更自然如两个margin: 20px的段落间距仍为20px而非40px。 触发条件 相邻兄弟元素垂直排列的两个块级元素上下边距相遇时合并。 父元素与子元素父元素无边框、内边距或内容阻隔时第一个/最后一个子元素的margin可能与父元素的margin合并。 空块级元素无内容、内边距、边框的元素上下边距会合并。 补充Margin塌陷的规则 合并后的值取两个margin中的较大值。若一正一负则取两者之和若均为负取绝对值较大者。 仅限垂直方向水平方向的外边距不会合并。 仅块级元素行内元素、浮动元素、绝对定位元素不会触发。 2.如何解决margin塌陷 添加阻隔 给父元素设置border或padding即使border: 1px solid transparent。 在相邻元素间添加内容或注释如div stylecontent: /div。 触发BFC块级格式化上下文 BFC会阻止内部元素与外部元素的Margin合并。触发方式 设置父元素overflow: hidden/auto。 使用display: flow-root推荐无副作用。 设置float: left/right或position: absolute/fixed。 避免空元素 为空元素添加padding、height或最小高度min-height。 替代方案 使用padding代替margin。 使用Flex或Grid布局避免传统盒模型的Margin合并。 3.HTML5有哪些新特性 语义化标签 媒体标签video和audio 图形动画Canvas和svg 表单增强 新输入类型email、url、number、date、range、search 等。 新属性 placeholder输入框提示文本。 required必填字段验证。 autocomplete自动填充建议。 pattern正则表达式验证。 本地存储 Web Storage客户端存储数据替代 Cookie。 localStorage永久存储直到手动清除。 sessionStorage会话期间存储关闭标签页后失效。 IndexedDB浏览器端非关系型数据库支持大量数据存储。 拖放 API 通信与实时交互 WebSocket全双工通信协议支持实时数据传输如聊天应用。 WebRTC浏览器间直接音视频通信如视频会议。 4.常见的语义化标签有哪些语义化标签的好处 语义化标签 header、footer页眉和页脚。 nav导航栏。 article独立内容块如博客文章。 section文档中的逻辑分区。 aside侧边栏或附加内容。 main页面主要内容区域。 figure 和 figcaption媒体内容及其标题。 好处 提升 SEO搜索引擎优化 增强可访问性Accessibility 提高代码可读性与维护性 5.使用css和js做动画有何优劣
实现原理 CSS Transform/Animation 浏览器优化机制通过 CSS 的 transform 或 animation 实现的动画浏览器会在合成器线程Compositor Thread中处理跳过主线程的布局Layout和绘制Paint阶段。 硬件加速transform 和 opacity 属性的动画会被浏览器自动优化触发 GPU 加速通过 will-change 或 translateZ 进一步强化生成独立的合成层Composite Layer避免重排Reflow和重绘Repaint。 声明式语法通过 keyframes 或 transition 定义动画浏览器自动插值计算中间帧。 JavaScript 动画 逐帧控制通常通过 requestAnimationFrame 或定时器如 setInterval逐帧修改元素的属性如 left、width 或 transform 值。 主线程依赖大多数属性修改如 width、margin会触发重排和重绘这些操作在主线程执行可能被其他任务阻塞导致卡顿。 手动优化开发者需要自行处理性能优化例如批处理 DOM 操作、使用 transform 替代布局属性等。 性能对比
特性CSS Transform/AnimationJavaScript 动画线程执行合成器线程独立于主线程主线程可能被阻塞重排/重绘无仅合成阶段可能触发依赖修改的属性GPU 加速自动优化需手动触发如使用 transform帧率稳定性高浏览器优化低依赖代码质量
优缺点对比 CSS 动画的优点 高性能浏览器自动优化适合简单动画如平移、旋转、缩放。 代码简洁声明式语法实现动画更简单如 transition: transform 0.3s ease。 流畅性独立于主线程运行不受 JavaScript 任务阻塞。 CSS 动画的缺点 控制能力弱难以实现复杂逻辑如弹性动画、路径跟随。 调试困难动态修改参数需要覆盖 CSS 类或内联样式。 JavaScript 动画的优点 精细控制适合复杂动画如物理效果、逐帧滚动、游戏动画。 灵活交互动态调整动画参数如暂停、反转、实时响应事件。 JavaScript 动画的缺点 性能风险不当使用易导致卡顿如频繁修改布局属性。 开发成本高需手动优化性能如节流、缓存变量。 6.如何实现文本超出展示省略号
// 多行文本
.text {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; /* 控制显示的行数 */line-clamp: 2; /* 标准属性部分浏览器可能不支持 */
}// 单行文本
.single-line {overflow: hidden; /* 隐藏溢出内容 */white-space: nowrap; /* 禁止文本换行 */text-overflow: ellipsis; /* 溢出显示省略号 */width: 200px; /* 必须设置宽度或父级有宽度限制 */
}
7.deep在css中存在吗
deep是一种vue语法糖在原生css中不存在具体写法如下 语法 推荐程度 兼容性 使用场景 /deep/ 不推荐 已废弃 旧版 Vue 不推荐 已废弃 早期 CSS Modules ::v-deep 推荐 Vue 2 和 Vue 3 兼容 Vue 2 或向后兼容 :deep() 强烈推荐 Vue 3 标准 Vue 3
8.xhtml和html的区别 XHTML和HTML的主要区别在于语法严格性、文件扩展名、标签和属性要求以及应用场景等方面。 首先语法严格性是两者最显著的区别之一。XHTML要求所有标签必须闭合即使是空标签也需要闭合例如br应写作br/而HTML则相对宽松某些情况下标签可以不闭合。此外XHTML区分大小写标签和属性名称必须使用小写而HTML不区分大小写。XHTML的属性值必须用引号括起来无论是单引号还是双引号都可以使用而HTML则不需要。 其次文件扩展名也不同。HTML文件的扩展名可以是.html或.htm而XHTML文件的扩展名则是.xhtml、.xht或.xml。 在标签和属性要求方面XHTML要求所有标签必须正确嵌套和闭合标签名必须小写属性值必须用引号括起来。例如正确的XHTML代码是img srcimg.jpg / 而错误的写法是img srcimg.jpg。 最后应用场景方面XHTML更适合用于需要严格结构的应用如XML处理工具因为它符合XML规范。而HTML则适用于传统的Web浏览器解析语法相对宽松更适合快速开发和部署。 9.script标签中defer和async的区别 默认情况script标签会按照在HTML中的顺序执行下载后同步加载脚本阻塞页面加载和渲染 async属性脚本会异步下载并执行不会阻塞页面加载和渲染脚本下载完后立即执行不管其在文档中的位置。 defer属性脚本也会异步下载但不会立即执行将在文档解析完成时按照在文档中的顺序加载。 10.什么是强缓存、协商缓存 强缓存 当浏览器请求资源时首先检查本地缓存是否命中。如果命中则直接从缓存中读取资源无需向服务器发送任何请求。返回200 协商缓存 当强缓存未命中时浏览器会向服务器发送请求询问服务器资源是否发生变化。如果服务器告知资源未改变则浏览器从缓存中读取资源如果服务器告知资源已改变则浏览器会下载新资源并更新缓存。返回304 11.Cookie、Session、LocalStorage、SessionStorage的区别 Cookie: 存储位置Cookie存储在客户端的浏览器中。 生命周期Cookie可以设置过期时间Expires或Max-Age到期后自动删除若未设置过期时间则为会话级浏览器关闭后清除。 容量限制一般大小限制为4KB左右。 使用场景主要用于用户身份认证如记住登录状态、保存用户偏好设置和跟踪用户行为如广告点击记录。 安全性容易被劫持如XSS攻击可以通过设置HttpOnly和Secure属性提高安全性。 登录状态可以在用户未登录时使用。 跨页面可以跨多个页面和不同子域共享。 传输数据每次请求都会携带 Cookie 数据。 Session: 高安全性场景适用于需要保护敏感数据的场景如在线银行、支付系统等。 存储位置Session存储在服务端服务器为每一个用户创建唯一的会话Session。 生命周期Session存在于用户活动的会话期间当用户退出或者关闭浏览器会话数据就会被删除。 容量限制取决于服务器配置。 使用场景用户会话管理用于存储用户的会话信息如购物车数据、用户权限等。 安全性相对安全通过加密的 Session ID 进行识别和验证且客户端不可见。 登录状态需要用户登录后才能创建和访问会话数据。 跨页面通常只能在单个会话期间。 传输数据仅在初始会话时传输 Session ID后续请求不再携带全部会话数据。 LocalStorage: 前端缓存用于缓存大量数据提高应用性能和用户体验。 存储位置存储在客户端浏览器内。 生命周期持久性存储除非手动删除否则永久有效。 容量限制一般为 5-10MB各浏览器可能不同。 使用场景长期数据存储适用于存储长期有效的数据如用户偏好设置、浏览历史等。 安全性易受 XSS 攻击数据存储在客户端。 登录状态需要用户登录后才能创建和访问会话数据。 跨页面可以在同一域下的所有页面中共享数据。 传输数据不随请求发送仅在客户端存储和访问。 SessionStorage: 多标签页数据隔离在同一域名下的不同标签页之间实现数据隔离防止数据污染。 存储位置存储在客户端浏览器内。 生命周期会话级别浏览器关闭或标签页关闭后失效。 容量限制一般为 5-10MB各浏览器可能不同。 使用场景临时数据存储适用于存储会话级别的数据如表单数据、页面状态等。 安全性易受 XSS 攻击数据存储在客户端。 登录状态需要用户登录后才能创建和访问会话数据。 跨页面手动新建标签页无法共享数据通过链接打开新页面会复制一套原有数据但与原数据是独立的。 传输数据不随请求发送仅在客户端存储和访问。 12. 输入一个URL到页面过程中发生了什么 通过 DNS 解析域名的实际 IP 地址 检查浏览器是否有缓存命中则直接取本地磁盘的 html如果没有命中强缓存则会向服务器发起请求先进行下一步的 TCP 连接 若强缓存和协商缓存都没有命中则返回请求结果 然后与 WEB 服务器通过三次握手建立 TCP 连接。期间会判断一下若协议是 https 则会做加密如果不是则会跳过这一步 加密完成之后浏览器发送请求获取页面 html服务器响应 html这里的服务器可能是 server、也可能是 cdn 接下来是浏览器解析 HTML开始渲染页面 构建DOM树词法分析然后解析成DOM树dom tree是由dom元素及属性节点组成树的根是document对象 构建CSS规则树生成CSS规则树CSS Rule Tree 构建render树Web浏览器将DOM和CSSOM结合并构建出渲染树render tree 布局Layout计算出每个节点在屏幕中的位置 绘制Painting即遍历render树并使用UI后端层绘制每个节点。 13. DNS解析的过程 浏览器缓存浏览器首先检查自身缓存是否有该域名的IP记录若有则直接使用。 系统缓存与Hosts文件若浏览器无缓存操作系统检查本地缓存如Windows的DNS缓存及Hosts文件存在记录则返回。 本地DNS服务器查询 用户配置的本地DNS服务器如ISP提供的或公共DNS接收递归查询请求。 若本地DNS有缓存且未过期直接返回IP否则开始迭代查询。 根域名服务器指引本地DNS向根服务器查询根服务器返回管理该顶级域如.com的顶级域名服务器地址。 顶级域名服务器指引本地DNS询问顶级服务器如.com服务器获取管理目标域如example.com的权威服务器地址。 权威域名服务器解析本地DNS向权威服务器查询获得域名对应的IP如www.example.com的A记录并缓存结果。 结果返回与缓存本地DNS将IP返回给用户浏览器缓存该记录后续请求可快速响应。 14.Cookie有哪些配置项 1.名称和值Name and Value 每个Cookie都有一个名称和值名称和值由服务器设置并在发送给客户端时存储在浏览器中。 document.cookie usernameJohnDoe; 2.域Domain 指定Cookie所属的域。默认情况下Cookie属于创建它的域。 document.cookie usernameJohnDoe; domainexample.com; 3.路径Path 指定Cookie的有效路径。只有在该路径下的页面才能访问Cookie。 document.cookie usernameJohnDoe; path/account; 4.有效期Expires 指定Cookie的过期时间。可以设置为特定的日期和时间超过这个时间后Cookie将被删除。 document.cookie usernameJohnDoe; expiresFri, 31 Dec 2024 23:59:59 GMT; 5.最大年龄Max-Age 指定Cookie从创建开始的有效时间以秒为单位。这个属性比expires属性更精确。 document.cookie usernameJohnDoe; max-age3600; 6.安全性Secure 指定Cookie只能通过HTTPS协议发送确保数据传输的安全性。 document.cookie usernameJohnDoe; secure; 7.HttpOnly 指定Cookie只能通过HTTP协议访问客户端JavaScript无法访问增加安全性防止跨站脚本攻击XSS。 document.cookie usernameJohnDoe; HttpOnly; 8.SameSite 指定Cookie的SameSite属性防止跨站请求伪造CSRF攻击。取值可以是Strict、Lax或None。 document.cookie usernameJohnDoe; SameSiteStrict; 创建于2025.5.29后续继续更新
