浅谈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. 非跨度:

      2. 跨度:     

  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>

 

 

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

 

  1. 结构伪类选择器

  -> 1. :nth-child(n)     第几个,不论类别 eg: div下的第几个标签

-> 2. :nth-of-type(n)   哪一类的第几个,有类别 eg: ul下的第几个li标签,或第几个p标签

-> n可以为公式
-> odd 奇数
-> even 偶数

 

  1. 伪元素选择器

  -> 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. 括号内可以写小数点

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

转载于:https://www.cnblogs.com/carrot-cc/p/11072248.html

你可能感兴趣的:(浅谈H5C3)