Die Voraussetzungen für das Erlernen von Web-Automatisierung: Manuelles Testen (Kenntnisse verschiedener Tests), Programmiersprachen lernen, Web-Grundlagen lernen, Tools für automatisiertes Testen lernen, Frameworks für automatisiertes Testen lernen und einige Front-End-Kenntnisse beherrschen, sei es das Erlernen von Sprache oder Front- Endwissen, Alle sind für das nächste Skript und Framework, um den Weg zu ebnen.Dieser Artikel führt in die Grundkenntnisse von Frontend ein

Webseitengrundlage (HTML, CSS), drei Kerntechnologien des Web-Frontends

HTML: Verantwortlich für die Webseitenarchitektur

CSS: verantwortlich für den Stil und die Verschönerung der Webseite

JS: verantwortlich für das Webseitenverhalten

Bildbeschreibung hier einfügen

01
Gängige HTML-Tags

HTML ist eine Sprache zur Beschreibung von Webseiten
. HTML bezieht sich auf eine Hypertextsprache, nicht auf eine Programmiersprache, es ist eine Auszeichnungssprache.
HTM verwendet Tags, um Webseiten zu beschreiben

Fall: txt-Text im HTML-Format

Dies ist die erste Absatzdatei

Dies ist die zweite Absatzdatei

HTML-Tags

Tags sind Schlüsselwörter, die in Hörner gewickelt sind, normalerweise paarweise

Das erste Tag beginnt das Tag, das letzte Tag beendet das Tag Beispiel:

Einzelne und doppelte HTML-Tags

Einzeletikettenschreiben:

Doppeltes Etikettenschreiben:

HTML-Attribute

HTML-Attribute beziehen sich auf Tag-Attribute

HTML-Tags können mehrere Attribute haben

Attribute werden im Format Attributname=Attributwert angezeigt

1. HTML-Skelett

 <head>

     <meta charset="UTF-8">

     <title>码同学教育</title>

 </head>

 <body>

    码同学教育

 </body>

Wird verwendet, um zu deklarieren, dass der aktuelle Dokumenttyp HTML ist

html: ist das größte Tag auf der Webseite, wir nennen es das Root-Tag

Head: Head der Webseite genannt, der Inhalt darin wird hauptsächlich verwendet, um Webseiten-Tags und einige Informationen zu definieren, die der Browser anzeigen kann

UTF-8: Der Codierungsstandard, der zum Definieren von Webseiten verwendet wird, internationale Codierung

Titel: Titel-Tag der Webseite genannt, der darin enthaltene Inhalt wird auf der Registerkarte des Browsers angezeigt

body: Es wird als Haupt-Body-Tag der Webseite bezeichnet und der darin enthaltene Inhalt wird im weißen Fensterbereich des Browsers angezeigt

2. Grundlegende HTML-Tags
HTML-Titel

Titel 1

Titel Nummer zwei

Titel Nummer sechs

HTML-Absatz

das ist ein Absatz

das ist ein weiterer Absatz

HTML-Hyperlinks

Code Klassenkamerad

HTML

HTML-Leerzeichen und Wagenrückläufe

Ich bin ein Blockelement

Ich bin ein Inline-Element, das den Textcontainer enthält

3, HTML-Formular
Webseite Mobiltelefon Benutzereingabedaten, einschließlich verschiedener Typen: Texteingabefeld, Optionsfeld, Kontrollkästchen, Dropdown-Feld, Senden-Schaltfläche

Texteingabefeld

  firstname: <input type="text" name="fristname">

  <br>

  lastname: <input type="text" name="lastname">

Passwort-Eingabefeld

 Password: <input type="password" name="pwd">

einzelne Taste

<input type='radio' name=“sex“ value=“male“ "/>男

Weiblich

Kontrollkästchen

lesen

Musik hören

Film schauen

Dropdown-Feld

Peking Shanghai Guangzhou Shenzhen

Senden-Schaltfläche

Senden-Button:

02
Machen Sie sich mit gängigen CSS-Selektoren vertraut

CSS: bezieht sich auf Cascading Style Sheets

Wirkung:

Wird verwendet, um zu definieren, wie HTML-Elemente angezeigt werden (definiert den Stil von HTML-Elementen), genau wie Font-Tags und Farbattribute in HTML

.css-Datei müssen wir nur ein einfaches CSS-Dokument bearbeiten, um das Layout und Erscheinungsbild aller Seiten zu ändern

Bildbeschreibung hier einfügen

Selektor: wird verwendet, um das HTML-Element zum Ändern des Stils anzugeben, jede Deklaration besteht aus einem Attribut und einem Wert

Attribut: Stellt das festzulegende Stilattribut dar, jedes Attribut hat einen Wert, und das Attribut und der Wert werden durch einen Doppelpunkt getrennt

CSS: Deklarationen enden immer mit einem Semikolon (;), Deklarationen werden in HTML-Dokumenten in geschweiften Klammern ({}) eingeschlossen und Stile können in Tags definiert werden

In CSS ist ein Selektor ein Muster, das verwendet wird, um Elemente auszuwählen, die formatiert werden müssen

Häufig verwendete CSS-Selektoren sind: ID-Selektor, Klassen-Selektor, Tag-Selektor, Attribut-Selektor, Nachkommen-Selektor, Element-Selektor

1, ID-Selektor Der
ID-Selektor dient zur Auswahl des Elements über das ID-Attribut des Elements

Der ID-Selektor in CSS wird mit "#" definiert, zum Beispiel: #test

<head>

  <meta charset="utf-8">

  <title>CSS</title>

 <style>

   /*这是一个关于样式注释*/


 </style>

Hallo Welt!

Das id-Attribut muss im gesamten HTML-Dokument eindeutig sein

Hinweis: HTML-Dokumente prüfen nicht genau, ob das ID-Attribut eindeutig ist, und doppelte IDs treten in Nicht-Standard-HTML-Dokumenten auf!

2. Klassenselektor Der
Klassenselektor dient zur Auswahl von Elementen über das Klassenattribut des Elements, auch Klassenselektor genannt.Bei Verwendung des Klassenselektors muss das Element das Klassenattribut haben

Der Klassenselektor wird verwendet, um den Stil einer Gruppe von Elementen zu beschreiben. Der Klassenselektor unterscheidet sich vom ID-Selektor. Die Klasse kann in mehreren Elementen definiert werden, indem der Klassenselektor in CSS mit "." verwendet wird, zum Beispiel: .center

  <head>

     <meta charset="UTF-8">

     <title></title>

   <style>

     .center {text-align: center;}

     .center {color: #8A2BE2;}

   </style>

 </head>

<body>

  <p>居中</p>

</body>

3. Tag-Selektor Der
Tag-Selektor dient zum Auswählen von Elementen anhand ihrer Tag-Namen, auch bekannt als Element-Selektoren

Labelselektoren in CSS sind direkt, wie z. B.: h , input

   <head>

      <meta charset="UTF-8">

      <title></title>

    <style>


    </style>

   </head>

Mitteltitel

zweiter Absatz

Mehrere Fähigkeiten, die Sie beherrschen müssen, bevor Sie mit der Webautomatisierung beginnen