Primeros pasos con las pruebas de automatización web: análisis detallado de la composición de las páginas frontales

Actualmente, las páginas frontales comunes se componen de HTML+css+JavaScript.

1.HTML:

Rol: define el contenido de la representación de la página

HTML es un lenguaje utilizado para describir páginas web.

HTML significa Lenguaje de marcado de hipertexto ( Hyper T ext Markup Language )
HTML no es un lenguaje de programación sino un lenguaje de marcado
Un lenguaje de marcado es un conjunto de etiquetas de marcado
HTML usa etiquetas de marcado para describir páginas web

Editor de funciones de idioma:

La producción de documentos de lenguaje de marcado de hipertexto no es muy complicada, pero tiene funciones poderosas y admite la incrustación de archivos en diferentes formatos de datos. Esta es una de las razones por las que la World Wide Web (WWW) es tan popular. Sus características principales son las siguientes:

Simplicidad: la actualización de la versión del lenguaje de marcado de hipertexto adopta un método de superconjunto, lo que lo hace más flexible y conveniente.
Extensibilidad: la amplia aplicación del lenguaje de marcado de hipertexto trae consigo requisitos tales como funciones mejoradas e identificadores adicionales.El lenguaje de marcado de hipertexto adopta el método de elementos de subclase para garantizar la expansión del sistema.
Independencia de la plataforma: aunque las computadoras personales son populares, hay muchas personas que usan otras máquinas como MAC. El lenguaje de marcado de hipertexto se puede usar en una amplia gama de plataformas, lo cual es otra razón del predominio de la World Wide Web (WWW).
Versatilidad: Además, HTML es el lenguaje universal de Internet, un lenguaje de marcado simple y universal para todo uso. Permite a los productores web crear páginas complejas que combinan texto e imágenes, y cualquier otra persona en Internet puede navegar por estas páginas, sin importar qué tipo de computadora o navegador se use.

La esencia de las páginas web es el lenguaje de marcado de hipertexto, y se pueden crear potentes páginas web mediante el uso de otras tecnologías web (como: lenguaje de secuencias de comandos, interfaz de puerta de enlace común, componentes, etc.) en combinación. Por tanto, el Lenguaje de Marcado de Hipertexto es la base de la programación de la World Wide Web (Web), es decir, la World Wide Web se construye sobre la base del hipertexto. El lenguaje de marcado de hipertexto se llama lenguaje de marcado de hipertexto porque el texto contiene los llamados puntos de "hipervínculo".

Etiquetas HTML

Las etiquetas de marcado HTML a menudo se denominan etiquetas HTML (etiqueta HTML).

Las etiquetas HTML son palabras clave rodeadas por corchetes angulares, como <html>
Las etiquetas HTML generalmente vienen en pares, como <b> y </b>
La primera etiqueta en un par de etiquetas es la etiqueta de apertura y la segunda etiqueta es la etiqueta de cierre.
Las etiquetas de apertura y cierre también se conocen como etiquetas de apertura y cierre.

documento HTML = página web

Documento HTML que describe la página web
Los documentos HTML contienen etiquetas HTML y texto sin formato
Los documentos HTML también se conocen como páginas web.

El trabajo de un navegador web es leer documentos HTML y mostrarlos como páginas web. Los navegadores no muestran etiquetas HTML, pero usan etiquetas para explicar el contenido de la página:

<html>
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>
</html>

1. Introducción a css

CSS es la abreviatura de hojas de estilo en cascada, que en chino se llama hojas de estilo en cascada, que se utiliza para controlar el rendimiento de los datos de la página web y puede separar el rendimiento de las páginas web del contenido de los datos.

2. Cuatro métodos de importación de css

2.1 Estilo en línea

El estilo en línea es para establecer el estilo CSS en el atributo de estilo del marcado. Este método no refleja las ventajas de CSS y no se recomienda.

<div style="color: red; margin: 0px !important; padding: 0px !important; border-radius: 0px !important; background: none !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.8em !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important;">>hello yuan </div>

2.2 Embebido

Incrustado es escribir el estilo CSS centralmente en el par de etiquetas <style></style> del par de etiquetas <head></head> de la página web. El formato es el siguiente:

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

p{

background-color: #2b99ff;

}

</style>

</head>

2.3 Tipo de enlace

Introducir un archivo .css en un archivo HTML (comúnmente utilizado)

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

<link href="test1.css" rel="stylesheet">

2.4 Importado

Importe un archivo .css independiente en el archivo HTML. El tipo de importación usa reglas CSS para importar archivos CSS externos. La etiqueta <style> también se escribe en la etiqueta <head>. La sintaxis utilizada es la siguiente:

<style type="text/css">

@import"mystyle.css"; 此处要注意.css文件的路径

</style>　

Atención especial: el tipo de importación cargará el archivo CSS después de que se cargue toda la página web, por lo que esto genera un problema.Si la página web es relativamente grande, primero mostrará la página sin estilo y, después de un flash, el estilo de la página web. aparecerá. Este es un defecto inherente a las importaciones. La diferencia entre el tipo de enlace y el tipo de importación es que cargará el archivo CSS antes de cargar el cuerpo principal del archivo de la página web, por lo que la página web mostrada tendrá un efecto de estilo desde el principio y no mostrará primero el página web sin estilo como el tipo de importación, y luego mostrar una página web con estilo, que es la ventaja de vincular.

Tres, selector css (selector)

"Selector" indica el objeto del "estilo" en {}, es decir, a qué elementos de la página web se aplica el "estilo"

3.1 Selector básico

1) * Selector de elemento universal, empareja cualquier elemento

*{

color: red;

}

2) Selector de etiquetas, haciendo coincidir todos los elementos usando una determinada etiqueta

01	`p { color:green; }` `#匹配p标签`

3) selector de identificación

#littleP{

background-color: blue;

}

......

<p id="littleP">pppp</p>

4) selector de clase

.info和E.info: class选择器，匹配所有class属性中包含info的元素

.info { background:#ff0; }

p.info { background:blue; }

3.2 Selector combinado

E,F 多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔 div,p { color:#f00; }

E F 后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 li a { font-weight:bold;

E > F 子元素选择器，匹配所有E元素的子元素F div > p { color:#f00; }

E + F 毗邻元素选择器，匹配所有紧随E元素之后的同级元素F div + p { color:#f00; }

Tenga en cuenta las reglas de anidamiento :

Un elemento a nivel de bloque puede contener elementos en línea o algunos elementos a nivel de bloque, pero un elemento en línea no puede contener elementos a nivel de bloque, solo puede contener otros elementos en línea.
Hay algunos elementos especiales a nivel de bloque que solo pueden contener elementos en línea, no elementos a nivel de bloque . Tales como h1, h2, h3, h4, h5, h6, p, dt
li puede contener div
Los elementos a nivel de bloque yuxtaponen elementos a nivel de bloque y los elementos en línea yuxtaponen elementos en línea.

Ejemplo uno:

#littleP,div.cuihua{ #匹配id为littleP，或者标签为div且class为cuihua的标签

color: chartreuse;

}

#++++++++++++++++++++++++++++

#匹配

<p id="littleP">pppp</p>

<div class="cuihua">div</div>

Dirección de referencia:

JavaScript:

3.3, selector de atributos

E[att] 匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略，比如“[cheacked]”。以下同。） p[title] { color:#f00; }

E[att=val] 匹配所有att属性等于“val”的E元素 div[class=”error”] { color:#f00; }

E[att~=val] 匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 td[class~=”name”] { color:#f00; }

E[attr^=val] 匹配属性值以指定值开头的每个元素 div[class^="test"]{background:#ffff00;}

E[attr$=val] 匹配属性值以指定值结尾的每个元素 div[class$="test"]{background:#ffff00;}

E[attr*=val] 匹配属性值中包含指定值的每个元素 div[class*="test"]{background:#ffff00;}

Ejemplo:

[alex]{ #匹配属性为alex

color: red;

}

p[alex="dasb"]{ #匹配标签为p标签，且属性值为alex="dasb"

color: blue;

font-family: "Times New Roman";

font-size: 30px;

}

[alex*="b"]{ #匹配属性为alex，且值只要含有b的标签

color: teal;

}

3.4 Pseudo-clases

Las pseudoclases de CSS se utilizan para agregar algunos efectos especiales a los selectores.

a:link #（没有接触过的链接）,用于定义了链接的常规状态。

a:hover #（鼠标放在链接上的状态）,用于产生视觉效果。

a:visited #（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。

a:active #（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。

#伪类选择器 : 伪类指的是标签的不同状态:

a ==> 点过状态没有点过的状态鼠标悬浮状态激活状态

a:link {color: #FF0000} /* 未访问的链接 */

a:visited {color: #00FF00} /* 已访问的链接 */

a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }

Ejemplo:

+ Ver código

antes después de pseudo-clase:

:before p:before 在每个<p>元素之前插入内容

:after p:after 在每个<p>元素之后插入内容

p:before 在每个 <p> 元素的内容之前插入内容 p:before{content:"hello";color:red}

p:after 在每个 <p> 元素的内容之前插入内容 p:after{ content:"hello"；color:red}

Cuatro, prioridad css y herencia.

4.1, prioridad css

La llamada prioridad CSS se refiere al orden en que se analizan los estilos CSS en el navegador.

#样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：

1 内联样式表的权值最高 style=""-------------------1000

2 统计选择符中的ID属性个数。 #id －－－－－－－－－－－－－100

3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10

4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-1

#按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。

Ejemplos de prioridades:

dieciséis

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

#p{

color: rebeccapurple;

}

.p{

color: #2459a2;

}

p{

color: yellow;

}

</style>

</head>

<body>

<p id="p" class="p" style="color: deeppink">hello yuan</p> #优先级最高

</body>

</html>

4.2, herencia css

La herencia es una característica importante de CSS, que se basa en la relación ancestro-descendiente. La herencia es un mecanismo que permite aplicar estilos no solo a un elemento en particular, sino también a sus descendientes. Por ejemplo, un valor de color definido por CUERPO también se aplicará al texto del párrafo.

01	`body{color:red;} <p>helloyuan</p>`

Todo este texto hereda el color definido por el estilo {color:red;} del cuerpo. Sin embargo, el peso de la herencia de CSS es muy bajo, que es 0 más bajo que el peso de los elementos ordinarios.Se encontró que solo agregar un valor de color puede anular el color de estilo que hereda. Se puede ver a partir de esto: cualquier regla declarada explícitamente puede anular su estilo heredado. Además, la herencia es una parte tan importante de CSS que ni siquiera tenemos que pensar por qué funciona así, pero la herencia de CSS también es limitada. Algunos atributos no se pueden heredar, como: borde, margen, relleno, fondo, etc.

4.3 Instrucciones adicionales

1、文内的样式优先级为1000，所以始终高于外部定义。这里文内样式指形如<div style="color:red>blah</div>的样式，而外部定义指经由<link>或<style>卷标定义的规则。
2、有!important声明的规则高于一切。
3、如果!important声明冲突，则比较优先权。
4、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。
5、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。

#div1 .div3 {

color: chartreuse!important; #优先级最高

}

五、css常用属性

5.1、颜色属性

<div style="color:blueviolet">ppppp</div>

<div style="color:#ffee33">ppppp</div>

<div style="color:rgb(255,0,0)">ppppp</div>

<div style="color:rgba(255,0,0,0.5)">ppppp</div> #增加了透明度

5.2、字体属性

font-size: 20px/50%/larger #字体大小

font-family:'Lucida Bright' #字体格式

font-weight: lighter/bold/border/ #字体粗细

<h1 style="font-style: oblique">老男孩</h1>

5.3、背景属性

background-color: cornflowerblue

background-image: url('1.jpg');

background-repeat: no-repeat;(repeat:平铺满)

background-position: right top（20px 20px）;(横向：left center right)(纵向：top center bottom)

#简写：

<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">

<div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">

5.4、文本属性

font-size: 10px;

text-align: center; #横向排列

line-height: 200px; #文本行高通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比

vertical-align:－4px #设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效

text-indent: 150px; #首行缩进

letter-spacing: 10px;

word-spacing: 20px;

text-transform: capitalize; #首字母大写

示例：

+ View Code

5.5、边框属性

border-style: solid;

border-color: chartreuse;

border-width: 20px;

#简写：border: 30px rebeccapurple solid;

示例：

+ View Code

5.6、列表属性

ol,ul{

/*list-style: circle;*/

/*list-style: square;*/

/*list-style: lower-latin;*/

list-style: none; #去样式

}

5.7、 display属性

display属性有：none，block，inline，inline-block

display:inline-block可做列表布局，其中的类似于图片间的间隙小bug可以通过如下设置解决

最后： 为了回馈铁杆粉丝们，我给大家整理了完整的软件测试视频学习教程，朋友们如果需要可以自行免费领取 【保证100%免费】

软件测试面试文档

我们学习必然是为了找到高薪的工作，下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料，并且有字节大佬给出了权威的解答，刷完这一套面试资料相信大家都能找到满意的工作。