祝志英 發表於 2019-12-7 21:10:00

html5中output元素详解

<h1 style="text-align: center">html5中output元素详解</h1>
<h2>一、总结</h2>
<h3>一句话总结：</h3>
<h5>output元素是HTML5新增的元素，用来设置不同数据的输出，没什么大用，了解即可</h5>
<div class="cnblogs_code">
<pre>    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">form </span><span style="color: rgba(255, 0, 0, 1)">action</span><span style="color: rgba(0, 0, 255, 1)">="L3_01.html"</span><span style="color: rgba(255, 0, 0, 1)"> method</span><span style="color: rgba(0, 0, 255, 1)">="get"</span><span style="color: rgba(255, 0, 0, 1)"> oninput</span><span style="color: rgba(0, 0, 255, 1)">="num.value=parseInt(num1.value)+parseInt(num2.value)"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
      <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">input </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="number"</span><span style="color: rgba(255, 0, 0, 1)"> id</span><span style="color: rgba(0, 0, 255, 1)">="num1"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span><span style="color: rgba(0, 0, 0, 1)"> +
      </span><span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">input </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="number"</span><span style="color: rgba(255, 0, 0, 1)"> id</span><span style="color: rgba(0, 0, 255, 1)">="num2"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span><span style="color: rgba(0, 0, 0, 1)"> =
      </span><span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">output </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="num"</span><span style="color: rgba(255, 0, 0, 1)"> for</span><span style="color: rgba(0, 0, 255, 1)">="num1 num2"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">output</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">form</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span></pre>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3>1、oninput表单事件 触发时机？</h3>
<h5>当用户对元素数据的输入时触发</h5>
<p>&nbsp;</p>
<h3>2、output元素实例？</h3>
<h5>output元素配合form的oninput事件</h5>
<div class="cnblogs_code">
<pre>    <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">form </span><span style="color: rgba(255, 0, 0, 1)">action</span><span style="color: rgba(0, 0, 255, 1)">="L3_01.html"</span><span style="color: rgba(255, 0, 0, 1)"> method</span><span style="color: rgba(0, 0, 255, 1)">="get"</span><span style="color: rgba(255, 0, 0, 1)"> oninput</span><span style="color: rgba(0, 0, 255, 1)">="num.value=parseInt(num1.value)+parseInt(num2.value)"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
      <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">input </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="number"</span><span style="color: rgba(255, 0, 0, 1)"> id</span><span style="color: rgba(0, 0, 255, 1)">="num1"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span><span style="color: rgba(0, 0, 0, 1)"> +
      </span><span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">input </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="number"</span><span style="color: rgba(255, 0, 0, 1)"> id</span><span style="color: rgba(0, 0, 255, 1)">="num2"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span><span style="color: rgba(0, 0, 0, 1)"> =
      </span><span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">output </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="num"</span><span style="color: rgba(255, 0, 0, 1)"> for</span><span style="color: rgba(0, 0, 255, 1)">="num1 num2"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">output</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
    <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">form</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span></pre>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h2>二、html5--3.18 新增的output元素</h2>
<p>&nbsp;</p>
<h3>学习要点</h3>
<ul>
<li>了解output元素的用法</li>
</ul>
<h4>output元素：<span style="color: rgba(255, 0, 0, 1)">数据的输出</span></h4>
<ul>
<ul>
<li>output元素是HTML5新增的元素，用来设置不同数据的输出</li>
</ul>
</ul>
<p><br><br></p>
<ul>
<ul>
<li>output元素的输出内容是由<span style="color: rgba(255, 0, 0, 1)"><strong>代码</strong></span>控制的</li>







</ul>







</ul>
<p>
<br><br></p>
<ul>
<ul>
<li>这节课的演示需要用到简单的javascript知识,暂时不理解没关系，主要是了解output元素的使用方法，后边的课程中我们安排了专门的章节讲解javascript</li>







</ul>







</ul>
<p>
<br><br></p>
<ul>
<ul>
<li>output元素的属性：</li>







</ul>







</ul>
<p>
<br><br></p>
<ul>
<ul>
<li><strong><span style="color: rgba(255, 0, 0, 1)">name</span></strong>属性：定义对象的唯一名称。（表单提交时使用）</li>
<li><strong><span style="color: rgba(255, 0, 0, 1)">form</span></strong>属性：定义<strong><span style="color: rgba(255, 0, 0, 1)">所属的</span></strong>一个或多个<span style="color: rgba(255, 0, 0, 1)"><strong>表单</strong></span>。</li>
<li><span style="color: rgba(255, 0, 0, 1)"><strong>for</strong></span>属性：定义<strong><span style="color: rgba(255, 0, 0, 1)">输出域</span><span style="color: rgba(255, 0, 0, 1)">相关</span></strong>的一个或多个<strong><span style="color: rgba(255, 0, 0, 1)">元素</span></strong>。</li>







</ul>
<li>案例演示需要用到两个没有学过的知识，表单事件</li>







</ul>
<ul>
<ul>
<li><span style="color: rgba(255, 0, 0, 1)"><strong>oninput</strong></span>表单事件：当用户对元素数据的输入时触发</li>
<li><strong><span style="color: rgba(255, 0, 0, 1)">parseInt</span></strong>() 是一个javascript函数，它可以解析一个字符串，并返回一个整数。</li>







</ul>






</ul>
<p>&nbsp;</p>
<p>&nbsp;</p>
<h3>实例</h3>
<p>&nbsp;<img src="https://images2018.cnblogs.com/blog/1163900/201712/1163900-20171204010812326-1377407708.png" alt=""></p>
<p><img src="https://images2018.cnblogs.com/blog/1163900/201712/1163900-20171204010849841-2019849625.png" alt=""></p>
<div class="cnblogs_code"><img id="code_img_closed_cc5b75a1-d7d0-4811-9d56-511a1b992f79" class="code_img_closed" src="https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif" alt=""><img id="code_img_opened_cc5b75a1-d7d0-4811-9d56-511a1b992f79" class="code_img_opened" style="display: none" src="https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif" alt="">
<div id="cnblogs_code_open_cc5b75a1-d7d0-4811-9d56-511a1b992f79" class="cnblogs_code_hide">
<pre><span style="color: rgba(0, 128, 128, 1)"> 1</span> <span style="color: rgba(0, 0, 255, 1)">&lt;!</span><span style="color: rgba(255, 0, 255, 1)">doctype html</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 128, 128, 1)"> 2</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">html</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 128, 128, 1)"> 3</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">head</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 128, 128, 1)"> 4</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">meta </span><span style="color: rgba(255, 0, 0, 1)">charset</span><span style="color: rgba(0, 0, 255, 1)">="utf-8"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 128, 128, 1)"> 5</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">title</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>无标题文档<span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">title</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 128, 128, 1)"> 6</span> <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">head</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 128, 128, 1)"> 7</span>   <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">p </span><span style="color: rgba(255, 0, 0, 1)">style</span><span style="color: rgba(0, 0, 255, 1)">="color:#FF0000"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 128, 128, 1)"> 8</span>   
<span style="color: rgba(0, 128, 128, 1)"> 9</span>   <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">p</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 128, 128, 1)">10</span>   <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">form </span><span style="color: rgba(255, 0, 0, 1)">action</span><span style="color: rgba(0, 0, 255, 1)">="L3_01.html"</span><span style="color: rgba(255, 0, 0, 1)"> method</span><span style="color: rgba(0, 0, 255, 1)">="get"</span><span style="color: rgba(255, 0, 0, 1)"> oninput</span><span style="color: rgba(0, 0, 255, 1)">="num.value=parseInt(num1.value)+parseInt(num2.value)"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 128, 128, 1)">11</span>         <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">input </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="number"</span><span style="color: rgba(255, 0, 0, 1)"> id</span><span style="color: rgba(0, 0, 255, 1)">="num1"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span><span style="color: rgba(0, 0, 0, 1)"> +
</span><span style="color: rgba(0, 128, 128, 1)">12</span>         <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">input </span><span style="color: rgba(255, 0, 0, 1)">type</span><span style="color: rgba(0, 0, 255, 1)">="number"</span><span style="color: rgba(255, 0, 0, 1)"> id</span><span style="color: rgba(0, 0, 255, 1)">="num2"</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span><span style="color: rgba(0, 0, 0, 1)"> =
</span><span style="color: rgba(0, 128, 128, 1)">13</span>         <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">output </span><span style="color: rgba(255, 0, 0, 1)">name</span><span style="color: rgba(0, 0, 255, 1)">="num"</span><span style="color: rgba(255, 0, 0, 1)"> for</span><span style="color: rgba(0, 0, 255, 1)">="num1 num2"</span><span style="color: rgba(0, 0, 255, 1)">&gt;&lt;/</span><span style="color: rgba(128, 0, 0, 1)">output</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 128, 128, 1)">14</span>   <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">form</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 128, 128, 1)">15</span> <span style="color: rgba(0, 0, 255, 1)">&lt;</span><span style="color: rgba(128, 0, 0, 1)">body</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 128, 128, 1)">16</span> <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">body</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span>
<span style="color: rgba(0, 128, 128, 1)">17</span> <span style="color: rgba(0, 0, 255, 1)">&lt;/</span><span style="color: rgba(128, 0, 0, 1)">html</span><span style="color: rgba(0, 0, 255, 1)">&gt;</span></pre>
</div>
<span class="cnblogs_code_collapse">View Code</span></div>
<p>&nbsp;</p>
<div>&nbsp;</div>

</div>
<div id="MySignature" role="contentinfo">
    <div id="fry_added_part">
    <div class="fry_website">
      <div class="fry_website" style="color:#3c8dbc;padding: 10px 0;display:none;">
            我的旨在学过的东西不再忘记（主要使用艾宾浩斯遗忘曲线算法及其它智能学习复习算法）的偏公益性质的完全免费的编程视频学习网站：
            【读书编程笔记】fanrenyi.com；有各种前端、后端、算法、大数据、人工智能等课程。
      </div>
      <div class="copyright" style="color: red;padding-bottom: 10px;">
            版权申明：欢迎转载，但请注明出处
            <div style="font-size: 12px">一些博文中有一些参考内容因时间久远找不到来源了没有注明，如果侵权请联系我删除。</div>
      </div>
      <div id="fry_know_friends" style="color: red;padding-bottom: 10px;font-size: 22px;">
            <div style="display:none;"></div>
            <div style="display:none;">在校每年国奖、每年专业第一，加拿大留学，先后工作于华东师范大学和香港教育大学。</div>
            <div style="display:none;">2025-04-30：宅加太忙，特此在网上找女朋友，坐标上海，非诚勿扰，vx：fan404006308</div>
      </div>
      <div class="copyright" style="color: green;padding-bottom: 10px;">
            录播课资料github地址：https://github.com/fry404006308/fry_course_materials
      </div>
      <div style="display:none;"></div>
    </div>
    <div class="fry_tech_group" style="color: mediumpurple;">
      <div>
            AI交流资料群：753014672
      </div>
    </div>
    <div class="fry_recommend">
      <h2>作者相关推荐</h2>
      <div id="fry_recommend" style="padding-bottom: 40px">
      </div>
    </div>
    <style>
      #fry_added_part .inspiration_content{
            //max-height: 120px;
            overflow: auto;
            margin: 20px 0;
      }
      #fry_added_part .fry_inspiration .simple a{
            margin-right: 25px;
      }
    </style>
    <div style="display:none;" class="fry_inspiration">
      <div style="color: red;font-size: 20px;text-align: center;" class="title">
            感悟总结
      </div>
      <!--分为详细部分和简略部分-->
      <!--详细部分-->
      <div class="detail">
            <div class="url_set">
                <div style="display: none;" class="per_url" href="https://www.cnblogs.com/Renyi-Fan/p/13498246.html"></div>
                <!--<div style="display: none;" class="per_url" href="https://www.cnblogs.com/Renyi-Fan/p/14379366.html"></div>-->
                <!--<div style="display: none;" class="per_url" href="https://www.cnblogs.com/Renyi-Fan/p/14154624.html"></div>-->
            </div>
            <div class="content_set"></div>
      </div>
      <!--简略部分-->
      <div style="display: none;" class="simple">
            <div style="color: #FF9966;margin-bottom: 10px;">其它重要感悟总结</div>
            <div>
                感悟总结200813
                最近心境200830
                最近心境201019
                201218-210205
            </div>
      </div>
    </div>
</div><br><br>
来源：https://www.cnblogs.com/Renyi-Fan/p/12003409.html
頁: [1]
查看完整版本: html5中output元素详解