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=""：设置框架水平对齐方式

巴特西

HTML基础复习2

6.表格

6.1建立表格：

6.2表格的边框

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

6.4表格的背景设置

6.5表格边框颜色的设置

6.6表格的位置

6.6.1水平位置

6.6.2垂直位置

6.7为表格添加表头和标题

6.8单元格的合并

6.8.1跨行

6.8.2跨列

7表单

7.1输入元素input

7.1.1文本域

7.1.2密码输入框

7.1.3单选框

7.1.4复选框

7.1.5提交按钮

7.1.6重置按钮

7.1.7普通按钮

7.1.8图片按钮

7.1.9隐藏域

7.1.10文件域

7.2下拉框

7.3多行文本框

8.框架

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

frame中常见的属性

8.5浮动框架

8.5.1浮动框架中常见的属性

最新文章

热门文章

巴特西

HTML基础复习2

6.表格

6.1建立表格：

6.2表格的边框

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

6.4表格的背景设置

6.5表格边框颜色的设置

6.6表格的位置

6.6.1水平位置

6.6.2垂直位置

6.7为表格添加表头和标题

6.8单元格的合并

6.8.1跨行

6.8.2跨列

7表单

7.1输入元素input

7.1.1文本域

7.1.2密码输入框

7.1.3单选框

7.1.4复选框

7.1.5提交按钮

7.1.6重置按钮

7.1.7普通按钮

7.1.8图片按钮

7.1.9隐藏域

7.1.10文件域

7.2下拉框

7.3多行文本框

8.框架

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

frame中常见的属性

8.5浮动框架

8.5.1浮动框架中常见的属性

最新文章

热门文章

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