HTML（二）列表、表格、表单元素
一、列表
1. 有序列表（<ol> </ol>）
第一层嵌套内只能包含 <li></li> 列表项标签，列表项标签可以包裹任何标签和文本，属于块级元素。有序列表有以下几个属性：
| type="1" | 默认 |
| type="a" | 小写字母排序 |
| type="A" | 大写字母排序 |
2. 无序列表（<ul> </ul>）
第一层嵌套内只能包含<li></li>列表项标签，同有序列表。有以下几个属性：
| type="disc" | \默认 |
| type="circle" | 空心圆点 |
| type="square" | 小正方形（实心的） |
有序列表和无序列表第一层内必须包含列表项标签，文本写在列表项标签内。
3. 自定义列表（<dl> </dl>）
<dt></dt> 列表标题
<dd></dd> 文本和元素
-
<dl>
-
<dt>国内电影</dt>
-
<dd>流浪地球</dd>
-
<dd>来电狂想</dd>
-
<dt>国外电影</dt>
-
<dd>惊奇队⻓</dd>
-
<dd>美国队⻓</dd>
-
</dl>
4. 嵌套列表
有序、无序以及自定义列表相互嵌套。举例：
-
<!-- 嵌套列表 -->
-
<ul>
-
<li>MOBA类游戏
-
<ol>
-
<li>王者荣耀
-
<ul type="circle">
-
<li>武则天</li>
-
<li>嬴政</li>
-
<li>不知火舞</li>
-
</ul>
-
</li>
-
<li>英雄联盟
-
<ul type="circle">
-
<li>无极剑圣</li>
-
<li>疾风剑豪</li>
-
<li>暗裔剑魔</li>
-
</ul>
-
</li>
-
</ol>
-
</li>
-
<li>第一人称射击
-
<ol>
-
<li>和平精英</li>
-
<li>使命召唤</li>
-
<li>生化危机</li>
-
</ol>
-
</li>
-
<li>经营类
-
<ol>
-
<li>大富翁</li>
-
<li>模拟人生</li>
-
<li>城市天际线</li>
-
</ol>
-
</li>
-
</ul>
二、表格
1. 表格标签
| <table></table> | 块级元素，自占一行 |
| <caption></caption> | 表格标题，只可以包裹文本 |
| <thead></thead> | 表头，可不写 |
| <tbody></tbody> | 表体，可不写 |
| <tfoot></tfoot> | 表尾，可不写 |
2. 表格的行列
| <tr></tr> | 行标签 |
| <th></th> | 加粗列标签，一般放在表头，当作列标题使用 |
| <td></td> | 列标签 |
3. 表格标签相关属性
| border | 边框宽度 |
| height | 整体高度 |
| width | 整体宽度 |
| style="bordercollapse: collapse; | 除去缝隙 |
| cellpadding | 边框与单元格的距离 |
| cellspacing | 单元格边框宽度 |
| align left、center、right | 对齐方式 |
| bgcolor | 背景颜色 |
| background url | 背景图片 |
| width | 单元格的宽 |
| height | 单元格的高 |
4. 拆分与合并
| colspan | 合并列 |
| rowspan | 合并行 |
拆分合并之后需要删除多余的行或列。
三、表单元素
1. 表单标签（<form></form>）
表单用于搜集不同类型的用户输入，该标签不能单独使用，需要在 form 元素中加入 input 等标签共同使用。
2. input标签及控件
<input/>元素是最重要的表单元素，有不同的type属性
| type="text" | 单行文本输入域
|
| type="password" | 密码输入域，输入的字符不直接显示 |
| type="radio" | 单选框
|
| type="checkbox" | 复选框 |
| type="submit" | 提交按钮
|
| type="file" | 文件上传 |
| type="number" | 输入数字的字段
|
| type="email" | 专用于email的输入 |
| type="color" | 直接调用系统的颜色调节窗口，默然为黑色 |
| type="date" | 可用来选择或输入日期，包括（年/月/日）不包括时间 |
| type="range" | 精确值不重要的输入数字的控件 |
3. 标记标签（<label> </label>）
不会向用户呈现任何特殊效果，内联元素，不自占一行
label 标签的 "for" 属性可把 label 绑定到另外一个元素，把 "for" 属性值设为相关元素的id 值即可。
4. 菜单标签（<select> </select>）
下拉菜单标签，不能单独存在，只能包裹option。
<option></option> 菜单选项，multiple 属性代表该下拉菜单可以多选。
-
<select name="cd" id="city" multiple>
-
<option value="0">请选择</option>
-
<option value="1">北京</option>
-
<option value="2">天津</option>
-
</select>
5.文本域（<textarea> </textarea>）
具有滚动条的多行文本输入控件。
文章来源: majinjian.blog.csdn.net，作者：Developer 小马，版权归原作者所有，如需转载，请联系作者。
原文链接：majinjian.blog.csdn.net/article/details/119384719
- 点赞
- 收藏
- 关注作者
评论（0）