HTML基礎之HTML標簽-html header（meta,title） html body(p,br,h,form,div,span,input,lable)
阿新 • • 發佈：2018-10-02
重要 樣式 以及 www. 標簽 email static 默認值 直接
摘自：http://www.imdsx.cn/index.php/2017/07/27/html0/
一、HTML標簽
1 <!DOCTYPE html> <!--標準的html規則，類似於Python的解釋器--> 2 <html lang="en"> <!--html標簽（只能一個），指定的語言en--> 3 <head> <!-- html head標簽的開始 --> 4 <meta charset="UTF-8"> 5 <title>頁面標題</title>6 </head> <!-- html head標簽的結束 --> 7 <body> <!-- html body標簽的開始 --> 8 <h1>我的第一個標題</h1> 9 <p>我的第一個段落</p> 10 11 </body> <!-- html body標簽的結束 --> 12 </html>
瀏覽器顯示：
1、html header：
1）meta標簽
1 <!DOCTYPE html> <!--標準的html規則，類似於Python的解釋器--> 2 <html lang="en"> <!--html標簽（只能一個），指定的語言en--> 3 <head> <!-- html head標簽的開始 --> 4 <!--指定編碼--> 5 <meta charset="UTF-8"> 6 <!--每1秒鐘刷新一次--> 7 <meta http-equiv="refresh" content="1"> 8 <!--1秒後跳轉頁面--> 9 <meta http-equiv="refresh"content="1;http://www.baidu.com"> 10 <!-- 關鍵字檢索 --> 11 <meta name="keywords" content="大師兄，aa,bb"> 12 <!-- 網站描述--> 13 <meta name="description" content="阿裏山的積分離開家"> 14 <!-- ie打開時以最高的兼容模式打開 --> 15 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 16 <title>頁面標題</title> 17 </head> <!-- html head標簽的結束 --> 18 <body> <!-- html body標簽的開始 --> 19 </body> <!-- html body標簽的結束 --> 20 </html>
2）title標簽
1 <!DOCTYPE html> <!--標準的html規則，類似於Python的解釋器--> 2 <html lang="en"> <!--html標簽（只能一個），指定的語言en--> 3 <head> <!-- html head標簽的開始 --> 4 <!--指定編碼--> 5 <meta charset="UTF-8"> 6 <!-- 在head中所寫的所有標簽全部都看不到，是內部的一些東西，除了一個標簽就是title--> 7 <title>白羊座</title> 8 <!-- 前方高能預警，***重要*** --> 9 <!-- title的圖標,告訴瀏覽器我要把link單做title的圖標 --> 10 <link rel="shortcut icon" href="http://ui.imdsx.cn/static/image/dsx_Small.jpg"> 11 <!--引入css樣式表--> 12 <link rel="stylesheet" href="tmp.css"> 13 <!--css樣式--> 14 <style></style> 15 <!--引入js和編寫js--> 16 <script src="tmp.js"></script> 17 18 </head> <!-- html head標簽的結束 --> 19 <body> <!-- html body標簽的開始 --> 20 </body> <!-- html body標簽的結束 --> 21 </html>
2、html body
1）p、br
段落標簽和換行標簽
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 6 </head> 7 <body> 8 <!--p 段落標簽，占滿一整行，段落之間有空行,元素會自動在其前後創建一些空白。瀏覽器會自動添加這些空間，您也可以在樣式表中規定。想換行需要通過<br />標簽 自閉合標簽建議自己寫上/作為區分--> 9 <p>年輕,就是拿來折騰的。<br />讓自己具備獨立生活的能力，具備一技之長的資本，是需要無數個夜晚的靜思，無數寂寞時光的堆積而成的。</p> 10 <p>別在最該拼搏的年紀選擇穩定，世界上最大的不變是改變，只有每天進步，才能擁抱生命的無限可能！</p> 11 <p>你以為你給對方留了電話存了微信，應該彼此也能互相幫忙，卻忘記了一件很重要的事情，只有關系平等，才能互相幫助。</p> 12 <p>不要為了戶口丟掉生活，為了穩定丟掉青春，為了平淡丟掉夢想，因為你所謂的穩定，不過實在浪費生命。</p> 13 <p>真正的勇者不是狼狽的逃脫，而是用閑暇時間，磨練自己。</p> 14 <p>只有等現實的日子富足了，能力夠強了，才可以去追求那些美好的生活狀態，才該去追求那些偉大的夢。否則那些夢幻般的生活，都只是空中閣樓，不堪一擊。</p> 15 <p>生活是自己的，自己都不求進取，憑什麽讓別人給你美好的未來？</p> 16 </body> 17 </html>
2）h、form、div、span、input、label
h
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 6 </head> 7 <body> 8 <!-- 標題標簽 h1最大 h6最小 自帶屬性 --> 9 <h1>標題標簽</h1> 10 <h2>標題標簽</h2> 11 <h3>標題標簽</h3> 12 <h4>標題標簽</h4> 13 <h5>標題標簽</h5> 14 <h6>標題標簽</h6> 15 16 </body> 17 </html>
span
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 </head> 6 <body> 7 <!-- 行內標簽的代表 什麽屬性都不帶，或叫做內聯標簽--> 8 <!-- 行內自己有多大，就占多大。也是白板標簽，沒有附著任何css樣式的就是白板標簽--> 9 <span>滴滴滴</span> 10 </body> 11 </html>
div 塊級標簽
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 </head> 6 <body> 7 <!-- 塊級標簽的代表 什麽屬性都不帶，html代碼中出場率最高，塊級標簽無論自己有多大 都占了一整行--> 8 <!--偽白板標簽--> 9 <div>滴滴滴</div> 10 </body> 11 </html>
瀏覽器展示：
input
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 </head> 6 <body> 7 <!--文本框輸入框，默認text--> 8 <!--name屬性是跟後端交互的key,value是跟後端交互的值--> 9 <!--{"username":"admin","passwd":"123456"}--> 10 11 <!--placeholder 屬性提供可描述輸入字段預期值的提示信息（hint）,該提示會在輸入字段為空時顯示，並會在字段獲得焦點時消失。註釋：placeholder 屬性適用於以下的 <input> 類型：text, search, url, telephone, email 以及 password。--> 12 <input type="text" placeholder="請輸入用戶名" name="username" value="admin"> 13 14 <!--密碼輸入框--> 15 <!--type="password"密文--> 16 <input type="password" placeholder="請輸入密碼" name="passwd"> 17 18 <!--radio單選，name屬性相同的時候，互斥--> 19 <span>男</span><input type="radio" name="sex"> 20 <span>女</span><input type="radio" name="sex"> 21 22 <!-- 多選框 checkbox {"name"：[1,2,3]} 默認值checked=checked--> 23 <span>奔馳</span><input type="checkbox" checked="checked"> 24 <span>寶馬</span><input type="checkbox"> 25 26 <!-- 文件類 file 如果上傳文件一定要在form中添加特殊屬性 enctype="multipart/form-data" 意思是一點一點的發給服務器--> 27 <!--<p>上傳文件</p>--> 28 <input type="file"> 29 30 <!-- button按鈕 點擊什麽用也沒有 需要結合js綁定事件 --> 31 <!--submit按鈕如果和form表單連用則會直接出發請求--> 32 <input type="button" value="登錄"> 33 <input type="submit" value="登錄"> 34 <!--當rest和form表單連用時，會觸發重置操作，單獨沒啥用，和form連用--> 35 <input type="reset"> 36 </body> 37 </html>
寫一個登錄：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 </head> 6 <body> 7 <!-- 表單標簽 可以理解為載體白紙 input 就是寫在紙上的文字，將白紙遞交給後臺，後端才能接到信息--> 8 <!--表單裏的屬性，action：提交到哪個地址（接口信息）；method：具體是什麽請求，get或post--> 9 <form action="http://www.baidu.com" method="post"> 10 <!--div包裹，占一整行，實現換行的效果--> 11 <div> 12 <span>用戶名：</span><input type="test" name="username" placeholder="請輸入用戶名"> 13 </div> 14 <div> 15 <span>密碼：</span><input type="test" name="passwd" placeholder="請輸入密碼"> 16 </div> 17 18 <!--button，如果想要有操作 只能通過js綁定事件--> 19 <input type="button" value="登錄"> 20 <!--submit和form表單連用，則會直接出發請求--> 21 <input type="submit" value="註冊"> 22 <!--reset必須和form表單連用--> 23 <input type="reset" value="重置"> 24 </form> 25 </body> 26 </html>
form：表單標簽 可以理解為載體白紙 input 就是寫在紙上的文字，將白紙遞交給後臺，後端才能接到信息，input寫到form標簽裏面
lable標簽：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 </head> 6 <body> 7 <!-- label 標題標簽 與input聯合運用，增加input的點擊範圍 可直接點擊文字就輸入 for：映射到input的id--> 8 <label for="i1">用戶名</label> 9 <input id="i1" type="text" placeholder="請輸入用戶名"> 10 </form> 11 </body> 12 </html>
HTML基礎之HTML標簽-html header（meta,title） html body(p,br,h,form,div,span,input,lable)