HTML

HTML

HTML

HTML

等 2 人订阅共33篇文章创建于2024-01-19

Shadow DOM的理解

Shadow DOM的理解 Shadow DOM是HTML的一个规范，其允许在文档document渲染时插入一颗DOM元素子树，但是这棵子树不在主DOM树中，Shadow DOM如果按照英文翻译的话可以翻译为影子DOM，是一种不属于主DOM树的独立的结构。描述 Web components的一个重

2年前
343
点赞
评论

实现消息提示组件

实现消息提示组件在浏览器页面中，通用的消息提示组件一般可以分为静态局部提示和动态全局提示，用于反馈用户需要关注的信息，使用频率较高。实现实现消息提示组件，动态全局提示，主要使用原生JavaScript实现，实现的代码基本都作了注释。 <!DOCTYPE html> <html

2年前
327
点赞
评论

图片等比例缩放方案

图片等比例缩放方案在开发时无可避免的需要将图片进行缩放，缩放时需要保证图片不变形，也就是需要等比例缩放。设定宽度或高度引入图片时，仅设置图片的或者是就可以使另一边自适应，从而实现等比例缩放。设定最大宽度或最大高度引入图片时，仅设置图片的或者是就可以使另一边自适应，从而实现等比例缩

2年前
670
点赞
评论

实现加载提示组件

实现加载提示组件在开发时经常需要用到加载提示，例如发起一个XHR请求时就需要给予用户一个交互的反馈，实现一个加载提示组件，重要的部分已经做出注释。实例 <!DOCTYPE html> <html> <head> <title>loading<

2年前
177
点赞
评论

Service Worker的应用

Service Worker的应用 Service worker本质上充当Web应用程序、浏览器与网络(可用时)之间的代理服务器，这个API旨在创建有效的离线体验，它会拦截网络请求并根据网络是否可用来采取适当的动作、更新来自服务器的的资源，它还提供入口以推送通知和访问后台同步API。描述 Serv

2年前
543
1
评论

常见的兼容性问题

常见的兼容性问题浏览器有着大量不同的版本，不同种类的浏览器的内核也不尽相同，所以不同浏览器对代码的解析会存在差异，这就导致对页面渲染效果不统一的问题。初始化样式因浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，如果不初始化会造成不同浏览器之间的显示差异，布局出现错乱，所以要初始化样式，达

2年前
228
点赞
评论

Attribute和Property的区别

Attribute和Property的区别 attribute是XML元素中的概念，用于描述XML标签的附加信息，即XML标签的属性，property是JavaScript对象中的概念，用于描述JavaScript对象的成员，即JavaScript对象的属性。描述在描述HTML时需要为其设定一些

2年前
249
点赞
评论

前端性能优化方案

前端性能优化方案前端资源比较庞大，包括HTML、CSS、JavaScript、Image、Flash、Media、Font、Doc等等，前端优化相对比较复杂，对于各种资源的优化都有不同的方式，按粒度大致可以分为两类，第一类是页面级别的优化，例如减小HTTP请求数、脚本的无阻塞加载、内联脚本的位置优

2年前
246
点赞
评论

300ms点击延迟

300ms点击延迟移动端的300ms点击延迟是因为移动端可以进行双击缩放的操作，因此浏览器在click之后要等待300ms，看用户有没有下一次点击，也就是判断这次操作是单击还是双击。如果通过监听touchstart事件来替代click事件的话，会导致一些问题：touchstart是手指触摸屏幕就触

2年前
243
1
评论

实现拼图滑动验证码

实现拼图滑动验证码拼图滑动验证码的纯前端简单实现，重要部分都已标注注释，如果需要配合后端可以参考此思路，后端处理图片生成一个带缺口的背景图与一个符合缺口的拼图，并将取得拼图块的位置记录到SESSION，将图片与拼图传给前端展示，当用户拖动并松开鼠标后将鼠标轨迹与停留位置发送到后端，后端从SESSI

2年前
320
点赞
评论

蒙层禁止页面滚动的方案

蒙层禁止页面滚动的方案弹窗是一种常见的交互方式，而蒙层是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是在蒙层出现的时候滚动页面，如果不加处理，蒙层底部的页面会开始滚动，实际上我们是不希望他进行滚动的，因此需要阻止这种行为。当弹出蒙层时禁止蒙层下的页面滚动，也可以称为滚动穿透的

2年前
304
点赞
评论

HTML节点操作

HTML节点操作 HTML节点的基本操作，添加节点，替换节点，删除节点，绑定事件，访问子节点，访问父节点，访问兄弟节点。文档对象模型Document Object Model，简称DOM，是W3C组织推荐的处理可扩展标记语言XML的标准编程接口，是一种与平台和语言无关的应用程序接口API。根据W

2年前
153
点赞
评论

LocalStorage与SessionStorage

localStorage与sessionStorage localStorage和sessionStorage是HTML5提供的对于Web存储的解决方案。相同点都与HTTP无关，是HTML5提供的标准，当发起HTTP请求时不会与Cookie一样自动携带。都是以键值对的形式存在，即Key-Val

2年前
219
点赞
评论

iframe框架及优缺点

iframe框架及优缺点 HTML5不再支持使用frame，关于frame与iframe的区别，可以参阅 iframe与frame的区别。基本使用 src：规定在iframe中显示的文档的URL。 frameborder：规定是否显示框架周围的边框。 scrolling：规定是否在iframe中显

2年前
216
点赞
评论

Cookie与Session

Cookie与Session 会话跟踪是Web程序中常用的技术，HTTP协议是无状态的，确定用户身份就需要跟踪用户的整个会话。最常用的会话跟踪是使用Cookie与Session，简单来说Cookie通过在客户端记录信息确定用户身份，Session通过在服务器端记录信息确定用户身份。 Cookie 由

2年前
217
点赞
评论

实现三栏布局

实现三栏布局三栏布局在开发十分常见，即两边固定宽度，中间自适应宽度的布局。 Flex 使用CSS3的flex布局实现三栏布局，Flex布局也称弹性布局，可以为盒状模型提供最大的灵活性，是布局的首选方案，现已得到所有现代浏览器的支持，此处主要是利用flex容器成员默认按照主轴排列，以及利用flex属

2年前
266
点赞
评论

DOM和BOM的区别

DOM和BOM的区别在浏览器中运行的JavaScript可以认为由三部分组成：ECMAScript描述了该语言的语法和基本对象，DOM文档对象模型描述了处理网页内容的方法和接口，BOM浏览器对象模型描述了与浏览器进行交互的方法和接口。 DOM DOM是Document Object Model的缩

2年前
267
点赞
评论

SVG基础 SVG可缩放矢量图形Scalable Vector Graphics是基于可扩展标记语言XML，用于描述二维矢量图形的一种图形格式。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式，SVG于2003年成为W3C推荐标准。示例 &

2年前
181
点赞
评论

Web Worker JavaScript是单线程语言，如果在Js主线程上进行比较耗时的操作，那么不仅异步的事件回调无法正常完成，浏览器的渲染线程也将被阻塞，无法正常渲染页面。Web Worker能够把JavaScript计算委托给后台线程，线程可以执行任务而不干扰用户界面。描述 worker是使

2年前
184
点赞
评论

DOCTYPE DOCTYPE是document type(文档类型)的简写，在web设计中用来说明使用的XHTML或者HTML是什么版本。 HTML5 不基于 SGML，所以不需要引用 DTD。 <!DOCTYPE html>声明必须是 HTML 文档的第一行，位于 <html&

2年前
253
点赞
评论