Zusammenfassung der HTML+CSS-Wissenspunkte

Der gesamte Front-End-Entwicklungsworkflow

1. Der Produktmanager schlägt Projektanforderungen vor

2. UI-Designentwurf

3. Front-End-Personal ist für die Entwicklung statischer Seiten verantwortlich (Back-End-Personal, das mit dem Front-End synchronisiert ist, bereitet Daten vor)

4. Interaktion zwischen Front-End und Backend

5. Testen

6. Produkteinführung (Wartung nach dem Projekt)

Internetprinzipien

1. Wenn der Benutzer im Browser eine URL eingibt, wird diese an den entsprechenden Server gesendet, um die der URL entsprechenden Webseiteninformationen anzufordern

2. Der Server lädt die der URL entsprechenden Webressourcen in eine temporäre Datei in Ihrem Computerordner herunter

3. Die Ressourcen im temporären Ordner werden über den Browser angezeigt (also wann Wenn wir die Website zum zweiten Mal anfordern, wird die Geschwindigkeit viel schneller sein)

Element

• Inline-Element: Es gibt n mehrere Inline-Elemente in einer Zeile, und die Breite und Höhe von Inline-Elementen kann nicht festgelegt werden

• Blockelement: Ein Blockelement, das eine Zeile für sich einnimmt

• Inline-Blockelement: Es können mehrere Inline-Blockelemente in einer Zeile vorhanden sein, aber die Breite und Höhe können eingestellt werden

HTML-Skelettstruktur

• !DOCTYPE..Dokumentdeklarationsheader (html5, html4.01, XHTML)

• in html4.01 Es gibt 3 kleine Spezifikationen in XHTML

1. streng streng

2. Übergang gewöhnlich

3. Frameset-Rahmen

• html: Hypertext Markup Language; darin werden alle „Tag-Paare“ verwendet

1. head

• meta（charset:UTF-8,GB2312）

• <meta name="description" content="要描述的内容"/>

• <meta name="keywords" content="关键字，关键词"/>
  (Die beiden oben genannten Metas dienen der SEO-Optimierung)

• <title>页面的标题</title>

body

• Titel<h1></h1><h2></h2>

• Absatz p: p ist zwar ein Blockelement, enthält aber auch Bilder und Text

• span: wird verwendet, um Text zu platzieren: Bilder und Text;

• einen Link <a href="要跳往的地址">

• Bild<img src="相对地址/绝对地址"

• css: geschrieben in

  Grundlegende Syntax für Stile in

• :
  selector (div) {
  key:value
  }

  p{
  height:40px;
  line-height:40px;
  background-color:red;
  }

• Selektor:

1. Tag-Selektor: div,h,p,a,img,span

2. Klassenauswahl:.xinxi
   (Verwenden Sie niemals chinesische Zeichen und Zahlen, die mit dem Klassennamen beginnen, sondern verwenden Sie unbedingt Englisch)

Mehr Interpretation von HTML

• HTML berücksichtigt nur die Verschachtelung von Tags und hat nichts mit Tabulatoren und Leerzeichen zu tun. Unzählige Leerzeichen werden nur als eins gezählt
  

• Bild-Tag<img src="相对路径/绝对路径"/>
  

• Relativer Pfad: Beginnend mit der aktuellen Seite; (./ oder nicht schreibend, suchen Sie das übergeordnete Element. ./)

• Absolute Pfade: Alle beginnen mit http; zum Beispiel:

• Es gibt zwei häufig verwendete Attribute für das Bild-Tag, das src-Attribut: Führen Sie das ein Bildadresse; Alt-Tag: der Text, der zum Ersetzen des Bildes verwendet wird, wenn es nicht normal geladen werden kann (Alt kann auch weggelassen werden)

• ein häufig verwendetes Attribut von Links

1. href: „die Adresse, zu der gesprungen werden soll“, die Funktion von href

• Sie können den absoluten Pfad eingeben und Zur Webseite springen

• Sie können # schreiben: 1) Wenn Sie sich über die Adresse nicht sicher sind 2) Kehren Sie einfach zum oberen Effekt zurück

• Verwenden Sie Ankerpunkte, um die Seite zu wechseln

Titel: Eingabeaufforderung, wenn sich die Maus darüber befindet

Ziel: Öffnungsmethode (Standard _self aktuelle Seite wird geöffnet; _leer neue Seite wird geöffnet)

Unter diesen Attributen können sowohl Titel als auch Ziel weggelassen werden

• Der Ankerpunkt eines Links verwendet

1. Sprünge zwischen verschiedenen Modulen auf dieser Seite
   <div id="#div1"></div>   <a href="#div1"></a>
   2 Realisieren Sie gegenseitige Sprünge zwischen verschiedenen Seiten und verschiedene Module
   <a href="detail.html#detail1"></a>

Liste

• Ungeordnete Liste: li in der ungeordneten Liste ist auch ein Container

  <ul>
  <li></li>
  <li></li>
  </ul>

• Geordnete Liste

  <ol>
  <li></li>
  <li></li>
  </ol>

• Definitionsliste: dl, dt, dd sind alle Container

  <dl>
  <dt>表头</dt>
  <dd>详情介绍</dd>
  </dl>

Formular

• Das Formular verwendet das

• Eingabetextfeld<input type="text" placeholder="默认提示"/>

• Passwort eingeben<input type="password" placeholder="默认提示"/>

• Radio-Button: Radio-Button-Gruppe, Name muss hinzugefügt werden, sonst kann der Radio-Auswahleffekt nicht erreicht werden

  <input type="radio" name="sex"/>男
  <input type="radio" name="sex"/>女

• Mehrfachauswahlfeld<input type="checkbox" checked/>

• Dropdown-Liste

  <select>
  <option name="city" value="bj">北京</option>
  <option name="city" value="sh">上海</option>
  <option name="city" value="sz">深圳</option>
  <select>

• Name und Wert werden hauptsächlich vom Frontend verwendet um Daten an das Backend zu übermitteln;

• id:

1. Stil festlegen (nicht empfohlen)

2. In der JS-Phase wird verwendet, um die Element-ID

3. zu erhalten, die mit einem Link übereinstimmt, um den Ankerpunkt festzulegen; 🎜>

Meldungsfeld:

• <textarea name="" value="" cols="" rows=""></textarea>Schaltfläche

Normaler Schaltflächentyp=Schaltfläche

• Typ der Schaltfläche „Senden“=Senden

• Typ der Schaltfläche „Zurücksetzen“=Zurücksetzen

• Auswahl

Tag-Selektor: div h1~h6 p span a img ul li ol dl dt dd input select

• Schritte zum Hinzufügen eines kleinen Symbols:

Gehen Sie zur offiziellen Website, um das Bild zu erhalten (verwenden Sie zum Beispiel JD.com):

1. 
   Speichern Sie das obige Bild auf Ihrem Computer

2. Hinweis: Legen Sie das Symbol im „Stammverzeichnis“ des Ordners ab; 🎜>Fügen Sie in der HTML-Seite hinzu:

Das obige ist der detaillierte Inhalt vonZusammenfassung der HTML+CSS-Wissenspunkte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!