h5&css3

HTML5

1. HTML5简介

   • 万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。作为新HTML语言，具有新的元素，属性和行为

   • 它具有更大的技术集，允许更多样化和强大的网站和应用程序

   • 增加了新特性：

     • 语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形及特效特性，性能与集成特性，CSS3特性

   • 广义的HTML5

     • 广义的HTML5是HTML5本身+CSS3+JavaScript

     • 虽然HTML5的一些特性仍然不被某些浏览器支持，但是它是一种发展趋势，将来将全面进入HTML的世界

2. H5新增语义化标签

   • 以前布局，我们基本用div来做。div对于搜索引擎来说，是没有语义的

   • < header>:头部标签

   • < nav>: 导航标签

   • < article> : 内容标签

   • < section>: 块级标签

   • < aside> : 侧边栏标签

   • < footer>: 尾部标签

   • 注意：

     • 这种语义化标准注意针对搜索引擎的

     • 这些新标签页面中可以使用多次的

     • 再IE9中，需要把这些元素转换为块级元素

     • 其实，我们移动端更喜欢使用这些标签

     • HTML5还增加了很多其他标签，我们后面再慢慢学

3. 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

1. • • • • • 谷歌浏览器把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	静音播放

1. • • • • 谷歌浏览器把autoplay属性给我们禁用了 解决方案 给视频加静音属性

   • 总结：

     • 音频标签和视频标签使用基本一致

     • 浏览器支持情况不同

     • 谷歌浏览器把音频和视频自动播放禁止了

     • 我们可以给视频标签添加muted属性可以自定播放视频，音频不可以

     • 视频标签是重点，我们经常设置自动播放，不使用controls控件，循环和设置大小属性

2. H5新增input表单、表单属性

属性值	说明
type = "email"	限制用户输入必须为Email类型
type = "url"	限制用户输入必须为URL类型
type = "date"	限制用户输入必须为日期类型
type = "time"	限制用户输入必须为时间类型
type = "month"	限制用户输入必须为月类型
type = "week"	限制用户输入必须为周类型
type = "number"(重点记住)	限制用户输入必须为数字类型
type = "tel"(重点记住)	手机号码
type = "search"(重点记住)	搜索框
type = "color"	生成一个颜色选中表单

1. • 示例代码如下

     • < input type="email">

   • 新增表单属性

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空，必填
placeholder(重点)	提示文本(占位符)	表单的提示信息，存在默认值将不显示
autofocus	autofocus	自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete	off/on	当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如autocomplete="on" 关闭 autocomplete = "off" 需要放在表单内同时加上name属性 同时成功提交
multiple(重点)	multiple	可以多选文件提交

1. • • 示例代码如下

     • < input type="email" required = "required" >

CSS3

1. CSS3现状

   • 在CSS2的基础上新增(扩展)样式

   • 移动端支持优于PC端

   • 不断改进中

   • 应用相对广泛

2. 属性选择器

   • 选择符	简介
     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

3. 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;
       + }

4. 伪元素选择器(重点)

   • 选择符	简介
     ::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:;    不要看见这个元素
           + clear:both;    核心代码清除浮动
           + visibility: hidden;   不要看见这个元素
           + }
         + 第二种清除浮动
           + .clearfix::before, .clearfix::after{
           + content: "";
           + display: table;  转换为块级元素，并在一行显示
           + }
           + .clearfix::after{
           + clear:both;
           + }

5. 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宽度)

6. CSS3其他特性(了解)

   • 1.CSS3滤镜filter:

     • filter CSS属性将模糊或颜色偏移等图形效果应用于元素

     • 语法格式如下

       • filter: 函数(); 例如： filter:blur(5px); blur模糊处理， 数值越大越模糊

   • 2.CSS3 calc函数：

     • calc()此 CSS函数让你在声明CSS属性值时执行一些计算

     • 语法格式如下

       • width: calc(100%-80px);

       • 括号里面可以使用 + - * /来进行计算

7. 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;
           + }

       • 注意：谁做过渡就给谁加

8. 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.当我们同时有位移和其他属性的时候，记得要将位移放到最前面

9. 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了 可以用来实现打字机效果

   • 我们元素可以添加多个动画，用逗号隔开

10. 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; 子元素开启立体空间

      • 代码写给父级，但是影响的是子盒子

11. 浏览器私有前缀

    • 浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加

    • 1.私有前缀

      • -moz-: 代表firefox浏览器私有属性

      • -ms-: 代表ie浏览器私有属性

      • -webkit-: 代表safari、chrome私有属性

      • -o-: 代表Opera私有属性

    • 写法

      • -moz-border-radius:10px;