无序列表
<!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>
<!-- 无序列表 在ul内只能放li，在li内可以放任何元素 -->
<!-- type 控制列表前的标记样式 默认小黑点 circle空心圆 square实心正方形 -->
<ul>
<!-- 每一条 -->
<li>
<h1>第一条</h1>
</li>
<li>第二条
<ul>
<li>2.1</li>
<li>2.2</li>
<li>2.3</li>
</ul>
</li>
<li>第三条</li>
</ul>
</body>
</html>
有序列表
<!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内可以放任何元素 -->
<!-- type 控制有序列表前序号的样式 1 A a I i -->
<!-- start 开始序号 -->
<ol>
<li>第一条</li>
<li>第二条</li>
<li>第三条</li>
<li>第四条</li>
<li>第五条</li>
<li>第六条</li>
</ol>
</body>
</html>
自定义列表
<!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>
<dd>联系我们</dd>
</dl>
</body>
</html>
表格的结构
<!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>
<!-- 表格 -->
<!-- 表格域 -->
<!-- border 边框线 cellspacing 单元格之间的空隙 cellpadding 单元格的内边距 -->
<!-- width 表格的宽 height 表格的高 align 表格的对齐方式 -->
<table border="1" cellspacing="0" cellpadding="0" width="800" height="400" align="center">
<!-- 表格标题信息 -->
<caption>huohua251班级信息表</caption>
<!-- 表头部分 thead -->
<thead>
<!-- 一行 -->
<tr>
<!-- 标题单元格 -->
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>班级</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<!-- 一行 -->
<tr>
<!-- 单元格 -->
<td>张三</td>
<td>20</td>
<td>男</td>
<td>huohua251</td>
</tr>
<!-- 一行 -->
<tr>
<!-- 单元格 -->
<td>小好</td>
<td>18</td>
<td>女</td>
<td>huohua251</td>
</tr>
<!-- 一行 -->
<tr>
<!-- 单元格 -->
<td>小谷</td>
<td>20</td>
<td>男</td>
<td>huohua251</td>
</tr>
</tbody>
<!-- 表尾 -->
<tfoot>
<tr>
<td>注：</td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
</body>
</html>
合并单元格
<!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>
<!-- 表格 -->
<!-- 表格域 -->
<!-- border 边框线 cellspacing 单元格之间的空隙 cellpadding 单元格的内边距 -->
<!-- width 表格的宽 height 表格的高 align 表格的对齐方式 -->
<!-- 合并单元格(注意：合并之后，要把被挤出去的多余的单元格删除) -->
<!-- 1.跨行合并 rowspan -->
<!-- 2.跨列合并 colspan -->
<table border="1" cellspacing="0" cellpadding="0" width="800" height="400" align="center">
<!-- 表格标题信息 -->
<caption>huohua251班级信息表</caption>
<!-- 表头部分 thead -->
<thead>
<!-- 一行 -->
<tr>
<!-- 标题单元格 -->
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>班级</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<!-- 一行 -->
<tr>
<!-- 单元格 -->
<td>张三</td>
<td>20</td>
<td>男</td>
<td rowspan="3">huohua251</td>
</tr>
<!-- 一行 -->
<tr>
<!-- 单元格 -->
<td>小好</td>
<td>18</td>
<td>女</td>
<!-- <td>huohua251</td> -->
</tr>
<!-- 一行 -->
<tr>
<!-- 单元格 -->
<td>小谷</td>
<td>20</td>
<td>男</td>
<!-- <td>huohua251</td> -->
</tr>
</tbody>
<!-- 表尾 -->
<tfoot>
<tr>
<td>注：</td>
<td colspan="3"></td>
<!-- <td></td>
<td></td> -->
</tr>
</tfoot>
</table>
</body>
</html>
表单
<!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>
<!-- 表单控件 -->
<!-- 输入框 -->
<!-- type 输入框类型 value 输入框默认值 placeholder 输入框的提示信息 name 控件的名字 -->
<!-- text 文本输入框 -->
用户名：<input type="text" placeholder="请输入用户名" name="username"><br>
<!-- password 密码框 -->
密码：<input type="password" placeholder="请输入密码"><br>
<!-- file 文件上传 -->
上传头像：<input type="file"><br>
<!-- radio 单选按钮(通过 name 属性建立联系) -->
性别：<input type="radio" name="gender">男 <input type="radio" name="gender">女<br>
<!-- checkbox 多选按钮 -->
爱好：<input type="checkbox" name="hobby">唱 <input type="checkbox" name="hobby">跳 <input type="checkbox"
name="hobby">Rap <input type="checkbox" name="hobby">篮球<br>
<!-- 提交按钮 -->
<input type="submit">
<!-- 重置按钮 -->
<input type="reset">
<!-- 普通按钮 -->
<input type="button" value="按钮">
</body>
</html>
表单的其他控件
<!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>
<!-- 表单控件 -->
<!-- 输入框 -->
<!-- type 输入框类型 value 输入框默认值 placeholder 输入框的提示信息 name 控件的名字 -->
<!-- text 文本输入框 -->
用户名：<input type="text" placeholder="请输入用户名" name="username"><br>
<!-- password 密码框 -->
密码：<input type="password" placeholder="请输入密码"><br>
<!-- file 文件上传 -->
上传头像：<input type="file"><br>
<!-- radio 单选按钮(通过 name 属性建立联系) -->
性别：<input type="radio" name="gender">男 <input type="radio" name="gender">女<br>
<!-- checkbox 多选按钮 -->
爱好：<input type="checkbox" name="hobby">唱 <input type="checkbox" name="hobby">跳 <input type="checkbox"
name="hobby">Rap <input type="checkbox" name="hobby">篮球<br>
<!-- select 下拉列表 -->
籍贯：<select>
<!-- 下拉列表的选项 -->
<option value="">郑州市</option>
<option value="">开封市</option>
<option value="">周口市</option>
<option value="">安阳市</option>
</select><br>
<!-- textarea 文本域 -->
备注信息：<textarea name="" cols="30" rows="10"></textarea><br>
<!-- 提交按钮 -->
<input type="submit">
<!-- 重置按钮 -->
<input type="reset">
<!-- 普通按钮 -->
<input type="button" value="按钮"><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button>按钮</button>
</body>
</html>
表单域
<!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>
<!-- 表单控件 -->
<!-- 表单域 -->
<!-- action 提交地址 -->
<!-- method 提交方法 get post -->
<form action="" method="">
<!-- 输入框 -->
<!-- type 输入框类型 value 输入框默认值 placeholder 输入框的提示信息 name 控件的名字 -->
<!-- text 文本输入框 -->
用户名：<input type="text" placeholder="请输入用户名" name="username"><br>
<!-- password 密码框 -->
密码：<input type="password" placeholder="请输入密码" name="psw"><br>
<!-- file 文件上传 -->
上传头像：<input type="file" name="pic"><br>
<!-- radio 单选按钮(通过 name 属性建立联系) -->
性别：<input type="radio" name="gender" value="true">男
<input type="radio" name="gender" value="false">女<br>
<!-- checkbox 多选按钮 -->
爱好：<input type="checkbox" name="hobby" value="sing">唱
<input type="checkbox" name="hobby" value="dance">跳
<input type="checkbox" name="hobby" value="rap">Rap
<input type="checkbox" name="hobby" value="boll">篮球<br>
<!-- select 下拉列表 -->
籍贯：<select name="city">
<!-- 下拉列表的选项 -->
<option value="zhengzhou">郑州市</option>
<option value="kaifeng">开封市</option>
<option value="zhoukou">周口市</option>
<option value="anyang">安阳市</option>
</select><br>
<!-- textarea 文本域 -->
备注信息：<textarea name="remark" cols="30" rows="10"></textarea><br>
<!-- 提交按钮 -->
<input type="submit">
<!-- 重置按钮 -->
<input type="reset">
<!-- 普通按钮 -->
<input type="button" value="按钮"><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button>按钮</button>
</form>
<!-- ?username=1234&gender=on&hobby=on -->
<!-- ?username=1234&psw=111&pic=01.jpeg&gender=on&hobby=on&hobby=on&city=&remark=你好 -->
<!-- ?username=张三&psw=123456&pic=01.jpeg&gender=false&hobby=sing&hobby=dance&city=anyang&remark=你好 -->
</body>
</html>
4033
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
