H5apiの新しいタグといくつかの一般的なフォーム要素の属性の詳細な説明（完全）

HTMLの新しいタグ

h5新增: 	 
*1) 新增标签    
        h5中新增的语义化标签有哪些？
        div.header

    块级元素
        header、aside、footer、article、nav...

    功能标签
        进度条
        <progress value="20" max="100"></progress>
    
    input输入框
        placeholder
            更改字体颜色
        type
            number
            date
            month

2) 音视频
    audio
    video
        属性
            src     需要引入的视频资源地址
            controls 加上该属性会显示视频的控件
                控件一般包括：
                    暂停
                    播放
                    进度条
                    音量
                    全屏显示
            autoplay    加上该属性会让视频在页面刷新的时候自动播放
            loop    控制视频是否循环播放
            height、width 控制视频的宽高
            
            volume 视频的音量
                0~1
            duration    视频的总时长
            currentTime 当前播放的进度
            paused  当前视频的状态(是否暂停)

        方法
            play()  播放
            pause() 暂停
            load()  重新加载当前视频

3) 画布
    canvas
        专门用于绘制图形，只是一个容器，不具备绘制能力，需要我们编写js代码实现
    1. 矩形
        1、获取canvas对象
        2、获取2d上下文context
        3、设置样式
            fillStyle   填充样式
            strokeStyle 描边样式
        4、设置线宽
            lineWidth
        5、绘制矩形
            fillRect(x,y,width,height)
            strokeRect(x,y,width,height)

    2. 圆形
        1、获取canvas对象
        2、获取2d上下文context
        3、设置样式
            fillStyle   填充样式
            strokeStyle 描边样式
        4、设置线宽
            lineWidth
        5、开始创建路径
            context.beginPath()
        6、设置路径
            context.arc(x,y,radius,startAngle,endAngle,true)
            true为逆时针
            false顺时针【默认】
        7、关闭路径
            context.closePath()
        8、绘制圆形
            context.fill()  填充圆
            context.stroke() 描边圆

    3. 渐变色
        1、获取canvas对象
        2、获取2d上下文context
        3、创建渐变对象
            var gradient = context.createLinearGradient(0,100,100,100);
        4、添加渐变色
            gradient.addColorStop(number,color)
            number为偏移量0~1
        5、将渐变对象赋值给填充样式
            fillStyle = gradient
        6、绘制矩形

    4. 图片
        1、获取canvas及2d图形上下文对象
        2、创建图像对象  
            var image = new Image(); 
            image.src = './xxx.jpg'
        3、在图片加载完毕之后绘制图片
            context.drawImage(image,x,y,w,h);
            参数：图像，绘制位置的x坐标，起始y坐标，图片宽度，图片高度
        4、设置平铺模式
            var pattern = context.createPattern(image,'no-repeat');
            将平铺对象赋值给填充模式
            context.fillStyle = pattern;

    5. 文字
        1. 获取canvas对象
        var canvas = document.getElementById('canvas')
    2. 获取2d上下文
        var context = canvas.getContext('2d')
    3. 设置样式
        填充样式    fillStyle
            'red'
            gradient
            pattern
        描边样式    strokeStyle
    4. 设置线宽
        context.lineWidth
    5. 设置字体
        context.font = '20px sans-serif'
        context.textAlign = 'center'
    6. 绘制字体
        context.fillText('hello',x,y)
        context.strokeText('hello',x,y)

4、拖拽 
    网页中的元素可放置在任意的位置，使用拖拽实现
    1) 属性
        draggalbe   设置元素可拖拽
    2) 事件
        1. 拖拽元素【需要改变位置的元素】
            dragstart   开始拖拽
            drag        正在拖拽
            dragend     拖拽结束
        2. 目标元素【被放置元素的元素】
            dragenter   拖拽元素进入到目标元素
            dragover    拖拽元素在目标元素中移动
            drop        拖拽元素放置到目标元素中
    3) 事件流
        dragstart -> drag -> dragenter -> dragover -> drop -> dragend

4) 数据交互
    拖拽元素与目标元素之间可以通过datatransfer实现数据交互

    这个事件对象的一个属性
    event.datatransfer

    设置值
    event.datatransfer.setData() ondragstart
    获取值
    event.datatransfer.getData() ondrop

    设置视觉效果
    event.dataTransfer.dropEffect = 'link' ondragover
    event.dataTransfer.effectAllowed = 'move' ondragstart

    link
    copy
    move

4) 如何将拖拽元素放置到目标元素
    1. 前提
        拖拽元素可拖拽
            draggalbe
        目标元素可放置
            ondragover = function(){
                event.preventDefault();
            }
    2. 思路
        拖拽元素是谁？
        id class tagname
        数据交互
    
*5、存储
    1) cookie
        1. 创建cookie
            document.cookie = 'username = tom'
        2. 访问cookie
            var cookie = document.cookie
        3. 删除cookie

2) session

3) localStorage
    localStorage.setItem('key','value')
    localStorage.getItem('key')
    localStorage.removeItem('key')
    localStorage.clear()

    如果存储的是一个对象，需要先将对象序列化JSON.stringify
    获取时再反序列化JSON.parse()

新しいcss属性：border-color border-image border-radius
box-shadow（border shadow）background-size
background-origin（positioning）background-clip（control element background display area）

フォーム要素のブール属性

反転逆
チェックチェック
無効
必須無効必須
読み取り専用読み取り専用
複数選択可能かどうか複数選択可能かどうか複数
選択、
フォームnovalidateがデフォルトで選択され、フォームは検証されません

HTMLブロック要素

それ自体で1行を占めることができ、幅と高さを設定できます。デフォルトは100％です。
ブロック要素は、テキストタイプとコンテナタイプに分けられます。

テキストブロック要素：p、h1-h6

コンテナブロック要素：div、table、tr、td、frame、ul> li、ol、dl、dt、dd（シーケンス）

HTML行内元素

線要素：aimg input strong em del span

特殊文字：テキストbr＆nbsp hr

HTMLコア属性

idクラスのタイトルスタイル