HTML基礎之HTML標簽
阿新 • • 發佈：2018-09-24
sele 單標簽 input標簽 jpg 開頭 name屬性 radio 語言 ted
HTML:超文本標記語言
html代碼實際上就是一套能夠被瀏覽器識別的規則代碼，由一個個標簽組成。
後端與前端交互方式：
1、後端直接返回瀏覽器能夠識別的html代碼
2、後端返回數據，前端替換html中的指定數據
基本的HTML頁面
<!DOCTYPE html> <!--始終位於頁面的第一行，告訴瀏覽器這是一個HTML頁面--> <html lang="en"> <!--html標簽(只能有一個)，指定語言--> <head> <!--<head> 和</head>之間為文檔的頭部--> <meta charset="UTF-8"> <!--設置編碼類型--> <title>Title</title> <!--標題--> </head> <body> <!--<body> 和</body>之間為文檔的主體部分，也是用戶能看到的部分--> </body> </html>
HTML標簽
1、自閉和標簽
<meta charset="UTF-8"> 只有開頭標簽，沒有結束標簽
2、主動閉合標簽
<title></title>
html head
head 標簽中的內容都是為瀏覽器和搜索引擎準備的
<!DOCTYPE html> <html lang="en"> <head> <!--指定編碼--> <meta charset="UTF-8"> <!--每1秒鐘刷新一下--> <meta http-equiv="refresh" content="1"> <!--1秒後跳轉到www.baidu.com--> <meta http-equiv="refresh" content="1;http://www.baidu.com"> <!--關鍵字檢索，網絡爬蟲就根據這個keywords--> <meta name="keywords" content="besttest"> <!--網站描述--> <meta name="description" content="測試培訓"> <!--ie打開時以最高兼容模式打開--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 在head中所寫的所有標簽全部都看不到，是內部的一些東西，除了一個標簽就是title--> <title>金牛座</title> <!--rel代表告訴瀏覽器我要把link作為title的圖標--> <link rel="shortcut icon" href="http://ui.imdsx.cn/static/image/dsx_Small.jpg"> <!--引入css樣式表--> <link rel="stylesheet" href="xxx.css"> <!--css樣式--> <style></style> <!--引入js或編寫js--> <script src="tmp.js"></script> </head> <body> </body> </html>
html body
p、br、h、form、div、span、input、label、空格( )、 大於號(>) 、小於號 (<)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>金牛座</title> </head> <body> <!--p--段落標簽--> <!--br---換行標簽--> <p>馬雲說：<br>人生在世，總是要經歷些悲歡離合、人情冷暖，自9月10日宣布一年後將退休後，阿裏巴巴董事局主席馬雲受到了更多的關註，今天馬雲在達沃斯論壇上對諸多疑問一一作答。</p> <!--標題標簽 h1-h6 ,h1最大 --> <h1>標題標簽</h1> <h2>標題標簽</h2> <h3>標題標簽</h3> <h4>標題標簽</h4> <h5>標題標簽</h5> <h6>標題標簽</h6> <!--div是塊級標簽(偽白板標簽) 無論自己有多大都占滿一整行--> <div>水電費</div> <!--span是行內標簽 或 白板標簽 或叫 內聯標簽，沒有附著任何css樣式 自己有多大就占多大位置--> <span>水電費</span> <!--input標簽 type有很多類型，默認為文本框text--> <!--type="text" placeholder-默認提示--> <!--name屬性是跟後端交互的key，value屬性是跟後端交互的值 向後端傳的json串{"username":admin,"passwd":"123456"}--> <!--placeholder-默認提示--> <input type="text" placeholder="請輸入用戶名：" value="admin" name="username"> <!--type="password"密文--> <input type="password" placeholder="請輸入密碼：" name="passwd"> <!--type="radio"單選--> <!--通過name屬性控制只能單選，當name相同時，幾個選項是互斥的--> <span>男</span><input type="radio" name="sex"> <span>女</span><input type="radio" name="sex"> <!--type="checkbox"多選框 {"check":[1,2,3]} 默認值checked="checked"--> <span>奔馳</span> <input type="checkbox" name="check" value="1" checked="checked"> <span>寶馬</span> <input type="checkbox" name="check" value="2"> <span>奧迪</span> <input type="checkbox" name="check" value="3"> <!--type="file"上傳文件--> <input type="file"> <!--表單標簽--> <form action="http://www.baidu.com" method="post"> <div> <span>用戶名：</span> <input type="text" placeholder="請輸入用戶名"> <label for="i1">用戶名</label> <!--label擴展input的可點擊範圍，label和input通過id來關聯--> <input id="i1" type="text" placeholder="請輸入用戶名"> </div> <div> <span>密  碼：</span> <!--瀏覽器會把文本中的多個空格解析成一個--> <input type="password" placeholder="請輸入密碼"> </div> <div> <!--button如果想要有操作 只能通過js綁定事件來做--> <input type="button" value="登錄"> <!--submit按鈕如果和form表單連用則會直接觸發請求--> <input type="submit" value="註冊"> <!--reset按鈕如果和form表單連用則會直接觸發重置操作--> <input type="reset"> </div> </form> <!--富文本標簽--> <textarea></textarea> <!--特殊轉譯符--> <!--< 代表< > 代表>--> <p></p> <!--下拉框標簽--> <select name="s1"> <option value="1">中秋</option> <option value="2">國慶</option> <option value="3" selected="selected">都過不上</option> </select> <!--分組下拉框--> <select> <option>請選擇城市</option> <optgroup label="黑龍江"> <option>哈爾濱</option> <option>牡丹江</option> </optgroup> <optgroup label="河北"> <option>石家莊</option> <option>秦皇島</option> </optgroup> </select> <!--超鏈接標簽--> <a href="http://www.baidu.com">跳轉到百度</a> <!--圖片標簽--> <img src="http://ui.imdsx.cn/static/image/dsx_Small.jpg" alt="圖片加載失敗的文案" title="鼠標懸浮的圖案"> <!--列表 點的列表--> <ul> <li>第一列</li> <li>第二列</li> </ul> <!--列表 數字列表--> <ol> <li>第一列</li> <li>第二列</li> </ol> <!--表格--> <table border="1"> <thead> <!--thead 表頭--> <tr> <th>id</th> <th>請求方式</th> <th>請求參數</th> <th colspan="2">操作</th> <!--colspan 占幾列--> </tr> </thead> <tbody> <!--tbody 表體--> <tr> <td>1</td> <td>post</td> <td>{}</td> <td>修改</td> <td>執行</td> </tr> <tr> <td>1</td> <td>post</td> <td>{}</td> <td>修改</td> <td rowspan="2">執行</td> <!--rowlspan 占幾行--> </tr> <tr> <td>1</td> <td>post</td> <td>{}</td> <td>修改</td> </tr> </tbody> </table> </body> </html>
HTML基礎之HTML標簽