<!DOCTYPE html> <!--#瀏覽器的兼容模式--> <html lang="en"> <head> <!--head標簽包含的子標簽--> <meta charset="utf-8"> <!--meta標簽 name屬性主要用於描述網頁，與子對應的值為content，content中的主要內容是便於搜索引擎 查找信息和分類信息用的--> <meta name="keywords" content="關鍵詞seo"> <meta name="description" content="描述詞"> <!--Refresh 頁面定時刷新 http-equiv:相當於http文件頭作用，他可以向瀏覽器傳回一些 有用的信息，以幫助正確和精確的顯示網頁內容，與之相對應得屬性為content，內容其實是各個參數的變量值--> <!--<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">--> <!--<meta http-equiv="content-type" charset="utf-8">--> <!--link標簽 引入資源--> <link rel="icon" href="http://www.jd.com/favicon.ico"> <link rel="stylesheet" href="css.css"> <script src="xxx"></script> <title>test</title> </head> <body> <input name="pwd" type="text" readonly> <p id="abc">頂部</p> 換行<br> <strike>加線</strike> <strong>加粗1</strong> <h1 style="color:red"><p>xxwdwewefwfr</p>hello</h1> <div>hello</div> <span style="color:green;">hello span</span> 水平線<hr> <!--塊級標簽:<p> <h1> <table> <ol> <ul> <form> <div> 和內聯便簽: <a> <input> <img> <sub> <span> <texttra>--> 塊級標簽（block）：獨占一行，總是在新行上面開始，寬度缺省是他容器的100%，除非設定一個寬度，他可以容納內聯元素和其他快元素 內聯標簽：不獨占一行,和其他元素都在一行上，寬度就是他文字或者圖片的高度，不可改變，內聯元素只能容納文本和其他內聯元素 特殊字符： 。。。。 xxx 111 <ul> <li>無序列表</li> </ul> <ol> <li>有序列表</li> </ol> <dl> <dt>自定義列表</dt> <dd></dd> </dl> <a href="#abc" target="_blank">返回頂部</a> </body> <script>alert(widows.top.document.compatMode)</script> </html> <!--超文本:就是指頁面內可以包含圖片，鏈接，甚至音樂，程序等非文字元素--> <!--標記語言：標記<標簽>構成的語言--> <!--標簽的屬性 1.通常都是以鍵值對的方式出現 2.屬性只能出現在開始標簽和自閉和標簽 3.屬性名全部小寫，如果屬性名和屬性值完全一樣，直接寫 屬性名即可-->
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>注冊頁面表單</h1> <form action="1.php" method="post" enctype="multipart/form-data"> <p>用戶名<input type="text" name="username" placeholder="請輸入用戶名" disabled></p> <p>密碼<input type="password" name="pwd"></p> <p>愛好 音樂<input type="checkbox" name="hooby" value="音樂" checked> 看書<input type="checkbox" value="看書"></p> <!--radio單選按鈕取決於屬性name-- value：選框對應的值--> <p>性別 男<input type="radio" name="gender" value="boy" > 女<input type="radio" name="gender" value="girl"></p> 省份<select name="provie" multiple size="2"> <!--mutiple多選 size設置顯示個數 selected默認選中--> <option value="sichuang" selected>四川</option> <option value="dong">廣東</option> <option value="xi">山西</option> </select> <!--<select name="provie" multiple size="2">--> <!--<!–mutiple多選 size設置顯示個數 selected默認選中–>--> <!--<option value="sichuang" selected>四川</option>--> <!--<option value="dong">廣東</option>--> <!--<option value="xi">山西</option>--> <!--</select>--> 簡介<textarea name="desc" cols="10" rows="5"></textarea> <label for="www">姓名</label> <input type="text" id="www"> <input type="submit" value="注冊" > <input type="button" value="按鈕"> <br> <input type="reset" value="重置"> 只讀 <input type="text" readonly><br> 文件上傳<input type="file" name="putfile"> <!--file提交文件，from表單上必須要加上屬性enctype=“multipart/form-data”--> <!--name：表單提交項的鍵，注意和id的區別：name屬性是和服務器通信時使用的名稱，而id屬性是瀏覽器使用的名稱，該屬性主要方便客戶端 而在css和javascript中使用 value:表單提交項的值，對於不同的輸入類型，value屬性的用法也不同--> </form> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <table border="1px solid" cellpadding="50px" cellspacing="5px" > <thead> <tr> <th>1</th> <th>2</th> <th>3</th> </tr> </thead> <tbody> <tr> <td>xxx</td> <td colspan="2">xxxx</td> </tr> </tbody> </table> </body> </html>