HTML基础复习2

6.表格

6.1建立表格：

表格由<table></table>标签来定义每行由<tr></tr>来定义，每行被分割为若干单元格，由<td></td>来定义

数据单元格可以包含文本、图片、列表、段落、表单、水平线

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>建立表格</title>

    </head>

    <body>

        <table border="1">

            一列

        <tr>

            <td>100</td>

        </tr>

        </table>

        <table border="1">

            一行三列

        <tr>

            <td>100</td>

            <td>200</td>

            <td>300</td>

        </tr>

        </table>

        <table border="1">

            三行三列

        <tr>![d0def294ed096a8940d8d4e67e557edf.png](en-resource://database/2581:1)

            <td>周一</td>

            <td>周二</td>

            <td>周三</td>

        </tr>

        <tr>

            <td>100</td>

            <td>200</td>

            <td>300</td>

        </tr>

        <tr>

            <td>100</td>

            <td>200</td>

            <td>300</td>

        </tr>

        </table>

    </body>

</html>

6.2表格的边框

上例中的border = "1"就是用来设置表格边框的，它规定表格的边框为1像素，border只能控制外边框的粗细

所以我们用cellspacing属性来控制内边框的粗细，即单元格与单元格之间的距离

根据上例：table border = "1" cellspace = "8"

table的cellpadding属性用来控制单元格中的内容到内边框之间的距离

接上例：table border = "1" cellspace = "8" cellpadding = "8"

6.3设置表格或单元格的宽度和高度

width和height属性值可以是像素也可以是百分比，如果没有设置那就默认为内容的宽度和高度

接上例：table border = "1" cellspace = "8" cellpadding = "8" width = "300" height = "300"

<tr></tr>也有height属性，表示该行的高度，若值为百分比的形式，则表示该行占整个表格的高度的百分比

<td></td>也有width属性，表示该单元格所在列的宽度，若值为百分比的形式，则表示该列占整个表格的宽度的百分比

6.4表格的背景设置

表格的bgcolor属性可以用来设置表格的背景颜色

background属性用来设置设置表格的背景图片

也可以单独设置某行或某个单元格的背景

6.5表格边框颜色的设置

bordercolor属性可以设置表格的外边框颜色

6.6表格的位置

6.6.1水平位置

align属性可以设置表格在父容器中的水平位置，其值为left或center或right,即在富容器中水平居左、居中、居右

6.6.2垂直位置

valign属性用来控制单元格中的内容的垂直位置，其值为top、middle和bottom,即单元格中的内容在单元格内垂直居上、居中和居下，我们可以控制整行，也可以控制某个单元格

6.7为表格添加表头和标题

用<caption></caption>标记为表格添加标题，标题将相对于表格居中显示

<th></th>标记用来表格添加表头，它将替换相应位置的<td></td>标记，在该标记内的文字为粗体且在单元格内中居中显示

6.8单元格的合并

6.8.1跨行

跨行也就是将单元格纵向合并，只要设置<td></td>标记中的rowspan属性就可以实现，rowspan的取值为数字

6.8.2跨列

跨列也就是将单元格横向合并，只设置<td></td>标记中的colspan属性就可以实现，colspan的取值为数字

7表单

表单使用表单标签<form name = "" method = "" action = ""></form>

“name”属性为表单起一个名字；“method”属性用于设置传送数据的方式。取值有两个，“post”和“get”，“action”属性指明服务器端处理程序的名称，即当点击“提交”按钮后所提交的地址。

面试：

post：提交的数据不会显示到地址栏上，相对安全；地址栏上的数据长度没有限制

get：默认为get提交，提交的数据会显示到地址栏上，不安全；地址栏上的数据长度有限

常用的表单元素

7.1输入元素input

7.1.1文本域

<input type="text" name="" value="" size="" maxlength="" readonly="readonly（只读）">

type="text"声明表单元素为单行文本框

name为文本框命名

value设置文本框中初始的文本内容，不填则空

size设置文本框的显示长度

maxlength设置文本框可输入的最大字符数

7.1.2密码输入框

把type属性的值变为password即可

<input type="password" name="pss"/ maxlength="10">

7.1.3单选框

把type属性的值变为radio来实现

<input type="radio" name="" checked value="女"/>女

value后跟着提交的数据

checked 默认选中项

7.1.4复选框

<input type="checkbox" name="" value=""/>

value后面跟着提交的数据

7.1.5提交按钮

<input type="submit name="" value=""

value表示按钮上显示的名称

7.1.6重置按钮

<input type="reset" value=""/>

7.1.7普通按钮

<input type="button" value=""/>

7.1.8图片按钮

<input type="image" src="路径"/>

功能和提交按钮一样，能够将表单提交

7.1.9隐藏域

<input type="hidden" name="" value=""/>

页面无法查看该域，但是它会随着表单的提交而被提交

7.1.10文件域

<input type="file" name=""

7.2下拉框

<select name="">

    <option selected="selected"></option>

</select>

7.3多行文本框

<textarea name="" row="行数" cols="列数"></textarea>结束标记不要换行

8.框架

frameset（框架集，取代`body`）中常见的属性

rows=""：设置框架集每个一个框架占用的大小

cols=""：设置框架集每个一个框架占用的大小

border=""：设置框架集边框的粗细

bordercolor=""：设置框架集边框的颜色

frameborder=""：设置是否有边框 0有1没有

frame中常见的属性

noresize="noresize"：设置该框架不能任意拖动

src=""：该框架引入页面的路径

name=""：为框架起名，target="框架名称"

scrolling="no|yes"：该框架是否允许滚动 no代表不允许滚动，yes代表允许滚动

8.5浮动框架

<iframe></iframe>：可以当做html中的一个标签

8.5.1浮动框架中常见的属性

src=""：该浮动框架引入页面的路径

width=""：设置浮动框架的宽度

height=""：设置浮动框架的高度

scrolling=""：该框架是否允许滚动 no代表不允许滚动，yes代表允许滚动

frameborder=""：设置是否有边框 0有1没有

name=""：给框架取名称

align=""：设置框架水平对齐方式