表格标签
表格的主要作用
表格主要用于显示、展示数据，可以让数据的显示非常的规整。
表格的基本语法
表格框架：
<table>
<tr>
<td>单元格文字</td>
……
</tr>
……
</table>其中，<tr>是行标签，<td>是单元格标签，再加上表头单元格标签<th>。
表格属性
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left,center,right | 表格元素的对齐方式 |
| border | 1 或 "" | 表格边框有无，默认为 "" ，表示没有边框 |
| cellpadding | 像素值 | 规定单元格之间的空白，默认为 1px |
| cellspacing | 像素值 | 规定单元格之间的空白，默认为 2px |
| width | 像素值 或 百分比 | 规定表格的宽度 |
表格结构标签
使用场景：表格可能很长，为了更好的表示表格的语义，可以将表格分割成 表格头部 和 表格主体 两大部分。
在表格标签中，分别使用 <thead> 标签表示表格的头部区域，<tbody> 表示表格的主体区域，这样可以更好的分清表格结构。
合并单元格
合并单元格的方式：
- 跨行合并：rowspan = "合并单元格的个数"。
- 跨列合并：colspan = "合并单元格的个数"。
目标单元格： - 跨行：最上测单元格为目标单元格，写合并代码。
- 跨列：最左侧单元格为目标单元格，写合并代码。
列表标签
表格是用来显示数据的，列表是用来布局的。
列表最大的特点就是整齐、整洁、有序，用列表布局会更加自由和方便。
根据使用场景的不同，列表可以分为三大类：无序列表、有序列表、自定义列表。
无序列表 <ul>
无序列表的基本结构：
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
……
</ul>注意：
- 无序列表各个列表项之间没有顺序级别之分，是并列的。
<ul></ul>中只能嵌套<li></li>，在<ul></ul>中输入其他标签或文字的做法是不被允许的。<li></li>之间是一个容器，可以容纳任何元素。
有序列表 <ol>
有序列表的基本结构：
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
……
</ol>注意：
<ol></ol>中只能嵌套<li></li>，在<ol></ol>中输入其他标签或文字的做法是不被允许的。<li></li>之间是一个容器，可以容纳任何元素。- 有序列表带有自己的样式属性，实际使用时可以使用 CSS 设置。
自定义列表 <dl>
在 HTML 标签中，<dl> 标签用于自定义描述列表（或定义列表），该标签与 <dt> （定义项目/名字）和 <dd> （描述每一个项目/名字）一起使用。
自定义列表的基本结构：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词2解释2</dd>
</dl>注意：
<dl></dl>中只能包含<dl></dl>或<dd></dd>。<dl></dl>和<dd></dd>个数没有限制，通常是一个<dl></dl>对应多个<dd></dd>。
表单标签
使用表单的目的是为了收集用户信息
在 HTML 中，一个完整的表单通常由 表单域、表单控件（表单元素）、提示信息 三个部分组成。
表单域
表单域 是一个包含表单元素的区域。
在 HTML 中，<form>用于定义表单域。
表单域的基本结构：
<form action = "地址" method = "提交方式(get/post)" name = "表单域名称">
各类表单控件
</form>表单元素
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。
<input> 输入表单元素
在 <input> 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（如文本、复选框、掩码后的文本控件、单选框、按钮等）。
举例：
<input type = "属性值" />其中 type 属性的属性值及其描述如下：
| 属性值 | 描述 |
|---|---|
| button | 定义可点击按钮 |
| checkbox | 定义复选框 |
| file | 定义输入字段和“浏览”按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段。该字段中的字符被掩码（******） |
| radio | 定义单选按钮 |
| reset | 定义重置按钮 |
| submit | 定义提交按钮 |
| text | 定义单行的输入字段，默认宽度为 20 个字符 |
除以上部份外，<input>标签还可以包括以下的属性：
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 自定义 | 定义 input 元素名称 |
| value | 自定义 | 规定 input 元素的值 |
| checked | checked | 规定此 input 元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字段中的字符最大长度 |
注意：
- name 是表单元素的名字，其中 单选按钮 和 复选按钮 必须有相同的 value 值。
- checked 主要针对 单选框 和 复选框，用于默认选择。
<label> 定义标签
<label> 标签为 input 元素定义标注。<label> 标签用于绑定一个表单元素，当点击 <lable> 标签内的文本时，会自动聚焦到对应的表单元素上，增强用户体验。
语法规范：
<label for = "sex">男</label>
<input type = "radio" name = "sex" id = "sex" />注意：
- 是
<label>不是<lable>（重要）。
<select> 下拉表单元素
下拉列表，不多解释。
语法规范：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
……
</select>注意：
<select>中至少包含一对<option>。- 在
<option>中定义 select = "selected" 时，可以设置当前项为默认项。
<textarea> 文本域元素
多行文本输入，不多解释。
语法规范：
<textarea row = "3" cols = "20">
默认文本内容
</textarea>注意：
- row 显示几行，cols 每行显示多少字（一般来说，使用 CSS 来实现）。
本文由 小但 创作
全文共：3263个字
采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载，均为作者原创，转载前请务必署名
最后编辑时间为: Jul 4, 2020 at 10:20 pm