zoukankan      html  css  js  c++  java
  • web前端标准

    web前端标准

    web前端技术不是指的某一项技术,而是一系列技术的集合:

    html:结构标准,负责网页结构的搭建

    css:样式标准/表现标准:负责网页的美化工作

    js:行为标准,负责网页的行为动作

    专业名词解释

    1 web也叫www,指代的是万维网

    2 http协议,就是在输入网址的时候,默认给我们添加的一段代码,这个代码的意思是超文本传输协议

    3 多个网页(图片,文字,链接……)组成的一个网站

    4 网页在浏览器中运行(解析)

    测试的细节:

    ​ 作为测试人员,必须测试ie,谷歌,火狐,欧朋浏览器占有率低,苹果和谷歌最终效果相似:除非用户要求

    Html

    定义:超文本标记语言

    现阶段使用的版本:html5.0 和xhtml1.0

    回车和换行(html的职责):

    回车:

    <br /> 一个回车
    

    空格:

    &nbsp;
    

    注意:html中可以实现一点点的样式效果,但是在实际的工作场景中,程序员一定是使用css来实现的效果样式

    html5.0

    标题标签

    在html中一共定义了一组专门用表示网页标题的标签,从h1-h6共计六个标签

        <h1>标题<h1>
        <h2>标题<h2>
        <h3>标题<h3>
        <h4>标题<h4>
        <h5>标题<h5>
        <h6>标题<h6>
    

    段落标签

    和标题不同的地方大于html中定义了六种标题,而段落只有一个标签,标签名是p,这是双标签

    	<p>段落内容</p>
    

    标签语义化

    在合适的地方使用合理的标签,符合标签语义化的网站,搜索引擎更加喜欢(搜索网站时,结果中此网站的排名更加靠前)

    http://www.w3school.com.cn/ w3c联盟组织的一些语法规则可以从这里面查询到

    文字标签

    文字标签有很多,但是在书写网页的时候关于文字的外在样式我们一般能通过css来进行设置,下面分两组列出一些文字标签

    删除线标签

    	<s>删除线</s>
    	<del>删除线</del>
    

    删除线

    以上两个都可以实现删除线的效果,但是前者已经逐渐被后者替代

    常用的布局标签

        <div></div>  没有任何语义,只是用来放数据的一个容器,称为大盒子(一行只能放一个)
        <span></span>  没有任何语义,只是用来放数据的一个容器,称为小盒子(同一行可以放多个span,只要放的下)
    

    img标签

    	<img src="图片路径" width="宽度" height="高度" title="标题(鼠标悬停在图片上时显示的文字)" alt="1、当图片没有正常加载时,给用户的提示文字(描述这是什么样的图片) 2、增加用户体验"/>
    

    src 是img标签的属性(source资源),格式称为键值对

    超链接

    定义:点击之后可以实现页面的跳转

    测试点:普通超链接在点击之后,会在本窗口打开页面,还可以实现点击之后在新窗口打开页面;

    ​ 在某些情况下,程序员还不知道ruhr写具体的链接地址,此时就会设置空连接(点击之后不跳转)

    	<a herf="超链接" target="_blank">点击的文字</a>
    	<a herf="#或者javas:;">点击我哪里都不去,因为我是空连接(点击之后不跳转)</a>
    

    target=“_blank” 点击之后,使用新窗口打开

    表单

    定义:所有用户输入的用户名,账户,密码,邮箱……统一称为表单数据

    表单数据必须放在form标签中;

    form中的属性:action中的值,代表当前的表单数据要提交给哪个后台程序xxx.php

    ​ method中的值代表传输数据的过程中使用哪种方法:

    ​ 1、get 不加密传输

    ​ 2、post 加密传输

    input标签的type类型不同,就可以实现不一样的效果:

    ​ 1、type=“text” 普通文本框

    ​ 2、type=“submit” 提交按钮

    ​ 3、type=“password” 密码框(输入的文字回加密显示)

    ​ 4、type=“radio” 单选框

    测试细节:

    ​ A、点击查看是否实现单选效果

    ​ B、点击文字查看是否能够切换

    ​ C、默认是否有某一个是选中状态(根据用户和产品经历的要求来定)

    ​ 5、type=“checkbox” 复选框,多选框

    测试细节:

    ​ A、点击文字查看是否可以切换(用户体验)

    ​ B、默认是否有某一个或者多个选中状态(根据用户和产品经理的要求来定)

    html的注释:ctrl+?
    	<!--此处的代码只是程序员给自己的提醒,并不在网页上面显示出来-->
    

    注:测试的最后一个阶段,必须要要求程序员将注释删除,因为注释代码也会影响页面的速度,即上线的代码删除注释(但是程序员自己电脑里面的注释不会删除)

    ​ 6、下拉菜单的测试细节:

    ​ A、测试数据是否满足用户的要求:顺序,个数

    ​ B、刷新页面的时候默认选中的是哪一个数据

    ​ 7、文本域测试细节

    ​ 定义:可以多行输入内容的文本框

    ​ A、测试ie、谷歌、火狐浏览器最终的显示大小是否一致

    ​ B、查看文本域的右下角是否可以拖拽放大缩小(要求程序员禁止此功能)

    ​ 8、type=“button”

    ​ 普通按钮,需要js控制才能实现其他的控制效果

    ​ 9、type=”reset“

    ​ 点击之后,可以让当前的表单数据恢复到默认状态(不是清空)

    注意:按钮建议设置value属性,此属性在按钮中,表示按钮的提示文字,如果不写,有可能会导致浏览器的兼容性问题(测试ie,谷歌,火狐提示文字一样即可)

  • 相关阅读:
    wpf随笔
    XGrid绑定(转)
    SQL Server 批量插入数据的两种方法(转)
    UdpClient的Connect究竟做了什么(转)
    InvokeHelper,让跨线程访问/修改主界面控件不再麻烦(转)
    [C#] Control.Invoke方法和跨线程访问控件
    多线程访问winform控件出现异常的解决方法
    http://www.jdon.com/mda/oo_relation.html
    三范式浅析(转)
    SQL 表锁(转)
  • 原文地址:https://www.cnblogs.com/justztz/p/12006538.html
Copyright © 2011-2022 走看看