关于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本身所带属性)

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容