HTML基础（三）_什么用来定义一个用户输入区-CSDN博客

本文链接：https://blog.csdn.net/AD_gnai/article/details/104661227

0X11HTML表格

一、属性border

默认情况下，浏览器显示图片是没有边框的，即边框宽度为0。利用border属性可以为图片加上边框。border属性的参数值是数字，表示边框宽度所占的像素点数。

二、HTML表格

表格由<table>标签来定义。每个表格均有若干行（由<tr> 标签定义），每行被分割为若干单元格（由<td>标签定义）。

三、表格标签

1.表格标签用来创建一个表格。
2.语法：<table>...<table>
3.属性：
width和height属性设置表格的宽度和高度
border和bordercolor属性设置表格边框的像素值和颜色值
cellspacing和cellpadding属性设置单元格之间的空间大小和单元格边框与内部文字之间的空间大小。

四、行标签

1.行标签用来创建表格中的每一行。行标签只能放在表格标签对之间，并且行标签对之间不可以加入文本。
2.语法：<tr>...</tr>
3.属性：属性align、属性valign、属性bgcolor

五、表头标签`<th>...</th>`

1.表头标签用来设置表格头，通常是黑体字且在单元格内居中，该标签用来告诉浏览器将一个单元格的内容格式化为表头。
2.语法：<th>...</th>

六、单元格标签

1.单元格标签是用来创建表格中每一行里的每一个单元格，单元格标签只能放在行标签对之间。需要输入的文本放在单元格标签对之间。
2.语法：<td>...</td>
3.属性：属性width和height、属性align和valign、属性colspan和rowspan。
4.实例:

<body>
  <table border="1">
<tr bgcolor="#C0C0C0">
    <th width="130" height="50">姓名</th>
	<th width="130" height="50">语文</th>
	<th width="130" height="50">数学</th>
	<th width="130" height="50">英语</th>
</tr>
<tr>
    <td>张三</td>
	<td>85</td>
	<td>90</td>
	<td>95</td>
</tr>
<tr>
    <td>小明</td>
	<td>95</td>
	<td>80</td>
	<td>95</td>
</tr>
  </table>
</body>

0X12 HTML表单标签

一、表单（Form）

表单（Form）是HTML的一个重要部分，主要用于采集和提交用户输入的信息，使网页具有交互的功能。一般是将表单设计在一个HTML文档中，当用户填写完信息后做提交（submit）操作，表单的内容就被传送到服务器上，处理完毕后再将信息返回客户端。

二、表单标签

1.作用：表单标签用来创建一个表单，在标签对之间的都属于表单的内容。
2.语法：<form>...</form>
3.常用属性：属性action、属性method、属性target

三、用户输入区域标签`<input type="">`

1.`<input type="">`标签

表单中提供给用户的形式一般使用<input type="">标签来实现，此标签用来定义一个用户输入区，用户可以在其中输入信息。<input type="">标签有多种类型输入区域，由type属性决定。需要注意的是该标签必须放在表单标签之间。

2.单行文本输入框（input type=“text”）

实例：

<form>
   <p>username:<input type="text" name="fname" /></p>
 </form>

3.密码输入框（input type=“password”）

实例：

<form>
   <p>password:<input type="password" name="pwd" /></p>
 </form>

4.单选框（input type=“radio”）

实例：

<form>
<input type="radio" name="alpabet" value="a">A<br>
<input type="radio" name="alpabet" value="b">B
</form>

5.复选框（input type=“checkbox”）

实例：

<form>
<input type="checkbox" name="alpabet" value="a">A<br>
<input type="checkbox" name="alpabet" value="b">B
</form>

6.提交（input type=“submit”）

实例：

<form action="xx.php method="get">
   <p>username:<input type="text" name="fname" /><p>
   <p>password:<input type="password" name="pwd" /><p>
   <input type="submit" value="Submit" />
</form>

7.重置（input type=“reset”）

<form>
   <p>username:<input type="text" name="fname" /><p>
   <p>password:<input type="password" name="pwd" /><p>
   <input type="reset" value="Reset" />
</form>

8.图片提交

实例：

<form>
  <label>选择图片文件</label>
 <input name="imgfile" type="file" accept="image/gif, image/jpeg"/>
  <input name="upload" type="submit" value="Submit" />
</form>

9.上传（input type=“file”）

实例：

<form>
   <p><input type="file"></p>
   <input type="submit" value="submit" />
</form>