HTML5 新增：表单、视频、音频-第十三天

 一、复习

html的内容

    - 标签

        - 元素类型

            -内联：spa em i b strong    不会独占一行，盒模型样式不会完全生效   display：inline

            - 块元素：div h1~h6  p  ul  li  ol....  独占一行，盒模型样式生效    display：block

            - 内联块：img  input   特殊的内联 ，可以在一行显示，盒模型会生效 display：inline-block

    - 链接，引入的资源，路径

        - 绝对路径：以计算机中的位置作为起始点

            - c盘

        - 相对路径：以当前要引入的资源的文件作为起始点  ../../

    - 表单

        - 收集用户信息

        - form

            - input  类型：type ：文本输入框、数字、密码输入框

        - 控制：禁止使用， 只读，自动获取焦点，最小值，

    - 表格

        - 展示用户信息

        - table

            - thead

                - tr

                    - td

            - tbody

            - tfoot

        - 修饰

            - 边框，单元格之间的间距，单元格内容和边框之间的间距

       

        - 超链接：a

            - 超链接：跳转到其他地址（页面）

            - 锚点链接：页面内跳转（浏览器滚动）

2、css的内容

    - 选择器

        - id，class 标签 包含 子，兄弟 群组  属性  伪类  伪元素

    - 样式  

        - 文本类  盒模型类 定位类 浮动类  背景 溢出

    - 单位

        - 尺寸单位  px  pt em  rem  % vw vh

    - 概念   BFC  图片整合  透明  锚点  尺寸自动（宽 高 行高 边距 填充 位置）

 

# 二、HTML5的新增

1、html和html5的区别：语义化：标签名自身就可以表示当前的结构内容

    - 功能标签：视频标签video和音频标签audio  画布标签canvas

    - 浏览器功能：

        - 本地存储   - 浏览器的新接口

2、html5新增的标签

    - 语义化面向开发者和语言的编译器（浏览器）

    -

3、html5新增的视频和音频

    - 视频标签：video

         -src：视频存储的路径

         - width和height：表示视频容器的尺寸，没有单位

         - controls：是否显示控件

         - muted：默认静音

         - poster：播放之前的预览图

         - autoplay：自动播放

         - loop:循环播放

    - 视频格式：mp4 ogg webm

    - 音频标签：audio

         - src：视频存储的路径

         - controls：是否显示控件

         - muted：默认静音

         - autoplay：自动播放

         - loop:循环播放

    - 音频格式： - mp3  ogg  wav

4、html5新增表单控件的input的type属性

    - multiple：多个内容提交

    - readonly:只读

    - placeholder：默认提示

    - disable：禁用

    - required：必须

    - autocomplete：自动补充

    - pattern：规则

6、html5新增的

    - datalist

    - output    ``

<form action="">

        <input type="text"name="fgh" list="a">

        <datalist id="a">

            <option value="今天" label="jintian">的就撒娇色彩</option>

            <option value="明天">的就撒娇色彩</option>

        </datalist>

    </form>

    <form oninput="result.value = Number(num1.value)+Number(num2.value)">

        <input type="text" id="num1">

        +

        <input type="text" id="num2">

        =

        <output name="result"for="num1 num2" />

    </form>