html5-css3基本介绍

Share

html5基本介绍

一、 H5是什么？

H5在当前市面上主要指的就是手机端滑屏单页，而我们此课时的H5指的只是HTML5.

1.2H5的特点

  • 01HTML5的网页骨架很简洁
  • 02HTML5的语法极其松散，有很多标签可以省略不写，或者只写开始不写结束。
  • 03HTML5新增了很多有语意的结构标签。
  • 04HTML5没有达到全兼容，但是版本上他向下兼容。 注：

    1.3 H5新增结构标签
header 头部标签
nav 导航标签
section 和div类似独立区域
aside 侧边栏
article 文章标签
footer 底部标签

注：
A. 以上标签在页面中可以重复使用多次。
B.目前来说我们在写移动页面的时候可以大量使用H5，但是在传统PC页面会使用H5骨架，但不会大量使用H5新内容。
C. H5是一个向下兼容的版本，在他里面可以写之前任意的HTML内容。

1.4 H5新增input内容

form：表单标签，配合input在网页上来收集用户数据。
action：数据要提交到的地址
method：数据以何种形式提交，get(通过URL)，post（通过HTTP信息头）。
标签属性：写在标签身上的属性（src,class , id, href, value, style……)

  • 01.placeholder:设置input默认文字，光标定上用户输入内容时，清空默认值。
  • 02.autofocus：属性值等于属性名，自动获取焦点。
  • 03.required：属性值等于属性名，具有该属性为必填项。
  • 04.autocomplete：默认值是on，表示该input具体自动补全功能。（该input需要有name属性）
    注：
    name属性是在接收数据时用来区分不同input的。

    1.5 H5新增音频标签

    1
    2
    3
    4
    5
    <audio autoplay loop controls>
        <source src="路径1"/>
        <source src="路径2"/>
        对不起您的浏览器不支持该标签，请前往<a href="">下载</a>
        </audio>

注：
A.audio，新增的标签，专门用来插入声音。
为了兼容更多的浏览器，使用source来引入不同的格式。
C.文字会在不兼容时显示出来。
D. autoplay自动播放，loop循环播放，controls播放控件。

1.6.H5新增视频标签

  • 01.基本语法和audio完全一致，只是标签换成了video。
  • 02.video可以设置宽高具有和图片一样的特点，只设置一边，另一边会自动缩放。可以配合定位及display：block使用。
  • 03.视频的处理：设计时只需要预留出位置，实现时可以套用现成代码引入正确路径。

    1.7 C3伪类选择器

  • 01.li：nth-child（编号）表示选中当前元素（li）父元素下的第n个孩子，如果该位置上的元素类型和当前元素一致则选中，如果不一样则选不中。
  • 02.li：nth-of-type（编号）选中当前元素（li）父元素的第n个当前元素。区别在于不用考虑类型。
  • 03.编号分为三种：具体数值，关键字（odd，even）包含字符n的表达式，n表示从0开始的自然数。
  • 04.默认上面的选择器是从前向后。 :nth-last-child（）； ：nth-last-of-type（）表示从后向前。
  • 05.可以用于所有标签，以上以li为例。

    1.8 常用结构伪类

    结构伪类也称之为伪元素，既可以当作元素一样去用，但不是真正的标签。每个元素身上都有：after ：before分别在内容的后面和前面设置内容。
  • 01.content 属性为必填项，即使为空。
  • 02.默认情况下宽高不起作用，一般配合定位使用。

    二、1.1 定位总结

  • 01.正常文档流下，两个元素的位置如果相交，则是写在结构后面的会压住写在前面的。
  • 02.定位属性可以提高元素的显示层级，（如果相交则有定位的会压住没定位的）
  • 03.z-index接收一个数值，值越大元素越靠上显示。（存在定位属性时才有意义）
  • 04.relative：始终相对于自身定位，且还占据之前的位置。
  • 05.absolute:
    A:绝对定位之后的元素不占位置。
    B：子绝父相，子绝父固，子绝父绝都可以存在。
    C：具有绝对定位属性的元素会沿着关系树向上查找，只要某个祖先元素身上具有任意定位信息就会以它作为定位参考。

    1.2 图标字体

  1. 图标字体就是长的像图片的字体。
  2. 使用图标字体利于后期维护，切同样的内容字体占用的体积要比图片小。
  3. 使用矢量图软件绘制想要的图标字体，导成svg格式，然后借助第三方字体平台将svg图片转成相应的字体文件，下载即可使用。

    1.3 圆角边框

    border-radius:圆角半径；
    注：
  4. 设置盒子圆角的属性，可以设置具体px值或百分比。
  5. 设置多个参数，中间用空格隔开。
  6. 两个参数分别为:左上/右下 右上/左下。
    三个参数：左上 右上/左下 右下。
    四个参数：从左上角开始顺时针旋转一周。
  7. 设置宽高的50%，可以制作正圆。

    1.4 阴影

    text-shadow:x y r color;
    box-shadow:x y r1 r2 color;
    注：
  8. 分别表示文字阴影和盒子阴影。
  9. 前三个数的含义都表示水平，垂直，偏移量及羽化程度。
  10. color都表示阴影颜色。
  11. 盒子阴影第四个参数表示扩展，同时还可以设置最后一个inset参数表示内阴影。
  12. 语法允许用逗号隔开，设置多重阴影。

    1.5 背景图片尺寸

    background-size：设置背景图片大小；
  • 01.在C3当中允许给一个盒子添加多张背景图片中间用逗号隔开。
  • 02.后面设置不同形式的参数：
    A.具体px值：只写一个参数仅表示宽度，只写两个参数中间用空格隔开表示宽高。
    B.百分比：规格则和px一样，只需注意百分比是相对于盒子大小来定义。
    C.关键字：cover 按着原图宽度比缩放图片，最终铺满整个容器，contain 缩放图片最终完全显示在容器内。

    1.6 内减盒子属性

    box-sizing:box-border;具有该属性的盒子，他的实际展示大小由CSS中的width，height决定，无论设置多少padding及boder都只会从这些值上进行减除。

    1.7 背景图片固定

    background-attachment：fixed;
    专门用来设置背景图片固定不动。

    三、1.1过渡属性

    transition：属性名 过度时长 过渡形式 过渡延长时长；
    注：
  • 过渡属性不是动画，他只是让元素的CSS属性发生改变时补出一个中间过程。
  • 过渡属性可以设置在元素的正常和hover两种状态下。
  • 参数
    i.参数1设置需要过渡属性名，用all表示所有。
    ii.参数2设置过度时长，单位是不能省略。
    iii.参数C3默认提供linear（匀速） ease（变速） ease-in（变加速） ease-out(变减速) ease-in-out（先快后慢）。
    iv.参数4设置延时时长。

    1.2 转换属性

    在C3当中规定了2D和3D两种转换属性，目前使用较多的是2D，分为位移，缩放，旋转，斜切四种，转换属性名为transform。
    (1) 位移
    transform：translate(x,y);
    注：
  • 可以设置多个参数分别表示x,y轴偏移量，中间用逗号隔开。
  • 参数可以是具体的px值和百分比，百分比是以元素的宽高进行计算。
    (2) 缩放
    transform：scale(缩放系数)
    注：
  • 定义元素的缩小或放大改变宽高属性。
  • 小括号里设置的是一个数值，表示倍数，0-无限大。
  • 设置两个参数分别表示宽和高，中间用逗号隔开。
    (3)旋转
    transform：rotate（角度）
    注：
  • 默认围绕Z轴做旋转。
  • 单位是deg（度数），书写的度数表示做到……度。
  • opcity：属性设置元素透明度，设置0-1之间的数值。
    (4)斜切
    transform:skew(角度）本意是设置元素在3D空间里的翻转，可以在平面内做左右倾斜。
    注：如果需要给一个元素加多个过渡属性写在同一个transform属性后面，中间用空格隔开，且先写哪一个就先执行哪一个。

    1.3 X Y轴旋转

    transform:rotate(x) transform:rotate(y)
    注：
  • 以上两个属性本为3D元素旋转，在平面内取特殊值可以常见效果。
  • x轴的位置可以由上中下，y轴的位置可以有左中右。

    1.4 旋转中心设置

    transform-origin：从坐标或方向关键字。
    注：
  1. 该属性用来设置旋转中心，可以是点也可以是轴，如果是点时，以当前元素左上角为参数点。
  2. 如果是轴时分X,Y轴。

    四、1.1 透视属性

    perspective：具体px值；
    注：
  3. 常用的值范围800-2000即可。
  4. 该属性添加在需要透视属性的父元素身上。

  5. backface-visibility：hidden；该属性用来设置背对客户时元素不显示。

    1.2 C3动画属性

    在CSS3当中的动画可以分为定义和调用。
    一、定义

    1
    2
    3
    4
    @keyframes自定义动画名称{
        01单组：from to 
        02多组：百分比
    }

  6. @keframes 关键字专门用来定义动画，后面空格隔开写动画名称。

  7. 大括号里分两种动画实现形式，都是用来定义何种CSS属性需要改变。
    二、调用
    animation:name（动画名称） t1（动画时长） 曲线 t2 次数 反向
    注：
  8. 该属性添加在需要做动画的元素身上。
  9. 参数含义分别为：动画名称，动画时长，动画形式，动画延时时长，动画播放次数，动画是否反向。
  10. infinite 设置无限循环 altermate 设置反方向不播放 forward 设置动画停止终点。

    1.3 C3动画库

  11. 动画库就是一个animate.css文件，里面定义了许多常见的动画。
  12. 使用方法就是先引入该CSS文件，然后在需要做动画的元素身上设置两个类名，其中animated必须给另外一个就是我们需要的动画名称（可查找在线手册）。