标签：required ram tin invalid focus 百分比 spec filter s函数
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现状
在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;
+ < audio controls = "controls">
+ • < source scr = "happy.mp3" type="audio/mpeg">
+ • < source scr = "happy.ogg" type="audio/ogg">
+ • 您的浏览器太low了， 不支持audio播放
+ < /audio>标签：required ram tin invalid focus 百分比 spec filter s函数
原文地址：https://www.cnblogs.com/fengzi759/p/12072439.html
