1.无序列表(常用)
ul li(没有顺序,默认li会有圆点)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><h2>无序列表</h2><ul><li>榴莲</li><li>香蕉</li><li>苹果</li><li>臭豆腐</li><li><p>圣女果</p><ul><li>123</li></ul></li></ul></body></html>
2.有序列表(不常用)
ol li(默认li会有数字排序)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><ol><li>张三</li><li>张三</li><li>张三</li></ol></body></html>
3.自定义列表
dl dt dd(dt相当于核心,dd相当于对核心的拆分)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><dl><dt>服务支持</dt><dd>售后服务</dd><dd>上门服务</dd><dd>包换服务</dd></dl></body></html>
4.表格
table caption(表格标题) thead(表头) tbody(身体) tr(列) th(第一行标题单元格) td(单元格)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><table border="10" width="400" hight="120"><caption>学生成绩单</caption><thead><tr><th>姓名</th><th>成绩</th><th>评语</th></tr></thead><tbody><tr><td>张三</td><td>100</td><td>Fighting</td></tr><tr><td>李四</td><td>100</td><td rowspan="2">加油</td></tr><tr><td>123</td><td>100</td></tr></tbody></table></body></html>
5.form表单
input中type设置样式,text:‘文本’,password:‘密码框’,radio:‘单选框’,checkbox:‘复选框’
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><form action="">昵称: <input type="text" placeholder="请您输入昵称" /> <br />密码: <input type="password" placeholder="请您输入密码" /> <br />性别: <input type="radio" name="sex" checked /> 男<input type="radio" name="sex" /> 女 <br />爱好: <input type="checkbox" checked /> 吃饭<input type="checkbox" /> 睡觉 <input type="checkbox" /> 打豆豆 <br />上传头像: <input type="file" multiple /><br /><input type="sumbit" /><input type="reset" /><input type="button" value="普通按钮" /><button>1323</button></form></body></html>
6.button
<button type="submit" value="提交所填"></button><button type="reset" value="重置"></button><button type="button" value="按钮"></button>
7.select下拉
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><select name="" id=""><option value="">北京</option><option value="">上海</option><option value="" selected>广东</option><option value="">深圳</option></select></body></html>
8.textarea文本域
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><textarea name="" id="" cols="30" rows="10" maxlength="10"></textarea></body></html>
9.label标签
设置当点击radio时,也可以通过点击文字实现效果
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><input type="radio" name="sex" id="female" /><label for="female">女</label><input type="radio" name="sex" id="male" /><label for="male">男</label>婚否<label><input type="radio" name="marry" /> 未婚</label><label><input type="radio" name="marry" />已婚</label></body></html>
10.综合案例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><table border="1" width="600" height="200"><h1>就业榜</h1><tr><th>学号</th><th>姓名</th><th>年龄</th><th>性别</th><th>薪资</th><th>就业城市</th><th>操作</th></tr><tr><td>1001</td><td>1</td><td>5</td><td>3</td><td>4</td><td>5</td><td><a href="#">删除</a></td></tr></table></body></html>
11.综合案例2
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><form action=""><h1>青春不常在,抓紧谈恋爱</h1><hr />昵称:<input type="text" placeholder="请输入昵称" /> <br><br>性别:<label><input type="radio" name="sex" /> 男</label> <label> <input type="radio" name="sex" /> 女</label> <br><br>所在城市:<select name="" id=""><option value="">北京</option><option value="" selected>上海</option><option value="">天津</option><option value="">广东</option><option value="">深圳</option></select><br><br>婚姻状况: <label><input type="radio" name="marry"> 未婚</label> <label><input type="radio" name="marry"> 已婚</label> <label><input type="radio" name="marry"> 保密</label> <br><br>喜欢的类型: <input type="checkbox"> 可爱<input type="checkbox"> 性感<input type="checkbox"> 御姐<input type="checkbox"> 萝莉<input type="checkbox"> 小鲜肉<input type="checkbox"> 大叔<br><br>个人介绍: <br><textarea name="" id="" cols="30" rows="10"></textarea><h3>我承诺</h3><ul><li>年满18岁、单身</li><li>抱着严肃的态度</li><li>真诚寻找另一半</li></ul><input type="checkbox"> 我同意所有条款<br><br><input type="submit" value="免费注册"> <input type="reset"></form></body></html>