zoukankan      html  css  js  c++  java
  • html5的一些基本新语义

    之前我们常用的是html4,html5其实只是在他的基础上加了一些东西,在html4中用过很多语义标签,我们一般都是这样写页面的:

    但在html5里面,我们会使用一些新语义标签来写页面,这样会使页面看上去更简洁,在html5中上面的转换成:

    但是它的兼容性有点问题的,在IE的低版本中是不支持的,这时候我们就要自己创建这个新语义标签,创建标签我们一般实在js中创建的,所以用这儿我们要加个判断,来决定是不是可以使用:

    第一行和最后一行不是注释语,他们就是用来判断浏览器版本。

    这里表单有许多新的type属性,像选择颜色,日期,等等,我们都是用js来创建的,现在html5中只要一句代码就可以解决这些:

    其中form是新语义表单的意思,fieldset是一个框的意思

    这里只要像上面这样写,就可以直接选择颜色,日期等等:

     

    这里有一些属性的效果在电脑浏览器上是看不出的,我们要换到手机上才可以看。

    使用表单注册时候,一般要用到一些自定义验证:

    Required添加到input后,在input提交时会进行非空验证,

    Pattern是通过设置正则来进行内容的刷选,在里面直接写正则就可以了,不需要写//.

    SetCustomValidity是自定义验证失败后提示的信息,所有它一般跟oninvalid一起使用,

    给哪个注册oninva lid事件,验证失败后就会给哪个提示内容。

    Placeholder添加在input标签中是提示信息:

    Autofocus是自动获取焦点的意思,

    Autocomplete就是你提交过一次后会自动记住的,你下次输入时只要输入前面几个就会跳出来提示的意思,但用这个必须要要跟name属性连起来一起用:

     

    就是你点击文字“请输入你的爱好”,文本框会自动获取焦点。

    H5中我们有多媒体标签,有video,audio分别是视频和声音标签。他们用法是一样

    其中src中导入的是路径,loop是循环播放的意思,controls是控制界面的意思,poster是设置视频封面时的封面的路径,加了poster,那就不能使用autoplay自动播放了。在里面设置的宽,高,不是视频的宽,高,而是video的宽,高,你改变video的宽高后,视频还是会按照它自己的宽高比例来改变大小。用这种导入视频还有一个缺点,所以大部分网站不用,直接右击就可以直接下载,一般盈利网站都不用的。

    H5中还介绍了一种获取dom元素的方法,它支持基本上所有的jquery选择器,使用这种不需要导入jq,他的用法是:

     

    这种切换之前我们用js来做,要写好多代码,而h5,有更简单的方法:

     

    然后给每个input注册事件:

    这里我们只用了五行代码就搞定了,如果用js做的话,会很麻烦。

    ClassList属性为我们提供了操作class,有增加,移除,切换功能:

     

  • 相关阅读:
    关于SQL Server 2005 SP2中提供的Vardecimal存储格式
    .NET平台网络编程之最佳实践 【转载】
    如果类型转换无可避免,那么应该尽可能用as运算符,而不是强制转换
    ArraySegment 的使用 【转载】
    如果不写Order By子句,会怎么样
    ToString 的几个思考
    尽量用属性(Property),而不是字段(Field)
    如何设置SQL Server服务器上面的CPU占用过高的警报
    SQL Server 2008 Replication and Filestream, are both supported together?【转载】
    Microsoft Sync Framework
  • 原文地址:https://www.cnblogs.com/cykblogs/p/5819429.html
Copyright © 2011-2022 走看看