推荐一个好看Table表格的css样式代码详解
漂亮的table表格样式css源码漂亮的table表格样式
源码
<head>
<title></title>
<style type="text/css">
table
{
border-collapse: collapse;
margin: 0 auto;
text-align: center;
}
table td, table th
{
border: ...
基于HTTP浏览器缓存机制全面解析
目录什么是浏览器缓存非HTTP协议定义的缓存机制缓存流程图HTTP缓存机制服务端如何判断缓存已失效Last-Modified/If-Modified-SinceEtag/If-None-Match为什么有了Last-Modified还要Etag?200 OK（from cache）与304 Not Modified的区别200 OK( from cache ) 出现操作：304 Not Modified 出现操作：缓存的不同来源不能被缓 ...
HTML5(十二)——一文读懂 WebSocket 原理
一、WebSocket 由来
WebSocket 是一个持久化的协议，通过第一次 HTTP Request 建立连接之后，再把通信协议升级成 websocket，保持连接状态，后续的数据交换不需要再重复请求。websocket 可以看成一种类似 TCP/IP 的 socke t技术，在 web 应用中实现、并获得同 TCP/IP 通信一样的双向通信功能，因此客户端既和服务器可以发送 ...
CSS hack用法案例详解
之前一直很狭隘的对CSS hack持有偏见，觉得写得规范的代码不应该使用这些“邪门歪道”，可最近产品发布一个小问题却让我头疼了很久，最后查了一下资料，竟然使用CSS hack轻松解决了，不得不服啊，对付神奇的IE就得使用这些利器。
什么是CSS hack
由于不同的浏览器，甚至同一浏览器的不同版本对CSS的解析认识不一样，导致生 ...
CSS linear-gradient属性案例详解
目录一、介绍二、使用技巧2.1 方格背景2.2 棋盘效果linear-gradient是css3的一个属性，功能强大，但是因为使用的灵活性，让没接触过的人感觉不好下手，下面来一起学习一下：
一、介绍
linear-gradient 是一种实现线性渐变的属性，顾名思义，它的特点的是控制渐变，特点是线性的进行控制。
属性介绍：
linear-gradient([ ...
通过CSS实现逼真水滴动效
哈喽哈喽！CSS真的好好玩啊，哈哈，反正我是爱了，空闲写着玩。画画不好的我乐了，下面就是一个用CSS3动画完成的模仿水珠的动效，其中主要就是会使用CSS设置阴影效果以及@keyframes关键帧和一些选择器的技术，快来学习吧！！！🐬
实现效果：就很nice
你也通过一下网址进行访问水滴点击进入
灵感：看到了这张图阴 ...
CSS将div内容垂直居中案例总结
一、行高（line-height）法
如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：
p { height:30px; line-height:30px; width:100px; overflow:hidden; }
这段代码可以达到让文字在段落中垂直居中的效果。
二、内边距（padding）法
另一种方法和行高法很相似，它同样 ...
HTML5(十一)——WebSocket 基础教程
一、为什么要学 WebSocket?
websocket 是 HTML5 提供的一种长链接双向通讯协议，使得客户端和服务器之间的数据交换更简单，允许服务端主动向客户端推送数据，并且客户端与服务端只需连接一次，就可以保持长久连接，并进行数据通信。
websocket 与 http 区别：
http 链接分为长链接、短链接，短链接是发送一个请求，返回一 ...
offsetTop用法详解
1. offsetTop：元素到offsetParent顶部的距离
2. offsetParent：距离元素最近的一个具有定位的祖宗元素（relative，absolute，fixed），若祖宗都不符合条件，offsetParent为body。如下图所示：获取child的offsetTop，图1的offsetParent为father，图2的offsetParent为body。
3. 注意：只有元素show（渲染完成）才会计算入of ...
HTML 绝对路径与相对路径概念详细
路径指文件存放的位置，在网页中利用路径可以引用文件，插入图像、视频等。表示路径的方法有两种：相对路径，绝对路径。以下讨论均是在HTML环境下进行。
相对路径
相对路径是指目标相对于当前文件的路径，网页结构设计中多采用这种方法来表示目标的路径。相对路径有多种表示方法，其表示的意义不尽相同。表示方法如下：
./ ...
HTML5(九)——超强的 SVG 动画
SVG 动画有很多种实现方法，也有很大SVG动画库，现在我们就来介绍 svg动画实现方法都有哪些？
一、SVG 的 animation
SVG animation 有五大元素，他们控制着各种不同类型的动画，分别为：
set
animate
animateColor
animateTransform
animateMotion
1.1、set
set 为动画元素设置延迟，此元素是SVG中最简单的动画元素，但是 ...
HTML5(八)——SVG 之 path 详解
path 是 SVG 基本形状中最强大的一个，不仅可以实现我们上一篇《HTML5(七)——SVG基础入门》中，介绍的 SVG 预定义的 line、rect、circle、ellipse、line、polyline、polygon 六种基本形状。还可以实现更复杂的效果，我们就开始学习 path 如何应用。
一、path 路径详解
1.1、path 命令
path 用于定义一个路径，其中命令就是 ...
HTML5(七)——SVG基础入门
声明：SVG 虽然也是标签，但它不是 HTML5，标题加了 HTML5 只是为了与 canvas 放到一起。
一、为什么要学 SVG ?
SVG 意为可缩放矢量图形（Scalable Vector Graphics），使用 XML 格式定义矢量图形。其他的图像格式都是基于像素的，但是 SVG 没有单位的概念，它的20只是表示1的20倍，所以 SVG 绘制的图形放大或缩小都不会失 ...
HTML5(六)——Canvas 高级操作
上一篇文章《HTML5(五)——Canvas API》介绍 canvas 绘制基本图形，这节开始介绍canvas的高级操作。
一、canvas 转换
canvas 转换常用的几种方法介绍，如下：
方法
描述
scale()
缩放当前绘图至更大或更小。
rotate()
旋转当前绘图。
translate()
重新映射画布上的 (0,0) 位置。
transform( ...
HTML5(五)——Canvas API
什么是 Canvas API?
Canvas API（画布）提供了一个通过 javascript 和 html 的 canvas 元素来在网页上实时绘制图形的方式。可用于动画、游戏、图标、图片编辑等多个方面。
使用前，首先需要新建在网页上新建 canvas 元素。
<canvas id="mycanvas" width="400" height="400">
您的浏览器不支持canvas！
</canvas>
上述代码 ...
html5 播放 rtsp
目前大多数网络摄像头都是通过 RTSP 协议传输视频流的，但是 html 并不标准支持 RTSP 流。除了 Firefox 浏览器可以直接播放 RTSP 流之外，几乎没有其他浏览器可以直接播放 RTSP 流。Electron 应用是基于 Chromium 内核的，因此也不能直接播放 RTSP 流。
在借助一定工具的情况下，可以实现在 Web 页面上播放 ...
CSS3使用过度动画和缓动效果案例讲解
transition过渡：
四个小属性
属性
意义
transition-property
哪些属性要过渡
transition-duration
动画时间
transition-timing-function
...
HTML5新增了哪些特性？
什么是HTML5?
HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。设计目的是为了在移动设备上支持多媒体。HTML5是最新的html标准，拥有新的语义、图形以及多媒体元素，简化web应用，对应程序员来说也是简单易学。通常简称 “H5”。
支持HTML5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Ch ...
HTML5
HTML5
目录HTML51. 初识HTML1.1 W3C标准1.2 HTML基本结构2. 标签2.1 网页标签2.2 图像标签2.3 链接标签3. 行内元素和块元素4. 列表5. 表格6. 视频和音频7. 页面结构分析8. iframe内联框架9. 表单9. 1 表单语法9. 2 表单应用9.3 表单初级验证
1. 初识HTML
HTML：Hyper Text Markup Language（超文本标记语言）
1.1 W3C标准 ...
html form表单基础入门案例讲解
目录一，表格标签–1，概述–2，总结二，表单标签–1，测试–2，总结–3，form提交数据三，form表单的练习四，CSS-1，概述-2，语法-3，入门案例五，选择器总结一，表格标签
向网页中加入表格
–1，概述
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 表格标签</title>
</head>
<body>
<!-- ...
