第二十一集-嵌套列表
- 列表之间互相嵌套可以形成多层级的列表
嵌套列表仿写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>依阿华级战列舰</li>
<ul>
<li>依阿华号<BB61></li>
<li>新泽西号<BB62></li>
<li>密苏里号<BB63></li>
<li>威斯康星号<BB64></li>
<li>伊利诺伊号<BB65></li>
<li>肯塔基号<BB66></li>
</ul>
</ul><br>
<ul>
<li>狮级战列舰</li>
<ul>
<li>狮号<Lion></li>
<li>蛮勇号<Temeraire></li>
</ul>
</ul>
<ul>
<li>大和级战列舰</li>
<ul>
<li>大和号<Yamato></li>
<li>武藏号<Musashi></li>
<li>信浓号航空母舰</li>
</ul>
</ul>
</body>
</html>
第二十二集-表格标签
<table>:表格最外层容器
<tr>:定义表格行
<th>:定义表头
<td>:定义表格单元
<caption>:定义表格标题
（注：之间是有嵌套关系的，要符合嵌套规范）- 语义化标签：
<tHead>、<tBody>、<tFood>
(在一个table章，tBody可以出现多次，tHead、tFood只能出现一次)
课堂练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table>
<caption><strong>2022年物理诺奖得奖情况</strong></caption>
<thead>
<tr>
<th>获奖人员</th>
<th>获奖成就</th>
</tr>
</thead>
<tbody>
<tr>
<td>阿兰·阿斯佩（(Alain Aspect)</td>
<td>采用快速抽离验证量子不确定性</td>
</tr>
<tr>
<td>约翰·弗朗西斯 · 克劳泽(John F. Clauser)</td>
<td>采用快速抽离验证量子不确定性</td>
</tr>
<tr>
<td>安东·塞林格(Anton Zeilinger)</td>
<td>创新方法验证量子不确定性与其纠缠特性</td>
</tr>
</tbody>
</table>
</body>
</html>
第二十三集-表格属性
- 表格属性：
<border>：表格边框（加在table中）
<cellpadding>：单元格内空间
<cellspacing>：单元格之间的空间
<rowspan>：合并行（加在tr下的td中）
<colspan>：合并列
<align>：左右对齐方式(left、center、right)
<valign>：上下对齐方式(top、middle、bottom)
课堂练习（改）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" cellpadding="30" cellspacing="0.5">
<caption><strong>2022年物理诺奖得奖情况</strong></caption>
<thead>
<tr align="left" valign="top">
<th>人员形象</th>
<th>获奖人员</th>
<th>获奖成就</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="https://bkimg.cdn.bcebos.com/pic/0824ab18972bd40735fa8ae027dc89510fb30f24a32b?x-bce-process=image/resize,m_lfit,w_536,limit_1" alt=""></td>
<td>阿兰·阿斯佩（(Alain Aspect)</td>
<td>采用快速抽离验证量子不确定性</td>
</tr>
<tr>
<td><img src="https://bkimg.cdn.bcebos.com/pic/0b7b02087bf40ad162d95dec0b7906dfa9ec8a13603c?x-bce-process=image/resize,m_lfit,w_536,limit_1" alt=""></td>
<td>约翰·弗朗西斯 · 克劳泽(John F. Clauser)</td>
<td>采用快速抽离验证量子不确定性</td>
</tr>
<tr>
<td><img src="https://bkimg.cdn.bcebos.com/pic/48540923dd54564e9258ff37ef8b8b82d158ccbfe13a?x-bce-process=image/resize,m_lfit,w_536,limit_1" alt=""></td>
<td>安东·塞林格(Anton Zeilinger)</td>
<td>创新方法验证量子不确定性与其纠缠特性</td>
</tr>
</tbody>
</table>
</body>
</html>
第二十四集-表单属性
<form>：表单的最外层容器（注：action为提交地址）<input>：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。（单标签）
type属性：text（文本输入框）（placeholder为默认文字栏）
password（密码输入框）
checkbox（复选框）（注：checked为默认勾选，disabled为禁止使用）
radio（单选框）（注：通过name进行附加）
file（上传文件）
submit（提交按钮）
reset（重置按钮）
课堂练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>注册表格</h1>
<form></form>
<h4>用户名</h4>
<input type="text" placeholder="请输入用户名">
<h4>密码</h4>
<input type="password" placeholder="请输入密码">
<h4>上传您的头像</h4>
<input
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
