html第二天

最新推荐文章于 2024-11-01 15:19:31 发布

yiranzaichenmi

最新推荐文章于 2024-11-01 15:19:31 发布

阅读量116

点赞数

文章标签： html

本文链接：https://blog.csdn.net/yiranzaichenmi/article/details/109044944

版权

这篇博客详细介绍了HTML中的表格、列表和表单。表格包括作用、组成、结构标签及属性，如`<table>`、`<tr>`、`<th>`、`<td>`，并讲解了如何跨行、跨列合并单元格。列表部分阐述了列表的作用及类型，如无序列表`<ul>`和有序列表`<ol>`。接着，重点解析了表单的构成，包括`<form>`、提示信息和不同类型的表单控件如`<input>`、`<select>`、`<textarea>`，并讨论了相关属性如`type`、`name`、`value`等。

摘要由CSDN通过智能技术生成

今天学习了三个大的分类

.表格
.列表
.表单

1.表单
1.表格的作用：用于展示、显示数据。
2.表格的组成：

<table></table>用于定义表格的标签。
<caption></caption>用于定义表格的标题，写在表格内，紧跟在table后边。
<tr></tr>用于定义表格的行，写在table标签里边。
<th></th>用于定义表格的表头，显示的文字会加粗，卸载tr标签里。
<td></td>用于定义表格的单元格，卸载tr标签里。

3.表格的结构标签：

<thead></thead>定义表格的头部区域，内部必须有tr标签，一般位于第一行
<tbody></tbody>定义表格的主题区域，用于放置数据内容。

4.表格的属性：

align规定表格相对于周围元素的对齐方式，left左对齐、center居中对齐、right右对齐。
border规定表格是否有边框，1或者""，默认""没有边框。
cellpadding规定单元格内容和单元格边框的距离，像素值，默认1像素。
cellspacing规定单元格和单元格之间的距离，像素值，默认2像素。
wedth规定表格的宽度。
height规定表格的高度。

5.合并单元格：

rowspan跨行合并，合并单元格个数。
colspan跨列合并，合并单元格个数。
三大步骤： 1.先确定是跨行还是跨列合并 2.根据 "先上后下先左后右"的原则找到目标单元格 (rowspan和colspan 是写到目标单元格上的) 3.删除单元格，删除的个数 = 合并的个数 - 1 。

2.列表
1.列表的作用：用来布局的，可以整齐、有序的展示数据，用列表做布局会更加自由和方便。
2.无序列表：<ul><li></li></ul>各个列表项之间没有顺序级别之分，是并列的,且<ul>标签里只能嵌套<li>标签。
3.有序列表：<ol><li></li></ol>各个列表项按数字顺序排列显示，且

标签里只能嵌套 <li>标签。
4.注意事项： <ol>和 <ul>标签只能嵌套 <li>标签， <li>标签可以放入任何元素。
5.自定义列表： <dl></dl>自定义列表，只允许包含 dt 和 dd 标签， <dt></dt>用于存放关键词（term）的内容，与 dd 是兄弟关系，不过后续的 dd 都
跟随前面的 dt, <dd></dd>用于存放前面 dt 关键词对应的列表项内容。

3.列表
1.列表的作用：收集用户信息,跟用户进行交互。
2.完整的表单由三部分组成：

表单域

1.<form> </form>定义表单域，会把它范围内的表单元素信息提交给服务器
2.常用属性：…
提示信息
表单控件（表单元素）

1.<input />用于收集用户信息。
属性：type：
一.type=“text” 定义单行的输入字段,用户可在其中输入文本,默认宽7度为20个字符. 2.type=“password” 定义密码字段,该字段中的字符被掩码.3.type=“radio” 定义单选框,必须要有相同的name值. 4.type=“checkbox” 定义复选框,必须要有相同的name值. 5.type=“button” 定义可点击的普通按钮，多数情况下,用于通过JavaScript启动脚本.6.type=“submit” 定义提交按钮,会把表单数据发送到服务器.7.type=“reset” 定义重置按钮,会清除表单中的所有数据.8.type=“image” 定义图像形式的提交按钮,必须要有src路径.9.type=“file”(文件域) 定义输入字段和"浏览"按钮,供文件上传.
2.name:定义input元素的名称,用户自定义,区别不同的表单控件.
3.value:定义input元素的值,用户自定义,表单元素默认显示内容/提示.
4.checker:规定input元素默认被选中,主要针对于单选框和复选框.
5.maxlength:规定输入字段中的字符的最大长度,正整数.
二.<select> </select>定义下拉列表,<select> <option> </option> </select>,在<option> 中定义 selected =“ selected " 时，当前项即为默认选中项.
三.<textarea> </textarea>定义多行文本输入(文本域)，cols=“每行中的字符数” ，rows=“显示的行数”，在实际开发中不会使用，都是用 CSS 来改变大小。
四.<lable> </lable>input定义标注标签，“for” 属性，属性值=相关元素的 id 值，用于绑定一个表单元素, 当点击标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验。
五.<input>元素,<select>元素,<textarea>元素都应该包含在<form>表单域里面,并且有 name 属性.