串列，表格，媒體元素
串列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>串列學習</title> </head> <body> ? <!--有序串列--> <ol> <li>java</li> <li>python</li> <li>運維</li> <li>前端</li> <li>c++</li> </ol> <hr/> ? <!--無序串列--> <ul> <li>java</li> <li>python</li> <li>運維</li> <li>前端</li> <li>c++</li> </ul> <!--自定義串列 dl:標簽 dt：串列名稱 dd：串列選項 用在網站底部較多 --> <dl> <dt>學科</dt> ? <dd>java</dd> <dd>python</dd> <dd>運維</dd> <dd>前端</dd> <dd>c++</dd> ? <dt>位置</dt> ? <dd>西安</dd> <dd>鄭州</dd> <dd>合肥</dd> <dd>浙江</dd> </dl> </body> </html>
表格標簽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格學習</title> </head> <body> ? <!--表格table 行：tr 列：td border:邊框 --> <table border="1px"> <tr> <!--colspan 跨列，跨列時要將其他列洗掉--> <td colspan="3">學上成績</td> </tr> <tr> <!--rowspan 跨行，同上--> <td rowspan="2">小明</td> <td>語文</td> <td>100</td> </tr> <tr> <td>數學</td> <td>100</td> </tr> <tr> <td rowspan="2">小紅</td> <td>語文</td> <td>100</td> </tr> <tr> <td>數學</td> <td>100</td> </tr> </table> ? </body> </html>
媒體元素
視頻：video
音頻：audio
頁面結構分析
<header> <h2>網頁頭部</h2> </header> ? <section> <h2>網頁主體</h2> </section> ? <footer> <h2>網頁腳部</h2> </footer>
iframe行內框架
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>行內框架學習</title> </head> <body> <!--iframe src:參考頁面地址 name：框架標識名 ? --> <iframe src="" name="hello" frameborder="0" width="500" height="500"> </iframe> ? <a href="1.我的第一個網頁.html" target="hello">點擊跳轉到內框架打開</a> ? </body> </html>
表單及表單應用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登陸注冊</title> </head> <body> ? <h1>注冊</h1> ? <!--表單form ? action: 表單提交的位置，網站，請求處理地址 method: post, get 提交方式 get方式提交可以在url中看到提交的資訊，不安全 post方式提交可以在url中看不到提交的資訊，安全，可傳輸大檔案 --> <form action="1.我的第一個網頁.html" method="get"> ? <!--文本輸入框：input type="text"--> <p>賬號：<input type="text" name="username"></p> <!--密碼框：input type="password"--> <p>密碼：<input type="password" name="pwd"></p> <p> <input type="submit"> <input type="reset"> </p> ? </form></body> </html>
表單元素
單選框標簽
<!--單選框標簽 input type="radio" value：單選框的值 name：組，一樣的組才能之選一個 --> <p>性別： <input type="radio" value="boy" name="sex">男 <input type="radio" value="girl" name="sex">女 </p>
多選框標簽&按鈕
<!--多選框標簽 input type="checkbox" --> <p>愛好： <input type="checkbox" value="sleep" name="hobby"/>睡覺 <input type="checkbox" value="code" name="hobby"/>敲代碼 <input type="checkbox" value="game" name="hobby"/>玩游戲 <input type="checkbox" value="read" name="hobby"/>讀書 </p> ? <!--按鈕標簽 input type="button" 普通按鈕 input type="image" 圖片按鈕 input type="submit" 提交按鈕 input type="reset" 重置按鈕 --> <p>按鈕： <input type="button" name="btn1" value="點擊變長"> <input type="image" src="../resources/image/b.jpg"> </p>
下拉框
<!--下拉框， selected 默認值 串列框--> <p>國家： <select name="串列名稱"> <option value="China">中國</option> <option value="France" selected>法國</option> <option value="USA">美國</option> <option value="US">英國</option> </select> </p>
文本域&檔案域
<!--文本域 textarea name="textarea" --> <p>反饋： <textarea name="textarea" cols="30" rows="10">請輸入</textarea> </p> ? <!--檔案域 input type="file" --> <p> <input type="file" name="files"> <input type="button" value="上傳" name="upload"> </p>
驗證，滑塊和搜索框
<!--郵件驗證 input type="email" --> <p>郵箱： <input type="email" name="emails"> </p> <!--URL驗證 input type="url" --> <p>URL： <input type="url" name="url"> </p> <!--數字驗證 input type="number" --> <p>數字： <input type="number" name="num" max="100" min="0" step="1"> </p> ? <!--滑塊 input type="range" --> <p>音量滑塊： <input type="range" name="voice" min="0" max="100"> </p> ? <!--搜索框 input type="search" --> <p>搜索： <input type="search" name="search"> </p>
表單的應用
<p>密碼：<input type="password" name="pwd" hidden value="123456"></p>
<p>賬號：<input type="text" name="username" value="admin" readonly></p>
<input type="radio" value="boy" name="sex" disabled/>男
表單初級驗證
<p>賬號：<input type="text" name="username" placeholder="請輸入用戶名"></p>
<p>密碼：<input type="password" name="pwd" required></p>
<p>自定義郵箱： <input type="text" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/"> </p>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/885.html
標籤：HTML5