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'];