文档章节

html 2

穆子淼
 穆子淼
发布于 2014/06/26 15:56
字数 668
阅读 14
收藏 1
  • iframe 的使用

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

    入门案例

iframe.html
<html>
<body>
<h1>hello,world</h1>
<a href=" target="iframe1" > 连接到淘宝</a><br/>
<a href="kk.html" target="irame1">连接到kk.html</A><br/>
<iframe name="iframe1" src=" width="500px" height="400px"/>
<iframe src=" width="400px" height="400px" />
</body>
</html>

  • 表单元素

为什么需要?

看一个图

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

基本结构

<input type="类型" name="名字"/>

一般说,表单原色通常是被<form> 包含起来的

入门案例:

Login.html
<html>
<head>
<title>登录页面</title>
</head>
<body>
<!--action 的值应当是提交哪个页面(url)-->
<!--method 方法指定提交数据的方式,常用的有俩种 get/post-->
<form action="ok/html" method="post">
<!--name 的值可以任意,但是不要使用关键字-->
用户名:<input type="text" name="usename"/><br/>
密  码:<input type="password" name="password"/><br/>
<input type="submit" value="登录系统">
<input type="reset" value="重新填写"/>
</form>
</body>
</html>

ok.html

OK,登录成功

原理图


请考虑:如果我们希望偷偷的提交数据,不要影响节目效果,可以考虑使用隐藏域

案例代码:

<html>
<head><title>表单元素</title></head>
<body>
</form action="ok.html" method="get">
您最喜欢哪些城市:
<input type="checkbox" name="cities" value="beijing">北京
<input type="checkbox" name="cities" value="shanghai">上海
<input type="checkbox" name="cities" value="lundun">伦敦
<br/>
您的性别是:
<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="women">女
<br/>
隐藏域的使用
<input type="hidden" name="data" value="ok">
<br/>
下拉列表<br/>
请选择您的出生地:
<select name="address" size=3 multiple>
<option value="sichuan">四川</option>
<option value="beijing">北京</option>
<option value="beijing">西藏</option>
</select><br/>
<!--文本域-->
<textarea name="mytextarea" cols="40" rows="10">
</textarea>
<br/>
<!--文件上传的控件-->
<input type="file" name="myfile">上传文件<br/>
<input type="submit" value="测试"/>
<!--这是一个图片按钮-->
<input type="image" src="image1.png"/>
</form>
</body>
</html>

练习:

  • 多媒体

<html>
<head>
<title>我的电影网站</title>
</head>
<body>
<!--
<embed src="一起走到.mpg" />
-->
<img src="f.gif" dynsrc="clock.avi" loop="2" start="mouseover"/>
</body>
</html>
  • 图像映射技术

案例:

<html>
<head>
<script language="javascript">
<!--
    function show(){
        window.alert('点击了矩形区域');        
}
-->
</script>
</head>
<body>
<img src="mapimg.gif" usemap="#abc"/>
<!--映射区域-->
<map shape="rect" onclick="show();" href="#" coords="140,20,280,60"/>
</map>
</body>
</html>

代码:

<html>
<body>
<fieldset style="width:300px">
<legend><font color="blue">★ 审核状态</legend>
<form>
<input type="radio" name="state">已经审核
<input type="radio" name="state">没有审核
<input type="radio" name="state">全部
</form>
</fieldset>
</body>
</html>







© 著作权归作者所有

共有 人打赏支持
上一篇: Div+css
下一篇: html 1
穆子淼
粉丝 2
博文 17
码字总数 22519
作品 0
昌平
私信 提问
PHP程序员进阶学习书籍参考指南

【初阶】(基础知识及入门) 01. 《PHP与MySQL程序设计(第4版)》 http://item.jd.com/10701892.html 02. 《深入浅出MySQL 数据库开发 优化与管理维护 第2版》 http://item.jd.com/1138129...

libray
2016/06/23
38
0
符合SEO的nginx url规则配置

server { charset utf-8; clientmaxbody_size 128M; listen 80; server_name www.aa.com aa.com; index index.html index.htm index.php; root /home/wwwroot/default/aa; if ($host = "aa.c......

happy_limit
2016/11/28
26
0
长期宅在家的人都有什么比较好的室内锻炼的方法?

可以买一副哑铃在家做做力量训练,给你一套Mike老师录的家庭哑铃训练,可以训练到你身上的各个部位。 胸部 http://v.youku.com/vshow/id_XODIyNjc2NDc2.html?from=y1.7-2 背部 http://v.you...

HenrySun
2015/12/02
124
0
伪静态规则有一点看不懂,求大牛稍作解析~

RewriteEngine On RewriteRule ^(.)/index.html$ $1/index.php RewriteRule ^(.)/(w+).html$ $1/index.php?do=$2 RewriteRule ^(.)/(w+)-(w+).html(.) $1/index.php?$4&$2=$3 [QSA,L,NC] Rew......

嘉文四世
2013/01/19
195
1
UNIX网络编程卷2进程间通信读书笔记汇总

UNIX网络编程卷2进程间通信读书笔记(一)—概述 http://blog.chinaunix.net/u/22935/article527112.html UNIX网络编程卷2进程间通信读书笔记(二)—管道 (1) http://blog.chinaunix.net/...

长平狐
2012/09/03
185
0

没有更多内容

加载失败,请刷新页面

加载更多

Java 源代码和 C 源代码的运行区别

与其他程序的执行方式和编译方式不同。 Java 源代码需要进行编译成字节码后在 Java 虚拟机上运行,这样 Java 程序能够保持独立性和跨平台功特性。 请参考下图。 https://www.cwiki.us/pages...

honeymose
今天
4
0
Apache限定目录解析PHP,限制user_agent,PHP相关的配置

Apache限定目录解析PHP 配置前访问upload/index.php [root@test-a ~]# curl -x192.168.77.139:80 'www.test.com/upload/index.php'This is upload diretory 配置,/usr/local/apache2.4/......

野雪球
今天
5
0
java.util.Concurrent.Exchanger源码

类图 源码: package java.util.concurrent;import java.util.concurrent.atomic.AtomicInteger;import java.util.concurrent.atomic.AtomicReference;import java.util.concurrent......

狼王黄师傅
今天
6
0
Kubernetes里的secret最基本的用法

Secret解决了密码、token、密钥等敏感数据的配置问题,使用Secret可以避免把这些敏感数据以明文的形式暴露到镜像或者Pod Spec中。 Secret可以以Volume或者环境变量的方式使用。 使用如下命令...

JerryWang_SAP
昨天
5
0
2018-11-20学习笔记

1. python数据类型: 给变量赋值什么样的值,变量就是什么样的类型 给变量赋值整数,变量就是整数类型 给变量赋值字符串,变量就是字符串类型 123 和“123”一样吗? 在python中 单引号 与双...

laoba
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部