筆記內容很簡單，不適合初學，只供個人復習參考
1 <!DOCTYPE html> 2 <!--DOCTYPE說明使用的HTML版本--> 3 <html lang="en"> 4 <!--注釋的快捷鍵 ctrl + /--> 5 <head> 6 <!--描述性標簽，它用來描述我們網站的一些信息--> 7 <meta charset="UTF-8"> 8 <meta name="Keywords" content="java"> 9 <title>第一個HTML程序</title> 10 </head> 11 <body> 12 <!--標題標簽--> 13 <h1>一級標題</h1> 14 <h2>二級標題</h2> 15 <!--段落標簽--> 16 <p>這是一整段 ，下面的內容肯定和這段內容換行</p> 17 、aaa 18 <!--水平線標簽--> 19 <hr> 20 <!--換行標簽--> 21 你好</br>啊 22 <!--字體和樣式標簽--> 23 <strong>粗體</strong> 24 <em>斜體</em> 25 <!--特殊標簽,用到啥自己查--> 26 你 好 27 ©版權標簽 28 <font color="red">正文</font> 29 <!-- img學習，其中src是圖片地址，alt是圖片不存在時的替換文字，其余的 30 非必填 31 --> 32 <img src="b.jpg" alt="測試圖片",title = "懸浮文字"/><br/> 33 <img src="b.jpg" ,width="50",heigth = "150",title = "懸浮文字"/> 34 <!--_blank指在新頁面打開--> 35 <a href="https://www.baidu.com" target="_blank">點我跳轉到百度</a> 36 <!--錨鏈接--> 37 <a href="#top">跳轉到頂端</a> 38 <!--設置錨點down，href就可以跳轉到該錨點，甚至可以跨頁面跳轉到指定錨點，mailto:是郵件鏈接，可以跳轉到指定郵件--> 39 <a name="down">down</a> 40 <img src="b.jpg" ,width="50",heigth = "150",title = "懸浮文字"/><br/> 41 <img src="b.jpg" ,width="50",heigth = "150",title = "懸浮文字"/><br/> 42 <img src="b.jpg" ,width="50",heigth = "150",title = "懸浮文字"/><br/> 43 <img src="b.jpg" ,width="50",heigth = "150",title = "懸浮文字"/><br/> 44 <img src="b.jpg" ,width="50",heigth = "150",title = "懸浮文字"/><br/> 45 <a href="#down">跳轉到down</a> 46 <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="點擊這里給我發消息" title="點擊這里給我發消息"/></a> 47 </body> 48 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>列表</title> 6 </head> 7 <body> 8 <!--有序列表--> 9 <ol> 10 <li>java</li> 11 <li>python</li> 12 <li>運維</li> 13 <li>c++</li> 14 </ol> 15 <!--無序列表--> 16 <ul> 17 <li>java</li> 18 <li>python</li> 19 <li>運維</li> 20 <li>c++</li> 21 </ul> 22 <!--dl是自定義列表--> 23 <dl> 24 <dt>學科</dt> 25 <dd>java</dd> 26 <dd>python</dd> 27 <dd>運維</dd> 28 <dd>c++</dd> 29 <!--表格table學習--> 30 </dl> 31 <table border="1px"> 32 <tr> 33 <td colspan="4">1-1</td> 34 </tr> 35 <tr> 36 <td rowspan="2">2-1</td> 37 <td>2-2</td> 38 <td>2-3</td> 39 <td>2-4</td> 40 </tr> 41 <tr> 42 <td>3-1</td> 43 <td>3-2</td> 44 <td>3-3</td> 45 </tr> 46 47 </table> 48 49 <!--視頻和音頻學習--> 50 <!-- 51 src 資源路徑 52 controls:控制條 53 autoplay:自動播放 54 --> 55 <audio src="a.mp3" controls autoplay></audio> 56 <video src="b.mp4" controls autoplay></video> 57 <header> 58 <h2>網頁頭部</h2> 59 </header> 60 <section> 61 <h2>網頁主體</h2> 62 </section> 63 <footer> 64 <h2>網頁腳步</h2> 65 </footer> 66 </body> 67 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <!--內聯框架，在指定區域嵌入一個頁面--> 9 <iframe src="https://www.baidu.com" width="1000px" height="800px"></iframe> 10 <!--點擊鏈接把指定網頁加載到本地指定的內聯區域里面--> 11 <iframe src="" name="hello" frameborder="0" width="500" height="500"></iframe> 12 <a href="https://www.cnblogs.com/henuliulei/" target="hello">點我跳轉</a> 13 <h1>注冊</h1> 14 <!--表單form 15 action表單提交的位置， 16 method：提交方式，post比get安全些 17 --> 18 <form action="Test01.html" method="post"> 19 <p> 20 用戶名：<input type="text" name="username"> 21 </p> 22 <p> 23 密碼：<input type="password" name="pwd"> 24 </p> 25 <p>性別： 26 <input type="radio" value="boy" name="sex">男 27 <input type="radio" value="girl" name="sex">女 28 </p> 29 <p>愛好： 30 <input type="checkbox" value="sleep" name="hobby"> 睡覺 31 <input type="checkbox" value="code" name="code">敲代碼 32 <input type="checkbox" value="chat" name="chat">聊天 33 </p> 34 <p> 35 <input type="submit"> 36 <input type="reset"> 37 </p> 38 </form> 39 </body> 40 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>下拉框，列表框</title> 6 </head> 7 <body> 8 <!--下拉框--> 9 <p> 10 <select name="列表名稱"> 11 <option value="China">中國</option> 12 <option value="us">美國</option> 13 <option value="eth">瑞士</option> 14 </select> 15 </p> 16 <!--列表框--> 17 <p>反饋： 18 <textarea name="textarea" cols="50" rows="10">文本區域</textarea> 19 </p> 20 <p> 21 <input type="file" name="files"> 22 <input type="button" value="上傳" name="upload"> 23 </p> 24 <!--郵箱驗證--> 25 <p>郵箱： 26 <input type="email" name="email"> 27 </p> 28 <p>URL: 29 <input type="url" name="url"> 30 </p> 31 <p>商品數量 32 <input type="number" name="num" maxlength="10" max="10" min="0" step="1"> 33 </p> 34 <p>音量滑塊： 35 <input type="range" min="1" max="100" name="voice"> 36 </p> 37 <p>搜索 38 <input name="find" type="search"> 39 </p> 40 <!--表單的三個應用 隱藏域，只讀，禁用--> 41 42 </body> 43 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <!--表單的三個應用 隱藏域hidden，只讀readonly，禁用disabled--> 9 <!--placeholder的作用是提示信息，requred是非空判斷pattern正則表達式 --> 10 <form action="Test01.html" method="post"> 11 <!-- 只讀 --> 12 <p> 13 用戶名：<input type="text" placeholder="請輸入用戶名" name="username" value="admin" readonly required> 14 實際名：<input type="text" placeholder="請輸入實際名字" name="username1" required> 15 </p> 16 <p> 17 密碼：<input type="password" name="pwd" hidden> 18 </p> 19 <p>性別： 20 <input type="radio" value="boy" name="sex" checked disabled>男 21 <input type="radio" value="girl" name="sex">女 22 </p> 23 <p> 24 <input type="text" name="diymail" pattern="^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$"> 25 </p> 26 <p> 27 <!--增強鼠標可用性--> 28 <label for="mark">你點我試試</label> 29 <!--點擊之后跳轉到文本框--> 30 <input type="text" id="mark"> 31 </p> 32 <p> 33 <input type="submit"> 34 <input type="reset"> 35 </p> 36 </form> 37 </body> 38 </html>