HTML5：
    1、语义化标签：
    header：头部标签 nav：导航标签 article：内容标签
    section：定义文档某个区域 aside：侧边栏标签 footer：尾部标签
    2、多媒体标签：
    注意：谷歌浏览器把音频和视频自动播放都禁止了。
    1、视频：
    1、语法：

    *
    您的浏览器暂不支持该标签播放视频

    2、常用属性：
    autoplay=”autoplay”:视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
    controls=”controls”:向用户显示播放控件
    width=”像素”:设置播放器的宽度
    height=”像素”:设置播放器高度
    loop=”loop”:播放完是否继续播放该视频，循环播放
    preload=”auto”(预先加载视频) none(不应加载视频):规定是否加载视频（如果有了autoplay，就忽略该属性）
    src=”视频路径”:视频url地址
    poster=”图片路径”:加载等待的画面图片
    muted=”muted”:静音播放
    2、音频：
    1、语法：


    2、常见属性：
    autoplay=”autoplay”:音频在就绪后马上播放
    controls=”controls”:向用户显示播放控件
    loop=”loop”:音频结束时重新开始播放
    src=”音频url路径”
    3、表单控件：
    1、表单元素类型：
    type=“email”
    type=“number”
    type=“search”
    type=“url” 限制用户输入必须为URL类型
    type=“date” 限制用户输入必须为日期类型
    type=“time” 限制用户输入必须为时间类型
    type=“month” 限制用户输入必须为月份类型
    2、表单元素属性：
    required=”required”
    placeholder=”提示文本”
    pattern=”正则表达式”
    autofocus=”autofocus”:自动聚焦属性，页面加载完成自动聚焦到指定表单。
    autocomplete=”off/on”:浏览器可以记住之前提交成功过的数据。
    默认记住状态，autocomplete=”on”。 关闭：autocomplete=”off”。
    注意：若想记住值，则input框需要放在表单内，并且加上name属性，同时提交成功过。
    multiple=”multiple”:可以多选文件提交
    4、其他标签：
    1、…:突出显示部分文本(高亮显示)
    2、

    标签：描述文档或文档某个部分的细节。

    水果 定义标题，标题是可见的，用户点击标题时，会显示出下面内容

    梨子


    橘子



    CSS3：
    1、CSS3选择器：
    1、属性选择器
    2、结构伪类选择器
    3、伪元素选择器
    元素::before 在元素内部的前面插入内容
    元素::after 在元素内部的后面插入内容
    注意：1）创建出来的元素为行内元素。
    2）新创建的元素在html中找不到，所以称为伪元素。
    3）必须有content属性
    2、使用CSS3样式注意：
    要写样式的浏览器内核私有前缀，因为需要考虑浏览器的兼容性
    前缀：
    Firefox（火狐）：-moz
    Chrome（谷歌）、Safari（苹果）：-webkit
    Opera（欧鹏）： -o
    IE（微软）： -ms
    css3样式现在大多浏览器都已经支持了，但是还是有部分客户的浏览器并不支持。所以需要加上前缀。
    3、CSS3盒子模型： border-sizing:border-box;
    4、CSS3边框：
    1、圆角边框
    2、图像边框： border-image
    注意：为了使border-image起作用，需要先设置border属性。
    语法：border-image:url(‘images/border.png’) 27 stretch;
    该属性有三部分：
    1）用作边框的图片
    2）在哪里裁切图片，没有单位，默认单位为像素（px）
    3）定义中间部分是重复还是拉伸 stretch(默认 拉伸) | round（平铺）| repeat（重复）
    3、盒子阴影：box-shadow
    5、css3文本
    1、文本阴影：text-shadow
    2、允许长单词换到下一行：word-wrap
    word-wrap：normal 只在允许的断字点换行（默认）
    word-wrap:break-word 在长单词内部进行换行
    3、文本溢出以省略号替代：
    text-overflow：ellipsis;
    4、css3字体
    @font-face {
    font-family: 自定义名称;
    src: url(“fonts/HuaKangFangYuan-2.ttf”);
    }
    h2{
    font-family: 自定义名称;
    }
    6、2D变形：转换（变形）
    1、2D位移：
    transform：translate(X,Y) 单位可以是px，或者百分比。
    X为正值，则向右移动，为负值，则向左移动。
    Y为正值，则向下移动，为负值，则向上移动。
    注意：
    1、transform：translate(x)：水平偏移。 => transform：translateX(x)
    2、transform：translate(0,y)：垂直偏移。=> transform：translateY(y)
    2、2D缩放：scale()
    transform：scale(x,y) 没有单位。
    X为>1的值，则放大元素宽度，为0-0.99中的值，则缩小元素的宽度。
    Y为>1的值，则放大元素高度，为0-0.99中的值，则缩小元素的高度。
    注意：
    1、transform：scale(x,1)：宽度缩放。 => transform：scaleX(x)
    2、transform：scale(1,y)：高度缩放。=> transform：scaleY(y)
    3、transform：scale(一个值)：宽度和高度同时缩放。
    3、2D倾斜：skew()
    transform：skew(x,y) 单位为deg（度）。
    X：沿着x轴倾斜。
    Y：沿着y轴倾斜。
    注意：
    1、transform：skew(20deg)：沿着x轴倾斜。 => transform：skewX(20deg)
    2、transform：skew(0deg,-20deg)：沿着y轴倾斜。 => transform：skewY(-20deg)
    4、2D旋转：rotate()
    transform：rotate(a) 单位为deg（度）。
    a为正值，则顺时针旋转。a为负值，则逆时针旋转。
    5、注意：
    rotate()函数只是旋转，不改变元素的形状，
    skew()函数是倾斜，元素不会旋转，会改变元素的形状。
    7、css3过渡
    transition：过渡的css样式 过渡所需时间 过渡动画函数 过渡延迟时间（何时开始）
    值：
    1、过渡的css样式：如果想所有的样式都变化过渡，用all即可。
    2、过渡所需时间：单位是秒（必须要有单位） 比如0.5s
    3、过渡动画函数：默认是ease (可以省略)
    ease：由快到慢（默认值）
    linear：恒速（匀速运动）
    ease-in：越来越快（渐显效果）
    ease-out：越来越慢（渐隐效果）
    ease-in-out：先加速再减速（渐显渐隐效果）
    4、过渡何时开始：单位是秒（必须写单位），默认为0s（可以省略）了解
    注意：
    要添加多个样式的变换效果，添加的属性由逗号分隔：
    transition: background-color 3s,transform 2s;