(2020-09-25)一起学习HTML

归纳:

表单标签:

  1. form  表单区域属性:
  2.  常用输入标签:input  属性:
  3.  type   text  文本框
  4.  password  密码框
  5.  radio   单选按钮,配合input的另外一个属性name一起来用,一组单选按钮的name值必须一致
  6. checkbox  复选按钮
  7. file     选择文件    默认只能选择一个文件,配合mutiple属性可以选择多个文件
  8.  button  按钮,按钮显示名可以通过value属性 设置
  9. submit  提交按钮,提交到action指定的资源上
  10. reset     重置
  11. image   图片按钮,配合src属性指定图片路径
  12. size    设置输入组件的大小
  13. maxlength  设置某些组件最多输入的字符数量
  14. 下拉列表:select
  15. 属性:mutiple  用来指定下拉列表可以被多选择
  16. 选择项:option  选择项,这是一个标签,用来设置选择项
  17.  属性:selected    指定下拉列表的默认值
  18.  标记:lable  用来设置某个标签的提示文字,通过lable的for属性取值为绑定标签的id值来实现
  19.   多行文本: textarea   通过设置属性rows和cols的值来设置多行文本区域的大小,注意这两个取值不能带单位 通过设置属性placeholder,来设置输入前的提示语

表格元素- <table>

  1. 表格中的行---<tr>
  2. 表格中的列---<td>
  3. 表格中的表头---<th>[居中/加粗]
  4. table标记的边框--border
  5. table标记的宽度--width
  6. table标记的高度--height
  7. table标记的水平对齐方式--align
  8. table标记的表格背景色--bgcolor
  9. table标记的表格边框色--bordercolor
  10. table标记的表格中的内容与边框之间的距离--cellpadding
  11. table标记的表格中的边框与边框之间的距离--cellspacing【默认是1px】
  12. tr标记的align属性--设置当前行的水平对齐方式
  13. tr标记的bgcolor属性--设置当前行的背景色
  14. tr标记的valign属性--设置当前行的垂直对齐方式【top/middle/bottom】
  15. td标记的align属性--设置当前列的水平对齐方式
  16. td标记的bgcolor属性--设置当前列的背景色
  17. td标记的valign属性--设置当前列的垂直对齐方式【top/middle/bottom】
  18. 合并单元格
  19. 水平方向合并单元格--跨列---colspan
  20. 垂直方向合并单元格--跨行---rowspan
  21. 删除多余的单元格

实例练习:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器的控制面板</title>
	</head>
	<body>
		<table border="1px" align="center" width="300px" height="400px"
			cellspacing="10px" bgcolor="lightblue">
			<tr height="70px" >
				<td colspan="5" align="right"><font size="7">0</font></td>
			</tr>
			<tr align="center" valign="middle">
				<td>MC</td>
				<td>MR</td>
				<td>MS</td>
				<td>M+</td>
				<td>M-</td>
			</tr>
			<tr align="center" valign="middle">
				<td>&lt;-</td>
				<td>CE</td>
				<td>C</td>
				<td>+/-</td>
				<td>√</td>
			</tr>
			<tr align="center" valign="middle">
				<td>7</td>
				<td>8</td>
				<td>9</td>
				<td>/</td>
				<td>%</td>
			</tr>
			<tr align="center" valign="middle">
				<td>4</td>
				<td>5</td>
				<td>6</td>
				<td>*</td>
				<td>1/x</td>
			</tr>
			<tr align="center" valign="middle">
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>-</td>
				<td rowspan="2">=</td>
			</tr>
			<tr align="center" valign="middle">
				<td colspan="2">0</td>
				<td>.</td>
				<td>+</td>
			</tr>
		</table>
	</body>
</html>

拓展:

实例练习:

学生档案:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器的控制面板</title>
	</head>
	<body>
		<table border="1px" align="center" width="300px" height="400px"
			cellspacing="10px" bgcolor="lightblue">
			<tr height="70px" >
				<td colspan="5" align="right"><font size="7">0</font></td>
			</tr>
			<tr align="center" valign="middle">
				<td>MC</td>
				<td>MR</td>
				<td>MS</td>
				<td>M+</td>
				<td>M-</td>
			</tr>
			<tr align="center" valign="middle">
				<td>&lt;-</td>
				<td>CE</td>
				<td>C</td>
				<td>+/-</td>
				<td>√</td>
			</tr>
			<tr align="center" valign="middle">
				<td>7</td>
				<td>8</td>
				<td>9</td>
				<td>/</td>
				<td>%</td>
			</tr>
			<tr align="center" valign="middle">
				<td>4</td>
				<td>5</td>
				<td>6</td>
				<td>*</td>
				<td>1/x</td>
			</tr>
			<tr align="center" valign="middle">
				<td>1</td>
				<td>2</td>
				<td>3</td>
				<td>-</td>
				<td rowspan="2">=</td>
			</tr>
			<tr align="center" valign="middle">
				<td colspan="2">0</td>
				<td>.</td>
				<td>+</td>
			</tr>
		</table>
	</body>
</html>

 

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页