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

知识回顾

计算机编码

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

ASCII

GBK 

gb2312

utf-8

 

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

设置内容编码:xhtml  ”content-type” content=”text/html;charset=utf-8”>

              Html5  

 

xhml规范

元素必须被正确嵌套

床前明月光

XHTML元素必须被关闭

XHTML元素必须小写 

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

XHTML属性名必须小写

XHTML属性值必须加引号

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

 

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

DTD 验证规则

Img 图像标签

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

a标签

写法:”连接地址” target=”在哪里显示” name=”锚点 定位”>

 

表格

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

IDE:集成开发环境  

 

表格是什么?

 

标签基本格式

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

 

最重要:合并单元格

属性1="属性值1" 属性2="属性值2" ... ... >表格内容

...

...

 

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

标签的属性

 

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指向图像文件的位置

 

标记

align属性

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

valign属性

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

bgcolor属性

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

标签内,是成对出现

Thtd多了一种样式 居中加粗

属性

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标签是空标签(空元素、单标签)

 

输入框:text” />

密码框:password” />

复选框:checkbox” /> 拥有checked属性,表示是否被选中 name属性值相同的只能选择一个

单选按钮:radio” /> 拥有checked属性,表示是否被选中

隐藏域:hidden” />

文件选择控件:file” />

提交按钮:submit” value=“提交”/>

图片提交按钮:image” src=URL” />

重置按钮:reset” value=“重置”/>

普通按钮: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属性绑定)。

Social Security Number:

 

隐式的绑定:

 

filedset标签

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

HTML框架集

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

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

 

框架页,使用框架集DTD声明,并且不能有body元素

 

  

    

    

    

    

    

你可能感兴趣的:(PHP培训入门教程,表单,php,php培训,教程)

标记

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

 

都是单元格的标记,其必须嵌套在