概述
目录
web前端标准
五大浏览器厂商
第一个html页面
标签语义化
标签
表单
单选按钮
下拉菜单
文本域
多选框（复选框）
按钮
web前端标准
- Html结构标准：负责网页结构的搭建
- Js行为标准：负责网页的行为动作
- Css样式标准：负责网页美化工作
五大浏览器厂商
- ie
- 谷歌
- 苹果
- 火狐
- 欧朋
注：其他浏览器都是用的被人浏览器的技术，自己换了一套皮肤而已。
要想测试代码对所有浏览器兼容的情况下时，按F12，点击仿真，找到文档模式选择要测试的其他版本即可。这个步骤是以ie为例的。
第一个html页面
<!DOCTYPE html> <!-- 描述当前文件的版本信息，如果没有详细说明4.0还是x1.0时，默认为5.0版本 -->
<html>
<head> <!-- 描述网页的头部 -->
<meta charset="utf-8"> <!-- utf-8是国际编码的意思，如果不写或写其他都会有问题（乱码） -->
<title>第一个html网页案例</title> <!-- 描述网页的标题 -->
</head>
<body> <!-- 我们写的代码放在body里面 -->
</body>
</html>
注：html文档不能正常识别回车和换行，只能使用特定代码来实现；标签、标记、节点、元素都是尖括号。
标签语义化
在合适的地方使用合适的标签：（该放p就放p）
为什么要标签语义化：因为浏览器只认识标签，没有语音语调，所有想表达的东西只能使用对应的标签来表示。
标签语义的好处：语义化做的好，可以让搜索引擎把你的网站排名更靠前。
标签
- h标签（标题）：标题标签。h1最大，h6最小。前后标签要一致。
- p标签（段落）：段落标签。
- b（加粗）标签：<strong></strong>比b标签多了强调语句
注：strong代表特别强调，一篇文章中不要出现多次；em代表一般强调，一篇文章中可以出现多次。
- u（下划线）标签
- i（斜体）标签：<em></em>比i标签多了强调语义
- del（删除线）标签：s标签渐渐淘汰了
- <br />:一个换行回车
- ctrl+/:注释
- img标签:
- a标签：
<a href=”跳转的网页的路径”>文字</a>
注：如果要跳转到线上地址，必须加完整地址。例如：https://www.baidu.com。（如果不确定自己写的地址对不对时，可以在浏览器直接输入网址，如果能跳转到就证明正确，否则错误。）
空链接的写法：
<a href="###">不知道要跳转到哪</a><br />
<a href="javascript:;">不知道要跳转到哪(javascript:;)</a><br />
<a href="javascript:void(0);">不知道要跳转到哪(javascript:void(0);)</a><br />
锚点连接：点击之后可以跳转到页面的对应位置。给想跳转到的位置写一个id属性。a标签中的href属性写#id的值。
例如：<a href="#haha">知道要跳转到具体的位置</a><br />
表单
所有用户输入的内容都要放在form标签中。
Action：代表数据给那个后台程序
Method：代表传输数据的方法：1.post（加密）2.get（不加密）
<input type=”” />：input代表输入框标签（单标签），type类型决定这个输入框的类型。
Name属性：代表这个输入框的名字。
Id：打包输入框的id编号。
Value：代表默认输入框（不符合用户体验，应该换成placeholder）
注：placeholder属性ie低版本不兼容，但是我们实际工作中还要使用，因为渐进增强（随着浏览器版本的提升，效果越来越好）、优雅降级（在高版本浏览器显示效果好的前提下，保证了低版本浏览器不错乱）
type=”text”：代表普通输入框。
type=”password”:代表密码输入框
单选按钮
Type=”radio”
注：如果想让文字点击能切换，那要加label标签，并设置for属性和对应的单选按钮的id属性值一致；必须给这一组单选按钮添加name值，才可以实现单选效果；设置默认选中状态，要给单选按钮添加checked="checked"。
下拉菜单
Select和option的组合
注：如果想设置多组下拉菜单，需要添加一个optgroup标签，并设置label属性做为提示文字；如果想设置默认选中状态，需要给对应的option添加sekected属性。
文本域
Textarea标签来设置多行文本（文本域）。
注：不能使用cols、rows来设置宽高，要用width、height来设置，它也可以使用placeholder来设置默认提示文字。
多选框（复选框）
Type=“checkbox”：它的使用方法和细节与单选框一致。
按钮
提交按钮：type=”submit”
注：必须设置value属性，否则浏览器之间有兼容性问题。
重置按钮：type=”reset”
注：必须设置value属性，否则浏览器之间有兼容性问题；恢复刷新后的默认状态。
按钮：type="button"或<button></button>都可以。
用户体验细节：刷新后想让第一个输入框默认选中状态，给输入框设置autofocus="autofocus"属性。
- 昵称：要添加默认属性，可以提高用户的体验感。当用户看到表单信息，光标要默认在第一个属性上。如果没有这两点可以提一下建议性的bug。
- 性别和爱好：这是单选框和复选框的使用。当用户点击文字时，也可以勾选上。这也是一个建议性的bug。复选框如果太多的话，可以添加一个总按钮“全选”，这也是增加了用户的体验感。
- 对于我们测试人员来说，无论是type="button"或<button></button>来添加按钮都没有什么影响，我们只需要测试这个按钮是否能给到我们想要的结果即可。
注：我们测试人员既要站在程序员的位置上去思考，也要站在用户的位置去思考。我们要把这两类人要达到共赢得局面。这才是我们测试人员的价值。
最后
以上就是贤惠蜗牛为你收集整理的web前端测试笔记的全部内容，希望文章能够帮你解决web前端测试笔记所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
![web压力测试工具AB[Apache_Bence]](/uploads/reation/bcimg2.png)
发表评论 取消回复