HTML5和CSS3归纳（仅供自己记录复习基础点）

前言
一、HTML5
- 1.常用新标签
- 2.新增的input属性
- - 1. 新增的type属性值
  - 2.input常用新属性
- 3.多媒体标签
二、CSS3
- 1.文本新增属性
- - 1.文本颜色半透明
  - 2.文字阴影:text-shadow
- 2.新增背景属性
- - 1.背景透明
  - 2.背景缩放:background-size
  - 3.多背景图片
- 3.新增选择器
- - 1.新增伪类选择器（2种）
  - 2.新增了伪元素选择器
- 4.盒模型
- - 1.CSS3盒模型：box-sizing:
  - 2.圆角边框
  - 3.盒子阴影：box-shadow
- 5.过渡：transition
- 6.变形：transform
- - 1. 2D变形
  - - (1)移动：translate(x, y)
    - (2)缩放：scale(x, y)
    - (3)旋转：rotate(deg)
    - (4调整元素转换变形的原点：transform-origin
    - (5)倾斜：skew(deg, deg)
  - 2. 3D变形
  - - (1)立体旋转：rotateX(deg)、rotateY(deg)、rotateZ(deg)
    - (2)透视：perspective
    - (3)移动：translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z)
- 7.动画：animation
- 8.伸缩布局

持续慢慢补充中…

前言

w3c 手册中文官网 ：添加链接描述
随时查阅

一、HTML5

1.常用新标签

常用如header、nav、footer、article、section、aside、datalist、fieldset。详细可查看w3c官网HTML5新元素

header：定义文档的页眉
nav：定义导航链接的部分
footer：定义文档或节的页脚
article：定义文档内的文章
section：定义文档中的节（section、区段）（用法自由）
aside：定义其所处内容之外的内容(如侧边栏）

通俗来说，<header></header>就可理解为<div class="header"></div>，其他同理。语义更好。

datalist：标签定义选项列表。请与 input 元素配合使用该元素

<!--通过list和id来建立连接--><input type="text" value="" list="id值">
<datalist id="id值"><option></option><option></option><option></option>
</datalist>

效果如下：

fieldset：元素可将表单内的相关元素分组、打包。 legend 搭配使用
```
<fieldset><legend>边框标题</legend>表单内容
</fieldset>
```
如下图：

补充一个曾经做的一个项目所用到比较多的一个新标签

figure: 定义自包含内容，比如图示、图表、照片、代码清单等。

<figcaption>是定义 <figure> 元素的标题。

2.新增的input属性

1. 新增的type属性值

类型	使用示例	含义
email	`<input type="email">`	输入邮箱格式
tel	`<input type="tel">`	输入手机号码格式
url	`<input type="url">`	输入url格式
number	`<input type="number">`	输入数字格式
search	`<input type="search">`	搜索框（体现语义化）
range	`<input type="range">`	自由拖动滑块
time	`<input type="time">`	小时分钟
date	`<input type="date">`	年月日
datetime	`<input type="datetime">`	时间
month	`<input type="month">`	月年
week	`<input type="week">`	星期年

实例展示：

email
search
range
time和date
month 、week和color

其余的推荐查阅w3c

2.input常用新属性

属性	用法	含义
placeholder	`<input type="text" placeholder="请输入用户名">`	占位符，提供可描述输入字段预期值的提示信息
autofocus*	`<input type="text" autofocus>`	规定当页面加载时 input 元素应该自动获得焦点
multiple	`<input type="file" multiple>`	多文件上传，比如图片
autocomplete	`<input type="text" autocomplete="off">`	规定表单是否应该启用自动完成功能 (on/off)，on记录已经输入的值
required	`<input type="text" required>`	必填项，不能为空（加了后那一栏为必填）
accesskey	`<input type="text" accesskey="s">`	规定激活（使元素获得焦点）元素的快捷键

palceholder

autocomplete

<input type="text" autocomplete="off" name="名字">         <!--只写 autocomplete时等于autocomplete="on"-->
<input type="submit"/>

on，记录已经输入的值。

autocomplete属性需要提交按钮
这个表单必须给他名字name

required
给昵称一栏加了required属性，这项不能为空
<input type="text" required>

补充，html5兼容性问题，IE可能看不出效果，上图为火狐浏览器。

3.多媒体标签

embed：定义嵌入的内容（用得较多，但要兼容处理）
audio：播放音频
video：播放视频

<embed></embed>引入网上视频(
embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。

网站本地不提倡放视频，视频数据内存很大，而网站容量是有限的，网站上传到服务器里，是很贵的。
可以把视频上传到优酷或其他视频网站，然后再调用优酷的地址就可以
点分享，然后复制代码，复制到html文件里就可以了(有广告…）
问题：兼容性问题
audio
```
<audio src="音频地址"></audio>
```
audio属性：
- autoplay: 自动播放 (默认不自动播放）
- controls：是否显示播放控件（默认不显示）
- loop : 循环播放 loop =“2”: 循环2次 (loop或者 loop = “-1” 无限循环)

兼容性解决：

<audio controls=""><!-- 通过source标签指定多格式音频文件 --><source src="音频地址的路径.mp3" ><source src="音频地址的路径.wav" ><source src="音频地址的路径.ogg" >
</audio>

vedio
```
<vedio src="视频地址的路径"></audio>
```
vedio的属性：
- autoplay：自动播放
- controls：是否显示播放控件（默认不显示）
- loop：循环播放
- width: 设置播放窗口宽度
- height：设置播放窗口高度

由于版权等原因，不同的浏览器可支持播放的格式是不一样的，如下图供参考

兼容性处理和上面audio一样做法即可。

二、CSS3

1.文本新增属性

1.文本颜色半透明

 color: rgba(r,g,b,a)  <!--多了个a 是alpha  透明的意思  取值范围 0~1之间

例如：

color: rgba(0,0,0,0.3)

2.文字阴影:text-shadow

text-shadow: h-shadow v-shadow blur color;

例如：

属性值：

前两项是必须写的。后两项可以选写。

实例：凹凸文字

<head>
<meta charset="utf-8">
<style>
body {background-color: #ccc;
}
div {color: #ccc;font: 700 80px "微软雅黑";
}
div:first-child {/* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;     <!--往下是黑色，往上是白色-->
}
div:last-child {/* text-shadow: 水平位置  垂直位置  模糊距离 阴影颜色; */text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;   <!--往上是黑色，往下是白色-->
}
</style>
</head>
<body>
<div>我是凸起的文字</div>
<div>我是凹下的文字</div>
</body>

2.新增背景属性

1.背景透明

与文本颜色半透明类似

background: rgba(0,0,0,0.3);

最后一个参数是alpha 透明度取值范围 0~1之间

注意：背景半透明是指盒子背景半透明，盒子里面的内容不收影响。

2.背景缩放:background-size

通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。
其参数设置如下：

px或百分比（设置百分比时，参照盒子的宽高）
cover：会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover最多
contain: 自动调整缩放比例，保证图片始终完整显示在背景区域。

后两个用来铺满整个盒子，

cover:等比例缩放，高度和宽度都满足盒子时，停止。溢出部分隐藏
contain:等比例缩放,高度和宽度其中一个满足盒子时，停止。

background-image: url('images/gyt.jpg');
background-size: 300px 100px;
/* background-size: contain; */
/* background-size: cover; */

比如我有一张精灵图大小是400x400，里面的小图标的大小比我要放的页面布局的大小要大，就可以通过background-size：200px 200px;缩放，然后就可以放置入页面给定的大小中。同时，找小图标在精灵图中位置时，设置background-position也要根据前面的background-size缩小，比如前面400x400改为200x200，那么横纵坐标需要减半。原来图片比例是多少，缩放的最好也是相同比例。

3.多背景图片

一个元素（盒子）可以设置多重背景图像。
如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
为了避免背景色将图像盖住，背景色通常都定义在最后一组上

background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px  ,url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;

3.新增选择器

1.新增伪类选择器（2种）

(1)结构伪类选择器

:first-child :选取属于其父元素的首个子元素的指定选择器
:last-child :选取属于其父元素的最后一个子元素的指定选择器
:nth-child(n) ：匹配属于其父元素的第 n 个子元素，不论元素的类型
:nth-last-child(n) ：选择器匹配属于其父元素的倒数第 n 个子元素，不论元素的类型
:nth-of-type(n)：选择器匹配属于其元素的第n个同级兄弟元素
:nth-last-of-type(n)：选择器匹配属于其元素的倒数第 n 个兄弟元素，不论元素的类型
n 可以是数字、关键词或公式
实例：
选择第一个、第二个

选取第2、4、6…个（偶数项），奇数项括号里写odd即可。

(2)目标伪类选择器
:target 目标伪类选择器 :选择器可用于选取当前活动的目标元素

 :target {color: red;font-size: 30px;
}

2.新增了伪元素选择器

::first-letter：文本的第一个单词或字（如中文、日文、韩文等）
::first-line：文本第一行；
```
p::first-line{font-size:14px;
}
```
::selection: 可改变选中文本的样式；(比如鼠标选中多行文本时，选中的样式会改变）
::before和 ::after :在元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用

例如：（::before同理）

<!--CSS部分-->
div::after{content:"你好";
}<!--代码部分-->
<body><div><p>今年</p></div>
</body>

结果：

4.盒模型

1.CSS3盒模型：box-sizing:

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box(以W3C推荐的以前的盒模型）、border-box（新模型），这样我们计算盒子大小的方式就发生了改变。

box-sizing: content-box: 盒子大小为 width + padding + border
(content-box:此值为其默认值，其让元素维持W3C的标准Box Mode)
box-sizing: border-box: 盒子大小为 width，就是说 padding 和 border 是包含到width里面的
(设置这种模型后，设置padding和border盒子大小都没变化，因为这两者都包含到以前就设置的width里去了。）

在给元素加边框、间距、边距等，不希望破坏原始设置的宽度，保证页面的稳固。就会设置盒模型box-sizing: border-box;

div {   width: 400px;         /*包含了padding和border*/height: 200px;padding: 10px;       /*盒子大小不变，不撑开*/box-sizing: border-box;   /* padding border  不撑开盒子 *//* margin: 10px; */        /*margin还是生效*//* 盒子大小为 width    就是说  padding 和 border 是包含到width里面的 */
}

2.圆角边框

radius 半径（距离）

border-radius: 左上角  右上角  右下角  左下角;

border-radius: 10px;  /*  一个数值表示4个角都是相同的 10px 的弧度 */
border-radius: 50%;   /*    50% 取宽度和高度 一半  则会变成一个圆形 */
border-radius: 10px 40px;  /* 左上角和右下角是10px  右上角和左下角40 (对角线) */
border-radius: 10px 40px  80px;   /* 左上角 10   右上角和左下角 40   右下角80 */
border-radius: 10px 40px  80px  100px;   /* 左上角 10  右上角 40  右下角80  100 */

3.盒子阴影：box-shadow

6个值，前两个必写（与文字阴影相比多了阴影尺寸spread和外部阴影inset）

box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内/外阴影；

默认是外阴影（outset) 但是不可以写这个属性值，不写就已经是外阴影，写了阴影就没了。想要内阴影就写inset.

注意： 文字阴影和盒子阴影都像多背景图片一样，逗号隔开，可写多个。

box-shadow: 5px 5px 10px 16px rgba(255,255,255,0.8) inset,
5px 4px 10px rgba(0,0,0,0.3);

5.过渡：transition

过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡，为了方便演示采用hover切换两种状态。

语法格式：

transition: 要过渡的属性  花费时间  运动曲线  何时开始;
如果有多组属性变化，还是用逗号隔开。transition: all 0.6s;  /* 所有属性都变化用all 就可以了  后面俩个属性可以省略 */

属性：

transition-property：规定应用过渡的 CSS 属性的名称。
transition-duration：定义过渡效果花费的时间。单位必须写（s或者ms)，默认是 0s。
transition-timing-function：规定过渡效果的时间曲线。默认是 “ease”。
transition-delay：规定过渡效果何时开始。默认是 0s。

时间曲线：

div {width: 200px;height: 100px;background-color: pink;/* transition: 要过渡的属性  花费时间  运动曲线  何时开始; */transition: width 0.6s ease 0s, height 0.3s ease-in 1s;/* transtion 过渡的意思  这句话写到div里面而不是 hover里面 */
}div:hover {  /* 鼠标经过盒子，我们的宽度变为600，高度300*/width: 600px;height: 300px；
}

6.变形：transform

transform是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、倾斜、缩放，甚至支持矩阵方式，配合过渡和即将学习的动画知识，可以取代大量之前只能靠Flash才可以实现的效果。

1. 2D变形

(1)移动：translate(x, y)

可以改变元素的位置，x、y可为负值（平移）。

translate(x,y)：水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
translateX(x)：仅水平方向移动（X轴移动）
translateY(y)：仅垂直方向移动（Y轴移动）

可以写px也可以写%，百分比是自己的宽高为基准。

transform: translate(50px,50px);

使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。

.box {width: 499.9999px;height: 400px;background: pink;position: absolute;left:50%;     /* 父级盒子的50% */top:50%;transform:translate(-50%,-50%);  /* 走的自己的一半 */
}

以前在写盒子居中对齐时(绝对定位小节的补充），用得是margin-left: 自己宽度一半；但是写死了，如果宽度变了就得改。而用transform:translate(-50%）就可以了，注意是走的自己的一半。

(2)缩放：scale(x, y)

可以对元素进行水平和垂直方向的缩放。

scale(X,Y)：使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）
scaleX(x)：元素仅水平方向缩放（X轴缩放）
scaleY(y)：元素仅垂直方向缩放（Y轴缩放）

scale()的取值默认为1，0-1缩小；>1放大。

transform:scale(0.8,1);

该元素在水平方向上缩小了20%，垂直方向上不缩放。

(3)旋转：rotate(deg)

可以对元素进行旋转，正值为顺时针，负值为逆时针；注意单位是 deg 度数。

transform:rotate(45deg);

(4调整元素转换变形的原点：transform-origin

div {       /* 改变元素原点到左上角，然后进行顺时旋转45度 */    transform-origin: left top;transform: rotate(45deg);
}

如果是4个角，可以用 left top这些，如果想要精确的位置，可以用px像素修改变形原点。

 div {     /* 改变元素原点到x为10,y为10   然后进行顺时旋转45度 */transform-origin: 10px 10px;transform: rotate(45deg);
}

(5)倾斜：skew(deg, deg)

可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。

transform:skew(30deg,0deg);

元素水平方向上倾斜30度，垂直方向保持不变。

2. 3D变形

(1)立体旋转：rotateX(deg)、rotateY(deg)、rotateZ(deg)

1.rotateX(deg)
就是沿着x立体旋转。

img {transition:all 0.5s ease 0s;
}
img:hover {transform:rotateX(180deg);
}

2.rotateY(deg)
沿着y轴进行旋转。同retateX(deg)
3.rotateZ(deg)
沿着z轴进行旋转。同上。 z轴旋转其实类似绕图片中间点旋转。

(2)透视：perspective

显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

透视原理： 近大远小 。
浏览器透视：把近大远小的所有图像，透视在屏幕上。
perspective：视距，表示视点距离屏幕的长短。如下图的d。
（视点，用于模拟透视效果时人眼的位置）

近大远小：视距越大，效果越不明显。视距越小越明显。

给父级加

父级 {perspective: 1000px;   /* 视距，距离，眼镜距离屏幕的距离*/persp
}

(3)移动：translateX(x)、translateY(y)、translateZ(z)、translate3d(x,y,z)

translate3d(x,y,z)
注意：
其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值。
方向是坐标轴方向。

transform: translate3d(100px,100px,300px)

比如设置一个文字鼠标放上后，往上升的效果。

由y轴往下的50px处，回到0处。

补充：
backface-visibility
定义当元素不面向屏幕时是否可见。

backface-visibility: visible | hidden;

7.动画：animation

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
语法格式：

/* 前两个必写*/
animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;

animation-name：动画名称,自定义
animation-duration：动画完成一个周期的时间，再次注意必须带单位
animation-timing-function：动画的速度曲线
animation-delay：动画何时开始，带单位

animation-iteration-count: infinite; 无限循环播放
animation-play-state: paused; 暂停动画
animation-direction: normal | reverse | alternate |alternate-reverse
详细更多查阅w3c

关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意。

/*  定义动画：@keyframes 动画名称{} 定义动画*/
@keyframes 动画名称 {from { /* 0% */开始位置；      } to {  /* 100% */  结束       }
}
/* 调用动画 */
元素{      animation： 动画名称 2s;
}

多组动画可以讲from{ } to{ } 修改为百分比。0% { } 25%{ } 50% { } 75% { } 100{ }
例子：

@keyframes go {      /* 定义动画 */from {transform: translateX(0);}to {transform: translateX(600px);}div {      /* 调用动画 */width: 100px;height: 100px;background-color: pink;animation: go 2s ease infinite;      /* 一般我们写得前两个就可以了*/
}

8.伸缩布局

传统布局，如下图三个div每个盒子给1/3宽，容易出现一个问题，当加上margin，超出父盒子宽时最后一个不够位置会掉下去。而解决又要去修改宽度。很容易出问题。

而伸缩布局呢
1.父级盒子添加flex布局 display: flex;
2.子盒子添加份数 例如flex: 1; 而且加margin值也不会出现上面说的情况。

另外可以在第一个盒子给定宽度 width值，然后剩下的盒子划分份数。拉伸浏览器窗口时，固定的不变，剩下的按比例缩。

1.伸缩布局
CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向。
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的。
方向：默认主轴从左向右，侧轴默认从上到下。

主轴和侧轴并不是固定不变的，通过flex-direction可以互换。

Flex布局的语法规范经过几年发生了很大的变化，也给Flexbox的使用带来一定的局限性，因为语法规范版本众多，浏览器支持不一致，致使Flexbox布局使用不多
2.各属性详解

(1)flex子项目在主轴的缩放比例。不指定flex属性，则不参与伸缩分配

min-width：最小值； min-width: 280px ; 拉伸浏览器，最小宽度不能小于 280px
max-width: 最大宽度； max-width： 1280px;

div {min-width: 400px;max-width: 1280px;
}

(2)flex-direction：调整主轴方向（默认为水平方向）
通过设置主轴方向，可以实现竖着排。

flex-direction: row；  /* 水平排列，默认*/
flex-direction: column；      /* 垂直排列*/

(3) justify-content：调整主轴对齐（水平对齐）
子盒子如何在父盒子里面水平对齐

属性值	描述	白话翻译理解
flex-start	默认值。项目位于容器的开头。	让子元素从父容器的开头开始排序但是盒子顺序不变
flex-end	项目位于容器的结尾。	让子元素从父容器的后面开始排序但是盒子顺序不变
center	项目位于容器的中心。	让子元素在父容器中间显示
space-between	项目位于各行之间留有空白的容器内。	左右的盒子贴近父盒子，中间的平均分布空白间距
space-around	项目位于各行之前、之间、之后都留有空白的容器内。	相当于给每个盒子添加了左右margin外边距

(4)align-items：调整侧轴对齐（垂直对齐）
子盒子如何在父盒子里面垂直对齐（单行）

属性值	描述	白话翻译理解
flex-start	项目位于容器的开头。	垂直对齐开始位置上对齐
flex-end	项目位于容器的结尾。	垂直对齐结束位置底对齐
center	项目位于容器的中心。	垂直居中
stretch	默认值。项目被拉伸以适应容器。	让子元素的高度拉伸适用父容器（子元素不给高度的前提下)

(5)flex-wrap：是否换行
当我们子盒子内容宽度多于父盒子的时候如何处理

属性值	描述
nowrap	默认值。规定灵活的项目不拆行或不拆列。不换行，则收缩（压缩）显示强制一行内显示
wrap	规定灵活的项目在必要的时候拆行或拆列。
wrap-reverse	规定灵活的项目在必要的时候拆行或拆列，但是以相反的顺序。

(6)flex-flow：是flex-direction、flex-wrap的简写形式

flex-flow: 排列方向换不换行;

flex-flow: flex-direction  flex-wrap;

(7)align-content：堆栈（由flex-wrap产生的独立行）多行垂直对齐方式
align-content是针对flex容器里面多轴(多行)的情况,align-items是针对一行的情况进行排列。
必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction: row;并且设置换行，flex-wrap: wrap;这样这个属性的设置才会起作用。也就是 flex-flow: row wrap;

属性值	描述
stretch	默认值。项目被拉伸以适应容器。
center	项目位于容器的中心。
flex-start	项目位于容器的开头。
flex-end	项目位于容器的结尾。
space-between	项目位于各行之间留有空白的容器内。
space-around	项目位于各行之前、之间、之后都留有空白的容器内。

(8)order：控制子项目的排列顺序，正序方式排序，从小到大
用css 来控制盒子的前后顺序。用order 就可以
用整数值来定义排列顺序，数值小的排在前面。可以为负值。默认值是0。

order: -1;

此知识点重在理解，要明确找出主轴、侧轴、方向，各属性对应的属性值。(移动端会再涉及）

(9)justify-content：在弹性盒对象的

元素中的局部周围留有空白
设置行内同一主轴上，有空白间隔时。除了设置float：right外，还可以设置css3的flex布局。

详细属性和demo实例可以看这里。

display {flex;justify-content: space-between;}

HTML5和CSS3归纳相关推荐

21天学通HTML5和CSS3第二版,21天学通HTML5+CSS3
本书全面.系统.深入地讲解了HTML5+CSS3网页设计与编程的基础语法与高级应用.在讲解过程中,通过大量取自实际操作的实例,将网页开发知识全面.系统.深入地呈现给读者.此外,作者专门为本书录制了大量 ...
HTML5与CSS3权威指南之CSS3学习记录
title: HTML5与CSS3权威指南之CSS3学习记录 toc: true date: 2018-10-14 00:06:09 学习资料--<HTML5与CSS3权威指南>(第3版) ...
使用modernizr.js检测浏览器对html5以及css3的支持情况
使用modernizr.js检测浏览器对html5和css3的支持情况详情请看主页:modernizr主页 1. modernizr 是什么? modernize 是一个js库----一个用于检测当 ...
《HTML5与CSS3实战指南》——2.5 构建The HTML5 Herald
本节书摘来自异步社区<HTML5与CSS3实战指南>一书中的第2章,第2.5节,作者: [美]Estelle Weyl , Louis Lazaris , Alexis Goldstein ...
modernizr 支持html5,使用modernizr.js检测浏览器对html5以及css3的支持情况
使用modernizr.js检测浏览器对html5和css3的支持情况 1.modernizr 是什么? modernize 是一个js库----一个用于检测当前浏览器对html5&css3 ...
《响应式Web设计：HTML5和CSS3实践指南》——2.9节基于位置伪类的交替行样式
本节书摘来自华章社区<响应式Web设计:HTML5和CSS3实践指南>一书中的第2章,第2.9节基于位置伪类的交替行样式,作者(美) Benjamin LaGrone,更多章节内容可以访问 ...
《HTML5与CSS3实例教程》
<HTML5与CSS3实例教程> 基本信息作者: (美)Brian P. Hogan 译者: 卢俊祥丛书名: 图灵程序设计丛书出版社:人民邮电出版社 ISBN:97871153634 ...
转载 - 使用HTML5、CSS3和jQuery增强网站用户体验
记得几年前如果你需要添加一些互动元素到你的网站中用来改善用户体验?是不是立刻就想到了flash实现?这彷佛年代久远的事了.使用现在最流行的Web技术HTML5,CSS3和jQuery,同样也可以实现类 ...
如何让低版本IE浏览器支持HTML5和CSS3
在默认状态下,低版本的IE浏览器是不支持HTML5和CSS3的,很多良好的效果都不能够使用,这不能不说是一种遗憾,为了弥补此种遗憾,因此产生了很多优秀的插件,下面就介绍比较常用的几种. 一.html5 ...

HTML5和CSS3归纳