2020
10-14
10-14
CSS中的grid网格布局
Grid布局与Flex布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
Flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。
Grid布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。.... Read More >
分类目录归档：HTML5+CSS
Grid布局与Flex布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
Flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。
Grid布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。.... Read More >
2020
10-13
10-13
CSS中的flex布局
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。
它即可以设置容器为块元素(display:flex)，也可以设置容器为行内元素(display:inline-flex)。
.... Read More >
2019
07-24
07-24
HTML5中的rel属性
rel 属性规定当前文档与被链接的url(使用href=""指定)之间的关系
仅<link>标签中使用的rel值：
stylesheet：调用外部样式表，用于链接css样式表
icon：指定标题栏,地址栏,收藏栏小图标，rel="shortcut icon" 为了兼容IE，必须包含shortcut才会在IE下显示，IE只支持ico格式
canonical.... Read More >
2019
07-15
07-15
CSS中的变量
CSS中的变量
一、变量的声明
声明变量的时候，变量名前面要加两根连词线(--)。
body {
--foo: #7F583F;
--bar: #F7EFD2;
}
上面代码中，body选择器里面声明了两个变量：--foo和--bar。
它们与正式属性没有什么不同，只是没有默认含义。所以 CSS 变量(CSS variable)又叫做.... Read More >
2019
07-15
07-15
自适应网页和响应式图像
自适应网页
手机的屏幕比较小，宽度通常在600像素以下，PC的屏幕宽度，一般都在1000像素以上。同样的内容，要在大小迥异的屏幕上，都呈现出满意的效果。很多网站的解决方法，是为不同的设备提供不同的网页，这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本。
"自适应网页设计"的概念
2010年，Ethan Marcotte提出了"自适应网页设计"(Responsive Web D.... Read More >
2018
05-18
05-18
URL中的的井号及搜索引擎抓取AJAX
URL中的#(井号)
一、#的涵义
#代表网页中的一个位置。其右面的字符，就是该位置的标识符。浏览器读取这个URL后，会自动将标识符位置滚动至可视区域。
为网页位置指定标识符，有两个方法。一是使用锚点，比如<a name="print"></a>，二是使用id属性，比如<div id="print" >。
二、HTTP请求不包括#
#是.... Read More >
2017
08-21
08-21
HTML5的WebSocket
WebSocket提供了一个受欢迎的技术，是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术，以替代我们过去几年一直在用的Ajax技术。
一、什么是WebSocket API?
WebSocket API是下一代客户端-服务器的异步通信方法。该通信取代了单个的TCP套接字，是基于TCP协议上的独立的通信协议，使用ws或wss协议，可用于任意的客户端和服务器程序。
WebSocke.... Read More >
2017
08-21
08-21
HTML5 服务器发送事件
HTML5 服务器发送事件(server-sent event)是单向消息传递，它允许网页获得来自服务器的更新，以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。
创建EventSource 对象用于接收服务器发送事件通知
var source=new EventSource("demo_sse.php");
事件open当成功与服务器建立连接时产生
事件message当收到服务.... Read More >
2017
08-21
08-21
HTML5 Web Workers使用介绍
web worker的作用
浏览器端JavaScript是以单线程的方式执行的，也就是说javascript和UI渲染占用同一个主线程，那就意味着，如果JavaScript进行高负载的数据处理，UI渲染就很有可能被阻断，从而造成用户体验的大打折扣。Web Workers作为HTML5新特性之一，为浏览器端JavaScript开创了一种新的运行模式，让web应用程序具备多线程处理能力，在另外的线程.... Read More >
2017
08-21
08-21
html5中的canvas绘图方法
CanvasRenderingContext2D对象的方法：
方法
参数
描述
arc(x, y, radius, startAngle, endAngle, counterclockwise)
x, y 描述弧的圆形的圆心的坐标。
radius 描述弧的圆形的半径。
startAngle, endAngle 沿着圆指定弧的开始点和结束点的一个角度。这个角度用弧度来衡量。沿着 X 轴正半.... Read More >