弄了几天服务器，注册了一个域名，现在个人网站终于可以访问了
很简陋，毕竟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>