什么是html5？
一些学习时候自己总结的部分特效和上课的部分笔记存在GitHub里面～GitHub链接
- h5并不是新的语言，而是html语言第五次重大修改的版本
- 支持:所有的主流浏览器都支持h5(有选择性的支持 [后面会讲解如何支持其他浏览器])
- 改变了用户与文档的交互方式: 多媒体:video视频 audio音频 canvas画板
- 增加了新特性:1.标签语义化。2.本地存储性。3.网页多媒体。4.二维与三维。5.特效(动画/过度)
- 相对h4：h5抛弃了一些不合理的不常用的标签和属性，也新增了一些标签和属性(表单属性 input)，从代码角度而言，h5的网页代码结构更加简洁
如何兼容h5C3？(使用第三种方法即可)
- 将不支持的标签改为块级元素
- 手动创建标签(注意默认创建的标签是行级元素，需要display:block;)
documet.createElement(“自定义标签名”);
- 引入第三方插件
html5shiv.js/*解决h5兼容问题的插件*/
respond.min.js/*解决C3兼容问题的插件*/
H5常用的语义化标签
| 标签名 | 作用 | |
|---|---|---|
| nav | 导航 | |
| header | 页眉 | |
| footer | 页尾 | |
| main | 主要内容 | |
| article | 文章 | |
| aside | 主题内容之外 |
H5表单input中新增的type常用属性值总结
H5表单input中新增的常用其他属性总结
测试：
H5新增的表单事件
表单总结小案例
Title
H5多媒体标签与其属性
H5类样式操作(添加样式，移除样式，切换样式，是否包含此样式)
- java
- c
- 前端
- php
H5自定义属性
H5C3学习
H5监测网络状态事件
C3选择器
/*属性选择器：属性是相对于标签而言。所谓属性选择器就是根据指定名称的属性的值来查找元素*/
/*1.E[attr]:查找指定的拥有attr属性的E标签。如查找拥有style属性的li标签*/
li[style]{
text-decoration: underline;
}
/*2.E[attr=value]:查找拥有指定的Attr属性并且属性值为value的E标签。如想查找拥有class属性并且值为Red的li标签 =是严格匹配*/
li[class=red]{
/*font-size: 30px;*/
}
/*3.E[attr*=value]:查找拥有指定的attr属性并且属性值中包含(可以在任意位置)value的E标签*/
li[class*=red]{
/*font-size: 30px;*/
}
/*4.E[attr^=value]:查找拥有指定的attr属性并且属性值以value开头的E标签*/
li[class^=blue]{
font-size: 30px;
}
/*5.E[attr$=value]:查找拥有指定的attr属性并且属性值以value开结束的E标签*/
li[class$=blue]{
/*font-size: 30px;*/
}
.first{
color: red;
}
/*兄弟伪类：
+：获取当前元素的相邻的满足条件的元素
~：获取当前元素的满足条件的兄弟元素*/
/*下面这句样式说明查找 ：添加了.first样式的标签的相邻的li元素
1.相邻
2.必须是指定类型的元素*/
.first + li{
color: blue;
}
/*下面样式查找添加了.first样式的元素的所有兄弟li元素
1.必须是指定类型的元素*/
.first ~ li{
color: pink;
}
/*相对于父元素的结构伪类*/
/*E:first-child:查找E元素的父级元素中的第一个E元素。在查找的时候并不会限制查找的元素的类型*/
/*下面这句样式查找：li的父元素中的第一个li元素
1.相对于当前指定元素的父元素
2.查找的类型必须是指定的类型*/
li:first-child{
color: red;
}
/*E:last-child:查找E元素的父元素中最后一个指定类型的子元素*/
li:last-child{
background-color: skyblue;
}
/*查找的时候限制类型 first-of-type*/
/*1.也是相对于父元素
2.在查找的时候只会查找满足类型条件的元素，过渡掉其它类型的元素*/
li:first-of-type{
color: red;
}
li:last-of-type{
color: orange;
}
/*指定索引位置 nth-child(从1开始的索引||关键字||表达式)*/
li:nth-child(5){
background-color: lightblue;
}
/*偶数个元素添加背景 even:偶数 odd:奇数*/
li:nth-of-type(even){
background-color: orange;
}
li:nth-of-type(odd){
background-color: pink;
}
/*想为前面的5个元素添加样式*/
/*n:默认取值范围为0~子元素的长度.但是当n<=0时，选取无效
0>>5
1>>4
...
4>>1
5>>0*/
li:nth-last-of-type(-n+5){
font-size: 30px;
}
li:nth-of-type(-n+5){
font-size: 30px;
}
/*空值:没有任何的内容，连空格都没有*/
li:empty{
background-color: red;
}
/*E:target:可以为锚点目标元素添加样式，当目标元素被触发为当前锚链接的目标时，调用此伪类样式*/
h2:target{
color: red;
}
/*获取第一个字符：实现首字下沉*/
p::first-letter{
color: red;
font-size: 30px;
float: left;/*文本环绕*/
}
/*获取第一行内容:如果设置了::first-letter,那么无法同时设置它的样式*/
p::first-line{
text-decoration: underline;
}
/*设置当前选中内容的样式*/
p::selection{
background-color: pink;
color: red;
/*它只能设置显示的样式，而不能设置内容大小*/
/*font-size: 30px;*/
}
C3颜色使用
div{
width: 200px;
height: 200px;
border: 1px solid #ccc;
/*1.使用预设了值*/
/*background-color: red;*/
/*2.使用颜色拾取器*/
/*background-color: #c9ffa6;*/
/*rgb(红，绿，蓝)*/
/*background-color: rgb(255,150,0);*/
/*hsl(颜色(0~360)，饱和度(0%~100%)，明度(0%~100%))*/
/*明度默认是50%,一般建议保留50的值*/
/*background-color: hsl(300,100%,50%);*/
/*h5中的颜色设置*/
/*rgba(红色，绿色，蓝色，透明度)
透明度：0代表完全透明 1代表完成不透明 不会影响子元素*/
/*background-color: rgba(255,0,255,0.2);*/
background-color: hsla(300,100%,50%,0.2);
}
C3 text-shadow效果案例(x,y,羽化/模糊,color)
C3盒模型 box-sizing
/*content-box:你设置的width属性值仅仅是内容的宽度，盒子的最终的宽高值在width的基础上再加上padding和border的宽度*/
box-sizing:content-box;/*默认值*/
/*border-box:你设置的width属性值就是盒子的最终的宽度，包含了border和padding和内容。如果添加了padding和border,那么真正放置内容的区域会减小--但是它可以稳固页面的结构*/
box-sizing:border-box;
C3圆角 border-radius
/*添加边框圆角*/
/*1.设置一个值：四个角的圆角值都一样*/
/*border-radius: 10px;*/
/*2.设置两个值:第一个值控制左上/右下，第二个值控制右上/左下*/
/*border-radius: 10px 30px;*/
/*3.设置三个值：第一个值控制左上，第二值控制右上/左下，第三个值控制右下*/
/*border-radius: 10px 40px 60px;*/
/*4.设置四个值：左上 右上 右下 左下*/
/*border-radius: 10px 30px 60px 100px;*/
/*添加/是用来设置当前个不同方向的半径值 水平x方向/垂直y方向*/
/*border-radius: 100px/50px;*/
/*添加某个角点的圆角*/
/*border-radius: 0px 50px 0px 0px;*/
/*border-上下-左右-radius:*/
/*border-top-right-radius: 100px;
border-top-left-radius: 100px;*/
/*border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;*/
/*设置某个角点的两个方向上的不同圆角*/
/*border-top-right-radius: 100px 50px;
border-bottom-left-radius: 80px 40px;
border-bottom-right-radius: 60px 30px;
border-top-left-radius: 40px 20px;*/
/*如果想设置四个角点的不同方向上的不同圆角值*/
/*分别是水平方向的：左上，右上，右下，左下 / 垂直方向的：左上，右上，右下，左下*/
border-radius: 100px 0px 0px 0px/20px 0px 0px 0px;
H5C3 android机器人案例
Title
C3 文本阴影与边框阴影
C3 渐变之线性渐变
/*linear-gradient(方向，开始颜色 位置，颜色2 位置，颜色3 位置...);*/
/*方向：
to top:0deg
to right:90deg
to bottom:180deg --默认值
to left:270deg*/
/*background: linear-gradient(to right,red,blue)*/;
background:linear-gradient(to right,red 0%,red 50%,blue 50%,blue 100%);
C3 渐变之径向渐变
/*语法：radial-gradient(形状 大小 坐标,颜色1，颜色2...)：
形状shape:circle:产生正方形的渐变色 ellipse:适配当前的形状,如果是正方形的容器，两者效果一样.如果宽高不一样，默认效果切换到ellipse
at position:坐标，默认在正中心。可以赋值坐标（参照元素的左上角），也可以赋值关键字(left center right top bottom)
大小size: closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。默认是最远的角farthest-corner*/
/*background: radial-gradient(circle,red,blue);*/
/*background: radial-gradient(circle farthest-side at 50px 50px,red,blue);*/
/*background: radial-gradient(at left top,red,blue);*/
background:radial-gradient(red,red 50%,blue 50%,blue);
C3 背景样式
/*1.添加背景颜色*/
background-color:red;
/*2.设置背景平铺*/
/*round:会将图片进行缩放之后再平铺
space:图片不会缩放平铺，只是会在图片之间产生相同的间距值*/
background-repeat:space;
/*3.设置在滚动容器的背景的行为*/
/*fixed:背景图片的位置固定不变
scroll:当滚动容器的时候，背景图片也会跟随滚动*/
/*local和scroll的区别：前提是滚动当前容器的内容
local:背景图片会跟随内容一起滚动
scroll:背景图片不会跟随内容一起滚动*/
background-attachment: scroll;
背景图片缩放居中显示
/*一定要设置宽度*/
width:100%;
/*设置背景图片的大小*/
background-size:cover;
/*设置position*/
background-position:center;
结合精灵图提示移动端用户响应区域的大小
Title
C3 边框图片案例 聊天对话框
Title
边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置边框图片的本质是背景，并不会影响元素内容的放置
C3 过渡
添加过度效果后，过度效果执行完毕之后默认会还原到原始的状态。
/*1.transition-property:添加过渡效果的样式属性名称*/
transition-property:left;
/*2.transition-duration:过渡效果的耗时 以秒做为单位*/
transition-duration:2s;
/*3.transition-timing-function:设置时间函数--控制运动的速度*/
transition-timing-function:linear;
/*4.transition-delay:过渡效果的延迟*/
transition-delay: 2s;
过渡简写
/*transition:属性名称 过渡时间 时间函数 延迟*/
transition:left 2s linear 0s;
为多个样式同时添加过渡效果(用逗号连接)
transition:left 2s linear 0s,background-color 5s linear 0s;
为所有样式添加过渡效果 all
1.所有样式的过渡效果一样
2.效率低下，它会去查询所有添加的样式
3.建议：以后不要这么写
transition:all 1s;
指定过渡效果分n次完成 steps(n);
/*分四次完成*/
transition:background-color 2s steps(4);
C3 transform 二维
Title
1
2
3
4
C3无缝滚动动画
Title
钟表案例
Title
C3过渡手风琴效果案例
Title
C3 transform 三维
Title
1
2
3
4
C3立方体衍生个人主页网站特效
Title
鼠标移入开始我们的故事
多列布局案例
Title
CSS3简介
CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
1、
CSS3圆角表格
CSS3圆角表格
圆角表格，对应属性：border-radius。
2、以往对网页上的文字加特效只能用filter这个属性，这次CSS3中专门制订了一个加文字特效的属性，而且不止加阴影这种效果。对应属性：font-effect。
3、丰富了对链接下划线的样式，以往的下划线都是直线，这次可不一样了，有波浪线、点线、虚线等等，更可对下划线的颜色和位置进行任意改变。（还有对应顶线和中横线的样式，效果与下划线类似）对应属性：text-underline-style，text-underline-color，text-underline-mode，text-underline-position。
4、在文字下点几个点或打个圈以示重点，CSS3也开始加入了这项功能，这应该在某些特定网页上很有用。对应属性：font-emphasize-style和font-emphasize-position。
边框
border-color:控制边框颜色，并且有了更大的灵活性，可以产生渐变效果
变形(transform)、转换(transition)和动画(animation)
transform: rotate | scale | skew | translate |matrix;
旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
transition主要包含四个属性值：执行变换的属性：transition-property,变换延续的时间：transition-duration,在延续时间段，变换的速率变化transition-timing-function,变换延迟时间transition-delay。下面分别来看这四个属性值
在开始介绍Animation之前我们有必要先来了解一个特殊的东西，那就是"Keyframes",我们把他叫做“关键帧”，玩过flash的朋友可能对这个东西并不会陌生。下面我们就一起来看看这个“Keyframes”是什么东西。前面我们在使用transition制作一个简单的transition效果时，我们包括了初始属性和最终属性，一个开始执行动作时间和一个延续动作时间以及动作的变换速率，其实这些值都是一个中间值，如果我们要控制的更细一些，比如说我要第一个时间段执行什么动作，第二个时间段执行什么动作（换到flash中说，就是第一帧我要执行什么动作，第二帧我要执行什么动作），这样我们用Transition就很难实现了，此时我们也需要这样的一个“关键帧”来控制。那么CSS3的Animation就是由“keyframes”这个属性来实现这样的效果。下面我们一起先来看看Keyframes:
Keyframes具有其自己的语法规则，他的命名是由"@keyframes"开头，后面紧接着是这个“动画的名称”加上一对花括号“{}”，括号中就是一些不同时间段样式规则，有点像我们css的样式写法一样。对于一个"@keyframes"中的样式规则是由多个百分比构成的，如“0%”到"100%"之间，我们可以在这个规则中创建多个百分比，我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果，比如说移动，改变元素颜色，位置，大小，形状等，不过有一点需要注意的是，我们可以使用“fromt”“to”来代表一个动画是从哪开始，到哪结束，也就是说这个 "from"就相当于"0%"而"to"相当于"100%",值得一说的是，其中"0%"不能像别的属性取值一样把百分比符号省略，我们在这里必须加上百分符号（“%”）如果没有加上的话，我们这个keyframes是无效的，不起任何作用。因为keyframes的单位只接受百分比值。[2]
C3 弹性盒模型
/*设置父容器为伸缩盒子：会使每一个子元素自动变成伸缩项*/
display:flex;
/*设置子元素的排列方式
flex-start:让子元素从父容器的起始位置开始排列
flex-end:让子元素从父容器的结束位置开始排列
center:让子元素从父容器的中间位置开始排列
space-between:左右对齐父容器的开始和结束，中间平均分页，产生相同的间距
space-around:将多余的空间平均的分页在每一个子元素的两边 margin:0 auto.造成中间盒子的间距是左右两边盒子间距的两倍*/
justify-content:space-around;
/*flex-flow:是flex-wrap和flex-direction的综合
flex-wrap:控制子元素是否换行显示，默认不换行
nowrap:不换行--则收缩
wrap:换行
wrap-reverse:翻转，原来是从上到下，翻转后就是从下到上来排列*/
/*flex-wrap: wrap;*/
/*flex-direction：设置子元素的排列方向：就是用来主轴方向，默认主轴方向是row(水平方向)
row:水平排列方向，从左到右
row-reverse:水平排列方向，从右到左
column:垂直排列方向，从上到下
column-reverse：垂直排列方向，从下到上*/
/*flex-direction: column-reverse;*/
flex-flow:row wrap;
设置在子元素上 空间比例值
/*flow-grow:可以来扩展子元素的宽度：设置当前元素应该占据剩余空间的比例值
比例值计算 ：当前空间的flex-grow/所有兄弟元素的flex-grow的和
flex-grow的默认是0:说明子元素并不会去占据剩余的空间*/
flex-grow:1;
flex菜单伸缩案例
Title
- 这是第一个
- 这是第二个
- 这是第三个
- 这是第四个
宽高自动适应案例
Title