目录
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>女子网购1斤见手青1天吃完后中毒,送至医院洗胃 </li>
<li>欧洲杯八强对阵出炉 </li>
<li>浙江渔民误捕中国鲎</li>
</ul>
<!-- ul 定义这是一个无序列表 -->
<!-- li 定义列表中每一行内容的 -->
<!-- 无序列表 文本没有特殊样式-->
<!-- 有列表样式默认小黑点 -->
<!-- 无序列表前面有空白的缝隙 -->
<!-- type 改变无序列表前面的样式的 type="none" 去除小黑点 但是不推荐使用 -->
<!-- 有序列表 -->
<ol type="I" start="3999">
<li>女子网购1斤见手青1天吃完后中毒,送至医院洗胃 </li>
<li>欧洲杯八强对阵出炉 </li>
<li>浙江渔民误捕中国鲎</li>
<li>水上派出所成水上的派出所了 </li>
<li>欧洲杯八强对阵出炉 </li>
<li>浙江渔民误捕中国鲎</li>
<li>水上派出所成水上的派出所了 </li>
</ol>
<!-- ol 定义这是一个有序列表-->
<!-- li 定义列表中每一行内容的 -->
<!-- type 改变有序列表前面的样式的 1 A a i I-->
<!-- start 规定从几开始 -->
<!-- 自定义列表 -->
<dl>
<!-- <dt>水果</dt> -->
<dd>苹果</dd>
<dd>西瓜</dd>
<dd>香蕉</dd>
<dd>猕猴桃</dd>
<dd>莲雾</dd>
<dt>蔬菜</dt>
<dd>菜花</dd>
<dd>西红柿</dd>
<dd>黄瓜</dd>
<dd>斗觉</dd>
<dd>冬瓜</dd>
<!-- <dt>水果</dt>
<dt>蔬菜</dt>
<dt>五谷</dt>
<dt>杂粮</dt>
<dt>巧克力</dt> -->
<!-- <li>欧洲杯八强对阵出炉 </li>
<li>浙江渔民误捕中国鲎</li>
<li>水上派出所成水上的派出所了 </li> -->
</dl>
<!-- dl 定义这是一个自定义列表 -->
<!-- dt 定义这是一个标题 -->
<!-- dd 定义列表中每一行内容的-->
</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>
<table border="1" cellspacing="0" cellpadding="2" width="600" height="320" align="center">
<caption>这是一个表格阿</caption>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>身高</th>
<th>班级</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>1</th>
<th>1</th>
<th>1</th>
<th>1</th>
<th>1</th>
</tr>
</tfoot>
</table>
<!-- table 定义这是一个表格 -->
<!-- tr 表示行 -->
<!-- td 表示单元格 -->
<!-- border属性定义边框线的粗细程度 -->
<!-- cellspacing属性 定义单元格与单元格之间的空白缝隙 默认值2 -->
<!-- cellpadding属性 定义单元格内容到单元格边框线之间的距离 -->
<!-- align属性 设置表格在页面中水平方向的位置 left 左 right 右 center居中-->
<!-- 不用top 上 bottom 下 -->
<!-- caption 标签 定义表格的标题 但是建议放在表格最上方 -->
<!-- thead 标签 定义表头 -->
<!-- th 定义表头内容 -->
<!-- tbody 标签 表格主体内容 -->
<!-- tfoot 标签 定义表格的页脚 -->
<!-- table>tr*5>td*5 -->
<!-- colspan 横着合并单元格 更像是一个td占据多个单元格 将多余的格子删掉 -->
<!-- rowspan 竖着合并单元格 更像是一个td占据多个单元格 将多余的格子删掉-->
<!-- 不可跨区域合并 -->
</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>
<!-- 表单域 -->
<!-- <form action=""></form> -->
<form method="post">
<!-- 表单提交方法 get 在url地址栏中提交 不安全 -->
<!-- post 在 FORM DATA 里面进行数据提交 相对于get安全-->
<!-- 控件 -->
<label for="user">账号：</label>
<input type="text" name="user" id="user"> <br>
<!-- type属性 控制input长什么样子的 -->
<!-- text 单行文本输入框 可以输入任意的内容 可以理论上无限向后延伸 -->
<label for="pw">密码：</label>
<input type="password" name="pw" id="pw"> <br>
<!-- password 密码输入框 输入的任意内容都会被加密显示 不可以输入中文-->
<!-- <input type="email" name="em"> <br> -->
<!-- email 邮箱输入框 格式 xxxxx@xxxx -->
<!-- <input type="number" name="num"> <br> -->
<!-- number 数字输入框 只能输入数字 -->
<input type="radio" name="one" value="A.张三"> A.张三？ <br>
<input type="radio" name="one" value="B.李四"> B.李四？ <br>
<input type="radio" name="one" value="C.王五"> C.王五？ <br>
<input type="radio" name="one" value="D.赵六"> D.赵六？ <br>
<!-- radio 单选按钮 圆形 选中之后无法取消 -->
<!-- name 通过相同的name属性将多个选项组合在一起 -->
<!-- <input type="radio" name="tu"> A.张三？ <br>
<input type="radio" name="tu"> B.李四？ <br>
<input type="radio" name="tu"> C.王五？ <br>
<input type="radio" name="tu"> D.赵六？ <br> -->
<hr>
<input type="checkbox" name="sui" value="A.张三"> A.张三？ <br>
<input type="checkbox" name="sui" value="B.李四"> B.李四？ <br>
<input type="checkbox" name="sui" value="C.王五"> C.王五？ <br>
<input type="checkbox" name="sui" value="D.赵六"> D.赵六？ <br>
<!-- checkbox 多选按钮 可以选中之后取消 同时选中多个 -->
<input type="button" value="百度一下">
<!-- button 按钮 普通按钮 可以通过value添加按钮中的文字 -->
<input type="submit" value="登录">
<!-- submit 提交按钮 本身自带提交两个字 -->
<input type="reset">
<!-- reset 重置按钮 清楚表单内容 -->
<textarea cols="10" rows="5"></textarea>
<!-- 文本域 多行文本输入框 -->
<!-- cols 可见列数 rows 可见行数 是包含滚动条位置的 -->
<!-- disabled 禁止使用当前的文本域 -->
<!-- maxlength 限制最大输入的字符数量 -->
<!-- readonly 只读 -->
<select name="" id="">
<option value="">请选择你所在的城市</option>
<option value="">河南</option>
<option value="">河北</option>
<option value="">山东</option>
<option value="">山西</option>
</select>
<!-- select 下拉菜单-->
<!-- disabled 禁止使用当前的文本域 -->
<!-- multiple 允许多选 -->
<!-- size="2" 可查看的数量 -->
</form>
<!-- ?user=123&pw=321&one=on&sui=on -->
<!-- ?user=871758313&pw=jbgsn&one=C.王五&sui=A.张三&sui=B.李四&sui=D.赵六 -->
</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>
<iframe src="https://www.bigee.cc/" frameborder="0" width="600" height="450"></iframe>
<iframe src="./03-表单.html" frameborder="0" width="600" height="450"></iframe>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
