随着互联网等web技术的发展，作为一名测试人员，除了在掌握测试基础技能的同时，也需要掌握前端基础知识，能看懂前端代码，可以更方便的进行前端测试以及UI自动化实现。
HTML是勾勒
CSS是染色
js是页面的逻辑
纯js操作dom和jquery
UI框架：bootstrap、VUE、react、angular2
核心：HTML、CSS、JavaScript
1 HTML、CSS和JavaScript的关系
（1）HTML是网页内容的载体
其中内容可包括文字、图片、视频等。
（2）CSS样式是表现。 就像网页的外衣
（3）JavaScript是用来实现网页上的特效效果。
*有动画的、有交互的，一般都是用JavaScript来实现的。
*网页中每一个内容在浏览器中的显示，都要存放到各种标签中。
2 HTML介绍
2.1 标签
标签由英文的尖括号<，>括起来。
l html的标签一般都是成对出现的，分开始和结束标签，结束标签比开始标签多了一个/。
l 标签与标签之间是可以嵌套的，但先后顺序必须保持一致。
l HTML标签不区分大小写，但建议小写。
2.2 html5文件基本结构
一个Html文件是有自己固定的结构的。
l <html></html>称为根标签，所有的网页标签都在<html></html>中。
l <head>标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、<style>、<link>、<meta>等标签。
l 在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
2.3 head标签
文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
l title：在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。
每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。
2.4 注释
语法结构：
2.5 header标签
1、语义化标签就是一种仅通过标签名就能判断出该标签内容的语义的标签,见名知意。
2、语义化标签更有利于读写代码。
3、语义化标签可以加强网站做seo。
4、语义化标签实际作用和div一样。
5、header用来定义头部区域。
6、语义化标签也可以用来做css标签选择器。
其它类似的标签：
footer标签用来定义底部区域，其它和header标签一样。
section用来定义一个区域，比如，内容中的一个专题组。
aside用来定义一个侧边栏区域。
2.6 段落文本
语法结构：
注意：
一段文字一个<p>标签，如在一篇新闻文章中有3段文字，就要把这3个段落分别放到了3个<p>中。
<p>标签的默认样式，短浅段后都会有空白。如果不喜欢这个空白，可以用CSS样式来删除或改变它。
2.7 自定义文本样式
语法结构如下：
2.8 文章标题
<hx>标签，用例制作文章的标题。
标题标签一共有6个，h1，h2，h3，h4，h5，h6分别为一级~六级标题，并且依据重要性递减。<h1>是最高的等级。
2.9 加入强调语气
为加入强调语气，使用<strong>和<em>标签。
<em>表示强调；
<strong>表示更强烈的强调。
语法结构：
注意：
<em>和<strong>标签是为了强调一段话中的关键字时使用，它们的语义是强调；
<span>标签是没有语义的，它的左右就是为了设置单独的样式用的。
2.10 短文本引用
<q>标签，进行短文本引用。
语法结构如下：
注意：这里用<q>标签的真正关键点不是它的默认样式双引号，而是它的语义：引用别人的话。
2.11 长文本引用
语法结构如下：
注意：浏览器对<blockquote>标签的解析是缩进样式的。在写的时候，其中不要包含””。
2.12 分行显示文本
使用<br>标签分行显示文本。
在需要加回车换行的地方加入<br>、</br>标签作用相当于word文档中的回车。
注意：
l <br/>标签是一个空标签，没有HTML内容的标签就是空标签。空标签只需要一个开发标签，这样的标签有<br/>、<hr/>和<img/>。
l 在html中是忽略回车和空格的，输入再多的回车和空格也是显示不出来的。
2.13 空格实现
语法结构如下：
2.14 添加水平横线
语法结构如下：
注意：
<hr/>和<br/>标签一样是一个空标签。
<hr/>标签在浏览器中的默认样式线条比较粗，颜色为灰色。
2.15 地址标签
<address>标签，为网页加入地址信息。
语法结构如下：
2.16 插入代码
l 使用<code>标签加入一行代码。
注意：在文章中一般如果要插入多行代码时不能使用<code>标签。
l 使用<pre>标签为你的网页加入大段代码
<pre>标签的主要作用：预格式化的文本。被包围在pre元素中的文本通常会保留空格和换行符。
语法结构如下：
2.17 添加信息列表
使用<ul>添加信息列表，其中ul – li是没有前后顺序的信息列表。
语法结构如下：
2.18 展示有前后顺序的信息列表
使用ol，展示有前后顺序的信息列表。
语法结构如下：
2.19 div
在网页制作过程中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。
语法结构如下：
注意：
l 逻辑部分：是页面上相互关联的一组元素，如网页中的独立的栏目板块，就是一个典型的逻辑部分。
l 给div命名，使逻辑更加清晰。
为了使逻辑更加清晰，可以为这一个独立的逻辑部分设置一个名称，用id属性来为<div>提供唯一的名称。
2.20 table标签
创建表格的四个元素：table、tbody、tr、th、td。
（1）<table>……</table>：整个表格以<table>标记开始，</table>标记结束；
（2）<tbody>……</tbody>：如果不加<thead>、<tbody>、<tfooter>，table表格加载完成后才显示。加上这些表格结构，tbody包含行的内容下载完成优先显示，不必等待表格结束后再显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。通俗的理解table可以按结构一块一块的显示，不再等整个表格加载完后显示。
（3）<tr>……</tr>：表格的一行，所以有几对tr表格就有几行。
（4）<td>……</td>：表格的一个单元格，一行中包含几对<td>……</td>说明一行中就有几列。
（5）<th>……</th>：表格的头部的一个单元格，表格表头。
（6）表格中列的个数，取决于一行中数据单元格的个数。
（7）<thead>标签定义表格的表头，该标签用于组合HTML表格 的表头内容。
（8）<tfoot>元素用于对 HTML 表格中的表注（页脚）内容进行分组。
注意：
l table表格在没有添加css样式之前，在浏览器中显示是没有表格线的；
l 表头，也就是th标签中的文本默认为粗体并且居中显示；
l 用css样式，为表格加入边框。
table表格在没有添加css样式之前，是没有边框的。
<style type=”text/ss”>
table tr td,th{border|px solid #000;}
</style>
l caption标签，为表格添加标题和摘要。
a、摘要
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性（语义化），使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法结构如下：
b、标题
用以描述表格内容，标题的显示位置：表格上方。
语法结构如下：
2.21 链接到另一个页面
使用<a>标签，链接到另一个页面。
使用<a>标签可实现超链接，它在网页制作可以说是无处不在，只要有链接的地方，就会有这个标签。
语法结构如下：
l title属性的作用，鼠标滑过链接文字时会显示出这个属性的文本内容。再只要为文本加入<a>标签后，文字的颜色就会自动变为蓝色（被点击过的文本颜色为紫色）。
l 在新建浏览器窗口中打开链接：
l 使用mailto在网页中链接Email地址：
注意：
a标签有target属性，代表打开网页的方式。可选值为”_self和_blank”，默认值为_self，代表在当前页面打开链接，_blank代表在新窗口打开链接。
2.22 插入图片
<img>标签，为网页插入图片。
语法结构如下：
注意：
l src：表示图像的位置；
l alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本。
l title：提供在图像可见时对图像的描述（鼠标滑过图片时显示的文本）
图像可以是GIF、PNG、JPEG格式的图像文件。
2.23 表单标签
HTML表单（form），表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序可以处理表单传过来的数据。
语法结构如下：
注意：
（1）<form>：<form>标签是成对出现的，以<form>开始，以</form>结束。
（2）action：浏览者输入的数据被传送到的地方；
（3）method：数据传送的方式（get、post）
（4）所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在<form></form>标签之间，否则用户输入的信息可提交不到服务器上。
2.24 文本输入框、密码输入框
语法结构如下：
注意：
（1）type：当type=”text”时，输入框为文本输入框；
当type=”password”时，输入框为密码输入框.
（2）name：为文本框命名，以备后台程序ASP、PHP使用。
（3）value：为文本输入框设置默认值，一般起到提示作用。
2.25 支持多行文本输入的文本域
当用户需要在表单中输入大段文字时，需要用到文本输入域。
语法结构如下：
注意：
（1）<textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束；
（2）cols：多行输入域的列数；
（3）rows：多行输入域的行数；
（4）在<textarea></textarea>标签之间可以输入默认值。
2.26 单选框、复选框
语法结构如下：
注意：
（1） type：当type=radio时，控件为单选框；
当type=checkbox时，控件为复选框。
（2） value：提交数据到服务器的值，后台程序php使用；
（3） name：为控件命名，以备后台程序ASP、PHP使用；
（4） checked：当设置checked=”checked”时，该选项被默认选中。
（5） 同一组的单选按钮，name取值一定要一致。
2.27 使用select、option下拉列表框
使用下拉列表框，节省空间。
（1） value：
<option value=’提交值’>选项</option>
其中：提交值为向服务器提交的值；
选项指显示的值。
（2）selected=”selected”
设置selected="selected"属性，则该选项就被默认选中。
（3）下拉列表的多选框
在<select>标签中设置multiple=”multiple”属性，就可以实现多选功能。
2.28 占位符placeholder属性
占位符作用：需要提示用户输入框需要输入框的内容。
语法结构如下：
注意：
（1） placeholder属性为输入框占位符,里面可以放提示的输入信息。
（2） placeholder属性的值可以任意填写,当输入框输入内容时,占位符内容消失,输入框无内容时,占位符内容显示。
（3） 占位符内容不是输入框真正的内容。
2.29 数字输入框
数字框为number类型。
语法结构如下：
注意：
1、input的type属性设置为number,则表示该输入框的类型为数字。
2、数字框只能输入数字，输入其他字符无效。
3、数字框最右侧会有一个加减符号,可以调整输入数字的大小,不同浏览器表现不一致。
2.30 网址输入框
语法结构如下：
注意：
1、input的type属性设置为url,则表示该输入框的类型为网址。
2、数字框的值需以http://或者https://开头,且后面必须有内容,否则会报错误提示。
2.31 邮箱输入框
语法结构如下：
注意：
1、Input的type属性设置为email,则表示该输入框的类型为邮箱。
2、数字框的值必须包含@。
3、数字框的值@之后必须有内容,否则会报错误提示。
2.32 label为input标签
label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
语法结构如下：
注意：
标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
2.33 提交和重置按钮
在表单中有两种按钮可以使用，分别为：提交按钮、重置。
当用户需要提交表单信息到服务器时，需要用到提交按钮。
提交按钮语法结构如下：
注意：
type：只有当type值设置为submit时，按钮才有提交作用
value：按钮上显示的文字
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
