• 4、HTML——表格标签、表单标签

    目录

    一、表格标签：table—tr—td/th

    1、合并单元格 

    1.1 合并同行不同列的单元格（列合并）

    1.2  合并同列不同行的单元格（行合并） 

    二、表单标签：form

    1、form标签

    2、input输入标签 

    2.1  type属性值：text；password

    2.2  type属性值：radio

    2.3  type属性值：checkbox

    2.4  type属性值：file

    2.5  下拉列表标签：select—option 

    2.6  文本域标签：textarea

    2.7  type属性值：reset重置按钮

    2.8  type属性值：submit 

    2.9  type属性值：image图片提交按钮

    2.10  type属性值：button普通按钮

    一、表格标签：table—tr—td/th

    tr标签：表示表格中的每一行；

    td标签：表示表格中的每一列（可以理解为每一行中的单元格）

    border属性：设置最外部的边框的粗细，一般设置为1px

    width属性：设置表格宽度

    height属性：设置表格高度

    cellspacing属性：设置单元格与单元格之间、单元格与表格边框之间的距离，一般设置为0

    cellpadding属性：设置单元格中的内容与单元格边框的距离

    align属性：设置表格在浏览器中的水平对齐方式，默认为left左对齐，常用居中对齐center

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>表格标签title>
    6. 	head>
    7. 	<body>
    8. 		<table border="1px" width="800px" height="500px" cellspacing="0px" cellpadding="20px" align="center">
    9. 			
    10. 			<tr>
    11. 				<td>1.1td>
    12. 				<td>1.2td>
    13. 				<td>1.3td>
    14. 				<td>1.4td>
    15. 			tr>
    16. 			
    17. 			<tr>
    18. 				<td>2.1td>
    19. 				<td>2.2td>
    20. 				<td>2.3td>
    21. 				<td>2.4td>
    22. 			tr>
    23. 			
    24. 			<tr>
    25. 				<td>3.1td>
    26. 				<td>3.2td>
    27. 				<td>3.3td>
    28. 				<td>3.4td>
    29. 			tr>
    30. 			
    31. 			<tr>
    32. 				<td>4.1td>
    33. 				<td>4.2td>
    34. 				<td>4.3td>
    35. 				<td>4.4td>
    36. 			tr>
    37. 		table>
    38. 	body>
    39. html>

    标签：

    align属性：设置表格中每行的单元格内容水平对齐方式 ；

    标签：

    align属性：设置表格中每个单元格中的内容对齐方式

    标签：单元格标签，必须写在标签内，一般表格的第一行会使用标签，使用标签，单元格中的内容会加粗居中显示

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>表格标签title>
    6. 	head>
    7. 	<body>
    8. 		<table border="1px" width="800px" height="500px" cellspacing="0px" cellpadding="20px" align="center">
    9. 			
    10. 			<tr>
    11. 				<th>居中显示th>
    12. 				<th>居中显示th>
    13. 				<th>居中显示th>
    14. 				<th>居中显示th>
    15. 			tr>
    16. 			
    17. 			<tr align="center">
    18. 				<td>居中显示td>
    19. 				<td>居中显示td>
    20. 				<td>居中显示td>
    21. 				<td>居中显示td>
    22. 			tr>
    23. 			
    24. 			<tr>
    25. 				<td align="center">居中显示td>
    26. 				<td>3.2td>
    27. 				<td>3.3td>
    28. 				<td>3.4td>
    29. 			tr>
    30. 			
    31. 			<tr>
    32. 				<td>4.1td>
    33. 				<td>4.2td>
    34. 				<td>4.3td>
    35. 				<td>4.4td>
    36. 			tr>
    37. 		table>
    38. 	body>
    39. html>

    1、合并单元格 

    合并后的单元格变成了一个，不必再声明合并前的单元格

    1.1 合并同行不同列的单元格（列合并）

    在当前的第一个单元格里面写一个列合并：colspan属性

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>表格标签title>
    6. 	head>
    7. 	<body>
    8. 		<table border="1px" width="800px" height="500px" cellspacing="0px" cellpadding="20px" align="center">
    9. 			
    10. 			<tr>
    11. 				<th colspan="2">1.1th>
    12. 				
    13. 				<th>1.3th>
    14. 				<th>1.4th>
    15. 			tr>
    16. 			
    17. 			<tr>
    18. 				<td colspan="3">2.1td>
    19. 				
    20. 				<td>2.4td>
    21. 			tr>
    22. 			
    23. 			<tr>
    24. 				<td colspan="4">3.1td>
    25. 				
    26. 			tr>
    27. 			
    28. 			<tr>
    29. 				<td>4.1td>
    30. 				<td>4.2td>
    31. 				<td>4.3td>
    32. 				<td>4.4td>
    33. 			tr>
    34. 		table>
    35. 	body>
    36. html>

    1.2  合并同列不同行的单元格（行合并） 

    在要合并的第一个单元格总写一个行合并：rowspan属性

    二、表单标签：form

    form标签：表单标签

    常用属性：

    --->action属性：设置表单内容提交后的处理程序，一般程序使用jsp/asp/php等语言编写

    --->method属性：设置表单内容的提交方式，常用值有get和post，post提交方式比get更安全

    input标签：输入标签，是一个单标签 

    常用属性：

    type属性：设置输入的类型,常用值有:

    --->text：文本框；

    --->password：密码框输入的内容加密显示；

    --->radio：单选按钮，需要借助name属性实现单选操作

    --->checkbox：复选框，可以选择0-n个选项

    checked属性：属性值"checked":设置默认选择

    --->file：文件选择

    --->reset：重置按钮。点击重置按钮，表单内容会恢复到表单最开始的状态。

    --->submit：提交按钮，点击提交按钮，会将表单中的内容提交到action属性设置的属性值的程序中

    --->image：图片提交按钮，效果与submit按钮一样

    --->button：普通按钮，一般会结合JavaScript一起使用

    select标签：下拉列表

    option标签：写在select标签内，表示下拉列表的选项

    --->selected="selected"：设置下拉列表默认选项

    textarea标签：文本域，常用属性值

    --->cols：设置文本域的列数（宽度）

    --->rows：设置文本与的行数（高度）

    1、form标签

    form标签：表单标签

    常用属性：

    --->action属性：设置表单内容提交后的处理程序，一般程序使用jsp/asp/php等语言编写

    --->method属性：设置表单内容的提交方式，常用值有get和post，post提交方式比get更安全

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>表单title>
    6. 	head>
    7. 	<body>
    8. 		<form action="" method="post">
    9. 			
    10. 		form>
    11. 	body>
    12. html>

    2、input输入标签 

    input标签：输入标签，是一个单标签 

    常用属性：

    type属性：设置输入的类型,常用值有:

    --->text：文本框；

    --->password：密码框输入的内容加密显示；

    --->radio：单选按钮，需要借助name属性实现单选操作

    --->checkbox：复选框，可以选择0-n个选项

    --->checked="checked":设置默认选择

    --->file：文件选择

    --->reset：重置按钮。点击重置按钮，表单内容会恢复到表单最开始的状态。

    --->submit：提交按钮，点击提交按钮，会将表单中的内容提交到action属性设置的属性值的程序中

    --->image：图片提交按钮，效果与submit按钮一样

    --->button：普通按钮，一般会结合JavaScript一起使用

    2.1  type属性值：text；password

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>表单title>
    6. 	head>
    7. 	<body>
    8. 		<form action="" method="post">
    9. 			账号：<input type="text" /><br />
    10. 			密码：<input type="password" /><br />
    11. 		form>
    12. 	body>
    13. html>

    2.2  type属性值：radio

    radio：单选按钮，需要借助name属性实现单选操作（name属性值相同的只能选中一个）

    checked属性：属性值"checked":设置默认选择

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>表单title>
    6. 	head>
    7. 	<body>
    8. 		<form action="" method="post">
    9. 			账号：<input type="text" /><br />
    10. 			密码：<input type="password" /><br />
    11. 			性别：<input type="radio" name="sex" />男
    12. 			<input type="radio" name="sex"  checked="checked"/>女<br />
    13. 		form>
    14. 	body>
    15. html>

    2.3  type属性值：checkbox

     checkbox：复选框，可以选择0-n个选项

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>表单title>
    6. 	head>
    7. 	<body>
    8. 		<form action="" method="post">
    9. 			账号：<input type="text" /><br />
    10. 			密码：<input type="password" /><br />
    11. 			性别：<input type="radio" name="sex" />男
    12. 			<input type="radio" name="sex"  checked="checked"/>女<br />
    13. 			爱好：<input type="checkbox" />篮球
    14. 			<input type="checkbox" checked="checked"/>乒乓球
    15. 			<input type="checkbox" />足球
    16. 			<input type="checkbox" checked="checked"/>羽毛球
    17. 		form>
    18. 	body>
    19. html>

    2.4  type属性值：file

    file：文件选择

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>表单title>
    6. 	head>
    7. 	<body>
    8. 		<form action="" method="post">
    9. 			账号：<input type="text" /><br />
    10. 			密码：<input type="password" /><br />
    11. 			性别：<input type="radio" name="sex" />男
    12. 			<input type="radio" name="sex"  checked="checked"/>女<br />
    13. 			爱好：<input type="checkbox" />篮球
    14. 			<input type="checkbox" checked="checked"/>乒乓球
    15. 			<input type="checkbox" />足球
    16. 			<input type="checkbox" checked="checked"/>羽毛球<br />
    17. 			照片：<input type="file"><br />
    18. 		form>
    19. 	body>
    20. html>

    2.5  下拉列表标签：select—option 

    select标签：下拉列表

    option标签：写在select标签内，表示下拉列表的选项

    --->selected="selected"：设置下拉列表默认选项

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>表单title>
    6. 	head>
    7. 	<body>
    8. 		<form action="" method="post">
    9. 			账号：<input type="text" /><br />
    10. 			密码：<input type="password" /><br />
    11. 			性别：<input type="radio" name="sex" />男
    12. 			<input type="radio" name="sex"  checked="checked"/>女<br />
    13. 			爱好：<input type="checkbox" />篮球
    14. 			<input type="checkbox" checked="checked"/>乒乓球
    15. 			<input type="checkbox" />足球
    16. 			<input type="checkbox" checked="checked"/>羽毛球<br />
    17. 			照片：<input type="file"><br />
    18. 			生日：<select>
    19. 				<option>2000option>
    20. 				<option>2001option>
    21. 				<option>2002option>
    22. 				<option>2003option>
    23. 				<option>2004option>
    24. 				<option>2005option>
    25. 				<option>2006option>
    26. 				<option>2007option>
    27. 				<option>2008option>
    28. 				<option>2009option>
    29. 				<option selected="selected">2010option>
    30. 			select>年
    31. 			<select>
    32. 				<option>1option>
    33. 				<option>2option>
    34. 				<option>3option>
    35. 				<option>4option>
    36. 				<option>5option>
    37. 				<option>6option>
    38. 				<option>7option>
    39. 				<option>8option>
    40. 				<option>9option>
    41. 				<option>10option>
    42. 				<option>11option>
    43. 				<option>12option>
    44. 			select>月
    45. 			<select>
    46. 				<option>1option>
    47. 				<option>2option>
    48. 				<option>3option>
    49. 				<option>4option>
    50. 				<option>5option>
    51. 				<option>6option>
    52. 				<option>7option>
    53. 				<option>8option>
    54. 				<option>9option>
    55. 				<option>10option>
    56. 			select>日
    57. 		form>
    58. 	body>
    59. html>

    2.6  文本域标签：textarea

    创建一个可变大小的文本域，;

    cols属性：设置文本域的列数（宽度）

    rows属性：设置文本域的行数（高度）

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>表单title>
    6. 	head>
    7. 	<body>
    8. 		<form action="" method="post">
    9. 			账号：<input type="text" /><br />
    10. 			密码：<input type="password" /><br />
    11. 			性别：<input type="radio" name="sex" />男
    12. 			<input type="radio" name="sex"  checked="checked"/>女<br />
    13. 			爱好：<input type="checkbox" />篮球
    14. 			<input type="checkbox" checked="checked"/>乒乓球
    15. 			<input type="checkbox" />足球
    16. 			<input type="checkbox" checked="checked"/>羽毛球<br />
    17. 			照片：<input type="file"><br />
    18. 			生日：<select>
    19. 				<option>2000option>
    20. 				<option>2001option>
    21. 				<option>2002option>
    22. 				<option>2003option>
    23. 				<option>2004option>
    24. 				<option>2005option>
    25. 				<option>2006option>
    26. 				<option>2007option>
    27. 				<option>2008option>
    28. 				<option>2009option>
    29. 				<option selected="selected">2010option>
    30. 			select>年
    31. 			<select>
    32. 				<option>1option>
    33. 				<option>2option>
    34. 				<option>3option>
    35. 				<option>4option>
    36. 				<option>5option>
    37. 				<option>6option>
    38. 				<option>7option>
    39. 				<option>8option>
    40. 				<option>9option>
    41. 				<option>10option>
    42. 				<option>11option>
    43. 				<option>12option>
    44. 			select>月
    45. 			<select>
    46. 				<option>1option>
    47. 				<option>2option>
    48. 				<option>3option>
    49. 				<option>4option>
    50. 				<option>5option>
    51. 				<option>6option>
    52. 				<option>7option>
    53. 				<option>8option>
    54. 				<option>9option>
    55. 				<option>10option>
    56. 			select>日<br />
    57. 			自我介绍：<textarea cols="30" rows="10">请介绍一下你自己.......textarea><br />
    58. 		form>
    59. 	body>
    60. html>

    2.7  type属性值：reset重置按钮

     点击重置按钮，表单内容会恢复到表单最开始的状态。

    可通过value属性修改“重置”

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8">
    5. 		<title>表单title>
    6. 	head>
    7. 	<body>
    8. 		<form action="" method="post">
    9. 			账号：<input type="text" /><br />
    10. 			密码：<input type="password" /><br />
    11. 			性别：<input type="radio" name="sex" />男
    12. 			<input type="radio" name="sex"  checked="checked"/>女<br />
    13. 			爱好：<input type="checkbox" />篮球
    14. 			<input type="checkbox" checked="checked"/>乒乓球
    15. 			<input type="checkbox" />足球
    16. 			<input type="checkbox" checked="checked"/>羽毛球<br />
    17. 			照片：<input type="file"><br />
    18. 			生日：<select>
    19. 				<option>2000option>
    20. 				<option>2001option>
    21. 				<option>2002option>
    22. 				<option>2003option>
    23. 				<option>2004option>
    24. 				<option>2005option>
    25. 				<option>2006option>
    26. 				<option>2007option>
    27. 				<option>2008option>
    28. 				<option>2009option>
    29. 				<option selected="selected">2010option>
    30. 			select>年
    31. 			<select>
    32. 				<option>1option>
    33. 				<option>2option>
    34. 				<option>3option>
    35. 				<option>4option>
    36. 				<option>5option>
    37. 				<option>6option>
    38. 				<option>7option>
    39. 				<option>8option>
    40. 				<option>9option>
    41. 				<option>10option>
    42. 				<option>11option>
    43. 				<option>12option>
    44. 			select>月
    45. 			<select>
    46. 				<option>1option>
    47. 				<option>2option>
    48. 				<option>3option>
    49. 				<option>4option>
    50. 				<option>5option>
    51. 				<option>6option>
    52. 				<option>7option>
    53. 				<option>8option>
    54. 				<option>9option>
    55. 				<option>10option>
    56. 			select>日<br />
    57. 			自我介绍：<textarea cols="30" rows="10">请介绍一下你自己.......textarea><br />
    58. 			<input type="reset" />
    59. 		form>
    60. 	body>
    61. html>

    2.8  type属性值：submit 

    点击提交按钮，会将表单中的内容提交到action属性设置的属性值的程序中 

    可通过value属性修改submit属性值“提交”

    <input type="submit" value="登录" />

    2.9  type属性值：image图片提交按钮

    图片提交按钮，效果与submit按钮一样

    src属性设置图片路径

    <input type="image" src="img/登录.png" />

    2.10  type属性值：button普通按钮

    暂时点了没什么用，一般会结合JavaScript一起使用

    onclick属性：点击属性

    1. <input type="button" value="普通按钮，现在点没用" /><br />
    2. <input type="button" value="点我一下" onclick="alert('你点我干嘛')" />

    <input type="button" value="删除" onclick="confirm('确定删除吗？')" />

  • 相关阅读:
    【ppt技巧】将幻灯片里的图片背景设置为透明
    ZooKeeper 7：数据读写——原子广播协议ZAB
    如何低成本快速搭建企业知识库？
    UVA297 四分树 Quadtrees
    4、security之自定义数据源
    【技巧】如何设置Excel表只输入固定内容？
    商品管理系统数据库设计--SQL Server
    Alkyne-PEG-CHO，炔基PEG醛基
    【MongoDB】集群搭建实战 | 副本集 Replica-Set | 分片集群 Shard-Cluster | 安全认证
    2023最新SSM计算机毕业设计选题大全（附源码+LW）之java宠物领养平台2x520
  • 原文地址：https://blog.csdn.net/CSDN_Loveletter/article/details/127885639