学习目标：
能够独立将psd效果图转换为静态代码页面，为以后学习打下基础。
学习内容：
1.html常用标签与html5新增标签
2.css语法，css3新增特性。
重难点：
1.html常用标签与html5新增标签,
很多人说学习html就是学习标签，
其实是有一定道理的，
因为在html中标签占了很大比重。
- 标题------<h1></h1>~<h6></h6>
- 段落------<p></p>
- 换行------<br/>
- 加粗------<strong></strong> 或 <b></b>
- 倾斜------<em></em> 或 <i></i>
- 删除线------<del></del> 或 <s></s>
- 下划线------<ins></ins> 或 <u></u>
- 盒子------div(division 分割) <div></div>
- 盒子------span <span></span>
- 插入图片------<img></img>
属性：src:图片路径
alt:图片不能显示时代替图片的文字
title:鼠标划入时的提示文字
width:图片宽度
height:图片高度
border:图片边框
- 链接------<a></a> (anchor 锚)
属性：href:链接地址
target:_blank(新窗口)&_self(当前窗口)
- 无序列表------<ul></ul> li
- 有序列表------<ol></ol> li
- 自定义列表------<dl></dl> dt dd
表单：<form></form>
- 输入框------<input></input>
属性：type:text (文本) password(密码输入框) radio（单选框） checkbox(复选框) reset（重置） submit（提交数据） button（按钮） file（文件域，上传文件）
name: 用于区别表单元素
value: 默认提示信息
checked:默认选中
- 标注标签，解释说明，提高用户体验------<label></label>
- 下拉表单------<select></select> option(选项) selected （默认选项）
- 文本域------<textarea></textarea>.
HTML5新增标签:
- 视频------<video></video>
属性：controls（显示控件）
src（资源路径）
loop（循环）
autoplay(加载后自动播放)
- 音频-----<audio></audio>
属性：controls（显示控件）
src（资源路径）
loop（循环）
autoplay(加载后自动播放)
- 常用语义化标签：<header></header>------<footer></footer>------<nav></nav>-----<artical></artical>------<section></section>-------<aside></aside>
- 表单：type：email------url------number------search-------autofocus------datalist------progress(进度条)-----meter(进度条会变色)
2.css语法，css3新增特性。
主要包括css选择器、样式、布局（盒子模型、浮动、定位）。
- 基础选择器
id选择器 类选择器 标签选择器 通配符选择器
- 复合选择器
后代选择器 子选择器 并集选择器 链接伪类选择器（link----visited----hover----active）
- 文本属性：
color：文本颜色
text-align：文本水平对齐方式
text-indent：文本缩进
text-decoration：文本修饰（下划线）
line-height：行高（行于行之间的距离）
- 元素显示模式：
-
- 文字垂直居中：行高等于盒子高
- 背景：background 颜色 图片路径 平铺方式 位置 （背景图方便控制位置）
- css特性：层叠行------继承性------优先级
- 盒子模型 --内容 --内边距（边框与内容之间的距离） -- 边框 --外边距
- 浮动（体现层叠样式原理）
特性：脱标
具有行内块元素的特性
清除浮动：额外标签法
父级添加overflow：
auto
hidden
父级添加after伪元素
.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{
*zoom:1;
}
父级添加双伪元素
.clearfix:before,clearfix:after{
content:"";
display:table;
}
.clearfix:after{[
clear:both;
}
.clearfix{
*zoom:1;
}- 定位 position
relative（未脱标）相对自身移动
absolute（脱标）相对父盒子移动
fixed（脱标）相对浏览器窗口移动
- 精灵技术：利用背景图片移动到确定位置
利用切片工具测量xy值
- 字体图标：
线下使用：
1.下载图标
2.解压缩,重命名文件夹
3.将文件夹放到与HTML文件同级，
4.引入css图标样式表，添加具体样式
线下使用：
1.选中图标添加到项目
2.选中font class 添加链接到新页面
3.引入css样式表，添加具体样式
- 边框做三角 ：
盒子无宽高，利用边框宽度撑开盒子，四个边框分别对应四个三角。
- 鼠标指针样式：cursor
- 垂直对齐方式：vertical-align （只对行内元素，行内块元素）
baseline：默认 基线对齐
top：顶端对齐
middle：据中对齐
bottom：底端对齐
css3新增特性：
- border-radius
- box-shadow 左右 上下 模糊度 颜色
- border-image
- background-size
- background-origin 属性规定背景图片的定位区域
- 新增选择器
属性选择器：标签名+属性名
结构伪类选择器： :nth-child(n) 全部先排序号再匹配标签
:nth-of-type(n) 先匹配标签再分配序号
- 盒子模型 box-sizing:content-box--------border-box
-
过渡（谁过渡加给谁，搭配hover使用） transition ----变换属性 -----花费时间 （----运动曲线 -----何时开始）
- 转换(23D,不影响其他盒子) transform
translate(x,y,z) ----以%为单位以盒子自身为基准
rorate(deg)
scale(x,y,z)
3D呈现：transform-style
- 动画 animation : 动画名称，持续时间，运动曲线，何时开始，播放次数
-
定义动画
6997
