本文详细介绍了HTML中的无序列表<ul>、有序列表<ol>和自定义列表<dl>的用法，以及表格<table>的各种结构标签，包括合并单元格的方法。此外，还讲解了表单元素<input>的不同类型以及<button>、<select>、<textarea>和<label>的用途，强调了它们在交互式网页设计中的重要性。
列表标签
1、无序列表 （ul）
ul标签是无序列表标签，里面只能放li标签，而li标签可以放任意标签，li标签是用来描述无序列表中的内容
<body>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>雪梨</li>
</ul>
</body>
运行结果：
2、有序列表（ol）
ol标签是有序列表标签，里面只能放li标签，而li标签可以放任意标签，li标签是用来描述有序列表中的内容，对于ol标签，有两个属性值type，可以指定不同的排序方式如abc，ABC等，只能填五个值：1，a，A，i，I；start，可以指定开始的数字或字母或罗马数字
<body>
<ol>
<li>打开冰箱</li>
<li>把大象装进冰箱</li>
<li>关上冰箱</li>
</ol>
</body>
运行结果：
3、自定义列表（dl）
dl是自定义列表标签，里面只能放dt标签代表列表标题，dt标签只能放dd标签，代表列表内容
<body>
<dl>
<dt>
登录
<dd>登录账号</dd>
<dd>登录密码</dd>
</dt>
</dl>
<dl>
<dt>
游戏
<dd>俄罗斯方块</dd>
<dd>国际象棋</dd>
</dt>
</dl>
</body>
运行结果：
表格标签
1、表格基本标签（table，caption，tr，th，td）
表格标签table用来绘制表格，table标签中有一属性border，用来表述绘制表格的线粗细，此属性有属性值，表示表格线的粗细；caption用来表示表格标题，tr表示表格的每一行，tr里面只能写th和td，th表示表格中的描述数据如姓名性别等，加粗，td表述表格中的实际数据
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>小明</td>
<td>男</td>
</tr>
<tr>
<td>小李</td>
<td>男</td>
</tr>
</table>
</body>
运行结果：
2、表格结构标签（thead，tbody，tfoot）
thead描述表格头部，tbody描述表格主体，tfoot描述表格尾部
<body>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>小明</td>
<td>男</td>
</tr>
<tr>
<td>小李</td>
<td>男</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总结</td>
<td>总结</td>
</tr>
</tfoot>
</table>
</body>
运行结果：
注：对于浏览器而言加身体头部和尾部没什么区别
3、表格合并
表格合并有两属性值，rowspan垂直合并，此属性有属性值，表示合并的单元格个数；colspan水平合并，此属性有属性值，表示合并的单元格个数。遵循左上原则即垂直合并保留最上面的数据，水平合并保留最左边的数据
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>小明</td>
<td rowspan="2">男</td>
</tr>
<tr>
<td>小李</td>
</tr>
<tr>
<td colspan="2">总结</td>
</tr>
</table>
</body>
运行结果：
注意：用了这两标签之后同一行或同一列不能有其他数据，否则表格将会错误
表单标签
1、input标签
input有一个属性type，type属性值有8个：text,password,radio,checkbox,file,submit,reset,button
text属性值：
文本框，用于输入单行文本
<body>
姓名：<input type="text">
</body>
运行结果：
password属性值
密码框，用于输入密码
<body>
密码：<input type="password">
</body>
运行结果：
radio属性值
单选框，用于多选一，要实现多选一，必须要对多个radio属性值的input标签进行归组，归组属性为name，当name的属性值相同的归为一组，name的属性值可以任意
<body>
性别：男<input type="radio" name="sex"> 女<input type="radio" name="sex">
</body>
运行结果：
checkbox属性值
多选框，用于多选多
<body>
兴趣爱好：打篮球<input type="checkbox"> 踢足球<input type="checkbox"> 打排球<input type="checkbox">
</body>
运行结果：
file属性值
文件选择，用于之后上传文件，若要上传多个文件，必须书写一个属性值multiple
<body>
<input type="file" multiple>
</body>
运行结果：
submit属性值
提交按钮，用于提交信息，使用该属性值时前要加form标签
<body>
<form>
<div>
姓名：<input type="text">
</div>
<div>
学号：<input type="password">
</div>
<div>
性别：男<input type="radio" name="sex"> 女<input type="radio" name="sex">
</div>
<div>
兴趣爱好：打篮球<input type="checkbox"> 踢足球<input type="checkbox"> 打排球<input type="checkbox">
</div>
<div>
<input type="submit">
<div>
</form>
</body>
运行结果：
reset属性值
重置按钮，用于重置所有输入的信息，使用该属性时要加form标签
<body>
<form>
<div>
姓名：<input type="text">
</div>
<div>
学号：<input type="password">
</div>
<div>
性别：男<input type="radio" name="sex"> 女<input type="radio" name="sex">
</div>
<div>
兴趣爱好：打篮球<input type="checkbox"> 踢足球<input type="checkbox"> 打排球<input type="checkbox">
</div>
<div>
<input type="reset">
<div>
</form>
</body>
运行结果：
button属性值
普通按钮，与js配合使用功能，若在此按钮中写该按钮名称时，需要写value属性，属性值为按钮名称
<body>
<input type="button" value="普通按钮">
</body>
运行结果：
2、button标签
该标签有一个button属性，有三属性值：submit，reset，button，关于这三个属性值，参考input标签中的button属性值
3、select下拉菜单标签（option）
select里只能写入option标签，该标签描述下拉菜单列表内容
<body>
城市：
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
</select>
</body>
运行结果：
4、textarea标签
改标签有两属性：cols规定了文本区的可见宽度；rows规定了文本区的可见行数
<body>
<div>文本框：</div>
<div><textarea cols="30" rows="10"></textarea></div>
</body>
运行结果：
5、label标签
该标签常用于绑定内容与表单标签的关系。有两种使用方法：方法一、使用label标签把内容包裹起来，再把表单标签上添加id属性，在label标签的for属性中设置对应的id属性值；方法二、直接使用label标签把内容和表单标签一起包裹起来，然后把label标签的for属性去掉
方法一：
<body>
性别：
<input type="radio" id="r1" name="sex"><label for="r1">男</label>
<input type="radio" id="r2" name="sex"><label for="r2">女</label>
</body>
方法二、
<body>
性别：
<label><input type="radio" name="sex">男</label>
<label><input type="radio" name="sex">女</label>
</body>
字符实体
1、空格
当网页文字需要输入空格时候，需要输入 依据输入空格数输入 ；
<body>
我的名字是 xxx
</body>
运行结果：
2、小于号和大于号
由于html标签有小于号和大于号，因此当需要输入小于号的时候则输入<代替；当输入大于号的时候则输入>代替
<body>
这是一个<HTML>文件
</body>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
