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标签
原文地址：https://www.cnblogs.com/ronyjay/p/8707711.html