随笔分类 - HTML
摘要：# SVG与foreignObject元素 可缩放矢量图形`Scalable Vector Graphics - SVG`基于`XML`标记语言，用于描述二维的矢量图形。作为一个基于文本的开放网络标准，`SVG`能够优雅而简洁地渲染不同大小的图形，并和`CSS`、`DOM`、`JavaScript`
阅读全文
摘要：蒙层禁止页面滚动的方案 弹窗是一种常见的交互方式，而蒙层是弹窗必不可少的元素，用于隔断页面与弹窗区块，暂时阻断页面的交互。但是在蒙层出现的时候滚动页面，如果不加处理，蒙层底部的页面会开始滚动，实际上我们是不希望他进行滚动的，因此需要阻止这种行为。当弹出蒙层时禁止蒙层下的页面滚动，也可以称为滚动穿透的
阅读全文
摘要：Service Worker的应用 Service worker本质上充当Web应用程序、浏览器与网络(可用时)之间的代理服务器，这个API旨在创建有效的离线体验，它会拦截网络请求并根据网络是否可用来采取适当的动作、更新来自服务器的的资源，它还提供入口以推送通知和访问后台同步API。 描述 Serv
阅读全文
摘要：Shadow DOM的理解 Shadow DOM是HTML的一个规范，其允许在文档document渲染时插入一颗DOM元素子树，但是这棵子树不在主DOM树中，Shadow DOM如果按照英文翻译的话可以翻译为影子DOM，是一种不属于主DOM树的独立的结构。 描述 Web components的一个重
阅读全文
摘要：实现三栏布局 三栏布局在开发十分常见，即两边固定宽度，中间自适应宽度的布局。 Flex 使用CSS3的flex布局实现三栏布局，Flex布局也称弹性布局，可以为盒状模型提供最大的灵活性，是布局的首选方案，现已得到所有现代浏览器的支持，此处主要是利用flex容器成员默认按照主轴排列，以及利用flex属
阅读全文
摘要：DOM和BOM的区别 在浏览器中运行的JavaScript可以认为由三部分组成：ECMAScript描述了该语言的语法和基本对象，DOM文档对象模型描述了处理网页内容的方法和接口，BOM浏览器对象模型描述了与浏览器进行交互的方法和接口。 DOM DOM是Document Object Model的缩
阅读全文
摘要：实现消息提示组件 在浏览器页面中，通用的消息提示组件一般可以分为静态局部提示和动态全局提示，用于反馈用户需要关注的信息，使用频率较高。 实现 实现消息提示组件，动态全局提示，主要使用原生JavaScript实现，实现的代码基本都作了注释。 <!DOCTYPE html> <html> <head>
阅读全文
摘要：实现加载提示组件 在开发时经常需要用到加载提示，例如发起一个XHR请求时就需要给予用户一个交互的反馈，实现一个加载提示组件，重要的部分已经做出注释。 实例 <!DOCTYPE html> <html> <head> <title>loading</title> <style type="text/c
阅读全文
摘要：实现拼图滑动验证码 拼图滑动验证码的纯前端简单实现，重要部分都已标注注释，如果需要配合后端可以参考此思路，后端处理图片生成一个带缺口的背景图与一个符合缺口的拼图，并将取得拼图块的位置记录到SESSION，将图片与拼图传给前端展示，当用户拖动并松开鼠标后将鼠标轨迹与停留位置发送到后端，后端从SESSI
阅读全文
摘要：Attribute和Property的区别 attribute是XML元素中的概念，用于描述XML标签的附加信息，即XML标签的属性，property是JavaScript对象中的概念，用于描述JavaScript对象的成员，即JavaScript对象的属性。 描述 在描述HTML时需要为其设定一些
阅读全文
摘要：常见的兼容性问题 浏览器有着大量不同的版本，不同种类的浏览器的内核也不尽相同，所以不同浏览器对代码的解析会存在差异，这就导致对页面渲染效果不统一的问题。 初始化样式 因浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，如果不初始化会造成不同浏览器之间的显示差异，布局出现错乱，所以要初始化样式，达
阅读全文
摘要：HTML与XHTML区别 HTML称为超文本标记语言Hyper Text Markup Language，是一种标识性的语言。XHTML称为扩展超文本标记语言Extensible HyperText Markup Language，同样是一种标识性的语言，表现方式与HTML类似，不过语法上更加严格。
阅读全文
摘要：可替换元素和非替换元素 可替换元素replaced element也称作可置换元素，其展现效果不是由CSS来控制的，这些元素是一种外部对象，它们外观的渲染，是独立于CSS的。非置换元素non-replaced element也称作非替换元素，其内容由CSS渲染直接表现给客户端。 可替换元素 一个内容
阅读全文
摘要：默认行为及阻止 浏览器以及HTML元素提供了一些默认行为，也可以称作默认事件。 默认行为 a标签点击跳转 <a>标签在href存在的情况下会点击自动跳转链接或者定位锚点，通过对<a>的监听事件阻止默认行为后，点击链接不会跳转。 <a href="https://blog.touchczy.top"
阅读全文
摘要：300ms点击延迟 移动端的300ms点击延迟是因为移动端可以进行双击缩放的操作，因此浏览器在click之后要等待300ms，看用户有没有下一次点击，也就是判断这次操作是单击还是双击。如果通过监听touchstart事件来替代click事件的话，会导致一些问题：touchstart是手指触摸屏幕就触
阅读全文
摘要：Web Worker JavaScript是单线程语言，如果在Js主线程上进行比较耗时的操作，那么不仅异步的事件回调无法正常完成，浏览器的渲染线程也将被阻塞，无法正常渲染页面。Web Worker能够把JavaScript计算委托给后台线程，线程可以执行任务而不干扰用户界面。 描述 worker是使
阅读全文
摘要：实现图片懒加载 图片懒加载就是当页面需要展示较多图片时，首先只加载显示在当前屏幕位置的图片，在页面向下滚动时，再加载其他需要显示在当前屏幕位置的图片，这样可以防止一次性对服务器发送大量请求，并可以在用户不需要完整浏览页面的情况下减少服务器资源消耗。 实例 每日一题
阅读全文
摘要：实现瀑布流布局 瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部，瀑布流的主要特性便是错落有致，定宽而不定高的设计让页面区别于传统的矩阵式图片布局模式。 实例 主体思路是记录每一列的高度，父容器相
阅读全文
摘要：图片等比例缩放方案 在 开发时无可避免的需要将图片进行缩放，缩放时需要保证图片不变形，也就是需要等比例缩放。 设定宽度或高度 引入图片时，仅设置图片的 或者是 就可以使另一边自适应，从而实现等比例缩放。 设定最大宽度或最大高度 引入图片时，仅设置图片的 或者是 就可以使另一边自适应，从而实现等比例缩
阅读全文
摘要：行内元素和块级元素 可以将元素种类分为行内元素、块级元素和行内块级元素三种，在使用过程中可以通过 的`display`属性相互转换。 行内元素 行内元素对应的 样式设置为 。 特点 元素排在一行 封闭后不会自动换行 不能指定高度与宽度 可以使用 来指定高度 外边距对于水平方向有效，垂直方向无效 内边
阅读全文
