WEB前端(一)

一，web相关名词介绍

1.web也叫www,指代万维网。

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

3.多个网页组成一个网站。

4.网页有图片，文字，链接组成。

5.网页是在浏览器中进行运行，解析。

二，web前端三大标准

1.html结构标准

2.css样式标准

3.is行为标准

三，五大浏览器厂商

1.IE  2.谷歌   3.火狐   4.欧朋     5.苹果

注意：除了五个浏览器之外的都没有自己的技术，都是使用，ie或谷歌的技术，更改了一套皮肤而已。

测试的细节：作为测试人员必须测试IE，火狐，谷歌，（欧朋占有率低，苹果和谷歌的最终效果很相似，除非用户要求）

四，HTML发展

定义：超文本标记语言(标记<>)现阶段使用的版本；html5.0和xhtml1.0

五，第一个html网页

1.打开hbuilder后，把自己的代码文件夹，拖拽到左侧的“项目管理器”下。

2.点击鼠标左键选中，刚刚拖拽到的代码文件夹中，选中。

3.ctrl+n弹出下拉菜单，选中新建“html文件”。

4.在弹出的对话框中修改文件的名字即可，默认html5.0。

5.在title标签的中间，输入内容。

6.在body标签的中间输入内容。

7.在hbuilder中菜单找到浏览器运行，在指定的浏览器中运行代码。

第一行代码代表，当前html文件的版本信息，如果没有指定详细的指定，就代表html5.0

head中写的内容是网页的头部信息

meta中写的是网页的编码集(必须是UTF-8)

title中写的是网页的标题内容

body中写的是网页的主体内容

注意：标签，标记，元素词语都是可以表示尖括号这种语言

六，回车和转行

在html语法中，如果想实现回车和空格效果必须使用代码才能实现。

回车-------------------<br />       一个回车

空格-------------------  &nbsp        一个空格

注意：html中可以实现一点点的样式效果。但是实际工作中，程序员一定使用css来实现样式效果。

七，标题标签

例：<h1> 呵呵 </ h1>

解释：被标题标签包裹的文字，会被当做独占一行的标题来使用，文字会变粗，变大；h标签的家族只有1到6，特点是一次偏小。

八，标签语义化

在适合的地方使用合理的标签，符合标签语义化的网站，搜索引擎更喜欢（网站排名靠前）

段落标签：<p>   段落内容 </ p>

加粗标签：<b>  内容    </ b>      或  <strong>   内容  </ strong>   程度加强

下划线标签：<u>  内容  </ u>

倾斜标签：  <i>  内容  </ i>       或   <em >    内容   < /em>

九，删除线标签

<s>    我是  </s>    或   <del>   我是   </ del>

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

十，div和span 布局标签

这两个标签没有语义，就是放数据的容器；

<div>   大盒子，一行只能存在一个  < /div>

<span> 小盒子，只要一行放得下，就可以存放多个   </span>

十一，img 图片标签

<img src ="图片的名字“ /> 

解释：图片标签属于单标签，src是设置图片资源的(要显示哪一张图片）

属性名=“属性值“  我们管这种属性名和属性值的组合叫“键值对”也叫“KV对”

width  ="密度值”

height="高度值"

title ="鼠标悬停后的提示文字"

alt="1.图片没有加载出来的提示文字2.网页阅读器可以取此处的文字给视障用户听增强用户体验"

十二，路径

1.同级路径：以当前文件为基准去找别的文件。

2.下级路径：以当前文件为基准点击文件夹后查找文件。

3.上级路径：以当前文件为基准，返回上一级去找文件。

注意：以上三条叫相对路径。

绝对路径：把文件在电脑中的所有路径地址拿过来的一种书写方式，这种写法绝对不会出现在前端代码中。

十三，超链接

定义：点击之后可以实现页面的跳转，普通超链接点击之后会在本窗口打开页面，还可以规定点击之后再新窗口打开页面。

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

十四，表单

定义：所有用户输入；用户名，账户，密码，邮箱，等统一称他们为表单数据。

表单数据必须要放在from标签中：from中的属性：  action中的值代表；当前的表单数据要提交给那个后台程序。

action ="xxx.jsp"  method ="post"<br />

methon：中的值代表传输过程中使用哪种方法；

(1)get   不加密传输

(2)post  加密传输

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

1.type="text"   普通文本框

2.type="submit"   提交按钮

3.type="password"  密码框(输入文字加密)

4.type="radio"  单选框

测试细节：

1.点击查看是否实现单选效果。

2.点击查看文字是否能切换，用户体验提升。

3.默认是否某一个选中状态(根据用户要求来决定)

5.type="checkbox"  复选框

测试细节：

1.查看文字是否能切换(用户体验).

2.默认是否有某一个或多个选中状态

注释：被注释的内容不会被浏览器解析，作用是给程序员自己的提醒文字。测试细节：在最后一个阶段的测试过程中，必须要求程序员删除所有的注释代码，因为注释代码，也会影响页面的打开程度。

(6)，下拉菜单的测试细节

1.测试数据是否满足用户的要求；顺序，默认

2.刷新页面的时候默认选中的是哪一个。

(7)，文本域测试细节

定义：可以多行输入内容的文本框。

1.测试ie，谷歌，火狐浏览器最终的显示大小是否一致。

2.查看文本域右下角是否可以拖拽大小。

(8)type="button"   普通按钮，需要控制才能实现其他效果。

(9)type="reset"  重置按钮，点击后可以让当前的表单恢复到默认状态。

注意：按钮建议设置value属性，此属性在按钮中，表示按钮的提示文字，如果不写，很有可能导致浏览器的兼容问题。

例子：

代码：