一、Web前端技术包括三大技术：
1. html —— 结构技术： 负责网页结构的搭建
2. css —— 样式标准/表现标准：负责网页的美化工作
3. js —— 行为标准：负责网页的行为动作
二、专业名词解释:
1. web也叫 world wide web （www），指代全球广域网，多称为万维网
2. http协议，在输入网址时，默认给我们添加的一段代码，这个代码的意思就是超文本传输协议
3. 多个网页（图片、文字、连接……）组成一个网站
4. 网页在浏览器中运行（代码被解析）
三、浏览器详解
1. 五大浏览器厂商：ie，谷歌，火狐，欧朋，苹果（除了这五大浏览器之外的都没有自己的技术，用的ie或谷歌的核心技术，换了个皮肤而已）
注意：作为测试人员必要测的是ie、火狐、谷歌；而欧朋的占有率低，苹果的展示效果与谷歌很相似（除非用户要求）
四、HTML的知识
1. 定义：超文本标记语言；现阶段使用的版本有html5.0 和xhtml1.0
2. 编写网页的IDE编译器：HBuilder
3. 编写网页时的细节：
1）打开builder后，把自己的代码文件夹拖拽到左侧的“项目管理器”下
2）点击鼠标左键选中刚刚拖拽的文件夹（显示绿色）
3）ctrl+n 弹出下拉菜单，选中新建“html文件”
4）在弹出的对话框中修改文件的名称，版本5.0是默认的
5）在title标签中间，输入网页的名字
6）在body标签中间输入主体内容
7）ctrl+s保存后，在软件菜单上找到浏览器的运行按钮，点击后，就可以在指定浏览器中运行代码
*第一行代码代表html文件的版本信息
*head中写的内容是网页的头部信息
*meta写的是网页的编码集（必须是UTF-8）
*title中写的是网页/网站的标题内容
*body中写的是网页的主体内容
*标签、标记、元素都是表示<>这样的语法
4. 空格与回车
在html语法中，要实现空格和回车必须要用代码：
回车——<br /> 一个回车（输入“br”，按tab键）
空格—— 一个空格
但是实际工作中，程序员一定是使用css来实现样式效果
5. 标题标签（网页文章标题）
例如：<h1>标题</h1>
解释：会生成独占一行的标题，文字特别大、加粗，h标签就只有1-6，依次缩小，没有h7。
6.标签语义化
在合适的地方使用合适的标签：符合标签语义化的网站，搜索引擎更喜欢（排名更靠前）例如：<p>段落内容</p>
*弱语义：<b>加粗</b>、<i>倾斜</i>、<u>下划线</u>、<s>次删除线</s>
*强语义：<strong>加粗</strong>（一个网页中不能超过2次，否则视为要崩溃）、<em>倾斜</em>、<del>主流删除线</del>
*想学习前端、w3c联盟组织的语法规则可在这里学习和查询：www.w3school.com
7. 常用的布局标签：没有语义的标签，就是放数据的容器；大盒子可以包小盒子，反之不可以
<div></div>：大盒子，一行只能放一个；块；
<span></span>：小盒子，只要一行放得下，就能放下多个；行；
8. img标签
首先代码文件夹里面要存放有你的图片；
<img src="" width="" height="" title="鼠标悬停后的提示文字" alt="1.图片没加载出来时的显示文字；2.网页阅读器的阅读文字，增加用户体验"/>：属性间要有空格，这里属性名=“属性值”，这样的组合叫做“键值对”，也叫“KV对”；其中如果只设置width或只设置height，图片会自动按比例缩放显示
五、路径的概念
1. 绝对路径：把文件在电脑中的所有路径地址直接拿过来的方式，前端不会用
2.相对路径：
1）同级路径：以当前文件为基准去找别的文件；
2）下级路径："文件夹名/js.jpg"，以当前文件为基准，点击文件夹后去找文件；
3）上级路径："../js.jpg"，以当前文件为基准，返回上一级去找文件；
六、超链接
定义：点击后，可以实现页面的跳转
普通的超链接有两种：
1）<a href="" target="_blank"></a>：点击之后，在新窗口打开；
2）<a href="" ></a>：点击之后，在原窗口打开；
还有空连接，点击之后，哪里都不跳转：
<a href="#"></a>
<a href="##"></a>
<a href="javascript:;"></a>
七、表单的结构：
定义：所有用户输入的用户名、账户、密码、邮箱等统一称为表单数据；表单数据必须放在form标签中。
例如：
<form action="后台处理数据的程序xxx.php" method="post代表加密传输，get代表不加密传输">
用户名：<input type="text代表普通文本框" /><br />
<input type="submit代表是提交按钮" value="提交"/>
</form>
1. 密码框和单选框
密码框：<input type="password" /><br /> —— 密码会加密显示
单选框：<input type="radio" name="性别" id="男" checked="checked"/><label for="男">男</label> <input type="radio" name="性别" id="女" /><label for="女">女</label>
测试关注点：
1） 男和女是否只能选其一，name是否是统一的
2）默认是否选上了其中一个，checked属性设置（用户体验提升）
3）点击文字范围是否能切换，靠label和id来设置 （用户体验提升）
2. 多选框、复选框：
复选框：<input type="checkbox" />
3. 注释：
<!--这是注释--> （ctrl + ？）在最后一个阶段的测试过程中，必须要求程序员删除所有注释，因为注释代码会影响网页的打开速度
4. 下拉菜单：
要看选项顺序，默认选项
下拉菜单：
<select name="">
<option value="">北京</option>
<option value="">上海</option>
<option value="" selected="selected">深圳</option> —— 默认选中深圳、或者放在第一行
</select>
5. 文本域：
文本域：<textarea name="" id="" cols="30" rows="10"></textarea>
要看文本域大小在不同浏览器中是否一样；
要看文本域是否关闭了放大缩小功能：是否在head中加入了以下代码块
<style type="text/css">
textarea{ resize: none;}
</style>
6. 普通按钮和重置按钮：
普通按钮：<input type="button" value="普通按钮"/> —— 需要js控制才能实现其他效果
重置按钮：<input type="reset" value="重置按钮"/> —— 恢复到页面刷新时默认状态，不是清空
按钮都建议设置value值，否则会有浏览器兼容性问题，测试各个浏览器的提示文字一致即可
八、CSS的基础知识
. 1. 定义：给网页中的内容设置样式：样式表，级联样式表，层叠样式表
2. css样式：写在html文件中的css代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
<style type="text/css">
div{width: 100px; height: 100px; background: red;}
</style>
</head>
<body>
<div></div>
</body>
</html>
3. 标签选择器：
定义：在页面中找元素、标签、标记的方法，只需要找到标签名字即可；
调试工具中，在google浏览器中，按F12查看网页源代码，点击elements，就可以看到各个标签，右面style就是css代码，更改后要在源代码中更改才能实现最终的更改
4. id选择器：在给id命名时不能起中文，也不能以数字开头，不能出现特殊符号（除了中划线和下划线），而且每个id都必须是唯一的，在实际使用中较少
<head>
<meta charset="UTF-8">
<title>我的第一个网页</title>
<style type="text/css">
#div1{background: red;}
</style>
</head>
<body>
<div id="div1"></div>
</body>
5.类选择器：命名规则同id选择器一样
.zu{background: red;}
.ld{font-size: 50px;}
<div class="zu ld"></div> —— 可以有多个类，类与类之间用空格隔开
6. 继承性：
父辈元素的设置的样式可以由子元素继承，如果子元素有自己的样式，一定听自己的（继承的权重较低）如：span中的字体颜色会与div的一致
div{color: red;}
<div>
<span> 1111</span>
</div>
7.覆盖性：
在权重相同的状态下，后写的代码会覆盖先写的代码，因为代码运行是由上至下
8.优先级：
在给同一个标签设置样式时，才有优先级权重对比；权重由大到小：id选择器 > 类选择器 > 标签选择器。
继承的权重是最低的，就是子类的不听父类的样式设置。
9. css的引入方式/书写位置：
1） 内嵌式css：代码卸载style标签中，html文件中；用在电商网站的首页，因为打开速度快；
2） 外链式css：在代码文件中，新建css文件，在里面编写样式代码，里面直接写对选择器的样式设置，不用再写style；在html文件中head中，style外，用link，的href属性设置css文件的路径，来链接起来；好处是实现了代码分离，修改代码起来更容易查找；
3） 行内式css：css代码卸载html文件的标签中，（标签中价格style属性），强烈不推荐这种写法，因为修改不方便，代码量增多，降低了打开页面的速度，影响用户体验
测试点：电商网站的首页必须使用内嵌式（因为内嵌比外链快）；其他页面使用外链式（因为方便修改代码）
权重：（内嵌 = 外链）< 行内式 ，但是可通过 div{color: red!important;} 来提高权限
10. 后代选择器：
div span{} —— 在css选择器中，如果出现空格，就是要找后代，包括儿子，孙子
11. 并列、并集选择器：
h1，div，#span1，.span2{} —— 使用英文状态下的逗号来链接想要一起设置的标签
12. 高级权重对比：
同一个权重情况下，先写会被后写的覆盖；但是，只要给同一个标签设置样式，id选择器（100斤）>类选择器（10斤）>标签选择器（1斤） 的权重，根据最后数量的相加，来定优先级，数值越大，优先级越高 如：p #div span{} > p .div span{}；继承性的权重是最低的
13. 了解边框：只有dashed和solid是没有浏览器兼容性问题
就是给页面中的元素添加外围边框线属性；程序员叫“边框”，UI设计员叫“描边”
div{border: 1px dashed #000;}
div{
border-top: dashed ;
border-bottom: solid;
border-left: double; （双划线）
border-right: dotted;
}
14. 盒子模型（内外边距）：
边框 + 内容 + 内边距（padding，内填充，内容和边框的距离）+外边距（margin，外填充，盒子与其他盒子之间的距离）
15. html5还可以播放音频和视频：有浏览器兼容性问题，但要排除掉用ie低版本的用户，点F12 — 仿真 — 模式 — 文档模式 —测到ie7.0版本 （不用测ie6.0）
音频：<audio src="5.mp3" autoplay="autoplay" controls="controls"></audio> （对于文件格式有浏览器兼容性问题）
视频：<video src="movie.mp4" autoplay="autoplay" controls="controls"></video> （以前用flash）
* ie 浏览器是微软自带的浏览器，不能用软件管家更新，只能到官网下载更新，导致很多用户一直使用ie低版本，有很多bug，ie9版本以上兼容性才稍微好一点
16. H5的概念 = html5 + css + Javascript或者其他脚本的集合，而实现的小页面，中国特有专有名词
