锐客网

  1. 首页 > 睿知 > it技术 > >

JAVA自动化测试|3. 1 WEB自动化 --- WEB前端知识简介

web基础知识JAVA自动化测试

前端 前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页和界面。
前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时，

  • HTML：页面结构：可以把他看成一个文档，定义展示页面的内容结构。
  • CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果。
  • JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能
一、HTML HTML: 超文本标记语言，是 网页制作必备的编程语言**“**[超文本]
HTML 版本
  • **HTML 2.0 ：**是 1996 年由 Internet 工程工作小组的 HTML 工作组开发的。
  • **HTML 3.2 ：**作为 W3C 标准发布于 1997 年 1 月 14 日。HTML 3.2 向 HTML 2.0 标准添加了被广泛运用的特性，诸如字体、表格、applets、围绕图像的文本流，上标和下标。
  • **HTML 4.0 ：**被发布于 1997 年 12 月 18 日。而仅仅进行了一些编辑修正的第二个版本发布于 1998 年 4 月 24 日。HTML 4.0 最重要的特性是引入了样式表（CSS）。
  • **HTML 4.01 ：**发布于 1999 年 12 月 24 日。
  • XHTML 1.0 ： 发布于 2000 年 1 月 20 日，使用 XML 对 HTML 4.01 进行了重新地表示
  • **HTML 5：**W3C 于 2008 年 1 月 22 日发布 HTML 5 工作草案。
1、HTML页面结构
超文本标记语言的结构包括“头"部分**（Head）、和“主体”部分（Body）**，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容
- 锐客网 第一个网页页面

1.1 文档声明 DOCTYPE声明该html文件使用的HTML版本
HTML 5

HTML 4.01 Strict

1. 2、页面头部 第二行“”标签和最后一行“”定义html文档的整体，“”标签中的‘lang=“en”’定义网页的语言为英文，定义成中文是’lang="zh-CN“。 “”标签和“”标签是它的第一层子元素，
:标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏。
1.3 页面内容 :元素定义文档的主体，也就是页面显示的内容。
body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等)，。
2、常见的HTML标签
2.1 注释:定义和用法
注释标签用于在源代码中插入注释。注释不会显示在浏览器中。
您可使用注释对您的代码进行解释，这样做有助于您在以后的时间对代码的编辑。当您编写了大量代码时尤其有用。
例：
这是一段普通的段落。

2.2 标题标签： 定义和用法

- 标签可定义标。 定义最大的标题。 定义最小的标题。
由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小
这是标题 H1 这是标题 H2 这是标题 H3
这是标题 H4 这是标题 H5 这是标题 H6

2.3 段落和换行标签 定义和用法
  • p : 标签定义段落。元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定.
元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。

  • br: 插入一个简单的换行符。标签是空标签，意味着它没有结束标签，
错误的用法：

元素会自动在其前后创建一些空白。
浏览器会自动添加这些空间，您也可以在样式表中规定。

  • **hr：**标签在 HTML 页面中创建一条水平线。水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分，在 HTML 中， 标签没有结束标签。

2.4 块标签
  • div标签:标签块元素，表示一块内容，没有具体的语义。
    div标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
    div中的部分会显示为红色
    这是标题 H5 这是标题 H6

  • span标签 行内元素，表示一行中的一小段内容，没有具体的语义。
    pan 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化,
    元素会自动在其前后创建一些空白。浏览器会自动添加这些空间 style="color: cyan">span中的内容 您也可以在样式表中规定。

2.5 含样式和语义的行内标签
标签 含义
行内元素，字体斜体。
行内元素，语义为强调内容，表示重要（倾斜效果）
行内元素，字体加粗
行内元素，语义为强调内容，表示非常重要（效果加粗）
这个是em标签 这个是i标签 >这个是strong 这个是b标签

2.6 图像标签和链接标签
  • img标签
    img 元素向网页中嵌入一幅图像。
    请注意，从技术上讲， 标签并不会在网页中插入图像，而是从网页上链接图像。 标签创建的是被引用图像的占位空间。
    标签有两个必需的属性：src 属性 和 alt 属性。
    JAVA自动化测试|3. 1 WEB自动化 --- WEB前端知识简介
    文章图片

    属性 描述
    alt 规定图像的替代文本。
    src 规定显示图像的 URL。
    height 定义图像的高度。
    width 设置图像的宽度
  • a标签：标签定义超链接，用于从一张页面链接到另一张页面
    元素最重要的属性是 href 属性，它指示链接的目标。
    点击链接跳转到百度

  • link标签(放在头部中)
    链接到一个外部样式，即链接外部的css文件
2.7 列表
  • 有序列表
在网页上定义一个有编号的内容列表可以用
  1. 、
  2. 配合使用来实现，代码如下：

  1. 列表文字一
  2. 列表文字二
  3. 列表文字三

在网页上生成的列表，每条项目上会按1、2、3编号，有序列表在实际开发中较少使用。
  • 无序列表
在网页上定义一个无编号的内容列表可以用
  • 、
  • 配合使用来实现，代码如下：


在网页上生成的列表，每条项目上会有一个小图标.
  • 定义列表
    dl :标签定义了定义列表（definition list）。标签用于结合dt定义列表中的项目和dd描述列表中的项目
    python
    解释性语言
    java
    编译型语言

2.8 表格
  • table ：tabel标签定义 HTML 表格。
    简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
    tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。
name java python
小明 精通 熟悉
小张 不会 不会

3、HTML表单
3.1 form标签
  • form: 标签用于为用户输入创建 HTML 表单，表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。
    form标签的属性：
    属性 描述
    action 定义表单数据提交地址
    method 定义表单提交的方式（常见的有get和post）
  • form表单中包含的元素
    元素标签 作用
    标签 为表单元素定义文字标注
    标签 定义通用的表单元素
    标签 定义多行文本输入框
    标签 定义下拉表单元素
    标签 与标签配合，定义下拉表单元素中的选项
3.2 input标签
  • value属性： 定义表单元素的值
  • name属性 ：定义表单元素的名称，此名称是提交数据时的键名
账号：
密码：

  • type属性
    值 作用
    text 定义单行文本输入框
    password 定义密码输入框
    radio 定义单选框
    checkbox 定义复选框
    file 定义上传文件
    submit 定义提交按钮
    button 定义一个普通按钮
    reset 定义重置按钮
    image 定义图片作为提交按钮，用src属性定义图片地址
    hidden 定义一个隐藏的表单域，用来存储值
3.3 label标签 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
标签的 for 属性应当与相关元素的 id 属性相同
属性 对应值的描述
for for 属性应当与相关元素的 id 属性相同
案例：


3.4 textarea标签 textarea标签定义多行的文本输入控件。
文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。
可以通过 cols 和 rows 属性来规定 textarea 的尺寸，更好的办法是使用 CSS 的 height 和 width 属性。

textarea的属性
属性 值 描述
autofocus autofocus 规定在页面加载后文本区域自动获得焦点。
cols number 规定文本区内的可见宽度。
disabled disabled 规定禁用该文本区。
form form_id 规定文本区域所属的一个或多个表单。
maxlength number 规定文本区域的最大字符数。
name name_of_textarea 规定文本区的名称。
placeholder text 规定描述文本区域预期值的简短提示。
readonly readonly 规定文本区为只读。
required required 规定文本区域是必填的。
rows number 规定文本区内的可见行数。
3.5 select标签 select 元素可创建单选或多选菜单,也可以用于选择数据提交表单。
` 元素中的 标签用于定义列表中的可用选项。
name='skill'>

3.6 option标签 option 元素定义下拉列表中的一个选项（一个条目）。
浏览器将 标签中的内容作为 标签的菜单或是滚动列表中的一个元素显示。
option 元素位于 select 元素内部。
4、内联框架
4.1 iframe iframe 元素会创建包含另外一个文档的内联框架（即行内框架）。
例子：将登录页面的内容链接到当前页面