随笔分类 - 前端学习
前端学习中比较重要的知识点
摘要：#常见正则表达式 ##一、匹配某字符的正则 ^ 匹配一个输入或一行的开头， /^a/匹配以a开头的输入如“abc”或“acgth” /匹配以a结尾的输入如“bca”或“cgtha” * 匹配前面元字符0次或多次， /bca*/将匹配bc,bca,bcaa,bca
阅读全文
摘要：#原生JS在进行元素属性操作时，标签中的属性和对象中的属性不是同一个属性是什么意思？ 1、原生JS元素属性操作方式 原生JS进行元素属性操作时，一般有两种方式： ###1、获取和设置标签中的属性 语法是： 1.获取标签属性的属性值：节点对象.getAttribute("属性名") 2.给标签设置新的
阅读全文
摘要：#css Hack ##作用 好处：使用CSS Hack可以控制不同的浏览器及版本之间的显示差异，某些情况下处理兼容问题可以事半功倍 坏处：滥用会影响页面性能，也会导致后期维护困难，因此尽可能减少对CSS Hack的使用。 开发者必须慎用CSS Hack，能不用就不用。 ##分类 ###1、条件Ha
阅读全文
摘要：#一、css技巧及兼容性问题解决 ##1、清除图片下方出现几像素的空白间隙 ###方法1：将图片显示为块 img{display:block;} ###方法2：改变图片的vertical-align img{vertical-align:top;} /*除了top值，还可以设置为text-top |
阅读全文
摘要：#页面布局 ##左右两侧宽度固定，中间部分自适应的三列布局 ###1、圣杯布局 ####实现方法 1）HTML结构中，先主体内容后侧边 2）两侧宽度固定，中间宽度设置100% 3）两侧盒子和中间盒分别加浮动(float:left;) 4）将左侧盒子拉到最左边（margin-left: -100%），
阅读全文
摘要：阿里矢量图标的使用： 1）通过检索界面搜索到需要的图标，添加到购物车 2）打开购物车--选择“下载代码”|打开购物车--添加入项目--在项目中下载代码 3）将下载好的文件夹中的字体文件（.eot|.ttf|.svg|.woff|.woff2）放入项目的fonts文件夹内 4）将下载好的css文件（i
阅读全文
摘要：页面TDK （1）T-title 网页标题 可以作为默认快捷方式或收藏夹的名称；标题与页面内容相关，尽量简洁 <title></title> （2）D-description 页面的描述信息 不宜过长，否则搜索引擎会以“...”省略 <meta name="description" content=
阅读全文
摘要：图片格式说明优点缺点应用备注 jpg(jpeg) 不支持透明 色彩丰富，文件小 有损压缩，反复保存，会降低图片质量 网页中的大图、高清图 gif 支持透明、不透明、动画 文件较小，支持透明，没有兼容问题 色彩简单，只支持256种颜色 色彩较为单一的小图标，动画图片 png 支持透明、不透明、半透明
阅读全文
摘要：小箭头的实现 原理 (1)使用css绘制两个三角形 (2)通过绝对定位让两个三角形不完全重叠 (3)让处于上层的三角形比处于下层的三角形偏移1像素，生成空心箭头 兼容处理： 在IE6及更低版本的浏览器中添加font-size: 0; line-height: 0; 目的是为了让三角形的height:
阅读全文
摘要：浮动和定位对比 css2中可以脱离正常文档流的属性 float: left|right; 脱离文档流，但不脱离文本流 position: absolute|fixed; 既脱离文档流，又脱离文本流 所有元素都能使用上方的属性 元素脱离正常文档流之后，不再区分块级和行级元素，都具有相同的属性，如果不设
阅读全文
摘要：方法一： 使用margin:auto;实现具有width属性和height属性的绝对定位元素的居中 .box{ width:; height:; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } 方
阅读全文
摘要：伪元素： 用css语言创造出来的标签使用方法： 在ele元素内部，内容之前添加一个内容 ele::before{ content: ""; 属性: 属性值; } 在ele元素内部，内容之后添加一个内容 ele::after{ content: ""; 属性: 属性值; }
阅读全文
摘要：SSE，即HTML5 服务器发送事件（Server-Sent Events） HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新。 Server-Sent 事件 - 单向消息传递 Server-Sent 事件指的是网页自动获取来自服务器的更新。 以前也可能做
阅读全文
摘要：#HTML5 Web Workers web worker 是运行在后台的 JavaScript，不会影响页面的性能。 什么是 Web Worker？ 当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。 web worker 是运行在后台的 JavaScript，独立于其他脚
阅读全文
摘要：#HTML5 应用程序缓存（Application Cache） 使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。 什么是应用程序缓存？ HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。 应用程
阅读全文
摘要：#HTML5 Web SQL 数据库 Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。 如果你是一个 Web 后端程序员，应该很容易理解 SQL 的操作。 Web SQL 数据库可以在最新版的 Safar
阅读全文
摘要：3.20、HTML5 WebSocket WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次
阅读全文
摘要：HTML5 Web 存储 HTML5 web 存储，一个比cookie更好的本地存储方式。 什么是 HTML5 Web 存储? 使用HTML5可以在本地存储用户的浏览数据。 早些时候，本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速，这些数据不会被保存在服务器上，但是这些数据只用
阅读全文
摘要：HTML5 语义元素 语义= 意义 语义元素 = 有意义的元素 什么是语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发者。 无语义 元素实例: <div> 和 <span> - 无需考虑内容。语义 元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容
阅读全文
摘要：三、HTML进阶 3.9、HTML5 Video(视频) 很多站点都会使用到视频，HTML5 提供了展示视频的标准。 Web站点上的视频 直到现在，仍然不存在一项旨在网页上显示视频的标准。 今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。 HTML5 规
阅读全文
