1 简单的测试页
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Test Page</title>
<style type="text/css">
* { margin: 0; padding: 0;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
// Do stuff.
});
</script>
</head>
<body>
</body>
</html>
2 post数据到iframe
<form action="iframe.php" target="my-iframe" method="post">
<label for="text">一些文字:</标签>
<input type="text" name="text" id="text">
<input type="submit" value="post">
</ FORM>
<iframe name="my-iframe" src="iframe.php"> </ IFRAME>
3 左右两边布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Some Example from CSS-Tricks</title>
<style type="text/css">
* { margin: 0; padding: 0; }
p { padding: 10px; }
#left { position: absolute; left: 0; top: 0; width: 50%; }
#right { position: absolute; right: 0; top: 0; width: 50%; }
</style>
</head>
<body>
<div id="left">
<p>Left Half</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
<div id="right">
<p>Right Half</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
</div>
</body>
</html>
4 iframe加载时隐藏白页面
<iframe style="visibility:hidden;" onload="this.style.visibility = 'visible';" src="../examples/inlineframes1.html" > </iframe>
5 示例表单
<form id="myForm" action="#" method="post">
<div>
<label for="name">Text Input:</label>
<input type="text" name="name" id="name" value="" tabindex="1" />
</div>
<div>
<h4>Radio Button Choice</h4>
<label for="radio-choice-1">Choice 1</label>
<input type="radio" name="radio-choice-1" id="radio-choice-1" tabindex="2" value="choice-1" />
<label for="radio-choice-2">Choice 2</label>
<input type="radio" name="radio-choice-2" id="radio-choice-2" tabindex="3" value="choice-2" />
</div>
<div>
<label for="select-choice">Select Dropdown Choice:</label>
<select name="select-choice">
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>
</div>
<div>
<label for="textarea">Textarea:</label>
<textarea cols="40" rows="8" name="textarea"></textarea>
</div>
<div>
<label for="checkbox">Checkbox:</label>
<input type="checkbox" name="checkbox" />
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form>
分享到:
相关推荐
一种基于网页特效的HTML代码片段.HTML
一、使用v-html v-html:更新元素的 innerHTML const text = `<p>Hello World</>` My name is Pjee <p v-html='text'></p> 注意:你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS ...
有了这么一个管理器,平时可以将自己辛苦写出来的代码片段或算法记录下来。实际上这只是个支持语法着色的简单代码编辑器,带了一点文件管理功能。 更新日志在http://blog.sina.com.cn/s/blog_6204ca300100lh20.html...
实现html页面5秒后自动跳转 代码片段 html
实用HTML5代码片段,好资料,希望你喜欢!
星际争霸 web游戏设计 html代码片段
snnipets是一种小巧的代码片段整理工具,可以整理收集c,c++,python,html,xml,php代码片段,很小很强大!
有了这么一个管理器,平时可以将自己辛苦写出来的代码片段或算法记录下来。实际上这只是个支持语法着色的简单代码编辑器,带了一点文件管理功能。 更新日志在http://blog.sina.com.cn/s/blog_6204ca300100lh20.html...
Hbuilder代码片段,急速开发,支持html,css,js,Jquery和Thinkphp
本篇文章主要介绍了详解Android WebView加载html片段,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
html5&css html5&css代码示例
有的时候会将一段HTML片段保存在HTML文件中,在另外的主页面直接读取该HTML文件,然后解析里面的HTML代码片段融入到主页面中。 fragment.html文件,其内容: 代码如下: <div>hello Jquery 在主页面 Test.html中解析...
非常好用的可嵌入网页的代码编辑器ace aditor,用简单的html页面举例说明了如何实现自定义的代码提示功能,没有修改源代码
Angular 2、4、5、6、7、8、9和10的Visual Studio Code TypeScript和HTML代码片段以及代码示例 所有代码段均基于并遵循Angular样式指南 摘录的来源来自: 最重要的是,如果没有所有贡献者的帮助来确定,增强,测试...
20210827更新删除了无用的会引起误会的文件夹,基础篇和高级篇分开为两个压缩包,增加了基础篇资料和高级篇资料,以及需要的相关软件,sql文件(在基础篇资料源码中)包含初级篇和高级篇完整代码,纯手工打造,都已...
文本框中的代码片段会收到一个可以从浏览器地址栏复制过来的URL信息,然后发布出去,这样,每个人就能看到这个代码片段,登录用户可以对其进行评论或编辑。 用这种方法,代码片段还可以在QQ、MSN等im上发来发去。 ...
今天突然就在想,html中的复选框可更改的样式有限,而且现在制作一个复选框...html代码片段: 复制代码代码如下: <a></a> 周一 javaScript代码片段: 复制代码代码如下: $(“a[name=’checkWeek’]”).click(function
简单娱乐
下面是一些常用的代码片段收集(欢迎大家pull request) 语言 JavaScript HTML 建议使用 CSS 建议使用 框架和库 AngularJS Angular UI AngularJS Sublime Package JQuery jQuery Snippets Pack Bootstrap3 Bootstrap 3...
less 代码片段正常写法less 变量写法2. 类中引入其他类的样式命名空间和访问符// 使用如果在类b中就引入了类a的样式,那么在HTML中类名就不需要写a