HTML列表框架以及表单16页文档资料.docx

《HTML列表框架以及表单16页文档资料.docx》由会员分享，可在线阅读，更多相关《HTML列表框架以及表单16页文档资料.docx（14页珍藏版）》请在冰豆网上搜索。

HTML列表框架以及表单16页文档资料

上一篇文章为大家带来了HTML的介绍以及运行原理、图像表格的实际应用。

本章迪派为大家介绍无序列表，有序列表，框架浮动窗口表单及表单控件，表单及表单控件

一、无序列表，有序列表：

1.有序列表：

--表格-->

项目

上课

休息

星期

星期一

星期二

星期三

星期四

星期五

星期六

星期日

上午

语文

数学

英语

英语

物理

计算机1

休息

数学

数学

地理

历史

化学

计算机2

CAD

AI

淘宝

图形图像

网站后台

学历

日文录入

公建

方正飞腾

网页三剑客

地理

计算机4

下午

平面设计

装潢

英语

日语

会计

PS

休息

数学

数学

地理

历史

化学

计算机6

--Html不区分大小写-->

2.无序列表

案例:

代码:

0px;">

☞type可以取disc、circle、square

有序列表

代码:

☞type用于指定用什么来显示,start表示从第几开始计算.

type有：

阿拉伯数字1,2,3,…

小写字母a,b,c,…

大写字母A,B,C,…

小写罗马字母i,ii,iii,…

大写罗马字母I,II,III,…

二、框架浮动窗口表单及表单控件：

Frameset框架集

用途主要是用于分割显示多个页面

☞frameset和frame配合使用，一般讲是用于后台页面

快速入门:

代码

a.html页面用于保护其它页面

--noresize不能托动框架边框-->

--frameborder设置框架边框-->

☞该frameset页面不能有body和body体

b.html

--target表示我们点击后，目标指向谁-->

周杰伦

齐秦

周杰伦

齐秦

周杰伦

齐秦

周杰伦

齐秦

周杰伦

齐秦

周杰伦

齐秦

周杰伦

齐秦

周杰伦

齐秦

周杰伦

齐秦

周杰伦

齐秦

周杰伦

齐秦

周杰伦

齐秦

周杰伦

齐秦

周杰伦

齐秦

周杰伦

齐秦

周杰伦

齐秦

周杰伦

齐秦

周杰伦

齐秦

周杰伦

齐秦

☞target属性值有四个

_blank:

表示打开一个全新的页面（新窗口）

_self:

替换本页面（本窗口）

_top:

（整个浏览器窗口）

_parent:

（父窗口）

*还有一个就是在target值中直接写对应的那个frame的名字.

c.html:

--silver浅灰-->

--gray深灰-->

歌词大全

其它页面

Frameset的综合小案例:

结构示意图:

案例

all.html

top.html

left.html

• 青花瓷
• 当兵的人

right.html

歌词大全

晚上的练习:

1.按照笔记走一遍

2.作业

2.1做一个自己的网页，显示自己的基本信息：

姓名、性别等（注意使用文本格式标记，要做得好看啊），并显示自己的照片（图象的标记还记得吗？

）

2.2.普通邮箱

iframe的使用大连迪派

有时我们需要，在一个含有的页面嵌入另外一个页面，形成画中画的效果,怎么处理->iframe元素（浮动窗口）

入门案例

iframe.html

hello,world

//taobao"target="iframe1">连接到taobao

连接到kk.html

//baidu"width="500px"height="400px"/>

//google"width="400px"height="400px"/>

表单元素

为什么需要？

看一个图:

从上图可以看出，我们需要把一些数据提交给服务器处理,比如注册用户,发帖…,这样就需要使用到表单元素（常见 输入框、单选框、复选框、文本域、密码框、上传文件。

。

。

）

基本结构

类型有：

text,password,checkbox,radio,image,hidden,submit,reset

一般说，表单元素通常是被包含起来的

入门案例:

login.html

--action的值应当是提交哪个页面（url）-->

--method方法指定提交数据的方式,常用的有两种get/post-->

--name的值可以任意，但是不要使用关键字-->

用户名:

密　码:

Ok.html的内容,登录成功

GET和POST之间的主要区别如下：

（1）在客户端，Get方式在通过URL提交数据，数据在URL中可以看到；POST方式，数据放置在HTMLHEADER内提交。

（2）对于get方式，服务器端用Request.QueryString获取变量的值，对于post方式，服务器端用Request.Form获取提交的数据。

（3）GET方式提交的数据最多只能有1024字节，而POST则没有此限制。

（4）安全性问题。

正如在

（1）中提到，使用Get的时候，参数会显示在地址栏上，而Post不会。

所以，如果这些数据是中文数据而且是非敏感数据，那么使用get；如果用户输入的数据不是中文字符而且包含敏感数据，那么还是使用post为好。

（5）GET方式可以收藏地址,POST方式不能

使用get时，第一对name/value值前要加一个问号?

，以后每对name/value值间要用&分开。

比如一个form中有三个参数，如下：

Name:

Age:

Gender:

比如你在Name项填写Jacky，Age项填写50，Gender项填了male，提交之后的URL显示为：

http:

//localhost:

8080/get.php?

username=Jacky&age=50&gender=male

原理图:

三、表单及表单控件：

案例代码:

您最喜欢哪些城市:

北京

上海

伦敦

您的性别是:

男

女

隐藏域的使用

--如果我们希望偷偷的提交数据,不要影响界面效果，可以考虑使用隐藏域-->

下拉列表
www.dldipai.cn

请选择您的出生地:

四川

北京

西藏

--文本域,-->

--文件上传的控件-->

上传文件

--这是一个图片按钮-->

课堂练习:

希望以上资料对你有所帮助，附励志名言3条：

1、要接受自己行动所带来的责任而非自己成就所带来的荣耀。

2、每个人都必须发展两种重要的能力适应改变与动荡的能力以及为长期目标延缓享乐的能力。

3、将一付好牌打好没有什么了不起能将一付坏牌打好的人才值得钦佩。