第五课 HTML（下）——表格、表单、列表标签和综合案例小说排行榜

黑芝麻汤圆297

已于 2023-11-28 20:15:11 修改

阅读量212

点赞数

文章标签： html 前端

于 2023-11-11 17:17:16 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_62660777/article/details/134231522

版权

1表格标签

1表格的主要作用

表格用来清楚的显示数据

2表格的基本语法

<td>单元格的内容</td>

</tr>

</table>

表格有三个标签且都是双标签，table是表格的骨架，tr是表格的行数，td是单元格的内容

3表头单元格标签

<th>表头单元格也是单元格，突出显示表格的第一行，里面的内容会加粗居中

4表格相关属性

属性名	属性值	描述
align	left、center、right	表格相对于周围的对齐方式
border	1或--	规定单元格有无边框，默认"",表示无边框
cellpadding	像素值	规定单元格内容与单元格边缘的距离，默认1像素
cellspacing	像素值	规定两两单元格的距离，默认2像素
width	像素值或百分比	规定表格的宽度

这些属性都要写到表格标签table里面去

应用如下：

小说排行榜设计

5表格结构标签

<thead></thead>表格的头部标签；<thead>内部必须有<tr>,一般位于第一行

<tbody></tbody>表格的主体区域

写好表格结构后折叠效果展示：

6合并单元格

1合并单元格的方式

跨行合并：rowspan="合并单元格的个数"

跨列合并：colspan="合并单元格的个数"

2目标单元格（写合并的代码）

跨行合并：最上侧为目标单元格

跨列合并：最左侧为目标单元格

3合并单元格三部曲

先确定跨行还是跨列；

找目标单元格，写合并方式=合并单元格的数量；如：<td colspan="2"></td>;

删除多余单元格

2列表标签

列表主要用来布局

列表分为无序列表、有序列表、自定义列表

<ul>标签用来表示无序列表，<ul>中有很多小丽<li>，<li>标签用来定义列表项

1无序列表（重点）

无序列表的语法结构：

<ul>

</ul>

注：在<ul></ul>标签中只能嵌套<li></li>标签，不可以直接输入文字和其他标签

在<li></li>标签中可以嵌套任何东西

无序列表各个列表项之间没有顺序级别的区别

2有序列表

有序列表中使用的标签<ol>,<ol>中在包含<li>标签，应用与需要排列有一定顺序的

<ol>

</ol>

3自定义列表

自定义列表<dl>标签，包含<dt>名词<dd>对名词的解释

自定义列表的语法结构如下：

<dl>

</dl>

注：<dl>里面只能包含<dt><dd>,一个<dt>一般对多个<dd>；<dt><dd>里面可放任意的标签

3表单标签

1表单的作用：表单用来收集用户信息（多用于注册页面）

2表单的组成

表单由表单域、表单元素、和提示信息组成。

3表单域

表单域就是包含表单元素的一片区域；用<form>标签定义表单域，用来收集用户信息和传递

<form>会把范围内表单信息提交给服务器

表单域语法如下：

各种表单元素控件

</form>

常用属性：

属性	属性值	作用
action	url地址	表单域信息提交给谁
method	get/post	表单数据提交方式
name	名称	用于区别表单

4表单元素

表单元素是允许用户输入内容的控件，有选择男女性别的，有填写手机号码文本格式的

<input>输入表单元素

1<input>标签必须包含type 属性，根据type的不同值，有不一样的形式，如文本字段、复选框、单选按钮

注：<input />是一个单标签

2属性值text和password的应用

注释快捷键：ctrl+/

3属性值radio单选框和checkbox复选框的应用

<input>标签其他属性有：
4其中name和value是每个元素都要有的属性值，主要给后台人员看

加表单名字name时，要求单选按钮和复选框要有相同的name值

属性	属性值	描述
name	用户自己定义	定义input元素名称
value	用户自己定义	规定inout元素的值
checked	checked	规定input元素首次加载时应被选中
maxlength	正整数	规定输入字段字符的最大长度