html5-01 新增非表單元素和新增表單屬性
阿新 • • 發佈：2020-08-04
一,新增的非表單元素 <!-- 新增1,canvas --> <canvas></canvas> <!-- 新增2,audio --> <audio src="./yinyue.mp3" controls></audio> <!-- 新增3,video --> <video src="./shipin.mp4" controls height="300" width="800"></video> <!-- 新增4,sourse,用於提升資源相容性 --> <source src="./yinyue.mp3"> <!-- 新增5,datalist 新列表 --> <input list="datalist" name="" id=""> <datalist id="datalist"> <option value="aaaa"></option> <option value="bbbb"></option> <option value="cccc"></option> </datalist> <!-- 新增6,keygen規定用於表單的金鑰對生成器欄位--> <keygen> <!-- 新增7,output定義不同型別的輸出，比如指令碼的輸出 --> <output></output> <!-- 新增8,artcle 文字部分 --> <article>文字塊</article> <!-- 新增9,aside 側邊欄 --> <aside>內容</aside> <!-- 新增10,footer 頁尾 --> <footer>頁尾</footer> <!-- 新增11,header 頁頭 --> <header>頭部</header> <!-- 新增12,nav 導航欄 --> <nav>導航欄</nav> <!-- 新增13,progress 任務進度 --> <progress></progress> <!-- 新增14,section 文件節 --> <section></section> 二,新增表單屬性<!-- 佔位符 --> <input type="text" placeholder="6666"> <!-- 頁面載入自動獲取焦點 --> <input type="text" autofocus> <!-- 瀏覽器是否儲存上次搜尋記錄 --> <input type="text" autocomplete> <!-- 設定必填項 --> <input type="text" required> <!-- 設定關閉嚴格驗證 --> <input type="email" novalidate> <!-- 設定精確自定義驗證 --> <input type="text" pattern="^[\d]{4}$"> 三,表單提交詳解<form action="http://59.111.104.104:8086/pcUser/login" method="post"> <input type="text" placeholder="請輸入賬號" name="username" class="header_ddd_user"> <input type="password" placeholder="請輸入密碼" name="password" class="header_ddd_password"> <input type="submit" value="登入" class="header_ddd_login"> <!-- </form> --> 1,action:"url"介面地址2,method:"post"請求方式 3,input中的name即是一條引數 name="表單內的資料" 四,H5相容性問題解決方案一 解決ie瀏覽器關於h5標籤的不識別問題 <!--[if lt IE 6]> <script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script> <![endif]--> 插入於head標籤之間 相容h5和c3 <!--[if lt IE 9]> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script> <![endif]-->