VR心理健康学习机|沉浸式心理教育新体验
2026/5/23 2:36:26
弄了几天服务器，注册了一个域名，现在个人网站终于可以访问了
很简陋，毕竟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表示边框线，数字代表粗细 --><tableborder="2"><!-- 表头区域 --><thead><tr><th>血量</th><th>法力</th><th>经验值</th></tr></thead><!-- 主体区域 --><tbody><tr><!-- 跨行合并：向下合并2格 --><tdrowspan="2">100</td><td>50</td><td>200</td></tr><tr><!-- 被合并的单元格需要删除 --><td>66</td><td>250</td></tr><tr><!-- 跨列合并：向右合并3格 --><tdcolspan="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: 表单数据提交的地址 --><formaction=""><!-- 1. 文本与密码框 --><div>账号：<inputtype="text"placeholder="请输入用户名"></div><div>密码：<inputtype="password"placeholder="请输入密码"></div><!-- 2. 单选框 (Radio) --><!-- name="sex" 必须相同，才能实现互斥效果 --><!-- 使用 label 增加点击区域 --><inputtype="radio"id="man"name="sex"checked><labelfor="man">男</label><label><inputtype="radio"name="sex">女</label><br><!-- 3. 复选框 (Checkbox) -->爱好：<label><inputtype="checkbox"name="hobby">编程</label><label><inputtype="checkbox"name="hobby">游戏</label><br><!-- 4. 文件上传 -->头像：<inputtype="file"multiple><br><!-- 5. 下拉菜单 (Select) -->城市：<select><option>北京</option><optionselected>上海</option><!-- 默认选中 --><option>深圳</option><option>广州</option></select><br><br><!-- 6. 文本域 (Textarea) -->留言：<textareacols="30"rows="5"placeholder="请在此输入留言..."></textarea><br><!-- 7. 按钮 --><!-- 重置按钮会清空当前 form 内的所有数据 --><buttontype="submit">提交注册</button><buttontype="reset">重置表单</button></form>