web前端标准

web前端标准

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

html：结构标准，负责网页结构的搭建

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

js：行为标准，负责网页的行为动作

专业名词解释

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

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

3 多个网页（图片，文字，链接……）组成的一个网站

4 网页在浏览器中运行（解析）

测试的细节：

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

Html

定义：超文本标记语言

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

回车和换行（html的职责）：

回车：

<br /> 一个回车

空格：

 

注意：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，谷歌，火狐提示文字一样即可）