H5语义化标签表单控件及属性

参考文章https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list

H5语义化标签:

<header>头部</header>

<nav>导航</nav>

<section>主体</section>

<aside>侧边栏</aside>

<article>文章</article>

<footer>底部</footer>

/////////////////////////////????

<!--&lt;!&ndash; 表单新增属性&ndash;&gt;-->

表单属性:

placeholder  提示文字(占位符)

autofocus  自动聚焦

autocomplete  自动完成填充  on开启(默认)  off取消自动提示

required  必填项

multiple  多选项

novalidata    关闭默认的验证功能(只能加给form)

parttern   自定义正则验证     

pattern="1\d{10}"

表单控件:

</form action='' novalidata>

    <fieldset>

        <legend>表单属性</legend>

       <label for=' '>

            用户名:<input type='text' name='username'  placeholder='柱子'  autocomplete='on'  required/>

        </label> 
     

        <labe for=''l>

            性别:<input type='text' name='sex' list='sex'/>

        </label>      

        <label for=' '>

            email:<input type='email' name='email' id=' '/>

        </label>

        <label label=' '>

            url:<input type='url' name='url' />

        </label>

        <label for=' '>

            number:<input type='url' name='url'/>

        </label>

        <label for=''>

            tel:<input type='tel' name='tel' parttern='1\d{10}'/>

        </label>

        <label for=' '>

            search:<input type='search' name='search' value='wjx'/>

        </label>

        <label for=' '>

            range:<input type='range' name='range' value='100' min='0' max='300'/>

        </label>

        <label for=' '>

            color:<input type='color' name='color'/>

        </label>

        <label for=' '>

            data:<input type='date' name='date'/>

        </label>

        <label for=' '>

            month:<input type='month' name='month'/>

        </label>

        <label for=' '>

            week:<input type='week' name='week'/>

        </label>

         <label for=''>

           <input type='submint' value='提交'/>

        </label>
       

        <label for=' '>

            密码:<input type='password' name='pwd'/>

        </label>       

        <label for=''>

             推荐人:<output>wjx</output>

        </label>
            <label>

                    加密类型:<keygen/>

            </label>

            <label for=' '>

                   度量器:<meter value='50'  max='100'  min='0' low='30' high='80'></meter>

            </label>

            <label for=''>

                 <input type='file' name='file' multiple/>

            </label>

                //进度条

            <progress value='40' max='0'></progress>

    </fieldset>

</form>

H5智能下拉菜单:

<select>

    <option>选项1</option>

    <option>选项2</option>

    <option>选项3</option>

</select>

普通输入框:

 <input type=' text' list='car'/>

数据列表标签:

<datalist id='sex'>

    <option>男</option>

    <option>女</option>

    <option>不详</option>

</datalist>

多媒体

autoplay   自动播放

controls   控制条

loop  循环

//推荐的兼容写法

音频

<audio controls  loop>

        <source  src='music.mp3'/>

        <source  src='music.ogg'/>

           <source  src='music.wav'/>

        //抱歉不支持

</audio>

视频

<video  controls  loop>

         <source src='movie.mp4'>

           <source src='movie.ogg'>

            <source src='movie.webm'>

        //抱歉不支持

</video>

自定义属性

给标签添加自定义属性,必须以  data-  开头

<div  data-my-name='wjx' data-content='我是一个div'></div>

自定义属性获取须要经过   dataset['myName']

                                         dataset['content'];