第三天：表格、表单及HTML框架集

来源：互联网发布：雷神3知乎编辑：程序博客网时间：2024/06/05 14:50

知识回顾

计算机编码

计算机编码：人的语言需要编译成计算机语言（0101 二进制）编码其实就是人的语言编译成二进制的一个规则

ASCII

GBK

gb2312

utf-8

解决乱码：两码合一文档类型编码要与文档内容编码一致

设置内容编码：xhtml <meta http-equiv=”content-type” content=”text/html;charset=utf-8”>

Html5 <meta charset=”utf-8” />

xhml规范

元素必须被正确嵌套

<u><i>床前明月光</u></i>

XHTML元素必须被关闭

XHTML元素必须小写

XHTML文档必须拥有一个根元素<html>

XHTML属性名必须小写

XHTML属性值必须加引号

XHTML属性不能简写：如checked必须写成checked=“checked”

XHTML文件必须有DTD文档类型定义

DTD 验证规则

Img 图像标签

写法： <img src=”路径” width=”宽度” height=”高度” border=”边框” title=”标题” alt=”图片没有加载成功显示的内容”>

a标签

写法：<a href=”连接地址” target=”在哪里显示” name=”锚点定位”></a>

表格

编辑器：文本编辑器记事本 nodepad++

IDE:集成开发环境

表格是什么？

<table>标签基本格式

Table 主要学习内容标签和属性标签：学功能和名称属性：属性名和属性值

最重要：合并单元格

<table>

<tr>

...

</tr>

</table>

border:属性，表示边框的意思 1px 属性值，边框的宽度

<table>标签的属性

width属性

Width %或pixels 规定表格的宽度 %是根据父级元素的尺寸计算

height属性

height % | pixels 规定表格的高度

border属性

border pixels 规定表格边框的宽度

align属性

align left|center|right 规定表格相对周围元素的对齐方式

cellspacing属性

cellspacing 长度值属性用来指定表格各单元格之间的空隙。

cellpadding属性

cellpadding 长度值属性用来指定单元格内容与单元格边界之间的空白距离的大小

bgcolor属性

bgcolor 颜色值规定表格的背景颜色

bordercolor属性

bordercolor 颜色值定义表格整体的框线色

background 地址属性

background 地址指定表格的背景图案，URI指向图像文件的位置

<caption>标记

Caption 表格的标题每个表格只有一个标题 caption标签必须紧跟table

<tr>标记

align属性

align left,right,center 定义表格行的内容水平对齐方式。

valign属性

Valign top,middle,bottom 定义表格行的内容垂直对齐方式。

bgcolor属性

bgcolor 颜色值定义某一行行的颜色。

<td>和<th>

<td>和<th>都是单元格的标记，其必须嵌套在<tr>标签内，是成对出现

Th比td多了一种样式居中加粗

属性

width % | pixels 规定表格单元格的宽度。

height % | pixels 规定表格单元格的高度。不支持。请使用 CSS 代替。

align left | center | right 规定单元格内容的水平排列方式

valign top | middle | bottom 规定单元格内容的垂直排列方式

bgcolor 颜色值定单元格的背景颜色。不支持。请使用 CSS 代替。

background URI 定义单元格的背景图案

colspan 正整数设置当前单元格的在水平方向上合并单元格的个数。

rowspan 正整数设置当前单元格的在垂直方向上合并单元格的个数。

表单设计

表单是什么？

表单一般用来收集用户的输入信息，它提供了一种用户界面

表单的写法

表单的属性

action：表单数据提交到什么地方（哪个页面），默认为当前页

Method

Get：发生方式

Post

Input标签

input元素用来配置表单中的输入域（控件），它在表单控件中有着最广泛的应用。

input标签是空标签(空元素、单标签)

输入框：<input type=“text” />

密码框：<input type=“password” />

复选框：<input type=“checkbox” /> 拥有checked属性，表示是否被选中 name属性值相同的只能选择一个

单选按钮：<input type=“radio” /> 拥有checked属性，表示是否被选中

隐藏域：<input type=“hidden” />

文件选择控件：<input type=“file” />

提交按钮：<input type=“submit” value=“提交”/>

图片提交按钮：<input type=“image” src=“URL” />

重置按钮：<input type=“reset” value=“重置”/>

普通按钮：<input type=“button” value=“普通按钮”/>

通用属性

name name名定义input元素的名称

value 任何字符控件初始显示的文字内容（数据）

readonly readonly 指定控件处于只读状态 ,针对输入框。按钮无意义。

disabled disabled 控件不可用，灰色，并且表单提交时不会传送此数据

type 特定字符串 input 元素的类型。

如果元素没有设置name属性，表单提交的时候不会提交该数据！

select标签

写法

select属性

name name名规定下拉列表的名称

size 正整数规定下拉列表中可见选项的数目

multiple multiple 布尔属性，设置后选单项目允许多选，否则只能选择一个

option属性：

value 选单项目默认的数据值，此为表单传送的真实值。如果未指定，则默认option元素的标签内容为初始值

选项被选中是具有selected属性

textarea标签

textarea标签多行文本域

属性

name name 控件名称

rows number 设置多行文本框的显示行数（高度），具体尺寸取决于文字大小

cols number 设置多行文本框的显示列数（宽度），即字符数，具体尺寸取决于文字大小

disabled disabled 布尔属性，设置当前文本框为禁用状态

Label标签

显式的绑定：

for属性于哪一个表单项元素绑定（通过id属性绑定）。

<label for="SSN">Social Security Number:</label>

隐式的绑定：

<label>Date of Birth: <input type="text" name="DofB" /></label>

filedset标签

fieldset 元素可将表单内的相关元素分组。

HTML框架集

在一个页面中显示多个网页，多用于后台管理系统

已经过时的技术，老的项目中常会看到，建议在新项目中不要使用集

第三天：表格、表单及HTML框架集

知识回顾

计算机编码

xhml规范

Img 图像标签

a标签

表格

表格是什么？

<table>标签基本格式

<table>标签的属性

width属性

height属性

border属性

align属性

cellspacing属性

cellpadding属性

bgcolor属性

bordercolor属性

background 地址属性

<caption>标记

<tr>标记

align属性

valign属性

bgcolor属性

<td>和<th>

属性

表单设计

表单是什么？

表单的写法

表单的属性

Input标签

通用属性

select标签

写法

select属性

textarea标签

属性

Label标签

filedset标签

fieldset 元素可将表单内的相关元素分组。

HTML框架集

<frameset rows="20%,*" border="4" noresize="noresize">

<frame src="top.html" />

<frameset cols="15%,*">

<frame src="menu.html" />

<frame src="day1.html" name="xxx"/>

</frameset>

</frameset>