软件测试攻略(五):HTML初识 (2)

(接上文实例练习)

  • form表单
    表单是一个包含表单元素的区域。实现本页与其他页的数据交互。
    form有两个属性,action和method,action后面跟的是传回服务器的路径,method传回服务器的方式,只有两种方式,post加密,get不加密。
    form的作用是提取input标签中name属性的value,传回后台服务器。
<form action="某路径"  method="post">
  <table>
      <tr>
        <td>学生姓名:</td> 
        <td> 
          <input type="text" name="sname"> 
        </td> 
      </tr>
  </table>
</form>

在前端界面显示为:


前端界面图示.png

当用户在前端界面输入信息时,例如,输入"杨过",当用户提交后,form表单提取name属性的值传回服务器,传回的数据为,sname:杨过 。

  • select下拉框
    select 元素可创建单选或多选菜单。option定义下拉选项


    下拉框图示.png

上图代码为:

<select >  
    <option value="s0">---请选择---</option>
    <option value="s1">s001牛顿</option>          
    <option value="s2">s002牛逼</option>          
</select>
  • input标签(2)

就算是资深的程序员也不一定能记得所有关键词的意思,不一定能知道所有需要如何实现,至此,必须告诉大家,外事不决问百度,普通1-3年经验的软件测试需要解决的问题,百度都有。

比如课后练习中笔试时间后面的日期是一个下拉选择框:


image.png

百度搜索关键字 “html 日期下拉框”,注意筛选与自己想要的相符的内容,第二篇文章中,就提到日期控件date。


百度图示1.png
百度图示2.png

于是在我们自己的代码中相应的位置键入以下代码,就能得到想要的效果:

<input type="date">

之后就可以自己运用百度做出课后练习中的效果。
再提示一下,都是input标签的type属性的其它种类哟

五、注释

<!--  注释内容,注释不会在浏览器中显示。-->

注释的作用,对纷繁复杂的代码进行解释,方便自己和别人看懂。


注释.png

注释的妙用,当自己辛苦写了一段代码不需要是,用注释包住,因为你永远无法知道你的领导会不会砍掉你辛苦写的功能后,又反复无常的说,Emmmm....我想了一下,那个功能还是不能砍掉。如果此时你已删除代码,卒。如果你只是用注释包住,取消注释即可,老板还会赞你真是可good boy!

课后作业:做出如下页面效果,并对所写代码进行注释。

课后作业.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 15,604评论 4 61
  • 旅途中,我遇到了谁?谁又遇到了我?到底会发生什么样的故事,由此产生什么样的感悟呢? 去年的这个时候,在从胶东到北京...
    北京彩虹阅读 319评论 5 14
  • 芝华姐姐 一个进入我朋友圈,加上我私信。问我三个问题就让我立刻去查来者何人! 她进入完颜,调查分析无数完颜家人,进...
    完颜古方张振华阅读 556评论 0 5
  • 世界上最快而又最慢,最长而又最短,最平凡而又最珍贵,最容易被忽视而又最令人后悔的就是时间。 时间的属性决定了,被它...
    Helen最爱葡萄蛋挞阅读 366评论 0 0
  • 虚荣害人啊 别这样 少跟虚荣人交往。
    青果子阅读 194评论 0 0

友情链接更多精彩内容