h5基础知识一

一、语义标签

          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 文件是别人已经写好的，拿过来直接使用即可。