HTML5+CSS3初步概述
一、HTML5的认识
HTML5相较于HTML4进行了升级，比HTML4语义化更明确，新增了一些标签，同时也废除了一些元素旧的标签。
1.HTML5新增的语义化结构元素
header表示一个页面中一个内容区块或整个页面的标题即页面顶部的内容。
footer表示整个页面或页面中一个内容区块的脚注即页面底部的内容。
section表示页面中的一个内容区块，可与h1、h2等元素结合使用，表示文档结构。
article表示一个页面中的一块与上下文不相关的独立内容。常用于定义侧边栏内容即定义独立于网页的内容，在手机网页中经常用到。
aside表示定义页面之外的内容即声明主内容之外的内容。
nav表示页面中导航链接的部分。
main表示页面的主要内容。
figure表示一段独立的内容流，一般表示文档主体流内容的一个独立单元。
time表示声明时间。
progress表示HTML5中的默认精度条，其样式不能进行更改。
2.HTML5中新增的表单元素
datalist：其作用类似于，表示在文本框中输入会出现下拉索引。
常与input搭配使用。
form：
，表示表单验证。其中method中的属性包括get和post，get提交数据大，不太安全（get在注册后会将相关信息显示在网址上），post提交的数据少，较安全。tel：格式，表示输入电话号码的文本框。
search：格式，表示搜索的文本框。
url：格式，表示输入URL地址的文本框。
email：格式，表示输入电子邮件地址的文本框。
datetime：格式，表示日期和时间的文本框。
date：格式，表示日期的文本框。
month：格式，表示月份的文本框。
week：格式，表示周几的文本框。
time：格式，表示时间的文本框。
datetime-local：格式，表示本地日期和时间的文本框。
number：格式，表示数字的文本框。
range：格式，表示范围的文本框，可理解为文本框的进度条。
color：格式，表示颜色的文本框。
file：格式，表示文件上传管理器的文本框。
3.HTML5 中一些与JavaScript相关的标签
视频标签
音频标签
其中src中填入的是视频或音频的存放路径，autoplay表示自动播放，controls表示播放进度条控制器，loop表示循环播放。
画布标签
二、CSS3选择器
在学习HTML的时候，我们初步接触了几个CSS选择器，在CSS3中，这些选择器可以继续沿用，同时还增加了一些选择器。
1.基本选择器
* 通用元素选择器，匹配任何元素。
E 标签选择器，匹配所有使用E 标签的元素。
.info class选择器，匹配所有class属性中包含info属性的元素
#info id选择器，匹配所有id属性等于info的元素。
2. 组合选择器
E,F 多元素选择器，同时匹配所有E 元素和F元素，E和F中间用逗隔开。
E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格隔开。
E>F 子元素选择器，匹配所有E 元素的子元素F 。
E+F 毗邻元素选择器，匹配所有紧随E 元素之后的同级元素F。
3.CSS2.1属性选择器
E[att] 匹配所有具有att属性的E元素。
E[att=val] 匹配所有att属性等于”val”的E 元素
E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于”val”的E 元素
E[att|=val] 匹配所有att属性具有多个连字号分隔的值、其中一个值以”val”开头的E 元素。
4.CSS2.1伪类选择器
E:first-child 匹配父元素的第一个子元素
E:link 匹配所有未被单击的链接。
E:visited 匹配所有已被单击的链接。
E:active 匹配鼠标已经在其上按下、还没有释放的E 元素。
E:hover 匹配鼠标悬停其上的E 元素。
E:focus 匹配获得当前焦点的E 元素。
E:lang(c) 匹配lang属性等于c 的E 元素。
5.CSS2.1伪元素选择器
E:first-line 匹配E 元素的第一行。
E:first-letter 匹配E 元素的第一个字母。
E:before 在E 元素之前插入生成的内容。
E:after 在E 元素之后插入生成的内容。
E~F 匹配任何在E 元素之后的同级子元素。
6.CSS3属性选择器
E[att^=”val”] 属性att的值以”val”开头的元素。
E[att$=”val”] 属性att的值以”val”结尾的元素。
E[att*=”val”] 属性att的值包含”val”字符串的元素。
7. CSS3用户界面伪类选择器
E:enabled 匹配表单中激活的元素。
E:disabled 匹配表单中禁用的元素。
E:checked 匹配表单中被选中的radio（单选按钮）或checkbox（复选框）元素。
E:selection 匹配用户当前选中的元素。
8. CSS3结构性伪类选择器
E:root 匹配文档的根元素。
E:nth-child(n) 匹配其父元素的第n个子元素，括号里填写数字。
E:nth-last-child(n) 匹配其父元素的倒数第n个子元素，括号里填写数字。
E:nth-of-type(n) 与nth-child()作用类似，但只匹配使用同种标签的元素。
E:nth-last-of-type(n) 与nth-last-child()作用类似，但只匹配使用同种标签的元素。
E:last-child 匹配父元素的最后一个子元素，等同于nth-last-child(1)
E:first-of-type 匹配父元素下使用同种标签的第一个元素，等同于nth-of-type(1)。
E:last-of-type 匹配父元素下使用同种标签的最后一个元素，等同于nth-last-of-type(1)。
E:only-child 匹配父元素下仅有的一个子元素。
E:only-of-type 匹配父元素下使用同种标签的唯一一个子元素。
E:empty 匹配一个不包含任何子元素的元素。
9. CSS3反选伪类选择器
E:not(s) 匹配不符合当前选择器的任何元素。
10. CSS3的:target伪类选择器
E:target 匹配文档中特定“id”单击后的效果。
三、CSS3中和border有关的样式
border:20px solid red;表示边框线为20个像素，格式为线条，颜色为红色。
border-image: url("./img/1.jpg") round;表示插入图片。
box-shadow:-10px -10px 20px pink;表示设置阴影层，数字依次指阴影往下距离，往右距离，阴影大小，最后一个设置阴影的颜色。
border-radius:10px;表示定义圆角。若值为50%，则将整个框架设置成为圆形。
box-sizing: border-box;用来设置框架的布局。有三个属性（1）content-box这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。（2）border-box为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。（3）inherit规定应从父元素继承 box-sizing 属性的值。
四、CSS3动画
CSS3动画分为过渡动画、变形动画（包含平移、变形、旋转和放大）和自定义动画（帧动画）。
1.过渡动画
过渡动画标签是
过渡动画常搭配悬停使用，示例代码如下：
Hello World
.block{
width: 100px;
height: 100px;
border: 4px solid red;
margin: 0 auto;
text-align: center;
line-height: 100px;
border-radius: 50%;
transition:all 1s 1s linear;
}
.block:hover{
width: 400px;
height: 400px;
border-width: 10px;
}显示效果如图：
鼠标悬停之后
在transition中，第一的单词表示变化的属性，第二个表示变化的延迟时间（可不写），但三个表示变化所需要的时间，第四个表示变化的速度。
可以将以上一句分解为四个属性：
transition-property表示动画属性。
transition-delay表示动画延迟时间。
transition-duration表示动画变化时间。
transition-timing-function表示动画播放方式，其linear值表示匀速播放。
示例代码如下：
transition-property: all;
transition-delay: 0s;
transition-duration: 1s;
transition-timing-function: linear;2.变形动画
变形动画标签是
平移属性：transform: translateX(100px);其中若不填写方向轴，默认向z方向平移（大小写无关）。
旋转属性：transform:rotatex(45deg);其中若不填写方向轴，默认向z方向旋转（大小写无关）。可通过transform-origin:50%；来设置旋转中心。
变形（拉伸）属性：transform: skew(-45deg);括号中填写拉伸的角度。
放大属性：transform: scale(1.2);括号中填写放大的倍数。
示例代码如下：
transform: translateX(100px) translateY(100px) translateZ(100px);
transform:rotatex(60deg) rotatey(60deg) rotatez(60deg);
transform: skew(60deg);
transform: scale(2);3.自定义动画
自定义动画标签是
示例代码如下：
.block{
width: 300px;
height: 300px;
border: 1px solid red;
margin: 0 auto;
animation:mao 1s 1s linear;
}
@keyframes mao {
from{
transform: translatex(0px);
}
to{
transform: translatex(200px);
}
/*第2种写法*/
/* 0%{top: 0px;}
40%{top:500px;}
50%{top:200px;}
60%{top:500px;}
70%{top:300px;}
80%{top:500px;}
90%{top:400px;}
100%{top:500px;}*/
}animation:mao 1s 1s linear;中，mao是自己定义的一个动画名称，第二个属性时间是动画变化的时间，第三个属性时间是动画延迟的时间（可不写），最后一个是动画的变化速度。（要注意animation的两个时间的排列与transition的两个时间排列顺序不同）。
也可以将一整个animation语句分开说明：
animation-name表示动画名称。
animation-delay表示动画延迟时间。
animation-direction表示动画方向。
animation-duration表示动画播放时间。
animation-iteration-count表示动画播放次数，其infinite值表示循环播放。
animation-play-state表示动画是否暂停播放。
animation-timing-function表示动画的播放方式，其linear值表示匀速播放。
animation-fill-mode表示规定动画在播放之前或之后，其动画效果是否可见。
示例代码如下：
animation-name: mao;
animation-delay: 1s;
animation-direction: alternate;
animation-duration: 3s;
animation-iteration-count: 1;
animation-play-state: running;
animation-timing-function: linear;在animation中有一个属性step()表示每一帧的间隔时间。
声明自定义动画的播放序列有两种方式：
两种方式的使用都需要用到@keyframes加上自己定义的动画名称。
（1）from/to方式
@keyframes mao {
from{
transform: translatex(0px);
}
to{
transform: translatex(200px);
}
}
用from设置动画开始的样式，用to{transform: translatex(200px);}设置动画运行的样式。然后按照设置的样式运行动画。
（2）百分号方式
@keyframes mao {
0%{top: 0px;}
40%{top:500px;}
50%{top:200px;}
60%{top:500px;}
70%{top:300px;}
80%{top:500px;}
90%{top:400px;}
100%{top:500px;}
}
由0%开始设置，即设置初始动画样式，再依次按照需要，设置相对应百分数的动画样式，随后动画便会按照设置好的样式运行。
4.3D动画
将2D动画转换3D需要使用transform-style:preserve-3d；语句。
要注意的是在同一个选择器中3D不能和transform同级使用，若同时使用会无效化（即同时使用时会默认执行animation帧动画，使transform属性无用）。