• HTMl代码片段


    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 f​​or="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>





     

     


      欢迎扫描此二维码关注web馆公众号
      作者:web馆
      出处:http://www.cnblogs.com/xiaoyao2011/
      欢迎任何形式的转载,但请务必注明出处。


  • 相关阅读:
    基于HT for Web矢量实现3D叶轮旋转
    基于HT for Web矢量实现2D叶轮旋转
    HT for Web列表和3D拓扑组件的拖拽应用
    基于HT for Web矢量实现HTML5文件上传进度条
    Java 8 VM GC Tunning Guide Charter 5
    Java 8 VM GC Tunning Guide Charter 6
    Java 8 VM GC Tunning Guide Charter 7-8-b
    Java 8 VM GC Tunning Guild Charter 9-b
    java文档 第十一章 其他考量-b
    iOS点击cell查看大图,点击大图还原小图-b
  • 原文地址:https://www.cnblogs.com/xiaoyao2011/p/2333791.html
Copyright © 2020-2023  润新知