文章目录
- 01-无序列表
- 02-有序列表
- 03-定义列表
- 04-表格
- 06-表格-合并单元格
- 07-表单-input
- 08-表单-input占位文本
- 09-表单-单选框
- 10-表单-上传多个文件
- 11-表单-多选框
- 12-表单-下拉菜单
- 13-表单-文本域
- 14-表单-label标签
- 15-表单-按钮
- 16-无语义-span和div
- 17-字体实体
- 19-注册登录页面
01-无序列表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><ul><li>列表条目</li><li>列表条目2</li><li>列表条目3</li></ul>
</body>
</html>
02-有序列表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><Ol><li>liebiao1</li><li>2</li><li>3</li></Ol>
</body>
</html>
03-定义列表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><dl><dt>服务中心</dt><dd>shenqing</dd><dd>1</dd><dd>2</dd><dd>3</dd><dt>申请售后</dt><dd>1</dd><dd>2</dd><dd>3</dd><dd>4</dd><dd>5</dd><dt>服务中心</dt><dd>shenqing</dd><dd>1</dd><dd>2</dd><dd>3</dd><dt>申请售后</dt><dd>1</dd><dd>2</dd><dd>3</dd><dd>4</dd><dd>5</dd></dl>
</body>
</html>
04-表格
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- table table row table head table data --><table border="1"><thead><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr></thead><tbody><tr><td>张三</td><td>11</td><td>22</td><td>55</td></tr><tr><td>张三</td><td>11</td><td>22</td><td>55</td></tr><tr><td>张三</td><td>11</td><td>22</td><td>55</td></tr></tbody><tfoot><tr><td>总结</td><td>全市第一</td><td>全市第一</td><td>全市第一</td></tr></tfoot></table>
</body>
</html>
06-表格-合并单元格
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- table table row table head table data --><table border="1"><thead><tr><th>姓名</th><th>语文</th><th>数学</th><th>总分</th></tr></thead><tbody><tr><td>张三</td><td>11</td><td>22</td><td>55</td></tr><tr><td>张三</td><td>11</td><!-- 跨行合并 --><td rowspan="2">22</td><td>55</td></tr><tr><td>张三</td><td>11</td><!-- <td>22</td> --><td>55</td></tr></tbody><tfoot><tr><td>总结</td><!-- 跨列合并 --><td colspan="3">全市第一</td><!-- <td>全市第一</td> --><!-- <td>全市第一</td> --></tr></tfoot></table>
</body>
</html>
07-表单-input
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>文本框：<input type="text"><br><br>密码框：<input type="password"><br><br>单选框：<input type="radio"><br><br>多选框：<input type="checkbox"><br><br>上传文件：<input type="file">
</body>
</html>
08-表单-input占位文本
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>文本框：<input type="text" placeholder="用户名"><br><br>密码框: <input type="password" placeholder="密码"><br><br></body>
</html>
09-表单-单选框
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>性别：<input type="radio" name="gender">男<input type="radio" name="gender" checked>女
</body>
</html>
10-表单-上传多个文件
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>上传文件：<input type="file" multiple>
</body>
</html>
11-表单-多选框
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>兴趣爱好：<input type="checkbox">敲代码<input type="checkbox" checked>敲前端代码<input type="checkbox" checked>敲前端HTML代码
</body>
</html>
12-表单-下拉菜单
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><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><!-- 默认选中 selected --><option value="" selected>广州</option></select>
</body>
</html>
13-表单-文本域
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 右下角有拖拽功能未来进化掉 --><textarea >请输入文字</textarea>
</body>
</html>
14-表单-label标签
点击旁边的也能选中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 方法一 --><label ><input type="radio">女</label><input type="radio">男<br>
<br>性别:<input type="radio" id="man"><label for="man">男</label></body>
</html>
15-表单-按钮
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- form是表单区域 --><!-- actions=“”是发送数据的地址 --><form action="">用户名：<input type="text"><br><br>密码：<input type="password"><br><br><button type="submit">提交</button><!-- 去掉submit 默认依然是submit功能 --><button>提交</button><button type="reset">重置</button><!-- button是以后配合javascript使用 --><button type="button">普通按钮</button></form>
</body>
</html>
16-无语义-span和div
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div>这是div</div><div>这是div</div><span>这是span</span><span>这是span</span>
</body>
</html>
17-字体实体
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>乾坤未定，你我皆是黑 马。<p>
</body>
</html>
19-注册登录页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>注册信息</h1><form action=""><h2>个人信心</h2>姓名：<input type="text" placeholder="请输入真实姓名"><br><br>密码：<input type="password" placeholder="请输入密码"><br><br>确认密码：<input type="password" placeholder="请输入确认密码"><br><br>性别：<input type="radio" name="gender">男<input type="radio" name="gender">女<br><br>居住城市：<select ><option >北京</option><option value="" selected>上海</option></select><br><br><h2>教育经历</h2>最高学历：<select name="" id=""><option value="">博士</option><option value="">硕士</option><option value="">本科</option><option value="">专科</option></select><br><br>学校名称：<input type="text"><br><br>所学专业：<input type="text"><br><br>在校时间：<select name="" id=""><option value="">2015</option><option value="">2016</option></select>--<select name="" id=""><option value="">2017</option><option value="">2018</option></select><br><br><h2>工作经历</h2>公司名称：<input type="text"><br><br>工作描述：<br><textarea ></textarea><br><br><input type="checkbox">已阅读并同意一下条约<ul><li><ins><a href="#">《用户服务协议》</a></ins></li><li><ins><a href="#">《隐私政策》</a></ins></li></ul><button type="submit">免费注册</button><button type="reset">重新填写</button></form>
</body>
</html>
