常用的HTML標簽
阿新 • • 發佈：2018-04-03
post log cal button method adding AR self order
p&br&hr
p表示自然段落，默認上下會有行間距
br是換行，自閉合標簽
hr是橫線
a標簽
1.可添加超鏈接標簽
2.有錨的作用，相當於頁內定位
select標簽
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible"content="ie=edge" /> <title>Document</title> </head> <body> <h1>單選</h1> <select name=""> <option value="1">Jay</option> <option value="2">範特西</option> <option value="3" disabled="true">我不能選</option> <option value="4" selected="selected">我是默認選項</option> </select>
<h1>多選</h1> <select multiple="multiple" size="6"> <option value="1">七裏香</option> <option value="2">依然範特西</option> <option value="3">十二新座</option> <option value="4">驚嘆號</option> </select>
<h1>分組</h1> <select name=""> <optgroup label="第一組"> <option value="1">我是第一組的1號</option> <option value="2">我是第一組的2號</option> </optgroup> <optgroup label="第二組"> <option value="1">我是第二組的1號</option> <option value="2">我是第二組的2號</option> </optgroup> </select> </body> </html>
效果如圖
在單選中，通過 disabled="true" 和 selected="selected"來控制是否可選和默認顯示項
在多選中，通過multiple來設置多選，size=$i 控制初始顯示幾個選項
分組中，用<optgroup label="第一組">來進行設置
Input系列標簽
- Checkbox：多選框;
- radio：單選框
- text：明文輸入信息
- password：密文輸入信息
- button:按鈕
- submit：提交
- reset：重置
- textarea:備註信息框
- form:表單，設置submit、reset數據的範圍，一般在一個form裏的數據會被一起提交
- ul：帶點的列表
- ol：帶序號的列表
- dl：遞歸的列表
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>註冊表單</title> </head> <body>
<form action="http://hello.php" method="post"> #action為提交的後臺地址，方式為post <label>Username:</label> <input type="text" name="username" /><br /> #name為顯示在From data裏面的key <label>Password:</label> <input type="password" name="pwd" /><br /> <label>Gender:</label> #name一致才能單選，默認選擇使用checked="checked" <input type="radio" id="male" value="male" name="sex" /><label>男</label> <input type="radio" id="female" value="female" name="sex" checked="checked"/><label>女</label><br /> <label>Hooby:</label>#name為key，value為值，禁用disabled="disabled"，默認checked="checked" <input type="checkbox" name="hooby" id="hobby1" value="養花" disabled="disabled"/>養花（禁用） <input type="checkbox" name="hooby" id="hobby2" value="養草" checked="checked"/>養草（選中） <input type="checkbox" name="hooby" id="hobby3" value="養貓" />養貓 <input type="checkbox" name="hooby" id="hobby4" value="養狗" />養狗 <br /> <label>Birth</label> <select name="year"> <option value="1987">1987</option> <option value="1988">1988</option> <option value="1989">1989</option> <option value="1990" selected="selected">1990</option> </select> <select name="month"> <option value="January" selected="selected">January</option> <option value="February">February</option> <option value="March">March</option> </select> <br /> <label>自我介紹</label><br />#禁止拉動style="resize: none; 默認文字placeholder=“” <textarea name="myself" rows="10" cols="50" style="resize: none;" placeholder="學前端的小學生~"></textarea><br /> <input type="submit" value="submit"/> <input type="reset" value="reset" /> </form> </body> </html>
效果如下
table標簽
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Table</title> <style type="text/css">
#css樣式，table邊框合並
table{ border-collapse: collapse; } td{ text-align: center; } </style> </head> <body> <table border="1px" cellspacing="" cellpadding=""> <tr> <th>姓名</th> <th>語文</th> <th>數學</th> <th>英語</th> <th>物理</th> <th>化學</th> </tr> <tr> <td>小明</td> <td>90</td> <td>98</td> <td>78</td> <td>85</td> <td>89</td> </tr> <tr> <td>小西</td> <td>91</td> <td>92</td> <td>73</td> <td>84</td> <td>85</td> </tr> </table> </body> </html>
效果如下
tr 全稱 table row 意為 “表行”
th 全稱 table header cell 意為“表頭單元格”
td 全稱 table data cell 意為“表中的數據單元”
常用的HTML標簽