列表与表格
约 1047 字大约 3 分钟
2025-05-28
列表
无序列表
<ul>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
</ul>有序列表
<ol>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
<li>列表项目</li>
</ol>自定义列表
提示
通常用于自定区域划分
<dl>
<dt>标题</dt>
<dd>列表项目</dd>
<dd>列表项目</dd>
<dd>列表项目</dd>
</dl>表格标签
<table>
<caption>表格标题</caption>
<thead>
<th>表头名称1</th>
<th>表头名称2</th>
</thead>
<tbody>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
</tfoot>
</table>colspan：横向合并
rowspan：纵向合并
table属性
alignOptionalbottom/center/left/right/top
对齐方式
widthOptional数值/百分比
表格宽度
heightOptional数值/百分比
表格高度
borderOptionalnumber
表格边框
框架
Frameset已废弃
框架网页练习
frame
index.html
left.html
top.html
right.html
frame/index.html
<!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>
<frameset rows="20,*">
<frame src="./left.html"></frame>
<frameset cols="30%,*">
<frame src="top.html"></frame>
<frame src="right.html"></frame>
</frameset>
</frameset>
</html>frame/left.html
<!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>左侧网页</p>
</body>
</html>frame/top.html
<!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>顶部网页</p>
</body>
</html>frame/right.html
<!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>右侧网页</p>
</body>
</html>iframe
内嵌框架用<iframe>表示。<iframe>是<body>的子标记。
srcRequiredaddress
内嵌页面地址
widthOptional数值/百分比
宽度
heightOptional数值/百分比
高度
scrollingOptionalboolean
是否需要滚动条
nameOptionalnull
窗口名称
内联框架练习
iframe
index.html
text.html
video.html
iframe/index.html
<!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>
<a href="text.html" type="site"></a><br/>
<a href="image.html" type="site"></a><br/>
<a href="video.html" type="site"></a><br/>
<iframe src="text.html" frameborder="0" name="site" width="100px" height="100px"></iframe>
</body>
</html>iframe/text.html
<!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>随便乱打的文字</p>
</body>
</html>iframe/video.html
<!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>
<video src="test.mp4"></video>
</body>
</html>表单
nameOptionalstring
表单名称，不唯一
idOptionalstring
表单名称，唯一
actionOptionalroute
表单处理程序，通常是php
methodOptionalget/post
表单提交方式
input
<form action="">
用户名：<input type="text" placeholder="输入文本"><br/>
密码：<input type="password" placeholder="输入密码"><br/>
<!-- name数值相同，单选 -->
性别：<input type="radio" name="gender" id="gender">男 <input type="radio" name="gender" id="">女<br/>
<!-- name数值相同，表示一组，加入checked表示选中 -->
爱好：<input type="checkbox" name="hobby" id="">打游戏 </nbsp><input type="checkbox" name="hobby" id="hobby">看电视
</form>加入语义化
<form action="">
<fieldset>
<legend>账户信息</legend>
用户名：<input type="text" placeholder="输入文本">
密码：<input type="password" placeholder="输入密码">
<!-- name数值相同，单选 -->
</fieldset>
<fieldset>
<legend>身份信息</legend>
性别：<input type="radio" name="gender" id="gender">男 <input type="radio" name="gender" id="">女<br/>
<!-- name数值相同，表示一组，加入checked表示选中 -->
爱好：<input type="checkbox" name="hobby" id="">打游戏 </nbsp><input type="checkbox" name="hobby" id="hobby">看电视
</fieldset>
</form>label标签
对表单做一个说明，支持扩展区域
写法1
<form>
<label for="name">姓名：</label>
<input type="text" placeholder="请输入姓名" id="name">
</form>写法2
<form>
<label for="name">
密码：<input type="password" placeholder="请输入密码">
</label>
</form>select
<form>
学历：<select>
<option>小学</option>
<option>初中</option>
<option>高中</option>
<option>大专及以上</option>
</select>
</form>textarea
<form>
<textarea name="text" rows="2" cols="20">拖拽边框调整文本框大小</textarea>
</form>更新日志
2025/6/26 22:42
查看所有更新日志