(一)HTML

一、html

定义：超文本标记语言

版本：当前在用的版本有html4.0.1、xhtml1.0、html5.0

注意：html5.0的很多地方是向下兼容的

二、html基础语法与编写

html语法规定　

　　标签、标记符号------------ <>又称尖括号；

　　html语言必须写在标签符号里面；

　　html中的标签大多数都是成对出现；

　　关闭符号------------ / 又称斜杠；

HTML页面编写步骤

　　1、把文件夹拖拽到hbuilder左侧的项目管理器中；

　　2、鼠标左键点击左侧的文件夹，再Ctrl+n，选择html文件

　　3、改名字，选择html5.0版本，点击确定

　　4、找到title标签，在它的中间写一个网页的标题文字

　　5、找到body标签，在它中间写一点描述性的文字

　　注意：meta标签中的charset里面的值一定要设置为utf-8，才代表此网站用的是国际编码集

第一个HTML页面:　

　　后缀名改成html <html></html> 代表是整个页面

　　<head></head> 代表网页的头部

　　<title></title> 代表网页的标题名称。

　　注意：title必须放在head标签中 <body></body> 代表网页的内容，这个是很重要的一个标签这里包括用户看到所有内容

　　以上就是一个网页的基本结构，html在最外面，里面是head嵌套title 下面写body

　　注意：在body中写了回车和空格，但是浏览器并没有按照我们的意愿正常显示。

　　结论：浏览器只认识html语言，不能正常的识别回车和空格

标签基础语法概括:

　　html号称标记语言，标签，标记，元素，节点；

　　这些词语全部都指html标签，都是同一个意思！

　　标签大多数是成对出现的，结束标签要加一个反斜杠。

　　例：<html></html>

　　一句话：做事情要有头有尾，写代码也一样

三、h和p标签

h标签从1到6依次减小，代表是文章标题的级别；

p标签代表，文档的段落标签

注意：在合适的地方使用合理的标签，会提升网站的语义化，从而提升网站在搜索引擎中的自然排名；

四、换行和图片标签

在html中，直接按回车和空格都是不好用的，必须使用代码才可以实现；

换行标签 <br />

注意：图片文件必须先放到文件夹里面，再写代码才会有提示功能

空格   此段代码代表一个空格的间距

五、网页中的img图片标签详解

1、图片标签可以设置宽和高（横向叫宽度，纵向叫高）

2、图片可以设置鼠标的悬停提示文字：鼠标放在图片上不动，会弹出提醒文字

3、alt属性在图片标签中的作用是：图片未加载出来的时候，对图片的描述性文字提醒；网页阅读器会读取alt属性中的文字给用户听；

img 插入图片，图像占位符，它像文字一样会占有自己的空间

重要：插入图片就是特殊的文字

例：<img src=“图片地址” width=“271” height=“271” alt=“替换文本” title=“提示文本” />

Src是必须要指定的属性，是图片的位置

等比例缩放：只写宽或者高，会自动帮我们执行等比例缩放，不用自己去计算了

Title：鼠标移上时候的提示文本

Alt：如果图片丢失或者其它原因导致图片看不到的情况下的提示文本

注意：最好给img标签加上宽和高，为了加载速度变快

六、bui标签

　　<u> <u> 下划线

七.键值对语法

在程序中，属性名和属性值一起出现，我们就叫它们键值对语法；也叫kv对

八、相对路径、绝对路径

相对路径：相对于当前文件的位置写出的路径代码

绝对路径：文件在计算机中的完整路径地址

九、删除线细节

del和s都可以实现删除线效果，但是w3c组织明确规定，s标签已经被del替代（强烈建议替换）；在实际工作中遇到此问题应该提醒程序员修改；

九、程序中的注释

定义：描述性的文字，不想在浏览器中显示，只是程序员自己的提醒；

注意：在测试的最后阶段，如果没有删除注释代码，必须要提bug，因为注释代码对于用户来讲，只能降低打开速度，没有任何好处；

Ctrl+? 被选中的代码就是可以注释了

十、超链接

程序中点击可以实现页面跳转，就是超链接；

作为网页重要的组成部分超链接；实际上用的就是一个标签完成的 <a></a>超链接的文字颜色默认是蓝的有下划线。

它有一个原则性属性----链接地址 href，这个属性如果不指定超链接毫无意义。

如下： <a href="网址或文件"></a> 属性的值可以是网址，例如百度；也可以是本地的一些文件例如打开一些自己的网页；

知识点:有的时候超链接在最后才知道要连接到哪个位置，所以一开始的时候会用一个假连接或者空链接地址代替；那么方法是在href的值中填写一个#号；

测试细节：

1、点击超链接是否能正确的跳转到对应的网站

2、查看跳转的时候是否按照产品经理的需求，实现新窗口打开，或者原窗口打开

3、空链接：当程序员还不能确定链接的最终跳转地址的时候，就可以写空链接，外观与正常链接一致，点击之后不跳转而已

4、锚点链接：点击链接后，只在本页面的位置进行跳转，而不是切换到其它网页

十一、表单数据

用户填写的数据内容，我们统一称他们为表单数据；

在前端代码中，所有的表单数据必须填写在form标签中

　　>>表单和表格是完全不同的两种元素，表单是专门处理跟后台有关系的一些工作的一个标签；

　　>>表单的作用：因为前台往往会跟后台发生一些数据的交换和传输，比如传递用户名和密码；

　　　　所以现在就需要有一个标签能完成传递数据的功能，它就是表单； <form></form>

　　　　注意：这个东西是一个容器，它表示它内部的所有东西都会被提交给服务器；

　　>>表单元素是一个大的章节，他包含一系列的东西；其中form只是一个开始的代表；除此之外最重要的input***

　　>>input---它好比一个变色龙，根据环境的不同可以变化出不同的颜色；

　　而input标签是可以根据type属性值的不同可以变化不同的外观和功能；

(一)form标签

　　form 是一个容器，内部可以存放大量的表单元素，同时可以和按钮配合提交表单给服务器。

　　<form></form>

　　form有一个必须要设置的属性：action：服务器地址

　　method：发送方式

　　　　get：明文发送；

　　　　post：密文发送

　　所有的表单元素收集上来的数据都是以键值对的形式发送的：k=v

　(二)input标签　

　　input标签在<input>标签中type是原则性属性必须加；name和value属性是后台人员用的时候必须加的；

　　<input type=“” name=“” value=“”>

　　其中：name用来标识<input>标签名称因为很多input之间需要有所区别；

　　　　1.value则是此<input>提交到服务器上的值（后台人员）；

　　　　2.设置默认值（前台人员）

　　input重要属性:

　　　　type必填属性；有多重值；

　　　　name 使标记之间有所区分！并且他的值将扮演表单提交给后台时候的键值对中的键部分；

　　　　value 值属性可以设置默认值，这个值也可以是用户添加的；

　　　　maxlength 能填写字符的最大长度；

　　　　size 定义文本框或者密码框的宽度尺寸；

　　input标签type属性值总结：

　　　　type的属性值有以下（注意这些都是值不是属性！）

　　　　text文本框，默认就是这个值；

　　　　password，密码框；

　　　　radio，单选框，单选按钮；（当name值为相同的时候才能保证只能选其一）；

　　　　checkbox，多选框；复选可多选；

　　　　button;按钮

　　　　submit 功能为提交的按钮*提交功能

　　　　reset 功能为重置的按钮

　　关于表单数据的其他细节:

　　　　1、form标签中的属性细节

　　　　　　Action属性里面的值代表，此表单数据应该传递给哪一个后台程序；

　　　　　　Method属性里面有两个可选值：post 代表数据加密后再传输；get 代表不加密直接传输

　　　　2、文本框的默认提示文字：如果程序员使用value设置的默认提示文字，文字黑色，并且需要删除后，才能添加自己的内容；我们要提bug，要求程序员改为用户体验更好的 placeholder属性来设置（鼠标放进去，直接写文字即可）

　　　　3、name属性在表单数据中代表数据的标识；

　　　　name=”mingzi” 传递给程序员的数据

　　　　　mingzi=用户填写的内容

　　　　4、单选框测试细节：

　　　　　　1、务必只有一个选项能被点选

　　　　　　2、点击文字应该也可以切换选项

　　　　　　3、刷新页面的时候，应该有一个选项是默认选中的、

　　　　5、文本域标记------多行文本框

　　　　　　　　初始内容

　　　　　　</textarea>文本区内的可见宽度

　　　　文本域测试细节：

　　　　　　1、默认提示文字与普通输入框的测试点一致

　　　　　　2、宽、高要测试三大主流浏览器，查看是否一致

　　　　　　3、查看右下角的可拖拽功能是否关闭

　　　　6、表单下拉菜单元素

　　　　　　<select></select>选择标签，它极其的类似于无序列表；它内部的每个选项用的是<option></option>就类似与li

　　　　　　这个标签可以算是一个无属性的标签，所以比较好记；他的属性至多需要指定一个name用于传到后台以后加以区分；

　　　　　　option标签有一个属性，可以将自己设置为当前项；这个属性就是selected

　　　　　　select分组

　　　　　　　　　　　　　　<option>东城区</option><option>西城区</option><option>朝阳区

　　　　　　　　</option>

　　　　　　　　　　　　　　</optgroup>

　　　　　　　　　　　　　　<option>浦东区</option><option>闵行区</option> <option>虹口区

　　　　　　　　</option>

　　　　　　　　　　　　</optgroup>

　　　　　　　　</select>

　　　　下拉菜单测试细节：

　　　　　　1、刷新页面后的默认选中状态

　　　　　　2、下拉菜单中的书写顺序

　　　　7、单选框和复选框

　　　　　　单选和复选标记很相近所以可以放到一起去记；用法也是一致的；

　　　　　　他们使用的都是input标签只是一个格式设置为radio单选，另外一个设置为checkbox复选；

　　　　　　如果设置默认情况为已选状态的话都是使用的同一个键值对，即 checked=“checked” 单选框： <input type=“radio” name=“sex” value=“nan” />

　　　　　　复选框、多选框测试细节：

　　　　　　　　1、默认选中状态

　　　　　　　　2、点击文字也可以切换

　　　　8、按钮:

　　　　<input type=“按钮类型(reset[重置表单]、submit[提交表单]、button[普通按钮])” name=“按钮名称” value=“按钮显示文本”/> 图片按钮

　　　　注意：提交表单和重置表单都是控制的整个form元素

　　　　　　按钮测试细节

　　　　　　　　1、提交按钮：查看三大浏览器显示的提示文字是否一致

　　　　　　　　2、重置按钮：查看三大浏览器显示的提示文字是否一致；点击此按钮后，表单数据要恢复默认状态；

十二、浏览器测试细节

Ie浏览器不能自己实现更新，只能在网上下载最新版本，再安装；导致了我们在测试的时候必须要测试ie浏览器的低版本（7、8、9、10、11）；其它浏览器可以使用第三方软件来更新，所以不存在测试低版本一说；

打开ie，f12打开调试工具界面，找到仿真，文档模式下拉菜单，选择想要测试的版本；

posted on 2018-12-23 17:25 jennifer521 阅读(48) 评论(0) 收藏举报