HTML(三):框架+表单

企鹅博客
企鹅博客
企鹅博客
28606
文章
0
评论
2020年9月14日13:03:38 评论 4 views 18928字阅读63分5秒

1.内嵌框架

HTML中的</strong>标签(又称内联框架元素)表示了一个嵌套的浏览上下文(browsing context),实际上是用来在当前页面中内嵌另一个HTML页面。可通过属性设置框架的宽、高、是否显示滚动条和边框。对应的属性名分别为:width、height、scrolling、frameborder。其中scrolling可设置的值有三个:yes(始终显示滚动条)、no(从不显示滚动条)、auto(默认值,在需要的情况下出现滚动条)。</p> <div class="cnblogs_code"> <pre class="brush:php;toolbar:false"><span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span> <span style="color: #008080;">2</span>   <span style="color: #0000ff;"><</span><span style="color: #800000;">iframe </span><span style="color: #ff0000;">src</span><span style="color: #0000ff;">="http://www.baidu.com/"</span><span style="color: #ff0000;"> width</span><span style="color: #0000ff;">="1000"</span><span style="color: #ff0000;"> height</span><span style="color: #0000ff;">="400"</span><span style="color: #ff0000;"> scrolling</span><span style="color: #0000ff;">="auto"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">iframe</span><span style="color: #0000ff;">></span> <span style="color: #008080;">3</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span></pre> </div> <p><img src="http://images2015.cnblogs.com/blog/1000338/201608/1000338-20160802205334825-648960501.jpg" alt="" /></p> <h2>2.form(表单)</h2> <p><form> 标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。表单用于向服务器传输数据。</p> <ul> <li>表单的基本结构</li> </ul> <div class="cnblogs_code"> <pre class="brush:php;toolbar:false"><span style="color: #008080;">1</span> <span style="color: #0000ff;"><</span><span style="color: #800000;">form </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="form"</span><span style="color: #ff0000;"> action</span><span style="color: #0000ff;">="URL"</span><span style="color: #ff0000;"> method</span><span style="color: #0000ff;">="get"</span><span style="color: #0000ff;">></span> <span style="color: #008080;">2</span> 用户名:<span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="uname"</span> <span style="color: #0000ff;">/></span> <span style="color: #008080;">3</span> 密 码:<span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="password"</span><span style="color: #ff0000;"> name</span><span style="color: #0000ff;">="passwd"</span> <span style="color: #0000ff;">/></span> <span style="color: #008080;">4</span> <span style="color: #0000ff;"></</span><span style="color: #800000;">form</span><span style="color: #0000ff;">></span></pre> </div> <ul> <li>表单可设置的属性及值的说明</li> </ul> <p>  <img style="line-height: 1.5;" src="http://images2015.cnblogs.com/blog/1000338/201608/1000338-20160802210047668-1810904414.jpg" alt="" /></p> <h2>3.input(表单元素:输入框)</h2> <p><input> 标签用于搜集用户信息。根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。</p> <p><input> 标签较重要的一个属性是type属性,根据type属性设置的值不同input标签会有不同的表现形式和作用。</p> <ul> <li>type属性可设置的部分值的说明</li> </ul> <p><img src="http://images2015.cnblogs.com/blog/1000338/201608/1000338-20160802211054668-528760830.jpg" alt="" /></p> <p>参考: HTML <input> 标签</p></div><div id="MySignature"></div> <div class="clear"></div> <div class='share layui-clear bdsharebuttonbox'> <li ><a href='javascript:;' data-cmd="weixin" class='wechat'><i class="layui-icon"></i>微信</a></li> <li ><a href='javascript:;' data-cmd="more" class='share-btn'><i class="layui-icon"></i>分享</a></li> </div> <img src="/static/images/article_wechat.jpg?1" style="margin-top: 30px;" alt="php教程最新课程二维码"/> <div class='tags layui-clear'> <li>相关标签:<a href="/search?word=html三:框架表单" target="_blank">HTML(三):框架+表单</a></li> <li class='line'> 本文原创发布php教程 ,转载请注明出处,感谢您的尊重! </li> </div> <div class='page layui-clear'> <ul> <li>上一篇:<a href="/div-tutorial-329709.html">最新CSS3常用30种选择器总结(适合初学者)</a></li> <li>下一篇:<a href="/div-tutorial-329712.html">Web前端开发css基础样式总结</a></li> </ul> </div> </div> <p class="article-relative-header">相关文章</p> <p class="article-relative-header">相关视频</p> <hr class="layui-clear"> <ul class="article-relative-ul"> <li><span class="layui-badge-dots"></span><a class="relevant" href="/div-tutorial-10862.html" target="_blank">Html如何设置横向导航结构_HTML/Xhtml...</a></li> <li><span class="layui-badge-dots"></span><a class="relevant" href="/div-tutorial-10863.html" target="_blank">Html+css实现纯文字和带图标的按钮_HTML...</a></li> <li><span class="layui-badge-dots"></span><a class="relevant" href="/div-tutorial-10868.html" target="_blank">HTML对于元素水平垂直居中的探讨_HTML/Xh...</a></li> <li><span class="layui-badge-dots"></span><a class="relevant" href="/div-tutorial-10871.html" target="_blank">修改输入框placeholder文字默认颜色-we...</a></li> <li><span class="layui-badge-dots"></span><a class="relevant" href="/div-tutorial-329710.html">HTML(三):框架+表单</a></li> </ul> <ul class="article-relative-ul"> <li><span class="layui-badge-dots"></span><a class="relevant" href="/code/31616.html" target="_blank" title='轮播图案例讲解'>轮播图案例讲解</a></li> <li><span class="layui-badge-dots"></span><a class="relevant" href="/code/31615.html" target="_blank" title='轮播图案例的预备知识(3)'>轮播图案例的预备知识(3)</a></li> <li><span class="layui-badge-dots"></span><a class="relevant" href="/code/31614.html" target="_blank" title='轮播图案例的预备知识(2)'>轮播图案例的预备知识(2)</a></li> <li><span class="layui-badge-dots"></span><a class="relevant" href="/code/31613.html" target="_blank" title='轮播图案例的预备知识(1)'>轮播图案例的预备知识(1)</a></li> </ul> <div class="layui-clear"></div> </div> <div class="comment layui-clear"> <div class="J_Header" id="J_Header"> <p class="header-title">网友评论</p> <p class="header-protocol">文明上网理性发言,请遵守 <a href="javascript:void(0);">新闻评论服务协议</a></p> <a class="article-comment-publish" href="javascript:void(0);">我要评论</a> </div> <div class="layui-row diy-page"></div> <div class="text-box layui-clear article_comment_textarea" > <div class="box-left"> <li> <a href="javascript:login_trigger()"> <img src="/static/images/user_avatar.jpg" alt=""> </a> </li> <li><a href="javascript:login_trigger()"></a></li> </div> <div class="box-right"> <textarea name="desc" placeholder="请输入内容" class="layui-textarea article_textarea"></textarea> <button class="layui-btn article_publish" data-id="329710">立即提交</button> </div> </div> </div> <div class="article-hot"> <h2>专题推荐</h2> <ul> <li> <a href="/map/dugu.html" target="_blank"><img src="https://img.php.cn/upload/article/000/000/003/5d1ef1e9e866e635.jpg"></a> <a class="course-title" href="/map/dugu.html" target="_blank">独孤九贱-php全栈开发教程</a> <p class="course-type">全栈 <i class="layui-icon layui-icon-user"></i> 100W+</p> <p class="course-des">主讲:Peter-Zhu 轻松幽默、简短易学,非常适合PHP学习入门</p> </li> <li> <a href="/map/yunv.html" target="_blank"><img src="https://img.php.cn/upload/article/000/000/003/5d1ef236ca878949.jpg"></a> <a class="course-title" href="/map/yunv.html" target="_blank">玉女心经-web前端开发教程</a> <p class="course-type">入门 <i class="layui-icon layui-icon-user"></i> 50W+</p> <p class="course-des">主讲:灭绝师太 由浅入深、明快简洁,非常适合前端学习入门</p> </li> <li> <a href="/toutiao-409221.html" target="_blank"><img src="https://img.php.cn/upload/article/000/000/003/5d1ef2477c7d7587.jpg"></a> <a class="course-title" href="/toutiao-409221.html" target="_blank">天龙八部-实战开发教程</a> <p class="course-type">实战 <i class="layui-icon layui-icon-user"></i> 80W+</p> <p class="course-des">主讲:西门大官人 思路清晰、严谨规范,适合有一定web编程基础学习</p> </li> </ul> <div class="clear"></div> </div> </div> <div class="layui-col-md4 article-list-right "> <div class="panel"> <div class="panel-title">作者信息</div> <div id="profile-2"> <div class="avatar-wrap"> <a href="/member/1.html" target="_blank" class="avatar-link"> <img src="/static/images/user_avatar.jpg" class="func-um_user gravatar avatar avatar-120 um-avatar um-avatar-uploaded"> </a> </div> <div class="profile-info"> <p> <span class="author-name">php教程</span> <i class="layui-icon layui-icon-auz" title="认证作者"></i> </p> <p class="author-description">认证0级讲师</p> <div class="author-article"> <dl class="list-one"> <dt class="panel-title">最近文章</dt> </dl> </div> </div> </div> </div> <div class="layui-clear"><a href='javascript:publish_article()' class='layui-btn layui-btn-danger article-add'>发布技术文章</a> </div> <div class='top-article layui-clear'> <div class="layui-tab layui-tab-card"> <ul class="layui-tab-title"> <li class="layui-this">最新文章</li> <li>热门排行</li> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show"> <ul> <p class='top-img'> <a href='/toutiao-387072.html' target="_blank" title='面对巨额亏损的PHP中文网,我该为情怀买单吗?(猪哥)'><img src='https://img.php.cn/upload/article/000/000/003/5b890a9e4417f872.png' style="width: 100%"></a> </p> <li><a href='/div-tutorial-424437.html' target="_blank" title='html是什么语言'>html是什么语言</a></li> <li><a href='/div-tutorial-423408.html' target="_blank" title='图片超链接怎么设置'>图片超链接怎么设置</a></li> <li><a href='/div-tutorial-421720.html' target="_blank" title='如何学习html5'>如何学习html5</a></li> <li><a href='/div-tutorial-421550.html' target="_blank" title='html的正式名称是'>html的正式名称是</a></li> <li><a href='/div-tutorial-421453.html' target="_blank" title='html怎么添加css样式?'>html怎么添加css样式?</a></li> <li><a href='/div-tutorial-421411.html' target="_blank" title='HTML怎么引入js文件?'>HTML怎么引入js文件?</a></li> <li><a href='/div-tutorial-421142.html' target="_blank" title='jsp四大作用域有什么'>jsp四大作用域有什么</a></li> <li><a href='/div-tutorial-421132.html' target="_blank" title='页面中文本域的值怎么设置'>页面中文本域的值怎么设置</a></li> </ul> </div> <div class="layui-tab-item"> <ul> <p class='top-img'> <a href='/toutiao-387072.html' target="_blank" title='面对巨额亏损的PHP中文网,我该为情怀买单吗?(猪哥)'><img src='https://img.php.cn/upload/article/000/000/003/5b890a9e4417f872.png' style="width: 100%"></a> </p> <li><a href='/div-tutorial-409203.html' target="_blank" title='html p标签怎么换行?html p标签添加br换行标签的应用'>html p标签怎么换行?html p标签添加br换行标签的应用</a></li> <li><a href='/div-tutorial-409470.html' target="_blank" title='html怎么换行?换行代码是什么?九种html文字换行方法总结'>html怎么换行?换行代码是什么?九种html文字换行方法总结</a></li> <li><a href='/div-tutorial-409786.html' target="_blank" title='html怎样设置背景颜色?HTML背景颜色代码详细分析'>html怎样设置背景颜色?HTML背景颜色代码详细分析</a></li> <li><a href='/div-tutorial-380634.html' target="_blank" title='认识<br>与<p>标签之间的区别'>认识<br>与<p>标签之间的区别</a></li> <li><a href='/div-tutorial-381329.html' target="_blank" title='六款好用的html5编辑器'>六款好用的html5编辑器</a></li> <li><a href='/div-tutorial-412520.html' target="_blank" title='HTML编辑器有哪些?最好用的4款HTML编辑器推荐'>HTML编辑器有哪些?最好用的4款HTML编辑器推荐</a></li> <li><a href='/div-tutorial-409380.html' target="_blank" title='html搜索框怎么设置?html搜索框input标签的使用方法实例'>html搜索框怎么设置?html搜索框input标签的使用方法实例</a></li> <li><a href='/div-tutorial-411544.html' target="_blank" title='如何制作一个简单的HTML登录页面(附代码)'>如何制作一个简单的HTML登录页面(附代码)</a></li> </ul> </div> </div> </div> </div> <div class='article-ad article-course php-news-right-imginfo'> <div class='r-title'><i class='layui-icon layui-icon-praise'></i>推荐视频教程</div> <li> <a href='/course/179.html' target="_blank" > <img src='https://img.php.cn/upload/course/000/000/003/5a17982d48686254.jpg' alt="javascript初级视频教程" height='60'> </a> <span><a href='/course/179.html' target="_blank">javascript初级视频教程</a></span> </li> <li> <a href='/course/181.html' target="_blank" > <img src='https://img.php.cn/upload/course/000/000/003/5a179283c3885703.jpg' alt="jquery 基础视频教程" height='60'> </a> <span><a href='/course/181.html' target="_blank">jquery 基础视频教程</a></span> </li> </div> <div class='article-ad mt-20' id="aritcle_detail_new"> <div class='r-title'><i class='layui-icon layui-icon-video'></i>视频教程分类</div> <ul class='course-category-lists layui-clear'> <li><a href="/course/list/29/type/2.html" target="_blank"><div class="course-category-child-first">php视频教程</div><div class='course-category-child'></div></a></li> <li><a href="/course/list/11.html" target="_blank"><div class="course-category-child-first">html视频教程</div><div class='course-category-child'></div></a></li> <li><a href="/course/list/12.html" target="_blank"><div class="course-category-child-first">css视频教程</div><div class='course-category-child'></div></a></li> <li><a href="/course/list/17.html" target="_blank"><div class="course-category-child-first">JS视频教程</div><div class='course-category-child'></div></a></li> <li><a href="/course/list/19.html" target="_blank"><div class="course-category-child-first">jQuery视频教程</div><div class='course-category-child'></div></a></li> <li><a href="/course/list/51.html" target="_blank"><div class="course-category-child-first">mysql视频教程</div><div class='course-category-child'></div></a></li> <li><a href="/course/list/33.html" target="_blank"><div class="course-category-child-first">Linux视频教程</div><div class='course-category-child'></div></a></li> <li><a href="/course/list/30.html" target="_blank"><div class="course-category-child-first">Python视频教程</div><div class='course-category-child'></div></a></li> </ul> </div> </div> </div> </div> <!--技术文章--> <script src="/static/ueditor/third-party/SyntaxHighlighter/shCore.js?3.1.1"></script> <script>article_status = 0;</script> <script type="text/javascript" src="/static/js/jquery.min.js"></script> <script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script> <div class="layui-clear layui-bg-black php-ul-li footer_top_margin"> <div class="layui-row layui-main" > <div class="layui-col-md9"> <ul class="php-float-left"> <li><a href="/" target="_blank" title="网站首页">网站首页 </a></li> <li><a href="/course/list/29/type/2.html" target="_blank" title="PHP视频">PHP视频</a></li> <li><a href="/course/list/29/type/4.html" target="_blank" title="PHP实战">PHP实战</a></li> <li><a href="/course/list/29/type/1.html" target="_blank" title="PHP代码">PHP代码</a></li> <li><a href="/course/list/29/type/3.html" target="_blank" title="PHP手册">PHP手册</a></li> <li><a href="/wikis.html" target="_blank" title="词条">词条</a></li> <li><a href="/write.html" target="_blank" title="手记">手记</a></li> </ul> <p class="layui-clear footer_phpcn">PHP中文网:独家原创,永久免费的在线php视频教程,php技术学习阵地!</p> <p class="footer_phpcn_record">Copyright 2014-2019 http://www.php.cn/ All Rights Reserved | 皖B2-20150071-9 <img src="/static/images/foot_line.gif" width="15"> 皖公网安备 34010402701654号 <a rel="external nofollow" target="_blank" href="https://www.qieseo.com/wp-content/themes/begin/go.php?url=aHR0cDovLzExMi4zMC42My4xMDk6ODg4Ny9zaG93RWk/aWQ9NmE1OGY3NGQxNzk4NDY3NWFhMWI2NzFkMGZhMTAxY2YmYW1wO2FtcDt1cmw9cGhwLmNu" rel="nofollow" target="_blank"><img src="/static/images/foot_line.gif" width="15"></a> <span class="footer_phpcn_say"><a href="/about/disclaimer.html" target="_blank">免责申明</a><a href="/about/donate.html" style="margin-right:40px" target="_blank">赞助与捐赠</a></span></p> <p></p> </div> <div class="layui-col-md3" style="padding-top:15px;"> <img src="https://img.php.cn/upload/article/000/000/003/5c50106148dc3454.png" width="100" title="官方QQ群:977601088">  <img src="/static/images/phpcn_erwei.jpg" width="100" title="扫一扫,关注公众号"> </div> </div> </div> <input type="hidden" id="verifycode" value="/captcha.html"> <script src="/static/js/jquery.min.js"></script> <script src="/static/layui/layui.js"></script> <script type="text/javascript" src="/static/js/global.min.js?5.4.31"></script> <script>var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?8cc45d54c337ca616c34b1cf747da91c"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })();(function(){var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if(curProtocol === 'https'){bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';}else{bp.src = 'http://push.zhanzhang.baidu.com/push.js';};var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(bp, s);})();</script> </body> </html>

继续阅读
weinxin
欢迎加入中国站长博客之家
本站的所有资源都会上传分享到博客之家,希望大家互相学习交流进步。
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: