文档章节

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
昌平
私信 提问
三天学会HTML5 ——多媒体元素的使用

目录 1. HTML5 Media-Video 2. HTML5 Media-Audio 3. 拖拽操作 4. 获取位置信息 5. 使用Google 地图获取位置信息 多媒体是互联网中的最重要的一部分,无论访问的是哪种类型的网页,视频或音频...

葡萄城控件技术团队
2016/02/24
54
0
php Dom操作 Simple

一直以来使用php解析html文档树都是一个难题。Simple HTML DOM parser 帮我们很好地解决了使用 php html 解析 问题。可以通过这个php类来解析html文档,对其中的html元素进行操作 (PHP5+以上...

我恨你
2016/12/12
7
0
apache伪静态规则转nginx伪静态

下面是apache的伪静态,求nginx的伪静态 ErrorDocument 404 /404.html Options +FollowSymlinks RewriteEngine On RewriteBase / RewriteRule ^index\.html$ index\.php RewriteCond %{QUER......

忧郁骑士
2014/02/23
2.3K
3
程序如何实现将 .htaccess 规则文件内容转换为 web.config (win2008) 规则的文件

# .htaccess文件 RewriteEngine On RewriteBase /bbs RewriteRule ^archiver/([a-z0-9-]+.html)$ archiver/index.php?$1 RewriteRule ^forum-([0-9]+)-([0-9]+).html$ forumdisplay.php?fid......

坤平
2014/12/30
1K
0
js:关于window.onload

下图来自:http://www.cnblogs.com/wsun/p/3916487.html。 示例1 或者: 浏览器打开时只会执行。 示例2 这次在外部文件里使用window.load: test.js: html: 或者: 浏览器打开时只会执行。...

樂天
2015/11/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

《傲慢与偏见》的读书笔记与读后感作文2400字

《傲慢与偏见》的读书笔记与读后感作文2400字: 作者:孙苑馨;笔者按:读书这个习惯是我爸妈养出来的。小时候父母赚的钱除了吃饭穿衣剩下的就是买书了,他们除了买各种新鲜出版的文艺派图书...

原创小博客
10分钟前
0
0
oozie job 的挂了监控报警或重启

oozie Coordinator 的job 和actioni状态很多,但好像不支持设置某状态如failed后30分钟后自动重新拉启,因他的条件只有几种:触发条件可以是一个时间频率、一个dataset实例是否可用,或者可能...

hblt-j
29分钟前
1
0
python精简笔记-[6]-[if,for,while]语句

1.if 条件判断 语法: if 判断条件: 执行语句……elif 判断条件:    执行语句……elif 判断条件:    执行语句……else: 执行语句…… 实例1: n = input("请输...

平头哥-Enjoystudy
32分钟前
0
0
RxJava 是如何实现线程切换的(上)

前言 通过前一篇的从观察者模式出发,聊聊RxJava,我们大致理解了RxJava的实现原理,在RxJava中可以非常方便的实现不同线程间的切换。subscribeOn 用于指定上游线程,observeOn 用于指定下游线...

亭子happy
59分钟前
2
0
想晋级高级工程师只知道表面是不够的!Git内部原理介绍

本文由云+社区发表 作者:腾讯工蜂用户:王二卫 从不一样的视角了解git,以便更好的使用git 一、git & git 版本库认识 git 是一个内容寻址的文件系统,其核心部分是一个简单的键值对数据库(...

腾讯云加社区
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部