HTML5+CSS3 day1

用户9903177222612
156 阅读8分钟

1. 什么是HTML5

1.1HTML5简介

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

  • XHTML可扩展超文本标记语言，XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。 -HTML5它是更大的技术集，允许更多样化和强大的网站和应用程序。增加了新特性：语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维，图形及特效特性，性能与集成特性，CSS3特性。这个集合有时称为HTML3和朋友，通常缩写为HTML5

1.2广义的HTML5

  • 广义的HTML5是HTML5本身+CSS3+JavaScript
  • 这个集合有时称为HTML5和朋友，通常缩写为HTML5
  • 虽然HTML5的一些特性仍然不被某些浏览器支持，但是它是一种发展趋势

2.新增语义化标签

2.1标签语义化

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

图片.png

2.2新增语义化标签

  • <header>:头部标签
  • <nav>:导航标签
  • <article>:内容标签
  • <section>:块级标签
  • <aside>:侧边栏标签
  • <footer>:尾部标签

图片.png 注意：

  • 这种语义化标准主要针对搜索引擎的
  • 这些新标签页面中可使用多次的
  • 在IE9中，需要把这些元素转换为块级元素
  • 其实，我们移动端更喜欢使用这些标签

2.3H5新增多媒体标签

  • 音频：<audio>
  • 视频：<video>· 使用他们可以很方便的在页面中嵌入音频和视频，从而不再使用落后的flash和其他浏览器插件

2.3.1音频标签

当前，<audio>元素支持三种音频格式：

图片.png

  • 音频标签语法格式
    图片.png
  • 音频标签常见属性

图片.png

  • <auduo>音频标签语法格式

图片.png

  • <video>视频标签

图片.png

  • <video>视频标签语法格式

图片.png - <video>视频标签常见属性

图片.png

  • 总结：
  1. 音频标签和视频标签使用基本一致
  2. 浏览器支持情况不同
  3. 谷歌浏览器把音频和视频自动播放禁止了
  4. 我们可以给视频标签添加muted属性可以自定播放视频，音频不可以
  5. 视频标签是重点，我们经常设置自动播放，不使用controls控件，循环和设置大小属性

2.4 H5新增input表单，表单属性

图片.png

图片.png

1.CSS3

CSS3属性选择器

图片.png 图片.png

CSS3结构伪元素选择器

图片.png 注意：

  • before和after必须有content属性
  • before在内容的前面，after在内容的后面
  • before和after创建一个元素，但是属于行内元素
  • 因为在dom里面看不见刚才创建的元素，所以我们称为伪元素
  • 伪元素和标签选择器一样，权重为1

CSS3 2D转换

转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移，旋转，缩放等效果，转换（transform）可以简单理解为变形

  • 移动：translate
  • 旋转：rotate
  • 缩放：scale

二维坐标系

2D转换是改变标签在二维平面上的位置和形状的一种技术，先来学习二维坐标系

2D转换之移动translate

2D移动是2D转换的一种功能，可改变元素在页面中的位置，类似定位

图片.png

  • 语法

图片.png

  • 重点
  1. 定义2D转换中的移动，沿着X和Y轴移动元素
  2. translate最大的优点：不会影响到其他元素的位置
  3. translate中的百分比单位是相对于自身元素的translate：（50%，50%）；
  4. 对行内标签没有效果

2D转换之旋转rotate

  • 定义：2D旋转指的是让元素在2维平面内顺时针或者逆时针旋转
  • 语法：transform:rotate
  • 重点：
  1. rotate里面跟度数，单位是deg 比如 rotate（45deg） 2.角度为正时，顺时针，负时，为逆时针
  2. 默认旋转的中心点是元素的中心点

2D转换中心点transform-origin

  • 语法

图片.png

  • 重点
  1. 注意后面的参数x和y用空格隔开
  2. x y默认转换的中心点是元素的中心点（50%，50%）
  3. 还可以给x y设置像素或者方位名词（top button left right center）

2D转换之缩放scale

缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小

  • 语法

图片.png

  • 注意
  1. 注意其中的x和y用逗号分隔
  2. transform：scale(1,1):宽和高都放大一倍，相对于没有放大
  3. transform：scale（2，2）：宽和高都放大了2倍 4.transform：scale（2）：只写一个参数，第二个参数则和第一个参数一样，相对于scale（2，2） 5.transform：scale（0.5，0.5）:缩小 6.sacle缩放最大的优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

2D转换综合写法

  • 注意：
  1. 同时使用多个转换，其格式为：transform:translate()rotate()scale()....等
  2. 其顺序会影响转换效果（先旋转会改变坐标轴的方向）
  3. 当我们同时有位移和其他属性的时候，记得要将位移放到最前

CSS3 动画

  • 动画：动画（animation）是CSS中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果

图片.png 制作动画分为两步：

  1. 先定义动画
  2. 再使用（调用）动画
  • 用keyframes定义动画（类似定义类选择器）

图片.png

  • 动画的基本使用
  1. 0%是动画的开始，100%是动画的完成，这样的规则就是动画序列
  2. 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果
  3. 动画是使元素从一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数
  4. 请用百分比来规定变化发生的时间，或用关键词“from”和“to”，等同意0%和100%
  • 动画常用属性

图片.png

  • 动画简写属性 animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态

图片.png 注意：

  1. 简写属性里面不包含animation-play-state
  2. 暂停动画：animation-play-state:puased；经常和鼠标经过等其他配合使用
  3. 想要动画走回来，而不是直接跳回来：animation-direction:alternate
  4. 盒子动画结束后，停在结束的位置：animation-fill-mode:forwards
  • 速度曲线细节 animation0-timing-function:规定动画的速度曲线，默认是“ease”

图片.png

CSS3 3D转换

  • 特点：
  1. 近大远小
  2. 物体后面遮挡不可见

图片.png

  • 三维坐标系
  1. x轴：水平向右 。注意：x右边是正值，左边是负值
  2. y轴：垂直向下。注意：y下面是正值，上面是负值
  3. z轴：垂直屏幕。 注意：往外面是正值，往里面是负值

图片.png

  • 3D转换 主要知识点：
  1. 3D位移：translate3d(x,y,,z)
  2. 3D旋转：rotate3d(x,y,x)
  3. 透视：perspective
  4. 3D呈现transfrom-style
  • 3D移动 translate3d 3D移动在2D移动的基础上多加了一个可以位移的方向，就是z轴方向
  1. translform:translateX(100px):仅仅是在x轴上移动
  2. translform:translateY（100px):仅仅是在y轴上移动
  3. translform:translateZ(100px):仅仅是在Z轴上移动(注意：translateZ一般用px单位)
  4. translform:translate3d(x,y,z):其中x，y，z分别指要移动的轴的方向的距离
  • 透视 perspective 在2D平面产生近大远小视觉立体，但是只是效果二维的
  1. 如果想要在网页产生3D效果需要透视（理解成3D物体投影在2D平面内）
  2. 模拟人类的视觉位置，可认为安排一只眼睛去看
  3. 透视我们也称为视距：视距就是人的眼睛到屏幕的距离
  4. 距离视觉点越近的在电脑平面成像越大，越远成像越小
  5. 透视的单位是像素

图片.png

透视写在被观察元素的父盒子上面的： d：就是视距，视距就是一个距离人的眼睛到屏幕的距离 z：就是z轴，物体距离屏幕的距离，z轴越大（正值）我们看到的物体就越大

  • 3D旋转rotate3d 3D旋转指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转 语法：
  1. transform：rotateX(45deg)：沿着x轴正方向旋转45度
  2. transform：rotateY(45deg)：沿着y轴正方向旋转45度
  3. transform：rotateZ(45deg)：沿着Z轴正方向旋转45度
  4. transform3d(x,y,z,deg)：沿着自定义轴旋转deg为角度（了解即可）

图片.png 图片.png

  • 3D呈现transfrom-style
  1. 控制子元素是否开启三维立体元素
  2. transform-style：flat子元素不开启3d立体空间 默认的
  3. transform-style：preserve-3d；子元素开启立体空间
  4. 代码写给父级，但是影响的是子盒子
  5. 这个属性很重要，后面必用

图片.png

浏览器私有前缀

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

  • 私有前缀

图片.png

  • 提倡的写法

图片.png

avatar
文章
阅读
粉丝