关于html5新标签元素验证问题，以及一些简单的画布知识点总结

一、功能标签：

<video src="" autoplay自动播放 controls控制播放 loop是否重复播放 preload是否自动加载>定义视频</video>

<audio src="">定义音频</audio>

<mark>标记</mark>

<iframe src="" frameborder="0">内嵌网页框架</iframe>

<canvas>定义图形提供画布</canvas>

二.流式布局：即百分比布局。

（宽度， 高度，边距，rem，定位值）

尺寸百分比 = 目标元素的宽度（高度）/ 父级的宽高

定位值百分比 = 目标元素的定位值 / 父级的宽高

margin和padding / 父级的宽度

3.h5新标签验证示例

<!--
    required - 指定是否为必填元素
    pattern - 用指定的正则表达式对 input 的值做验证
    url, email, number 等有验证功能的元素

    element.validity - 返回验证状态，ValidityState 对象
    ValidityState - 验证状态对象
      valid - 是否通过了验证（以下 8 个值都为 false，则此值为 true），boolean 类型
      valueMissing - 是否没有值（对应的元素如果设置为必填但没有值的时候，此值为 true），boolean 类型
      typeMismatch - 是否值的类型与期望类型不匹配，boolean 类型
      patternMismatch - 是否正则表达式验证失败，boolean 类型
      tooLong - 是否字符过多，boolean 类型
      rangeUnderflow - 是否比预设的最小值还要小，boolean 类型
      rangeOverflow - 是否比预设的最大值还要大，boolean 类型
      stepMismatch - 是否不匹配 step 的设置（比如 step 为 3，那么如果值要匹配 step 的话，则一定要为 3 的倍数），boolean 类型
      customError - 是否有自定义错误信息，boolean 类型

    element.setCustomValidity("错误信息") - 用于指定自定义的错误信息
    element.setCustomValidity("") - 用于清除自定义的错误信息
-->

<form action="#">
    <input type="text" name="txt" id="txt" required />
    <input type="email" name="email" id="email" />
    <input type="submit" name="btn" value="submit" />
    <br />
    <input type="button" value="验证 email 元素" onclick="validateEmail();" />
</form>
<script type="text/javascript">

    function validateEmail() {
        var email = document.getElementById("email");
        var validityState = email.validity;

        alert
        (
            validityState.valid + "\n" +
            validityState.valueMissing + "\n" +
            validityState.typeMismatch + "\n" +
            validityState.patternMismatch + "\n" +
            validityState.tooLong + "\n" +
            validityState.rangeUnderflow + "\n" +
            validityState.rangeOverflow + "\n" +
            validityState.stepMismatch + "\n" +
            validityState.customError
        );
    }

</script>

canvas:
content:context是一个封装了很多绘图功能的对象，获取这个对象的方法是** **
** ** var context =canvas.getContext("2d");
不提供3D服务

制作图像时有两种方式content.fill()填充/content.stroke()绘制边框

在绘制之前，要先设置好样式fillStyle、strokeStyle。

颜色表示支持，rgb，rgba ，十六进制，直接使用颜色名称。

绘制矩形.fillRect(x,y,width,height),xy是坐标 后面两位表示矩形的

长宽。

清除矩形区域，clearRect()与绘制图形参数表示一致，只不过是删除选定部位（不影响canvas本身所带属性）

圆形待续。。。。。。。。。。。。。。。。。。。。。