这是我参与「第五届青训营 」伴学笔记创作活动的第 11 天
本文为自学前端过程中的学习笔记
列表
应用场景
- 场景：按照行展示关联性内容，如：新闻列表、排行榜、账单等
- 特点：按照行的方式，整齐显示内容
- 种类：无序列表、有序列表、自定义列表
无序列表
| 标签名 | 说明 |
|---|
| ul | 表示无序列表的整体 |
| li | 表示无序列表的每一项 |
<ul>
<li>榴莲</li>
<li>香蕉</li>
<li>苹果</li>
</ul>
注意点：
- ul标签中只允许包含li标签
- li标签可以包含任何内容
有序列表
| 标签名 | 说明 |
|---|
| ol | 表示有序列表的整体 |
| li | 表示有序列的每一项 |
<ol>
<li>张三:100</li>
<li>李四: 80</li>
</ol>
注意点：
- ol标签中只允许包含li标签
- li标签可以包含任意内容
自定义列表
| 标签名 | 说明 |
|---|
| dl | 表示自定义列表的整体 |
| dt | 表示自定义列表的主题 |
| dd | 表示自定义列表的针对主题的每一项内容 |
<dl>
<dt>帮助中心</dt>
<dd>账户管理</dd>
<dd>购物指南</dd>
</dl>
![image-20230107211404415]()
注意点：
- dd前会默认显示缩进效果
- dl标签中只允许包含dt/dd标签
- dt/dd标签可以包含任意内容
表格标签
表格的基本标签
| 标签名 | 说明 |
|---|
| table | 表格整体，可用于包裹多个tr |
| tr | 表格每行，可用于包裹td |
| td | 表格单元格，可用于包裹内容 |
注意点：
表格的相关属性
| 属性名 | 属性值 | 效果 |
|---|
| border | 数字 | 边框宽度 |
| width | 数字 | 表格宽度 |
| height | 数字 | 表格高度 |
注意点：
表格标题和表头单元格标签
| 标签名 | 名称 | 说明 |
|---|
| caption | 表格大标题 | 默认顶部居中 |
| th | 表头单元格 | 表示一列小标题，默认加粗居中 |
注意点：
- caption标签书写在table标签内部
- th标签书写在tr标签内部（用于替换td标签）
合并单元格
| 属性名 | 属性值 | 说明 |
|---|
| rowspan | 合并单元格的个数 | 跨行合并，将多行的单元格垂直合并 |
| colspan | 合并单元格的个数 | 跨列合并，将多列的单元格水平合并 |
注意点：
- 通过左上原则，确定保留谁删除谁
- 不能跨结构合并（不能跨：thread、tbody、tfoot）
表单标签
input系列标签
| 标签名 | type属性值 | 说明 |
|---|
| input | text | 文本框，用于输入单行文本 |
| input | password | 密码框，用于输入密码 |
| input | radio | 单选框，用于多选一 |
| input | checkbox | 多选框，用于多选多 |
| input | file | 文件选择，用于之后上传文件 |
| input | submit | 提交按钮，用于提交 |
| input | reset | 重置按钮，用于重置 |
| input | button | 普通按钮，配合js添加功能 |
<body>
文本框: <input type="text">
<br>
<br>
密码框: <input type="password">
<br>
<br>
单选框: <input type="radio">
<br>
<br>
多选框: <input type="checkbox">
<br>
<br>
上传文件: <input type="file">
</body>
文本框
| 属性名 | 说明 |
|---|
| placeholder | 占位符，提示用户输入内容的文本 |
密码框
| 属性名 | 说明 |
|---|
| placeholder | 占位符，提示用户输入内容的文本 |
单选框
| 属性名 | 说明 |
|---|
| name | 分组，相同name属性的单选框为一组 |
| checked | 默认选中 |
复选框
button按钮标签
| 标签名 | type属性值 | 说明 |
|---|
| button | submit | 提交按钮，点击后提交数据给后端服务器 |
| button | reset | 重置按钮，点击之后恢复表单默认值 |
| button | button | 普通按钮，默认无功能，之后配合js添加功能 |
<body>
<button>我是按钮</button>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮, 没有任何功能</button>
</body>
注意点：
- 如果要实现以上按钮功能，需要配合form标签使用
- form使用方法：用form标签把表单标签一起包裹起来
select下拉菜单标签
<body>
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option selected>深圳</option>
</select>
</body>
textarea文本域标签
可输入多行文本的表单控件
<body>
<textarea cols="60" rows="30"></textarea>
</body>
label标签
常用于绑定内容与表单标签的关系
<body>
性别:
<input type="radio" name="sex" id="nan"> <label for="nan">男</label>
<label><input type="radio" name="sex"> 女</label>
</body>
