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