[表单]HTML Learn Data Day 1 - 详解
弄了几天服务器，注册了一个域名，现在个人网站终于可以访问了
很简陋，毕竟html才学到第1天，后续慢慢美化，欢迎访问：reisentyan.cn
黑马程序员的课就是好，不长不短，内容细致度还不错，关键是讲课的教师，口齿清晰逻辑顺畅，听了就学到了
今日学习内容
1. 基础排版与转义字符
- 转义字符：在 HTML 中，某些字符有特殊含义，需要使用转义字符显示。
<：小于号<(less than)>：大于号>(greater than) ：空格
- 布局标签：
div：块级元素，独占一行（大盒子）。span：行内元素，不换行（小盒子）。
2. 列表 (List)
HTML 中常见的列表有三种：
| 标签 | 全称 | 作用 | 说明 |
|---|---|---|---|
ul | Unordered List | 无序列表 | 列表项没有顺序，默认前缀为圆点。 |
ol | Ordered List | 有序列表 | 列表项有数字顺序 (1, 2, 3…)。 |
dl | Definition List | 定义列表 | 用于键值对显示。dt 是标题，dd 是描述。 |
注意：
ul和ol的直接子元素只能是li(List Item)，但li内部可以包含任何标签。dl的结构通常是dt(Definition Term) 领头，后面跟一个或多个dd(Definition Description)。
参考代码：
<!-- 1. 无序列表 ul -->
<ul>
<li><strong>这是列表第1条</strong></li>
<li>这是列表第2条</li>
<li>这是列表第3条</li>
</ul>
<br>
<!-- 2. 有序列表 ol -->
<ol>
<li><strong>这是列表第1条</strong></li>
<li>这是列表第2条</li>
<li>这是列表第3条</li>
</ol>
<!-- 3. 定义列表 dl -->
<dl>
<!-- 第一组定义 -->
<dt><strong>列表标题一</strong></dt>
<dd>内容描述 1</dd>
<dd>内容描述 2</dd>
<!-- 第二组定义 -->
<dt><strong>列表标题二</strong></dt>
<dd>内容描述 1</dd>
<dd>内容描述 2</dd>
</dl>3. 表格 (Table)
表格的标签和属性较多，主要用于展示数据。
基本语法：
<table>：定义表格。border属性设置边框粗细（数字越大越粗）。<tr>：Table Row，定义表格的一行。<th>：Table Header，定义表头单元格（默认加粗且居中）。<td>：Table Data，定义普通数据单元格。
表格结构标签（语义化）：
为了方便浏览器解析和开发维护，表格通常分为三个部分（虽然不写也能显示，但推荐加上）：
<thead>：表头区域<tbody>：主体区域<tfoot>：底部区域（常用于合计）
合并单元格：
| 属性 | 作用 | 记忆口诀 |
|---|---|---|
rowspan="n" | 跨行合并：从当前单元格开始，向下合并 n 个单元格。 | 上下合并，保留最上面的，删除其他的。 |
colspan="n" | 跨列合并：从当前单元格开始，向右合并 n 个单元格。 | 左右合并，保留最左边的，删除其他的。 |
注意：合并单元格时，被合并掉的单元格代码需要删除。此外，不能跨结构合并（例如不能将
thead和tbody的单元格合并）。
参考代码：
<!-- border表示边框线，数字代表粗细 -->
<table border="2">
<!-- 表头区域 -->
<thead>
<tr>
<th>血量</th>
<th>法力</th>
<th>经验值</th>
</tr>
</thead>
<!-- 主体区域 -->
<tbody>
<tr>
<!-- 跨行合并：向下合并2格 -->
<td rowspan="2">100</td>
<td>50</td>
<td>200</td>
</tr>
<tr>
<!-- 被合并的单元格需要删除 -->
<td>66</td>
<td>250</td>
</tr>
<tr>
<!-- 跨列合并：向右合并3格 -->
<td colspan="3">总计：156</td>
<!-- 被合并的单元格需要删除 -->
</tr>
</tbody>
</table>4. 表单 (Form)
表单用于收集用户信息。所有的表单项通常包裹在 <form> 标签中。
4.1 Input 系列标签
使用 <input type="属性值"> 可以创建多种控件。
| type 属性值 | 描述 | 常用附加属性 |
|---|---|---|
text | 文本框 | placeholder (占位提示符) |
password | 密码框 | 输入内容显示为圆点或星号。 |
radio | 单选框 | 必须设置相同的 name 属性才能实现多选一。checked 表示默认选中。 |
checkbox | 复选框 | 可以多选。checked 表示默认选中。 |
file | 文件上传 | multiple 表示允许同时上传多个文件。 |
submit | 提交按钮 | 点击后提交表单数据给服务器。 |
reset | 重置按钮 | 点击后将表单恢复到默认状态。 |
button | 普通按钮 | 默认无功能，通常配合 JS 使用。 |
4.2 其他表单标签
| 标签 | 作用 | 说明 |
|---|---|---|
<select> | 下拉菜单 | 内部包含 <option> 标签定义选项。<option selected> 表示默认选中项。 |
<textarea> | 文本域 | 用于输入多行文本（如留言、评论）。 |
<label> | 标注标签 | 用于绑定文字和表单控件，增大点击范围，提升用户体验。 |
Label 的两种用法：
- ID 绑定法：
<input id="user">配合<label for="user">用户名</label>。 - 直接包裹法：
<label><input type="radio"> 男</label>。
参考代码：
<!-- action: 表单数据提交的地址 -->
<form action="">
<!-- 1. 文本与密码框 -->
<div>
账号：<input type="text" placeholder="请输入用户名">
</div>
<div>
密码：<input type="password" placeholder="请输入密码">
</div>
<!-- 2. 单选框 (Radio) -->
<!-- name="sex" 必须相同，才能实现互斥效果 -->
<!-- 使用 label 增加点击区域 -->
<input type="radio" id="man" name="sex" checked>
<label for="man">男</label>
<label><input type="radio" name="sex">女</label>
<br>
<!-- 3. 复选框 (Checkbox) -->
爱好：
<label><input type="checkbox" name="hobby"> 编程</label>
<label><input type="checkbox" name="hobby"> 游戏</label>
<br>
<!-- 4. 文件上传 -->
头像：<input type="file" multiple>
<br>
<!-- 5. 下拉菜单 (Select) -->
城市：
<select>
<option>北京</option>
<option selected>上海</option> <!-- 默认选中 -->
<option>深圳</option>
<option>广州</option>
</select>
<br><br>
<!-- 6. 文本域 (Textarea) -->
留言：
<textarea cols="30" rows="5" placeholder="请在此输入留言..."></textarea>
<br>
<!-- 7. 按钮 -->
<!-- 重置按钮会清空当前 form 内的所有数据 -->
<button type="submit">提交注册</button>
<button type="reset">重置表单</button>
</form>
浙公网安备 33010602011771号