表格标签、列表标签、表单标签

静默的星星

已于 2023-09-04 16:40:42 修改

阅读量94

点赞数

分类专栏： HTML+CSS笔记文章标签：笔记 html5 前端

于 2023-08-02 13:42:03 首次发布

本文链接：https://blog.csdn.net/m0_73645234/article/details/132044959

版权

HTML+CSS笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1. 表格标签

1.1 表格的主要作用

表格主要用于显示、展示数据。一个清爽简约的表格能把繁杂的数据表现得很有条理。

1.2 表格的基本语法

<table>
           <tr>
<td>单元格内的文字</td>

......
           </tr>

......
       </table>

1. <table> </table>是用于定义表格的标签。

2. <tr> </tr>标签用于定义表格中的行，必须嵌套在<table> </table>标签中。

3. <td> </td>用于定义表格中的单元格，必须嵌套在 <tr> </tr>标签中。

4. 字母td 指表格数据（table data），即数据单元格的内容。

1.3 表头单元格标签

一般表头单元格位于表格第一行或第一列，表头单元格里面的文本内容加粗居中显示。

<th>标签表示HTML表格的表头部分（table head）

<table>
           <tr>
               <th>姓名</th>

......
           </tr>

.......
   </table>

1.4 表格属性

表格属性实际开发中不常用，后面通过CSS来设置。

目的：记住英语单词，便于后面css使用。

注：表格属性要写到<table>标签里面去。

案例：今日小说排行榜

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table align="center" border="1" cellpadding="10" cellspacing="0" width="500" height="400">
			<tr>
				<th>排名</th> 
				<th>关键词</th>
				<th>趋势</th> 
				<th>进入搜索</th> 
				<th>最近七日</th> 
				<th>相关链接</th>
			</tr>
			
			<tr>
				<th>1</th>
				<th>鬼吹灯</th> 
				<th><img src="down.jpg"/></th> 
				<th>456</th> <th>123</th> 
				<th><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </th>
			</tr>
			
			<tr>
				<th>1</th> 
				<th>鬼吹灯</th> 
				<th><img src="down.jpg"/></th> 
				<th>456</th> 
				<th>123</th>
				<th><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </th>
			</tr>
			
			<tr>
				<th>3</th> 
				<th>西游记</th> 
				<th><img src="up.jpg"/></th> 
				<th>456</th> 
				<th>123</th> 
				<th><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </th>
			</tr>
			
			<tr>
				<th>1</th> 
				<th>鬼吹灯</th> 
				<th><img src="down.jpg"/></th> 
				<th>456</th> 
				<th>123</th>
				<th><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </th>
			</tr>
			
			<tr>
				<th>1</th> 
				<th>鬼吹灯</th> 
				<th><img src="down.jpg"/></th> 
				<th>456</th> 
				<th>123</th>
				<th><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </th>
			</tr>
			
			<tr>
				<th>1</th> 
				<th>鬼吹灯</th> 
				<th><img src="down.jpg"/></th> 
				<th>456</th> 
				<th>123</th>
				<th><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </th>
			</tr>
		</table>
	</body>
</html>

1.5 表格结构标签

当表格很长时，可以将表格分割成表格头部和表格主体两大部分。

1. <thead> </thead>标签：表格头部区域。内部必须拥有<tr>标签，一般位于第一行。

2. <tbody> </tbody>标签：表格主体区域。主要用于放数据本体。

3. 以上标签都是放在<table></table>标签中。

1.6 合并单元格

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

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

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

$\bullet$ 跨行：最上侧单元格为目标单元格，写合并代码。

$\bullet$ 跨列：最左侧单元格为目标单元格，写合并代码。

合并单元格三部曲：

1. 先确定是跨行还是跨列合并

2. 找到目标单元格，写合并方式=合并的单元格数量。比如：<td colsan="2"></td>

3. 删除多余单元格

2. 列表标签

列表是用来布局的。

列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。

根据情景不同，列表可分为三大类：无序列表、有序列表和自定义列表。

2.1 无序列表(重点）

<ul>标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义。

无序列表的基本语法格式如下：

<ul>
           <li>列表项1</li>
           <li>列表项2</li>
           <li>列表项3</li>

........
       </ul>

1. 无序列表的各个列表项之间没有顺序级别之分，是并列的。

2. <ul> </ul> 中只能嵌套<li> </li>，在<ul> </ul>标签中不能嵌套其它标签和文字。

3. <li> </li>之间可以嵌套任何元素。

4. 无序列表会带有自己样式属性，但在实际使用时，我们会使用CSS来设置。

2.2 有序列表（理解）

<ol> 标签用于定义有序列表，列表排序以数字来显示，并使用<li>标签来定义列表项。

有序列表的基本语法格式如下：

       <ol>

<li>列表项1</li>
           <li>列表项2</li>
           <li>列表项3</li>

........
       </ol>

2. <ol> </ol> 中只能嵌套<li> </li>，在<ol> </ol>标签中不能嵌套其它标签和文字。

3. <li> </li>之间可以嵌套任何元素。

4. 有序列表会带有自己样式属性，但在实际使用时，我们会使用CSS来设置。

2.3 自定义列表

自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。

自定义列表的基本语法格式如下：

       <dl>
           <dt>名词1</dt>
           <dd>名词1的解释1</dd>
           <dd>名词1的解释2</dd>
       </dl>

1. <dl></dl>中只能嵌套<dt>和<dd>。

2. <dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>。

3.<dt>和<dd>属于并列关系，不是包含关系。

2.4 列表总结

3. 表单标签

3.1 为什么需要表单

使用表单的目的：收集用户信息。

3.2 表单的组成

表单通常有表单域、表单控件（也称表单元素）、提示信息三部分组成。

3.3 表单域

表单域是一个包含表单元素的区域。

在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递。

<form>会把它范围内的表单元素信息提交给服务器。

       <form action="url地址" method="提交方式" name="表单域名称">
           各种表单元素控件
       </form>

3.4 表单控件（表单元素）

在表单域中可以输入各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。

1. input输入表单元素

2. select下拉表单元素

3.textarea文本域元素

3.4.1 input 表单元素

<input type="属性值"/>

1. <input />标签为单标签。

2. type属性设置不同的属性值用来指定不同的控件类型

type属性的属性值如下：

除type属性外，<input >标签还有其他很多属性，常用属性如下：

1. name和value是每个表单元素都有的属性值，主要给后台人员使用。

2. name表单元素的名字，要求单选按钮和复选框要有相同的name值。

3. checked属性主要针对单选按钮和复选框。

3.4.2 lable标签

<lable>标签为input元素定义标注（标签）。

<lable>标签用于绑定一个表单元素，当点击lable标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。

语法

<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>

核心：<label>标签的for属性应当与相关元素的id属性相同。

3.4.3 select表单元素

有多个选项让用户选择，并且想要节约页面空间时，可以使用<select>标签控件定义下拉列表。

语法

           <select >
               <option>选项1</option>
               <option>选项2</option>
               <option>选项3</option>

......
           </select>

1. <select>中至少包含一对<option>

2. 在<option>中定义selected="selected"时，当前项即为默认选中项。

3.4.4 textarea表单元素

用户输入内用较多的情况下，可以使用<textarea>标签。

在表单元素中，<textarea>标签用于定义多行文本输入的控件，常用于留言板、评论。

语法

       <textarea rows="3" cols="20">
           文本内容
       </textarea>

1. 通过 <textarea>标签可以轻松地创建多行文本输入框。

2.rows="显示的行数"， cols="每行中的字符数"，实际开发中不会使用，都是用CSS来改变大小。

静默的星星

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表格标签、列表标签、表单标签

1. 表格标签1.1 表格的主要作用1.2 表格的基本语法1.3 表头单元格标签1.4 表格属性编辑1.5 表格结构标签1.6 合并单元格2. 列表标签2.1无序列表(重点）2.2 有序列表（理解）2.3 自定义列表2.4 列表总结3. 表单标签3.1 为什么需要表单3.2 表单的组成3.3 表单域编辑3.4 表单控件（表单元素）3.4.1input 表单元素3.4.2 lable标签3.4.3select表单
复制链接

扫一扫