h5&css3
HTML5
-
HTML5简介
-
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。作为新HTML语言，具有新的元素，属性和行为
-
它具有更大的技术集，允许更多样化和强大的网站和应用程序
-
增加了新特性：
-
语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形及特效特性，性能与集成特性，CSS3特性
-
-
广义的HTML5
-
广义的HTML5是HTML5本身+CSS3+JavaScript
-
虽然HTML5的一些特性仍然不被某些浏览器支持，但是它是一种发展趋势，将来将全面进入HTML的世界
-
-
-
H5新增语义化标签
-
以前布局，我们基本用div来做。div对于搜索引擎来说，是没有语义的
-
< header>:头部标签
-
< nav>: 导航标签
-
< article> : 内容标签
-
< section>: 块级标签
-
< aside> : 侧边栏标签
-
< footer>: 尾部标签
-
注意：
-
这种语义化标准注意针对搜索引擎的
-
这些新标签页面中可以使用多次的
-
再IE9中，需要把这些元素转换为块级元素
-
其实，我们移动端更喜欢使用这些标签
-
HTML5还增加了很多其他标签，我们后面再慢慢学
-
-
-
H5新增多媒体标签
-
多媒体标签包含两个，具体如下：
-
音频：< audio>
-
视频: < video>
-
使用它们可以很方便的再页面中嵌入音频和视频，而不再去使用落后的flash和其他浏览器插件
-
-
< audio>音频标签
-
HTML5再不使用插件的情况下也可以原生的支持音频格式文件的播放，当然支持格式是有限的
-
1.音频格式
-
当前，< audio>元素支持三种音频格式：
-
Ogg Vorbis、MP3、Wav
-
-
音频标签语法格式
-
< audio src="文件地址" controls = "controls">< /audio>
-
< audio> 音频标签常见属性
-
-
-
-
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 如果出现该属性，则音频在就绪后马上播放 |
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮 |
| loop | loop | 如果出现该属性，则每当音频结束时重新开始播放 |
| src | url | 要播放的音频的URL |
-
-
-
-
-
-
谷歌浏览器把autoplay属性给我们禁用了
-
-
因为不同浏览器支持不同格式 我们采取的解决方案是 我们为这个音频准备多个格式
-
+ < audio controls = "controls"> + • < source scr = "happy.mp3" type="audio/mpeg"> + • < source scr = "happy.ogg" type="audio/ogg"> + • 您的浏览器太low了， 不支持audio播放 + < /audio>
-
-
-
-
-
< video>视频标签
-
当前 视频标签支持三种格式 Ogg、MPEG4、WebM
-
音频标签语法格式
-
< video src="文件地址" controls = "controls">< /video >
-
兼容性写法
-
+ < video controls = "controls"> + • < source scr = "happy.mp4" type="video/mp4"> + • < source scr = "happy.ogg" type="video/ogg"> + • 您的浏览器太low了， 不支持video 播放 + < /video >
-
-
< video > 音频标签常见属性
-
-
-
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 视频就绪自动播放 |
| controls | controls | 向用户显示播放控件 |
| width | pixels(像素) | 设置播放器宽度 |
| height | pixels(像素) | 设置播放器高度 |
| loop | loop | 播放完是否继续播放该视频，循环播放 |
| preload | auto(预先加载视频) none(不应加载视频) | 规定是否预加载视频(如果有了autoplay就应该忽略该属性) |
| src | url | 视频url地址 |
| poster | Imgurl | 加载等待的画面图片 |
| muted | muted | 静音播放 |
-
-
-
-
-
谷歌浏览器把autoplay属性给我们禁用了 解决方案 给视频加静音属性
-
-
-
-
总结：
-
音频标签和视频标签使用基本一致
-
浏览器支持情况不同
-
谷歌浏览器把音频和视频自动播放禁止了
-
我们可以给视频标签添加muted属性可以自定播放视频，音频不可以
-
视频标签是重点，我们经常设置自动播放，不使用controls控件，循环和设置大小属性
-
-
-
H5新增input表单、表单属性
| 属性值 | 说明 |
|---|---|
| type = "email" | 限制用户输入必须为Email类型 |
| type = "url" | 限制用户输入必须为URL类型 |
| type = "date" | 限制用户输入必须为日期类型 |
| type = "time" | 限制用户输入必须为时间类型 |
| type = "month" | 限制用户输入必须为月类型 |
| type = "week" | 限制用户输入必须为周类型 |
| type = "number"(重点记住) | 限制用户输入必须为数字类型 |
| type = "tel"(重点记住) | 手机号码 |
| type = "search"(重点记住) | 搜索框 |
| type = "color" | 生成一个颜色选中表单 |
-
-
示例代码如下
-
< input type="email">
-
-
新增表单属性
-
| 属性 | 值 | 说明 |
|---|---|---|
| required | required | 表单拥有该属性表示其内容不能为空，必填 |
| placeholder(重点) | 提示文本(占位符) | 表单的提示信息，存在默认值将不显示 |
| autofocus | autofocus | 自动聚焦属性，页面加载完成自动聚焦到指定表单 |
| autocomplete | off/on | 当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如autocomplete="on" 关闭 autocomplete = "off" 需要放在表单内同时加上name属性 同时成功提交 |
| multiple(重点) | multiple | 可以多选文件提交 |
-
-
-
示例代码如下
-
< input type="email" required = "required" >
-
-
CSS3
-
CSS3现状
-
在CSS2的基础上新增(扩展)样式
-
移动端支持优于PC端
-
不断改进中
-
应用相对广泛
-
-
属性选择器
-
选择符 简介 E[att] 选中具有att属性的E元素 E[att="val"] 选中具有att属性且属性值等于val的E元素 E[att^="val"] 匹配具有att属性、且值以val开头的E元素 E[att$="val"] 匹配具有att属性、且值以val结尾的E元素 E[att*="val"] 匹配具有att属性、且值中含有val的E元素 可以在任何位置 -
disabled是禁用的意思 示例的代码如下
-
+ < button disabled = "disabled">按钮< /button> + < button>按钮< /button> + button[disabled]{ #选择的是button标签里面又具有属性disabled的标签 + cursor:default; + } + < input type="text" value="文本框"> + input[value="文本框"]{ 选择input标签里面的value属性且属性值为"文本框"的标签 + width:40px; + }
-
-
类选择器、属性选择器、伪类选择器的权重为10
-
-
CSS3结构伪类选择器
-
选择符 简介 E:first-child 匹配父元素中的第一个子元素E E:last-child 匹配父元素中最后一个E元素 E:nth-child(n) 匹配父元素中的第n个子元素E E:first-of-type 指定类型E的第一个 E:last-of-type 指定类型的E的最后一个 E:nth-of-type(n) 指定类型E的第n个 -
示例代码如下
-
+ < ul> + < li>1< /li> + < li>2< /li> + < li>3< /li> + < /ul> + ul li:first-child{ #选择ul里面的第一个li标签 + background-color : pink; + } + ul li:nth-child(2){ #选择ul里面的第2个li标签 + • background-color : deeppink; + }等价于 + ul :nth-child(2){#选择ul里面的第2个标签 + • background-color : deeppink; + }
-
-
nth-child(n)
-
n可以是数字、关键字和公式
-
n如果是数字，就是选择第几个
-
常见的关键词有even偶数 odd奇数
-
常见的公式如下(如果n是公式，则从0开始计算)
-
但是第0个元素或者超出了元素的个数会被忽略
-
公式 取值 2n 偶数 2n+1 奇数 5n 5 10 15.... n+5 从第5个开始(包含第五个)到最后 -n+5 前5个(包含第5个)
-
-
:nth-child(n) 选择父元素里面的第n个孩子，它不管里面的孩子是否同一种类型
-
-
示例代码如下
-
+ < div> + • < p>我是一个屁< /p> + • < span>我是span< /span> + • < span>我是span< /span> + • < span>我是span< /span> + < /div> + #of-type 选择指定类型的元素 + div span:first-of-type{ #选择div 里面的第一个span + backgrpund-color : purple; + } + div span:nth-of-type(2){ #选择div里面的第二个span + backgrpund-color : pink; + }
-
-
-
伪元素选择器(重点)
-
选择符 简介 ::before 在元素内部的前面插入内容 ::after 在元素的内部的后面插入内容 -
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
-
注意
-
语法: Element::before{}
-
before和after必须有content属性
-
before在内容的前面，after在内容的后面
-
before和after创建一个元素，但是属于行内元素
-
因为在dom里面看不见刚才创建的元素，所以我们称为伪元素
-
伪元素和标签选择器一样，权重为1
-
-
示例代码如下：
-
+ < div>是< /div> + div::before{ + content:"我"; + } 结果为: 我是
-
-
伪元素清除浮动
-
1.额外标签法也称为隔墙法，是W3C推荐的做法
-
2.后面两种伪元素清除浮动算是第一种额外标签法的一个升级和优化
-
伪元素清除浮动示例代码如下
-
+ 第一种清除浮动 + .clearfix::after{ + content:""; 伪元素必须写的属性 + display:block; 插入的元素必须是块级 + height:0; 不要看见这个元素 + clear:both; 核心代码清除浮动 + visibility: hidden; 不要看见这个元素 + } + 第二种清除浮动 + .clearfix::before, .clearfix::after{ + content: ""; + display: table; 转换为块级元素，并在一行显示 + } + .clearfix::after{ + clear:both; + }
-
-
-
-
CSS3盒子模型
-
CSS3中可以通过box-sizing来指定盒模型，，有2个值，即可指定为content-box,border-box,这样我们计算盒子大小的方式就发生了改变
-
可以分成两种情况
-
1.box-sizing: content-box 盒子大小为width+padding+border(以前默认的)
-
2.box-sizing：border-box 盒子大小为width
-
如果盒子模型我们改为了box-sizing:border-box,那padding和border就不会撑大盒子了(提取padding和border不会超过width宽度)
-
-
-
-
CSS3其他特性(了解)
-
1.CSS3滤镜filter:
-
filter CSS属性将模糊或颜色偏移等图形效果应用于元素
-
语法格式如下
-
filter: 函数(); 例如： filter:blur(5px); blur模糊处理， 数值越大越模糊
-
-
-
2.CSS3 calc函数：
-
calc()此 CSS函数让你在声明CSS属性值时执行一些计算
-
语法格式如下
-
width: calc(100%-80px);
-
括号里面可以使用 + - * /来进行计算
-
-
-
-
CSS3过渡(重点)
-
过渡(transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JS的情况下。当元素从一种样式变换为另一种样式时为元素添加效果
-
过渡动画： 是从一个状态 渐渐的过渡到另外一个状态 可以让我们页面更好看，更动感十足，虽然低版本浏览器不支持(ie9以下版本) 但是不会影响页面布局
-
我们现在经常和:hover 一起搭配使用
-
语法格式为
-
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
-
1.属性: 想要变换的css属性，宽度高度 背景颜色 内外边距都可以。如果想要所有的属性都变化过渡，写一个all就可以了
-
2.花费时间：单位是秒(必须写单位) 比如0.5s
-
3.运动曲线： 默认是ease(可以省略) linear(匀速) ease-in(加速) ease-out(减速)
-
4.何时开始：单位是秒(必须写单位) 可以设置延迟触发时间 默认是0s(可以省略)
-
示例代码如下
-
+ div{ + width:200px; + height:100px; + background-color:pink; + #如果想要写多个属性，利用逗号进行分割 + transition: width 3s, height 3s; + #如果想要多个属性都变换，属性写all就可以了 + transition: all 3s; + } + div:hover{ + width:400px; + height:200px; + }
-
-
注意：谁做过渡就给谁加
-
-
-
-
CSS3 2D转换
-
转换(transform)是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果
-
转换(transform)你可以简单理解为变形
-
移动： translate
-
旋转：rotate
-
缩放：scale
-
-
二维坐标系
-
2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系
-
-
2D转换之移动translate
-
2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位
-
语法
-
transform: translate(x,y); 或者分开写
-
transform: translateX(n);
-
transform: translateY(n);
-
-
示例代码如下
-
div{ x 就是x轴上移动位置， y就是y轴上移动位置 中间用逗号隔开 transform:translate(100px,100px) }
-
-
重点：
-
定义2D转换中的移动，沿着X和Y轴移动元素
-
translate最大的优点: 不会影响到其他元素的位置
-
translate中的百分比单位是相对于自身元素的translate:(50%,50%);
-
对行内标签没有效果
-
-
-
2D转换之旋转rotate
-
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转
-
语法格式
-
transform: rotate(度数)
-
-
重点：
-
rotate里面跟度数，单位是deg 比如 rotate(45deg)
-
角度为正时，顺时针，负时，为逆时针
-
默认旋转的中心点是元素的中心点
-
-
2D转换中心点 transform-origin
-
我们可以设置元素转换的中心点
-
语法
-
transform-origin: x y;
-
-
重点：
-
注意后面的参数x和y用空格隔开
-
x y 默认转换的中心点是元素的中心点(50% 50%)
-
还可以给x y 设置像素或者 方位名词( top bottom left right center)
-
-
-
-
2D转换之缩放scale
-
缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小
-
语法
-
transform:scale(x,y);
-
-
注意:
-
注意其中的x和y用逗号分隔
-
transform:scale(1,1) : 宽和高都放大一倍，相对于没有放大
-
transform:scale(2,2): 宽和高都放大了2倍
-
transform: scale(2): 只写一个参数，第二个参数则和第一个参数一样，相当于scale(2,2)
-
transform : scale(0.5,0.5)缩小
-
sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子
-
-
-
2D转换综合写法
-
注意：
-
1.同时使用多个转换，其格式为:transform:translate() rotate() scale()...等
-
2.其顺序会影响转换的效果(先旋转会改变坐标轴方向)
-
3.当我们同时有位移和其他属性的时候，记得要将位移放到最前面
-
-
-
-
CSS3动画
-
动画(animation)是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。 相比过渡，动画可以实现更多变化，更多控制，连续自动播放等效果
-
动画的基本使用
-
制作动画分为两步:
-
1.先定义动画
-
2.再使用(调用)动画
-
-
1.用keyframes定义动画(类型定义类选择器其)
-
@keyframes 动画名称{
-
0%{
-
width:100px;
-
}
-
100%{
-
width:200px;
-
}
-
}
-
动画序列
-
0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
-
再@keyframes中规定某些CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
-
动画是使元素从一种样式逐渐变化为另一种样式的效果，您可以改变任意多的样式任意多的次数
-
请用百分比来规定变化发生的时间，或用关键词"from"和"to"，等同于0%和100%
-
1.可以做多个状态的变化 keyframe 关键帧
-
2.里面的百分比是整数
-
3.里面的百分比就是 总的时间的划分
-
-
-
2.元素使用动画
-
div{ animation-name: 动画名称; ///调用动画 animation-duration: 持续时间; }
-
-
-
动画常用属性
-
属性 描述 @keyframes 规定动画 animation 所有动画属性的简写属性，除了animation-play-state属性 animation-name 规定@keyframes动画的名称(必须的) animation-duration 规定动画完成一个周期所花费的秒或毫秒,默认是0.(必须的) animation-timing-function 规定动画的速度曲线，默认是'ease' animation-delay 规定动画是何时开始，默认是'ease' animation-iteration-count 规定动画被播放的次数，默认是1，还有infinite 无限 animation-direction 规定动画是否在下一周期逆向播放，默认是"normal",alternate逆播放 animation-play-state 鼠标放上去规定动画是否正在运行或暂停。默认是"running"还有"paused" animation-fill-mode 规定动画结束后状态，保持结束状态forwards 回到起始backwards(默认是这个)
-
-
动画简写属性
-
animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束状态
-
animation: myfirst 5s linear 2s infinite alternate
-
-
总结：
-
简写属性里面不包含 animation-play-state
-
暂停动画: animation-play-state:puased; 经常和鼠标经过等其他配合使用
-
想要动画走回来，而不是直接跳回来： animation-direction : alternate
-
盒子动画结束后，停在结束位置 animation-fill-mode：forwards
-
-
-
速度曲线细节
-
animation-timing-function: 规定动画的速度曲线，默认是‘ease’
-
值 描述 linear 动画从头到尾的速度是相同的。匀速 ease 默认。动画以低速开始，然后加快，在结束前变慢 ease-in 动画以低速开始 ease-out 动画以低速结束 ease-in-out 动画以低速开始和结束 steps() 指定了时间函数中的间隔数量(步长) -
steps()就是分几步来完成我们的动画 有了steps 就不要在写ease或者linear了 可以用来实现打字机效果
-
-
我们元素可以添加多个动画，用逗号隔开
-
-
CSS3 3D转换
-
三维坐标系
-
三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的
-
x轴：水平向右 注意：x右边是正值，左边是负值
-
y轴：垂直向下 注意：y下面是正值，上面是负值
-
z轴：垂直屏幕 注意：往外面是正值，往里面是负值
-
3D转换我们主要学习工作中最常用的3D位移和3D旋转
-
-
3D转换之3D移动 translate3d
-
3D移动在2D移动 的基础上多加了一个可以移动的方法，就是z轴方向
-
translform:translateX(100px); 仅仅是在x轴上移动 translform:translateY(100px); 仅仅是在Y轴上移动 translform:translateZ(100px); 仅仅是在Z轴上移动(注意:translateZ一般用px单位) 向外移动100px 正值向外移动 负值向内移动 translform:translate3d(x,y,z); 其中x、y、z分别指要移动的轴的方向的距离 xyz是不能省略的，如果没有就写0
-
-
-
3D透视 perspective
-
在 2D平面产生近大远小视觉立体，但是只是效果二维的
-
如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内 )
-
模拟人类的视觉位置，可认为安排一只眼睛去看
-
透视我们也称为视距：视距就是人的眼睛到屏幕的距离
-
距离视觉点越近的在电脑平面成像越大，越远成像越小
-
透视的单位是像素
-
-
透视写在被观察元素的父盒子上面的
-
d: 就是视距，视距就是一个距离人的眼睛到平面的距离
-
z：就是z轴，物体距离平面的距离，z轴越大(正值) 我们看到的物体就越大
-
-
语法:
-
perspective:300px
-
-
-
3D旋转rotate3d
-
3D旋转指可以让元素在三维平面内沿着x轴、y轴，z轴或者自定义轴进行旋转
-
语法：
-
+ transform: rotateX(45deg):沿着x轴正方向旋转45deg + transform: rotateY(45deg):沿着y轴正方向旋转45deg + transform: rotateZ(45deg):沿着z轴正方向旋转45deg + transform: rotate3d(x,y,z,deg):沿着自定义轴旋转 deg为角度(了解即可)‘ + transform: rotate3d(1,0,0,45deg) 沿着x轴正方向旋转45deg + transform: rotate3d(1,1,0,45deg) 沿着对角线旋转45deg
-
-
对于元素旋转的方向的判断 我们使用左手准则 x轴的左手法则
-
左手的手拇指指向x轴的正方向
-
其余手指的弯曲方向就是该元素沿着x轴旋转的方向(正值)
-
-
y轴的左手准则
-
左手的手拇指指向y轴的正方向
-
其余手指的弯曲方向就是该元素沿着y轴旋转的方向(正值)
-
-
-
3D呈现 transfrom-style
-
控制子元素是否开启三维立体环境
-
transform-style:flat; 子元素不开启3d立体空间 默认的
-
transform-style:preserve-3d; 子元素开启立体空间
-
代码写给父级，但是影响的是子盒子
-
-
-
浏览器私有前缀
-
浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加
-
1.私有前缀
-
-moz-: 代表firefox浏览器私有属性
-
-ms-: 代表ie浏览器私有属性
-
-webkit-: 代表safari、chrome私有属性
-
-o-: 代表Opera私有属性
-
-
写法
-
-moz-border-radius:10px;
-
-
浙公网安备 33010602011771号