浅谈H5C3

<一个幼儿园小班的前端的成长随笔,错误与不足之处,望各位大牛批评指点,谢谢!>

HTML5

超文本标签语言: 用文原本表示带有特殊标签的语言

对html5语义化标签的理解

标签具备语义的意义

1. 有利更好呈现代码结构

2. 便于SEO: Search Engine Optimization 搜索引擎优化

3. 提高用户体验: [eg: label标签: 获取光标焦点]

4. 便于团队开发维护: 更具可读性

5. 方便其余设备解析 --- [可省略]

H5在客户端储存数据的新方法

1. localStorage -- 没有时间限制的数据储存

2. sessionStorage -- 针对一个session的数据储存,用户关闭浏览器窗口后,数据被删除

H5的表单input

1. action= " " 表单跳转

2. method= " " 请求方式

3. name= " " name属性 ===> 设置了 name 属性的表单元素才能在提交表单时传递它们的值

类型	实例
文本类	Text[文本], Url[网络地址], Password[密码], Email[邮箱地址]
操做类	Checkbox[复选框], Radio[单选框], File[文件], Number[数值], Range[百分比滑动条]
功能类	Button[按钮], Image[图片提交按钮], Submit[文字提交按钮], Reset[重置表单]
Date类	Date[年月日控件], Datetime[年月日 + 时间控件], ...
特殊类	Hidden[隐藏信息]

TO扩展:

1. 文本类属性:

   • placeholder 占位符,做为提示信息

   • autofocus 刷新后自动获取焦点

   • autocomplete 自动记录输入信息

     1. 首先要提交按钮

     2. form表单要有name 属性

   • required 不能为空,必填项

2. Url 和 E-mail, 在H5中会在提交表单的时候检测格式是否正确

3. 操做类:

   • input标签 结合 label标签

     1. 非跨度: <label><input></input></label>

     2. 跨度: <label for="input_id"></label> 　　　　<input id="input_id"></input>

4. File:

   • 上传多个文件multiple

5. Button:

   • Button类型只能在value中定义按钮上显示的提示文字

   • Image类型只能在src中连接图片

多媒体标签

1. audio 音频标签

  <audio controls="controls">
  ​
          <source src="media/snow.mp3" type="audio/mpeg" />
  ​
          <source src="media/snow.ogg" type="audio/ogg" />
  ​
              您的浏览器不支持播放此音频
  ​
  </audio>

 

 

2. video 视频标签

  <!-- 谷歌浏览器把自动播放功能给禁用了 有解决方案： 给视频添加静音属性 -->
  ​
  <video muted="muted" loop="loop" poster="media/pig.jpg" controls>
  ​
          <source src="media/video.mp4" type="video/mp4" />
  ​
          <source src="media/video.ogg" type="video/ogg" />
  ​
          您的浏览器版本过低或不支持播放此视频
  ​
  </video>

 

 

选择器

1. 属性选择器

  -> 1.直接写属性
  ​
 -> 2.属性等于值 
        input[type="search"] {
            color: pink;
        }
 ​
 -> 3. 以某个值开头的 属性值
        div[class^="icon"] {
            color: red;
        }
 ​
 -> 4. 以某个值结尾的
        div[class$="icon"] {
            color: green;
        }
 ​
 -> 5. 能够在任意位置的
        div[class*="icon"] {
            color: blue;
        }

 

2. 结构伪类选择器

  -> 1. :nth-child(n)     第几个，不论类别 eg: div下的第几个标签
  ​
 -> 2. :nth-of-type(n)   哪一类的第几个，有类别 eg: ul下的第几个li标签,或第几个p标签
 ​
 -> n能够为公式
 -> odd 奇数
 -> even 偶数

 

3. 伪元素选择器

  -> 1.  ::before         在...以前，
  ​
 -> 2. ::after         在...以后，
 ​
 伪元素选择器必需要写
 -> 1. content=“”；
 -> 2. display：block；

 

CSS3

CSS3是CSS（层叠样式表）技术的升级版本,控制网页的样式和布局

1. 盒子模型

2. 背景边框

3. 多栏布局

4. 列表模块

5. ...等等模块

新增特效:

1. 圆角

2. 文字阴影与块阴影

3. RGBA实现透明效果

4. 渐变效果

5. 文字图像变形处理

6. 多栏布局

7. 媒体查询

8. ...等等特效

优点:

1. 减小开发维护成本

2. 提升页面性能

变形转换 transform

1. 2D转换

   • 位移translate

     1. translate中的百分比单位是相对于自身元素的 translate:(50%,50%);

     2. translate相似定位，不会影响到其余元素的位置

     3. 对行内标签没有效果

   • 旋转rotate

     1. transform-origin:50% 50%; 默认值 元素的中心位置 百分比是相对于自身的宽度和高度

     2. transform-origin:top left; 左上角 和 transform-origin：0 0;相同

     3. transform-origin:50px 50px; 距离左上角 50px 50px 的位置

     4. transform-origin：0; 只写一个值的时候 第二个值默认为 50%;

     -> 1.能够跟方位名词 transform-origin: left bottom;
     ​
    -> 2. 默认的是 50% 50% 等价于 center center 
    ​
    -> 3. 能够是px 像素
    ​
   

     图片旋转例子：
     img {
              width: 150px;
              /* 顺时针旋转45度 */
              /* transform: rotate(45deg); */
              border-radius: 50%;
              border: 5px solid pink;
              /* 过渡写到自己上，谁作动画给谁加 */
              transition: all 0.3s;
             }
             
             img:hover {
                 transform: rotate(360deg);
             }

   
    ​
    -> 旋转中心点是什么要清楚 transform-origin 

   • 缩放scale

     1. 给元素添加转换属性 transform

     2. 转换的属性值为 scale(宽的倍数,高的倍数) 如 宽变为两倍，高变为3倍 transform:scale(2,3)

     3. 括号内能够写小数点

2. 3D转换

   只是比2D转换多了个Z轴

   • 视距 perspertive 远小近大

     1. 设置物体的 translateZ 通常大于 0 如 transform:translateZ(100px)

     2. 设置 人和物体的距离 - 视距 这个值规定要设置给物体的父元素 perspertive:1000px

     3. 动态改变物体的 translateZ 便可观察效果

   • 转换样式 transform-style

     1. 控制子元素是否开启3维立体环境

     2. transform-style: flat;平面模式 - 不开启3维立体环境

     3. transform-style: preserve-3d; 3维立体环境

动画 animation

  /* 需求: 咱们想页面一打开，一个盒子就从左边走到右边 */
  1. 声明动画
  @keyframes move {
  /* 开始状态 */
  0% {
        transform: translateX(0px);
  }
  /* 结束状态 */
  100% {
        transform: translateX(1000px);
  }
  ​
  div {
        width: 200px;
        height: 200px;
        
  /* 2. 调用动画 */
  /* 2.1 动画名称 */
        animation-name: move;
  /* 2.2 持续时间 */
        animation-duration: 2s;

 ​
 动画名称要对应，
 至少要有2个属性值，即，动画名称   持续时间 其余可省略按需求
 animation: name duration timing-function delay iteration-count direction fill-mode; 
 ​
 【1. 动画名   2. 持续时间   3. 速度曲线   4.延迟时间     5.循环次数   6.循环方向   7.动画等待或结束的状态】
 **其中第3个,速度曲线 可为steps 步数**
 ​
 animation: move 2s linear 0s 1 alternate forwards; 
 ​
 -> 与上面属性值对应属性，

 

媒体查询

根据不一样的媒体类型定制不一样的样式规则

1. CSS3媒体类型

   • all 用于全部多媒体类型的设备

   • print 用于打印机

   • screen 用于电脑屏幕, 平板,智能手机

   • speech 用于屏幕阅读器

  @media screen and (min-width: 480px) {
     body {
        
    }
 }
 -> 当屏幕小于480px时,背景颜色发生改变

 

CSS3 兼容处理

给浏览器添加私有前缀 :

1. Chrome(谷歌浏览器): -webkit-

2. Safan(苹果浏览器): -webkit-

3. Firefox(火狐浏览器): -moz-

4. IE(IE浏览器): -ms-

5. Opera(欧朋浏览器): -o-