注：本笔记根据bilibili-黑马程序员pink老师前端入门教程编写
目录
1. 表格标签
1.1 表格的主要作用
表格主要用于显示、展示数据，可以让数据显示非常规整，可读性好。
表格不是来布局的，而是来展示数据的。
1.2 表格基本语法
<table>
<tr>
<td>姓名</td> <td>性别</td> <td>年龄</td>
<tr>
<tr>
<td>张三</td> <td>女</td> <td>77</td>
<tr>
</table>- <table></table> 用于定义表格的标签。
- <tr></tr> 标签用于定义表格中的行，必须嵌套在 <table></table>中。
- <td></td> 用于定义表格中的单元格，必须嵌套在 <tr></tr> 中。
- 字母 td 指表格数据（table data），即单元格的内容。
1.3 表头单元格标签 th【表头文本内容加粗显示】
1.4 表格属性
后期可通过 CSS 来设置。 <table align=”center”></table>
| 属性名 | 属性值 | 描述 |
| align | left、center、right | 表格元素对齐方式 |
| border | 1 或"" | 规定是否有边框，默认为""，表示没边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间空白，默认1px |
| cellspacing | 像素值 | 规定单元格之间的空白，默认为 2px |
| width | 像素值或百分比 | 规定表格宽度 |
| hight | 像素 | 表格高度 |
1.5 表格结构标签
<table>间加入<thead>和<tbody>
加强语义化：<thead>:头部区域
<tbody>:主体区域
注意：
- <thead></thead>：定义表格头部，且内部必须有<tr>标签。
- <tbody></tbody>：定义表格主体，存放数据。
- 以上标签都放在 <table></table> 里面。
1.6 合并单元格
合并单元格方式：
- 跨行合并：rowspan="合并单元格个数"
- 跨列合并：colspan="合并单元格个数"
| <tr> <td></td> <td></td> <td></td> </tr> | → | <tr> <td></td> <td colspan="2"></td> </tr> |
2 列表标签
表格展示数据，列表则用来布局。 列表特点是整齐、整洁、有序，作为布局更方便自由。列表分为三大类：①无序列表 ②有序列表 ③自定义列表
2.1 无序列表（重要）
<ul>无序列表，没有顺序。
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
注意：1）各个列表项之间无需，并列关系。
2）<ul></ul>中只能包含<li></li>，写入其他标签或文字是不允许的。
3）无序列表带有自己的属性，可用 CSS 修改样式属性。
2.2 有序列表（理解）
使用<ol>标签来定义有序列表，<li>来定义列表项。
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
与无需列表类似，有自己的样式属性，通过 CSS 设置。
2.3 自定义列表（重点）
<dl> 定义描述列表，与 <dt> 和 <dd> 标签配合使用。
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
<dt>名词2</dt>
<dd>名词2解释1</dd>
</dl>
注意：dl 里面只能包含 dt 和 dd，可以多个dt和dd
3. 表单标签
表单：收集用户信息。 和用户进行交互，收集用户资料。
3.1 表单组成
①表单域 ②表单控件（元素） ③提示信息
3.2 表单域
表单域：一个包含表单元素的区域。
使用<form>标签用于定义表单域，收集和传递用户信息。
<form>标签会将它范围内的表单元素信息提交给服务器。
目前，暂时不需要用表单域提交数据，只需要写上<form>标签即可。
<form action="url地址" method="提交方式" name="表单域名称"> 各种表单元素控件 </form>
| 属性 | 属性值 | 作用 |
| action | url 地址 | 指定接受并处理表单数据的服务器的 url 地址 |
| method | get/post | 设置表单数据的提交方式 |
| name | 名称 | 用于指定表单名称，区分同一个页面中的多个表单域 |
注意：
- 写表单元素之前需要有表单域将其包含。
- 表单域是 form 标签。
3.3 表单控件（表单元素）
在表单域中定义各种表单元素，允许用户在表单中输入或选择的内容控件。
3.3.1 <input> 表单元素
<input> 标签用于收集用户信息。此标签包含type属性，决定了输入字段的不同形式：文本字段、复选框、掩码后的文本控件、单选按钮、按钮等。
<input type="属性值" />：①<input>标签为单标签
②<type>属性设置不同属性值来指定不同控件类型
| type 属性值 | 描述 |
| button | 可点击按钮(通过JS启动脚本) |
| file | 输入字段和“浏览”按钮，供文件上传 |
| hidden | 隐藏的输入字段 |
| image | 图像形式的提交按钮 |
| password | 密码字段。字符被掩码。 |
| radio | 多选一 【name值一样】 |
| checkbox | 复选框，多选多 【name值一样】 |
| reset | 重置按钮，清除表单所有数据。 |
| submit | 提交按钮。提交数据到后台 |
| text | 输入字段。用户可输入文本，默认宽度为 20 个字符。 |
| input属性 | 属性值 | 描述 |
| name | 自定义【后台看】 | input 元素名称 |
| value | 自定义【后台看】 | input 元素的值 |
| checked | checked | 默认被选中（单选框、复选框可以设置） |
| maxlength | 正整数 | 规定输入字段字符的最大长度，使用少 |
<form>
用户名：<input type=”text” name=”username” value=”请输入用户名”> <br> 【输入】
密码：<input type=”password” name=”pwd”> <br> 【密码输入】
性别：男<input type=”radio” name=”sex” value=”男”>
女<input type=”radio” name=”sex” value=”女”>
【多选一,name值一样】
上传头像：<input type=”file”>
<input type=“button” value=”获取短信验证码”>【结合JS使用】
<input type=”submit” value=”免费注册”>
</form>
注意:
- 对于radio单选框，必须使<input>的name具有相同的属性值，才能实现多选一。同理，复选框也要有相同的name值。
- 单选框和复选框可以设置checked属性，页面打开默认选择按钮。
- 设置<type>的值为submit，点击按钮后可把表单域 form 里的表单元素里面的值提交给后台。
- 设置 type="button"，普通按钮，后期结合 js 使用。
3.3.2 label 标签
<label>标签： input 元素定义标注。用于绑定一个表单源深路。
点击<label>标签内的文本时，浏览器自动将焦点转到或者选择对应的表单元素上。
<label for="sex"> 男 </label>
<input type="radio" name="sex" id="sex" />核心：<lable>标签的for属性 = 相关元素的id属性。
3.3.3 select 下拉表单元素
select 标签设置多个选项让用户选择，节约页面空间。
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>例子：
<body>
籍贯：
<select>
<option>陕西</option>
<option>山东</option>
<option>浙江</option>
</select>
</body>
注意：1. select 中至少包含一对 option。
2. 在 option 中定义属性selected=”selected”，当前项即为默认选项。
3.3.4 textarea 文本域表单元素
场景：输入内容较多时。文本域大小CSS实现。
<textarea rows="3" cols="20"> 文本内容 </textarea>
Tip：cols="每行字符数"，rows="显示的行数"
6014
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
