文档章节

html 2

穆子淼
 穆子淼
发布于 2014/06/26 15:56
字数 668
阅读 12
收藏 1
点赞 0
评论 0
  • 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>







© 著作权归作者所有

共有 人打赏支持
穆子淼
粉丝 2
博文 17
码字总数 22519
作品 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
伪静态规则有一点看不懂,求大牛稍作解析~

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
PHP文本域修改HTML内容并且保存

@南湖船老大 你好,想跟你请教个问题: 比如 我有2个html 1.html和2.html $1= filegetcontens("1.html"); $2= filegetcontens("1.html"); 然后网站首页是这样的 $content=str_replace($1,$2...

Skeptic__
2014/07/06
2.1K
2
UNIX网络编程卷2进程间通信读书笔记汇总

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

长平狐
2012/09/03
185
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 virtualHost 配置_侯永伟的空间_百度空间

1.基于相同IP不同Port的虚拟主机 1)vi /etc/http/conf/httpd.conf 2)将Listen字段改为 Listen 80 Listen 8888 (以上设置表示使用80以及8888端口) 3)更改虚拟主机部分为: <VirtualHost...

张xtpgyaps
2011/06/14
0
0
JS 用JS编写一个数组的树节点

------------------index,html--------------- <<!DOCTYPE html> <html> <head> <title>JS固定节点</title> <script type="text/javascript" src="jie.js"></script> </head> <body> <div id......

RablePHP
2015/12/10
40
0
长期宅在家的人都有什么比较好的室内锻炼的方法?

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

HenrySun
2015/12/02
124
0
文字和图片居中的HTML代码怎么写?

HTML 代码 ,怎么将文本/ 图片居中?这是在W3Cschool的编程问答中前端蕾儿提出的问题。网友施主同西否给出了详细的解答。 html文字居中和html图片居中方法代码,通过在html中实现文字居中图片...

inw3cschool
2017/05/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

告警系统主脚本、告警系统配置文件、告警系统监控项目

告警系统主脚本 为方便需要,所有的shell脚本放到 /usr/local/sbin/ 目录下 切换到 /usr/local/sbin/ 目录下,创建告警系统脚本 #!/bin/bash#Written by aming.# 是否发送邮件的开关(1表...

Zhouliang6
9分钟前
1
0
不要再问我跨域的问题了

原文链接:web.jobbole.com 【RTC实时互联网大会 限时免费 马上报名】www.bagevent.com 写下这篇文章后我想,要不以后就把这种基础的常见知识都归到这个“不要再问我XX的问题”,形成一系列内...

阿K1225
10分钟前
0
0
Tomcat配置虚拟路径

<?xml version="1.0" encoding="UTF-8"?> <Context docBase="/data/dispute_https/headPortrait/" path="/headPortrait" reloadable="true"/> <!-- 该文件名为headPortrait.xml,放在${tomca......

Helios51
12分钟前
0
0
开源PaaS Rainbond 3.6.1 Released

本次3.6.1版本更新,重点修复了3.6.0版本部分情况下会出现的BUG,同时改进了内部市场、参数验证、历史消息等功能,详细更新记录如下—— 3.6.1 功能改进 云帮初次使用跳转至注册页面 消息添加...

好雨云帮
12分钟前
0
0
Unsupported major.minor version 52.0

执行代码的jdk版本 低于 编译的jdk版本 其中52.0 对应的就是 jdk1.8版本。

@林文龙
12分钟前
0
0
聊聊spring cloud的AbstractLoadBalancingClient

序 本文主要研究一下spring cloud的AbstractLoadBalancingClient AbstractLoadBalancingClient spring-cloud-netflix-ribbon-2.0.0.RELEASE-sources.jar!/org/springframework/cloud/netfli......

go4it
13分钟前
0
0
博客改版通知

先上博客地址 --> http://metaphors.name 最近将博客从 Jekyll 迁到了 Hexo,所以简书、开源中国、博客园、CSDN文章中的的部分图片丢了,原文链接也不可用了,不过没关系,原文链接都会转到博...

Metaphors
14分钟前
0
0
vue基础知识练习

一、Hello World <div id="itany">{{msg}} <!-- 两对大括号{{}}称为模板,用来进行数据的绑定显示在页面中 --> </div><script src="js/vue.js"></script><script>var vm=new Vue({......

一个yuanbeth
17分钟前
0
0
spring @Transactional注解参数详解

原文:事物注解方式: @Transactional 当标于类前时, 标示类中所有方法都进行事物处理 , 例子: 1 @Transactional public class TestServiceBean implements TestService {} 当类中某些方法不需...

binhu
20分钟前
0
0
CORS 跨域实践

本文首发于个人微信公众号《andyqian》,期待你的关注~ 前言 系统通常都是由单体应用逐渐演化而来,演化成为前后端分离的分布式应用。在享受分布式系统带来的诸多好处之时,随之而来的也有不...

andyqian
27分钟前
7
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部