h5基础知识一

来源:互联网 发布:中国菜刀源码 编辑:程序博客网 时间:2024/03/29 14:29

一、语义标签

          HTML5增加了大量更有意义的语义标签,这些语义标签我们可以把他当作块元素来处理,更有利于搜索引擎或辅助设备来理解HTML页面内容。

           1、常用的语义标签

             标签:nav、header、footer、section、article、aside、progress

             语义:导航、头部、结尾、区块、文章、侧边栏、进度条

                      尽量避免全局使用header、footer、aside等语义标签。

二、表单

       1、表单类型

             类型:email          使用示例:<input type="email">    含义:输入邮箱格式

                        tel              使用示例:<input type="tel">        含义:输入手机号码格式

                        url              使用示例:<input type="url">        含义:输入url格式

                        number      使用示例:<input type="number">    含义:输入数字格式

                        datetime     使用示例:<input type="datetime">    含义:输入邮箱格式

                        search        使用示例:<input type="search">    含义:搜索框(体现语义化)

                        range          使用示例:<input type="range">    含义:自由拖动滑块

                        color           使用示例:<input type="color">      含义: 拾色器

                        time            使用示例:<input type="time">  

                        date            使用示例:<input type="date">

                        month         使用示例:<input type="month">  

                        week           使用示例:<input type="week">  

        2、表单属性                                                                                                                                     

属性

用法

含义

placeholder

<input type="text" placeholder="请输入用户名">

占位符

autofocus

<input type="text" autofocus>

自动获得焦点

multiple

<input type="file" multiple>

多文件上传

autocomplete

<input type="text" autocomplete="off">

自动完成

form

<input type="text" form="某表单ID">

 

required

<input type="text" required>

必填项

pattern

<input type="text" pattern="\d">

自定义验证     

form 我们可以将表单外面的表单项与该表单进行关联,这个样我提交表单的时候,就会提交当前表单外的表单项的数据
       <form id="formId">
                <input type="text">
                <input type="submit">
       </form>
        <input type="text" form="formId">

        3、表单元素

元素

含义

<datalist>

数据列表

<output>

输出结果

<meter>

度量器    

       <datalist> 下拉选项与input 配合使用

       <datalist id="listId">
               <option></option>
        </datalist>
        在这个输入框里面引用这个数据列表
        <input type="text" list="listId">
        <output></output>   不可当做数据提交
        <meter value="10" max="200"  min="0" low="40" high="80"></meter>
表示度量器,不建议用作进度条

       <keygen>  生成加密字符串。 keygen 元素的作用是提供一种验证用户的可靠方法。 

 keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。     私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的
客户端证书(client certificate)。

        4、表单事件

               在html5 当中,新增了两个事件,一个是oninput事件,一个是oninvalid事件

               oninput 当向输入框输入内容的时候触发。 1:通过键盘输入触发。2:通过赋值粘贴触发。
                                                                                   3:通过js 动态修改不会触发

                        oninvalid 当验证不通过的时候触发。一般用来修改默认的提示信息。

               this.setCustomValidity(“您输入的邮箱地址错误。”);

三、多媒体  

         1、音频

              HTML5通过<audio>标签来解决音频播放的问题。

             并且可以通过附加属性可以更友好控制音频的播放。如:autoplay 自动播放

              controls 是否显不默认播放控件     loop 循环播放

         2、 视频

             HTML5通过<video>标签来解决音频播放的问题。

             同样,通过附加属性可以更友好的控制视频的播放。如:autoplay 自动播放

              controls 是否显示默认播放控件    loop 循环播放

              width 设置播放窗口宽度       height 设置播放窗口的高度

            <video controls=“controls”>
                    <source src=".mp4"></source>
                    <source src=".avi"></source>
            <video>

四、dom扩展    

       1、document.getElementsByClassName('class') 通过类名获取元素,以伪数组形式存在。

       2、document.querySelector('selector') 通过CSS选择器获取元素,符合匹配条件的1元素。

       3、document.querySelectorAll('selector')通过CSS选择器获取元素,以伪数组形式存在。

       4、类名操作

              ⑴、Node.classList.add('class') 添加class

              ⑵、Node.classList.remove('class') 移除class

              ⑶、Node.classList.toggle('class') 切换class,有则移除,无则添加

              ⑷、Node.classList.contains('class') 检测是否存在class

                     Node指一个有效的DOM节点,是一个通称。document.querySelector("#xxx")

       5、 自定义属性

              在HTML5中我们可以自定义属性,其格式如下data-*="",例如

              data-info="我是自定义属性",通过Node.dataset['info']我们便可以获取到自定义的属性值。

              Node.dataset是以对象形式存在的,当我们为同一个DOM节点指定了多个自定义属性时,Node.dataset则存                储了所有的自定义属性的值。

               假设某元素 <div id="demo"data-name="itcast" data-age="10">

                                  var demo = document.querySelector('#demo');

                                ①、读取demo.dataset['name'] 或者 demo.dataset['age']

                                 ②、设置demo.dataset['name']= 'web developer'

                注:当我们如下格式设置时,则需要以驼峰格式才能正确获取

                      <div data-my-name="itcast"> 这样获取Node.dataset['myName']

五、兼容性

        html5 的标记有一个兼容性,我们的这些新的标签,一些低版本的浏览器可能解析不了。
        这些语义标签浏览器不认识。
        屏蔽掉这兼容性行。
        ie8 一下的版本都存在这个兼容性。ie10
        我们现在可以用这样的一个软件,这个软件叫做ietester,
        这个软件可以模拟ie6,7,8,9.
        我们一般情况下,都是导入一个js 文件,这个js 文件是别人已经写好的,拿过来直接使用即可。



0 0
原创粉丝点击