Kein Angst vorm Programmieren: Mehr HTML und CSS für Autor:innen, Lektor:innen und Anfänger:innen

1. Einführung: Ob Sie für Ihren Lebensunterhalt schreiben oder einfach nur hier und da bloggen, wenn Sie etwas HTML und CSS kennen, wird Ihnen helfen, sich in der postapokalyptischen Landschaft hervorzuheben , die wir das Internet nennen. Dieser Kurs wird Ihr Wissen über HTML und CSS erweitern und sollte Ihnen helfen, Zombies wirklich zu töten, wo immer sie erscheinen. Wenn Sie noch nie ein HTML oder CSS hatten, empfehle ich Ihnen, zurück zu gehen und einen Blick auf meinen Kurs zu werfen, Code ist nicht so beängstigend wie Zombies, es ist HTML und CSS für Autoren, Editoren und Anfänger. Das wird Sie wirklich beginnen, wie man Tags schreibt, wie man CSS schreibt, diese Dinge. Wenn Sie das bereits wissen oder eine Idee haben, dann könnten Sie bitte auf diesem Kurs vorwärts gehen und weg lernen. Mein Name ist John Ray und ich bin ein funktionierender Webentwickler und College-Professor, der seit dem letzten Jahrtausend Websites aufbaut. Lasst uns einige Fähigkeiten lernen und einige Zombies niederschlagen. 2. Zombie Tools (Überspringen, wenn du "Code nicht als Angst als Zombies“): Hallo. In dieser Folge werden wir darüber sprechen welche Werkzeuge Sie benötigen, um mit diesem Kurs zu arbeiten. Die Wahrheit ist, dass du nicht viel brauchst. Es gibt viele verschiedene Dinge, die Sie verwenden können, aber hier sind einige Empfehlungen. Zunächst einmal, Nur-Text-Editor, können Sie dies entweder von erhalten, wenn Sie unter Windows sind, können Sie Editor verwenden oder wenn Sie auf einem Mac sind, können Sie auch Textbearbeitung verwenden, obwohl Sie es im Nur-Text-Modus verwenden sollten. All das sagte, während Sie einen Nur-Text-Editor verwenden können, ist es wahrscheinlich nicht das Ideal, nur weil es Ihnen nicht so viel Hilfe gibt, wie es könnte. Dafür empfehle ich extra einen Farbcodierungs-Editor. Was es tut, wird es den Code färben, so dass Sie tatsächlich sehen können , welche Arten von Code oder Codestücke, wie sie miteinander interagieren und die Tags in einer anderen Farbe bekommen dann sagen, Inhalt und einige dieser Dinge. Es macht es viel einfacher, zu debuggen und herauszufinden, ob Sie einen Syntaxfehler haben oder etwas passiert oder eine andere Art von Fehler haben. Für diese glücklichen Spot-Fehler ist Notepad ++, glaube ich, plattformübergreifend verfügbar, aber es ist definitiv unter Windows verfügbar. Atom ist auf jeden Fall plattformübergreifend verfügbar, eine andere, Brackets und dann Sublime Text ist wahrscheinlich ein wenig jenseits des Skill-Levels. Es ist ein großartiger Texteditor und ein sehr leistungsfähiger Texteditor und wahrscheinlich mehr als Sie brauchen. Ich würde es nicht kaufen, wenn du es nicht brauchst. Notepad ++, Atom und Brackets können Sie alle kostenlos herunterladen. Wirklich alles andere, was Sie verwenden, sollte jedes andere Codierungswerkzeug für HTML und CSS gut funktionieren, fast alles, wirklich. Die andere, die ich jedoch empfehlen werde, ist Codepen.io. Dies ist eine Website, die verfügbar ist, kostenlos zu verwenden, es ist einfach zu bedienen, automatisch aktualisiert, während Sie tippen, was super hilfreich ist, wenn Sie lernen, und es kümmert sich um all die fiddly Sachen mit nur, wie man eine Seite und was für diese Dinge zu tun ist. Es ermöglicht Ihnen, sich nur auf den Code zu konzentrieren, auf den Sie sich konzentrieren möchten, anstatt sich mit dem gesamten Code um diesen Code kümmern zu müssen, den Sie benötigen, wenn Sie nur einen einfachen Texteditor verwenden. Jede Klasse Demo als auch codepen.io sein. Werfen wir einen Blick auf das. Wir werden auf die Einrichtung schauen, wie man ein kostenloses Konto erstellt. Es ist wichtig, Ihre Arbeit hauptsächlich zu speichern, damit Sie zurückkehren können , um es zu reparieren und auch damit zu spielen. Wenn Sie mit der Arbeit an Ihrem Projekt beginnen, ist es gut, es dort zu haben, wo Sie es im Laufe der Zeit speichern können , während Sie den Kurs durchlaufen und es dann einfach veröffentlichen können, damit andere Personen sehen und sich ansehen können, was Sie getan haben. Lass uns voran gehen und ihnen Zombies in den Hals schlagen. Dies ist die Code-Stift-Website. Hier unten links wirst du dich anmelden müssen. Sie klicken darauf, melden Sie sich mit einer E-Mail an. Dieser Prozess ist ziemlich typisch. Ich werde mich einloggen, nur weil ich bereits ein Konto habe und mich einloggen kann. Jetzt, wenn du eingeloggt bist, habe ich es bereits, das sind einige Stifte, die sie denken, dass du interessiert sein könntest. Aber was wir tun werden, ist, dass wir gehen, um zu erkunden, wir werden in einem Stift erstellen. In CodePen ist ein Pen genau das. Es ist ein HTML-, CSS- und JavaScript-Teil einer Seite, die Sie damit spielen können. Der JavaScript-Teil ist nicht etwas, was wir brauchen. Was ich tun werde, ist, das zu minimieren. Wir werden uns momentan nicht mit CSS auseinandersetzen. Darauf kommen wir etwas später im Kurs. Ich werde das auch minimieren. Wir haben nur etwas HTML. Ich werde hier nur ein kleines kleines Ding schreiben, Hallo Welt. Die Standardmethode, um eine Programmiersprache zu lernen , besteht darin, hallo Welt einzugeben und sie auf dem Bildschirm auszugeben. Wie Sie sagen können, wie ich tippte, kam es heraus. Codepen.io ist nur ein wirklich großartiges Werkzeug zu bedienen, wirklich einfach und hoffentlich wird Ihr Leben viel einfacher machen, wenn Sie versuchen, entlang zu folgen. Das sind die Werkzeuge. Danke. Lasst uns zum nächsten Abschnitt gehen. 3. Undead Markup: In diesem Video werden wir über Möglichkeiten sprechen, Inhalte für Anzeige, Kommunikation, Tief- und Hochstellen, Definitionen und Abkürzungen, Zeitelement oder Zeit-Tag, vorformatierten Inhalt und Code sowie das mächtige kleine Tag zu markieren. Das erste, worüber wir sprechen möchten, ist das Sub-Tag oder tiefgestellt, und es tut nur das, was Sie von einem Tiefgestellt erwarten würden, verschiebt die Baseline um 25 Prozent nach unten und verwendet kleineren Text als der Text um ihn herum. Es ist am besten für Fußnoten verwendet, wie ich bin sicher, dass Sie gut gewöhnt sind. Auch für chemische Formeln wie H2O usw. oder für die Nummerierung von mathematischen Variablen wie Z1 bis Z Horde usw. Hochgestellt erzeugt hochgestellten Text, ähnlich wie Sie es bei Exponenten erwarten würden. Nur die Baseline nach oben 50 Prozent, verwendet eine kleinere Textgröße, und es ist am besten für Exponenten verwendet. Z gewürfelt zum Beispiel. Auch etwas als überlegene Schriftzug bezeichnet, die eine gemeinsame Abkürzung Stil in Französisch und Möglichkeit Sprachen ist. Es ist technisch eine andere Sache als hochgestellt, aber wenn Sie es in HTML implementieren, wird es typischerweise mit dem sup-Tag oder dem Sub-Tag gemacht. Auch Ordinalzahlen, die 106. oder dritte oder fünfte oder was auch immer. Manchmal benötigen Sie ein Markup, eine Definition oder eine Abkürzung, etwas, das Sie häufig sehen werden. Das dfn-Tag ist das Markup für ein Definitions-Tag. Mit dem fn können Sie auch ein title-Attribut verwenden, das genau die definierte Sache festlegt. Sie können auch einen Link aus dem dfn-Tag direkt zu einer Definition hinzufügen , die weiter unten auf der Seite liegen könnte. Ich verwende etwas, das als Seitenfragmente oder Anker-Tags bezeichnet wird. Wir werden in ein bisschen darüber reden. Mit dem Tag abbr können Sie Abkürzungen einrichten. Ja, abbr ist eine Abkürzung für Abkürzungen. Sie können auch Akronyme und eine Vielzahl von diesen als auch tun. Ähnlich wie bei der Definition können Sie auch ein title-Attribut verwenden. Aber die Sache mit Titelattributen für abbr und dfn ist, dass sie nur für Mausbenutzer nützlich sind, weil niemand sonst den Tooltip sehen kann. Sie sind nur nützlich für die Teilmenge von ihnen, die wissen, mit der Maus über die Abkürzung zu bewegen, oder wissen, dass Abkürzung verwendet wird, sie könnten sogar mit der Maus schweben. Nun, ich empfehle, das title-Attribut sowohl zu Ihren dfns als auch zu Ihren Abbrs hinzuzufügen, es sei denn, Sie verwenden sie in Verbindung, dann brauchen Sie es nur in Abbr, die innerhalb eines dfn ist. Ich würde vorsichtig sein, dies nicht nur zu verwenden, sondern um sicherzustellen, dass Sie, wie es besonders gute Praxis ist, die Abkürzung definieren, wenn Sie es zum ersten Mal verwenden nur um sicherzustellen, dass alle auf der gleichen Seite sind und Jeder weiß, was los ist. Das Zeitelement, das verwendet wird, um bestimmte Datumsangaben und Uhrzeiten oder Zeitdauer zu markieren. Zum Beispiel die Zeit des 23. August, Dauer von 12 Stunden und 37 Minuten. Um es für SEO ein wenig einfacher zu machen und ein wenig einfacher, wenn der Sound für Bildschirmlesegeräte steht, gibt es etwas, das datetime-Attribut genannt wird. Das Formatieren ist sehr wichtig, da es maschinenlesbar sein muss. Es muss in einem Format vorkommen, das der Computer erwartet oder der Computer erwartet. Zum Beispiel, wir haben dies ist der 23. August 2025 um 1700, 52 Minuten und 42 Sekunden. Im Allgemeinen, wenn Sie einen Teil davon löschen, können Sie eine gültige Zeichenfolge wie 2025-08-23 oder 2025-08 oder 1752 erstellen, usw. sind alle gültige Datetime-Werte. Das Pre-Tag, verwenden wir für Code oder für anderen vorformatierten Text. Es ist in einer Monospace-Schriftart formatiert, normalerweise Kurier neu, und Leerzeichen bleiben intakt und es ist nicht in ein einziges Leerzeichen zusammengebrochen, wie es normalerweise in HTML ist. Wenn Sie zwei Leerzeichen an Ort und Stelle haben , werden zwei Leerzeichen angezeigt, anstatt nur ein Leerzeichen anzuzeigen. Das kleine Tag wird ursprünglich verwendet, um nur Text kleiner zu machen ist jetzt in HTML 5, verwendet für Dinge wie Haftungsausschlüsse, Urheberrechtsvermerke und Seitenkommentare. Verwendung dieses Codes ist viel semantischer, was bedeutet, dass es mehr Informationen für den Browser und [unhörbar] usw. bereitstellt, dann nur eine generische div oder generische Spanne zu haben, die den Text kleiner macht. Schauen wir uns einen Live-Code an. Hier beginnen wir mit dem tiefgestellten, können Sie sehen, Zombie-Ansteckung kann ausgelöscht werden. Tiefgestellt von einem direkt hier mit Sub-Tag oder hier Wasser H20 trägt auch Zombiefäule oder die Summe von Z1 bis Z Horde. Hochgestellt, wir haben die Z, drei oder Z gewürfelt. Es war untoter Schreck. Der überlegene Schriftzug für Männer war O. Mademoiselle Zombie bedeutet Mademoiselle Zombie oder die Ordnungszahlen für die 106. Infanterie. Außerdem haben wir Definition und Abkürzung. Hier haben wir den dfn des Titels von Zombie. Wenn ich hier den Mauszeiger darüber führe, zeigt es mir, was im Titelattribut ist. Dann habe ich nur die Informationen darüber hinaus, was auch immer du hineinlegen willst. Wir haben eine Abkürzung unter Zombie, die hier oben ist, diese Information hier. Dann habe ich im menschlichen Widerstand eine Abkürzung in einen dfn gesetzt und dann nur einen Titel auf die Abkürzung gemacht, nicht nur die Definition. Dann wieder, legen Sie das direkt danach, um sicherzustellen, dass alle auf der gleichen Seite waren. Der Zeitwert, Zeit-Tag ist genau hier, es wird nur hier umgebrochen, nimmt keine tatsächlichen Änderungen am zugrunde liegenden Text vor, nimmt keine Formatierungsänderungen oder so etwas vor. Es macht es nur maschinenlesbarer. Wir haben die Datetime hier vom 23. August 2025 um 1752 42. Sie können spezifischer einschließen, oder ich hätte es auch im ersten Teil hier lassen können. Dann haben wir auch Dauer. Wenn ich eine Dauer mache, brauche ich kein Date. Ich habe nur die Menge an Zeit wie 12 Stunden 37 Minuten, Datetime usw. Gleich als nächstes haben wir vorformatierten Text, und dafür habe ich ein wenig mit der Formatierung gespielt. Ich habe die Abkürzung geschnappt, nur um etwas Text darin zu haben. Dann spielte ich mit Abstand herum, so dass ich all dieses zusätzliche Zeug habe und der Leerraum intakt bleibt. Das ist ein direkter Spiegel dessen, was im Code angezeigt wird. alle hier betrifft, haben wir ein kleines Etikett. Dies ist der Text mit normaler Größe. Dann habe ich eigentlich einen kleinen Tag gemacht , der hier ist , der nur ein bisschen kleiner ist. Dann habe ich ein zweites kleines Etikett innerhalb des kleinen Tags nur zum Spaß hinzugefügt. Das ist komischer Spaß. Es ist ein kleiner Tag innerhalb eines kleinen Tags, und das machte es noch kleiner, eine Ebene weiter unten. Dann haben wir natürlich unten unten unsere Fußnote. Das war's für unsere Untoten. Jetzt werden wir über das Bearbeiten reden. 4. Zombie bearbeiten: In diesem Video werden wir über die Bearbeitung sprechen. Wir sprechen über Möglichkeiten, Inhalte zu markieren, um bearbeitete Materialien anzuzeigen, wir werden über Löschen Tag zum Entfernen von Inhalten, die Website und Datum-Uhr-Attribute sprechen , um zu erklären, wann Dinge passiert sind und wie sie passiert sind . Ein Insert-Tag, das beim Hinzufügen von Inhalten sein wird. Wieder zitieren und date-time-Attribute, gehen auch mit ihnen zu arbeiten und ein Mark-Tag, das Dinge hervorhebt und Ihnen dann zeigen, wie Sie eine keine Gruppe oder Frage Abschnitt nur zu einer Möglichkeit hinzufügen können, es zu tun. Alles klar, das ist Zombie-Bearbeitung. Manchmal müssen Sie Bearbeitungsbezeichnungen anzeigen. Ich empfehle Ihnen, dies nur zu tun, wenn die Bearbeitungen wie ein Gesetz oder mit Satzung oder etwas öffentlich sein müssen , etwas, wo es wirklich wichtig ist, dass Sie die bearbeitete Geschichte davon sehen können. Um rechtliche Dokumente Unterschiede zwischen zwei Dokumenten und um sicherzustellen, dass Sie transparent sind. Das del-Tag setzt eine Zeile durch den Text, genau wie durchgestrichen. Cite-Attribut ermöglicht es Ihnen, auf eine URL zu verweisen, warum Änderungen für Besprechungsprotokolle oder möglicherweise ein rechtliches Dokument usw. vorgenommen wurden . Date-time-Attribut nimmt eine ordnungsgemäß formatierte Datumszeichenfolge und gibt nur die Zeit oder das Datum an, an dem das besondere Änderung vorgenommen wurde. Dann gibt es auch etwas, das S-Tag genannt wird, das für Strike-through ist. Visuell tun diese dasselbe, der Unterschied ist wirklich, dass Del mehr für die Bearbeitung verwendet wird, während S ein wenig mehr ist, weil Inhalt nicht mehr gültig ist. Die INS oder Ins zeigt an, wo Text eingefügt wurde. Auch hier sind Sie das cite Attribut, dasselbe wie das del, es ist eine URL, die den Grund für die Änderung referenziert. Datum-Uhrzeit-Attribut, wieder, wie del, wie die Zeitzeichenfolge, beendet das Datum und die Uhrzeit der Änderung nicht. Dann gibt es das Markierungs-Tag, das ein Highlight ist, Markierung markiert Text, legt einen gelben Hintergrund dahinter, sollte für Inhalt von Relevanz verwendet werden, nicht für Inhalt von Bedeutung. Strong sollte für Inhalt von Bedeutung verwendet werden. Aber ich denke, Mark könnte viel mit der Bearbeitung verwendet werden, nur um sicherzustellen, dass Sie sind oder um Dinge zu zeigen, die vielleicht jemand es betrachten will, stellen Sie sicher, dass sie korrekt sind. Auch hier, aus Gründen der Wichtigkeit, möchten Sie stärkere B-Tag verwenden, vorzugsweise das starke Tag. Markierung Anweisung nicht verwendet werden, wenn der gleiche Inhalt zur gleichen Zeit, und der Bearbeitungskontext könnte Inhalt sein, ein zweites Aussehen oder eine besondere Aufmerksamkeit benötigt. Vielleicht wusste der Redakteur nicht, wie man diesen Satz belohnt usw. Ich wollte auch eine Möglichkeit finden, Notizen zu schreiben, weil es manchmal nicht genug ist, um zu vermarkten, man möchte auch eine Notiz schreiben, also gibt es kein Standardweg, dies zu tun, aber ich werde Ihnen eine Art Beispiel geben. Was ist das CSS, um es hübsch aussehen zu lassen? Dann haben Sie die Möglichkeit, dies zu tun , oder wenn Sie einen besseren Weg finden, sind Sie willkommen, das auch zu tun. Die Notiz ist groß genug, Sie können sie in ein beiseite Element legen, aber das ist ein Block-Level-Elemente. Es funktioniert nicht super gut für Inline-Notizen, also ist die Methode, die ich verwende, ein Span-Tag und bisschen CSS, damit es ein wenig anders aussieht als der Rest des Inhalts. Ich verwende nur eine Klasse von Notizen und schließe die Notiz in dieser bestimmten Klasse mit dem span -Tag ein. In Ordnung, also schauen wir uns einen Code an. Hier habe ich den Brief des Präsidenten an New Yorker nach der Zombie-Invasion, einige Bearbeitung, hoffentlich bevor es erlischt. Dies sind einige del-Tags, wie Sie hier sehen werden. Ich habe auch eine Zitieroperation und eine Datum-Zeit zu diesem speziellen del hinzugefügt. Ich habe nicht gerade in diesem Inhalt zitiert nur weil es wirklich überwältigend werden würde. Ich habe hier und ich habe für den Einsatz hier getan, und Sie sollten es wahrscheinlich für jeden Ort tun, an dem Sie Änderungen vornehmen, aber in diesem Fall habe ich es einfach nicht getan, um die Dinge etwas sauberer zu machen. Aber ich habe Datum-Zeit zu fast allem hinzugefügt, weil sich das Datum-Zeit in der Theorie jedes Mal ändern würde, wenn es geändert wird, vorausgesetzt, Sie verwenden Sekunden usw. Wie granular wollen Sie sein, liegt an Ihnen und den Anforderungen von Ihre Situation. Wir haben hier ein Löschen, wir haben eine Einfügung, wir haben eine Markierung. Einige mehr einfügen, einige mehr löschen. Jetzt eine Sache, die hier vor sich geht, und ich habe tatsächlich ein paar Notizen hier hinzugefügt. Du siehst die noch nicht, weil ich sie einfach nicht gezeigt habe, weil es verwirrend ist. Wenn Sie nicht wissen, was sie sind, werden sie nur als normaler Text angezeigt, und eine Sache, die mir am Insert-Tag nicht gefällt, ist, dass es Dinge unterstreicht. Der Grund, warum ich das nicht mag, ist, weil das viel häufiger für Links als für eingefügten Text verwendet wird, es könnte einige Leute verwirren, also habe ich einfach ein CSS gemacht, um die Dinge klarer aussehen zu lassen. Alles klar, wenn wir diese hinzufügen, habe ich es so eingerichtet, dass Löschungen Hintergrund rot sind, Einfügungen einen Hintergrund von Grün haben, die Markierungen sind immer noch gelb, und dann habe ich einen blauen Hintergrund zu den Noten hinzugefügt. Sie können sehen, dass es Notizen hier hinzugefügt. Es gibt eine Menge Sachen gelöscht, wahrscheinlich, um Präsident de Gesichter zu retten, Gesicht. Aber das sind nur einige Dinge, die Sie tun könnten, um sicherzustellen, dass die Kommunikation richtig ist und dass Sie tun, was Sie tun müssen, um es den Menschen zu erklären. Alles klar, das ist es für die Bearbeitung. Gehen wir nun zu HTML-Symbolen. 5. Symbolische Apocalypse: In diesem Video werden wir über HTML-Symbole sprechen. Winkel Klammern oder kaufmännisches Und-Zeichen werden beide verwendet, um Code anzugeben. Wenn Sie also diese wirklich zeigen müssen, können Sie etwas anderes tun und sagen, wir werden hier darüber reden. Wir werden über geschützte Leerzeichen, Marken für geistiges Eigentum, Währung, Anführungszeichen sowie Bindestriche und Bindestriche sprechen. Was ist das Symbol? Häufig müssen Sie eine eckige Klammer oder ein anderes Zeichen anzeigen , das Code kennzeichnet. Sie müssen also eine Möglichkeit haben, zu zeigen, dass es sich nicht um Code handelt. Die Art und Weise, wie Sie dies tun, ist durch ein HTML-Symbol. Symbole beginnen mit einem kaufmännischen Und-Zeichen und mit einem Semikolon. Viele der gebräuchlichen haben einen denkwürdigeren Namen erhalten und werden HTML-Entitäten genannt. Es gibt viel mehr Symbole, die Sie verwenden können als diejenigen, die denkwürdige Namen sind und sie haben einen Zahlencode mit ihnen. Zum Beispiel, hier haben wir weniger als und größer als. Also wird es kaufmännisches Und-Zeichen LT Semikolon. Also LT für weniger als und größer als, es wird kaufmännisches Und-GT für größer als Semikolon sein. Kaufmännisches Und-Zeichen Da das kaufmännische Und-Zeichen nun das HTML-Symbol bedeutet, müssen wir etwas anderes damit machen. Also kaufmännisches Und-Zeichen ist tatsächlich, wenn ein kaufmännisches Und-AMP-Semikolon. Nun einige, Sie werden manchmal sehen, dass ein kaufmännisches Und-Zeichen nur von selbst auch als kaufmännisches Und-Zeichen und nicht als Code aufgenommen wird. Gründen der besten Kompatibilität würde ich empfehlen, das vollständige kaufmännische Und-AMP-Semikolon zu haben. Aber es gibt Kontexte, in denen es in Ordnung sein könnte oder funktionieren könnte, nur das kaufmännische Und-Zeichen zu haben. Bruchfester Raum. Dies wird viel für nur verwendet, wenn Sie einer jener Leute sind, die zwei Leerzeichen nach einer Zeile haben müssen. Die einzige Möglichkeit, dies in HTML zu tun, besteht darin, ein normales Leerzeichen und ein geschütztes Leerzeichen zu haben. Zwei Wörter, die durch ein geschütztes Leerzeichen verbunden sind, brechen also nicht über einen Zeilenumbruch. So können Sie diese beiden Wörter zusammenhalten, egal wo Text fällt. Außerdem wird verhindert, dass Leerraum in ein einzelnes Zeichen ausgeblendet wird. Wenn Sie also in der Regel sechs Leerzeichen zum Raum hinzufügen, zwei Dinge aus, sollte der beste Abstand mit CSS statt mit HTML erfolgen. Aber aus irgendeinem Grund brauchen Sie ein paar zusätzliche Leerzeichen, Sie können den geschützten Raum ein paar Mal tun, und das wird als diese Anzahl von Leerzeichen erscheinen , anstatt sie alle in ein einziges Leerzeichen zu kollabieren. Es sieht aus wie kaufmännisches Und-Zeichen, NBSP ist für geschütztes Leerzeichen. Also im Bereich des geistigen Eigentums, und wir haben Urheberrecht. Wir haben das Copyright-Symbol, das kaufmännische Und-Kopie ist. Es gibt auch ein registriertes Zeichen, das kaufmännisches Und-Grat ist, und das Markenzeichen, das kaufmännisches Und-Handel ist. Der Euro wird ein kaufmännisches Und-Euro sein, Cent wird kaufmännisches Und-Cent, Pfund , kaufmännisches Und-Pfund, Yen, kaufmännisches Und-Zeichen. Ziemlich selbsterklärend in diesen Fällen. Wenn Sie mit Content-Management-Systemen arbeiten, gibt es manchmal einige Felder, die Anführungszeichen nicht sehr gut verarbeiten. Der Hauptgrund dafür ist, dass das Anführungszeichen den Code verwirren und dazu führen kann , dass er endet, bevor er soll. Der Weg, das zu umgehen, ist, wenn Sie immer noch auf das Back-End der Seite zugreifen können, können Sie Anführungszeichen durch HTML-Symbole hinzufügen. Also kaufmännisches Und-Quot, Q-U-O-T funktioniert für dump doppelte Anführungszeichen. Sie können diese Zahlencodes auch verwenden, um intelligente Anführungszeichen hinzuzufügen oder für links und rechts und smart single und smart double. So ist dies intelligente einfache Anführungszeichen links. Das ist das intelligente, einfache Zitat, richtig. Diese intelligente doppelte Anführungszeichen links, und die intelligente doppelte Anführungszeichen rechts. Es gibt drei Arten von Bindestrichen in HTML. Der erste ist der Bindestrich, das ist der auf Ihrer Tastatur. Es ist die kürzeste der drei, und es wird verwendet verbinden zwei verwandte Wörter. Wir sind damit ziemlich vertraut. Um es im HTML zu platzieren, verwenden Sie einfach die Tastaturtaste für Bindestriche und Bindestriche, die nur etwas länger sind als ein Bindestrich mit dem Buchstaben n. Es wird für einen Zahlenbereich oder eine Verbindung zwischen zwei Wörtern verwendet. Hier werden einige Beispiele sein. In HTML verwenden Sie kaufmännisches Und-Zeichen, oder die Zahl ist 8211. Em Striche ähnlich En Strich, es ist die Breite des Buchstabens m, und es ist die längste der drei. Es wird verwendet, um zwei verwandte, aber separate Klauseln zu trennen oder eine Klausel des Satzes einzurichten. Also, ein Zombie zu sein, sagte nein, wann immer. ein HTML setzen, verwenden Sie das kaufmännische Und-Em Bindestrich oder 8212. In Ordnung, werfen wir einen Blick auf einen Code. Also habe ich hier nur Beispiele, um Ihnen zu zeigen, wie das alles funktioniert. Also haben wir weniger als, hier richtig mit größerem als, und GT, kaufmännisches Und-Zeichen hier auftauchen. Wir haben den geschützten Raum, der sich als Raum zeigt. Sie können sehen, dass es tatsächlich zwei Räume gibt. Der zweite ist der geschützte Raum. Wir haben das Copyright-Symbol, wir haben die eingetragene Marke und wir haben die Marke. Wir haben Euro, Cent, Pfund, Yen, stumm, doppeltes Anführungszeichen, intelligente einfache Anführungszeichen links intelligente einfache Anführungszeichen rechts, intelligente doppelte Anführungszeichen links, intelligente doppelte Anführungszeichen rechts. Jetzt haben wir unsere drei Striche. Wir haben einen Bindestrich, den Bindestrich und den Bindestrich. Das ist es für jedes der Symbole. Jetzt gehen wir auf Fragmente und andere Arten von Links. 6. Zombie und andere Links: In diesem Video werden wir über Links zu Seitenfragmenten, E-Mail-Links, Telefonlinks und SMS-Links sprechen. Fragmente ermöglichen es Ihnen, einen Link zu einem Teil einer Seite oder einem Fragment einer Seite zu erstellen. Mögliche Verwendungszwecke sind einige Unternavigation und verbundene Begriffe mit ihren Definitionen, das Verbinden von Fragen mit ihren Antworten , Link ganz unten auf der Seite, zurück nach oben auf der Seite. Dazu gibt es zwei Teile. eine ist das Fragment, mit dem Sie verknüpfen, und das andere ist der Link zu diesem Fragment. Fragment wird durch ein ID-Attribut auf dem HTML-Element definiert. Was auch immer HTML-Element Sie verwenden möchten, und dann sollte der Link, den Sie verwenden, ein Hashtag und dann den Namen der ID haben. Wenn es sich um einen Link innerhalb der Seite handelt und die ID untot ist, können Sie einfach Hashtag undead, zurück zu undead usw. Sie können es auch am Ende einer beliebigen URL hinzufügen, vorausgesetzt, dass ID innerhalb der Seite existiert, die -Browser scrollen Sie nach unten, wo Sie sich befinden. Zum Beispiel, wenn wir hier sehen wahrscheinlich nicht wirklich funktionieren zu gehen, weil ich glaube nicht, dass ich eine ID wie diese auf der Seite des Untoten Instituts habe, aber wenn es gäbe, wäre das da. So würden Sie die Verknüpfung zu einem Fragment machen. Wenn wir eine Verknüpfung zu einer E-Mail-Adresse benötigen, verwenden wir das Anker-Tag genau wie zuvor, aber anstelle einer URL verwenden wir Mail zum Doppelpunkt und dann die E-Mail-Adresse, die wir versuchen, eine E-Mail zu senden. Wir würden auch mit Telefonnummern verknüpfen, was besonders auf Mobilgeräten nützlich ist, wo Sie auf eine Nummer tippen und anrufen können. Zum Beispiel, in diesem Fall würden Sie Tel, Doppelpunkt und dann die Telefonnummer. Ich glaube, es muss nicht in diesem speziellen Format von drei Zahlen Strich drei Zahlen vier Zahlen sein. Für einen amerikanischen Anruf, natürlich, wenn Sie international tun, wahrscheinlich wollen Sie ein Plus eins und dann den Rest der Nummer zu tun. Genau wie ein Telefonlink können Sie auch einen SMS-Link machen und es funktioniert im Grunde genau gleich, außer für SMS-Doppelpunkt anstelle von tel, und es wird einen Text anstelle eines Anrufs senden. Schauen wir uns das im Code an. Hier haben wir die Mail an und dann das zombiekilla @undead Institut. Sie haben auch eine Telefonverbindung von 855-555. Jetzt ist die echte Telefonnummer einfach [unhörbar] Hier haben wir den SMS-Link, in dem ich dann bin, um das Fragment zu demonstrieren, was ich habe, ist eine Frage hier und in der Theorie wäre das mehr Fragen. Wenn ich darauf klicken möchte, wird es mich weiter unten auf der Seite bringen, wo die Antwort ist. Es bringt mich den ganzen Weg runter und da ist ein wenig mehr Platz. Aber dann kann ich den ganzen Weg zurück nach oben scrollen und die Seite wieder sehen. Wenn ich darauf klicke, werde ich natürlich wieder den ganzen Weg zurück nach unten gehen und wieder nach oben scrollen. Das war's für Fragmente. Als nächstes werden wir über Multimedia sprechen. 7. Multimedia: Zunächst müssen wir über das Quellelement sprechen, das die Grundlage für einige dieser anderen Elemente ist. Das Bildelement, das ein Phantasie- oder Bild-Tag ist. Wir werden in einer Sekunde darüber reden. Es gibt Audio- und Video-Codecs, oder wie Audio und Video gespeichert werden können und welche Algorithmen verwendet werden, um sie zu komprimieren, und dann haben wir das Audio-Element und das Video-Element und schließlich das iframe-Element. HTML5 brachte Unterstützung für eine Vielzahl von Medien. Die Backbones dieser Medien werden als Quell-Tag unterstützt. Weist dem Browser an, wo die Datei zu suchen ist, und bietet mehrere Optionen basierend auf dem was ein Codecs, der bestimmte Browser unterstützt. In Ordnung. dem Bildelement können Sie verschiedene Bilder für verschiedene Bildschirmgrößen einstellen. Es gibt Ihnen auch einen Fallback, wenn der Browser das Bildelement nicht unterstützt. In diesem Fall verwendet das Quellelement ein Quellsatzattribut, Audio und Video verwenden jedoch nur das Quellattribut. Es gibt auch eine andere Möglichkeit, dies mit einem Quellsatzattribut für das Bild-Tag selbst zu tun, aber ich finde es ein wenig schwieriger, Ihren Kopf zu wickeln und die Vorteile sind in diesem Stadium vergleichsweise klein. Es kann ein bisschen effizienter sein. Geben Sie dem Browser ein wenig mehr Spielraum bei der Auswahl des richtigen Bildes. Aber Bildelement ermöglicht es Ihnen auch, verschiedene Bilder verschiedenen Größen zu machen und das zu tun, was Art Directing genannt wird, was Ihnen erlaubt, in verschiedenen Teilen eines Bildes, die Sie in den verschiedenen Größen zeigen könnten zu setzen . Das Bildelement sieht in etwa so aus. Wir haben die Quelle hier mit der tatsächlichen Datei gesetzt, die wir verwenden werden. Ihre sofortige Abfrage hier mit min-width 40em. Wie Sie sich vielleicht von der letzten Klasse oder von anderen Klassen erinnern, die Sie besucht haben, ist 1em gleich der Standardschriftgröße für die Website. Grund, warum ich die Medienabfrage mit der Größe der Schriftart verknüpfe , ist, dass einige Leute ihre Schriftart vergrößern. Wenn wir es in eine Art der Schriftgröße einbinden, dann funktionieren unsere Medienabfragen immer noch und sie funktionieren auch gut, wenn wir die richtige Pixelgröße erreichen. Es ist nur ein bisschen robuster Weg, unsere Medienabfrage zu setzen. Nun, unsere Standardeinstellung wird dieses andere Bild sein. Jetzt, im ersten Bild, hat der Zombie keinen Hut. Im zweiten Bild, diesem Fallback-Bild, hat der Zombie einen Hut. So sehen wir den Unterschied zwischen den beiden Bildern. Dann haben wir endlich das Schrägstrich Bild. Wenn der Browser das Bildelement oder das Quellelement nicht verstanden hätte, würde er diese beiden einfach überspringen und es würde nur das Bildelement dort anzeigen. Ein Codec ist eine Möglichkeit, Audio- oder Videodateikomprimierungsalgorithmus zu speichern. Es gibt auch Container-Dateien, die die Erweiterung der Datei ist und eine Vielzahl von verschiedenen Codecs enthalten kann. Nicht jeder Browser unterstützt jeden Codec oder sogar jede Containerdatei. Einige Codecs sind Open Source, aber nicht gut unterstützt. Einige werden weit verbreitet unterstützt, sind aber nicht so gut darin, die Datei zu komprimieren oder die Videoqualität hoch zu halten, et cetera. Es gibt verschiedene Codecs, die zu verschiedenen Zeiten für verschiedene Zwecke verwendet werden . In Ordnung. Lassen Sie uns über Audio reden. Audio-Tag ermöglicht es Ihnen, Audio direkt auf der Seite abzuspielen. Sie müssen das Attribut controls einschließen, um dem Benutzer die Audio-Steuerelemente anzuzeigen. Andernfalls wird tatsächlich nichts auf der Seite selbst angezeigt. Das Attribut controls ist auch ein boolesches Attribut, was bedeutet, dass Sie nicht sagen müssen, dass Steuerelemente gleich wahr oder Steuerelemente gleich Steuerelemente sind, Sie können einfach das Wort „Controls“ dort hinzufügen und es funktioniert, um Steuerelemente hinzuzufügen. Dann haben wir auch einige Quellelemente. Zum Beispiel haben wir hier drei verschiedene Quellelemente, so.oog ist eine Ogg Vorbis-Datei. Es ist normalerweise ziemlich klein, aber nicht immer gut unterstützt. Denn A ist wahrscheinlich etwas, mit dem Sie ein wenig vertrauter sind. Es ist die nächste, die MPEG4-Spezifikation, die ziemlich hochwertig ist, und wir haben auch die MP3, die wahrscheinlich ein wenig geringere Qualität ist, aber sehr breite Unterstützung hat. Schließlich hatten wir diesen Link zur MP3-Datei, stellen Sie einfach diesen Fallback bereit, falls jemand einen Browser verwendet , der das Audio- oder Quellelement nicht unterstützt. Es gibt auch das Video-Tag, das sehr ähnlich wie das Audio-Tag funktioniert. Es benötigt auch das Steuerelementattribut. Video-Steuerelemente, und dann haben wir einige Quellen. WebM ist ein Dateiformat, das das Video sehr klein bekommt, aber ab dieser Aufnahme funktioniert es wirklich nur in Chrome. Oggv ist die Ogg Theora, die die Videokomponente von Ogg Vorbis ist, oder die Ogg-Spezifikation, die Open-Source-Spezifikation. Dann haben wir die MP4, und schließlich haben wir einen Link für jene Browser, die kein Video oder Quelle unterstützen. Schließlich werden wir über das iframe-Element sprechen, das am häufigsten zum Einbetten von Videos verwendet wird. Technisch gesehen zeigt ein iframe eine Webseite in einer anderen an. Wenn Sie ein Video in Ihre Seite einbetten, sagen Sie im Grunde: „Nehmen Sie die YouTube-Seite und kleben Sie es auf dieser anderen Seite hier.“ Hier ist ein Beispiel für einen iframe. Wir haben eine Breite und Höhe eingestellt, wir haben einen Quellsatz, das ist das YouTube-Video, wir haben Rahmenrahmen und erlauben, ermöglicht eine Reihe von verschiedenen Optionen und erlauben Vollbild, und dann das Schließen von den iframe. In Ordnung. Werfen wir einen Blick auf diese im Code. Zuerst haben wir ein Bildelement. Es ist das gleiche Bildelement, das ich Ihnen vorhin gezeigt habe, und wenn wir dann die Größe hier ändern, sollten wir irgendwann einen Hut bekommen. Als wir herabkamen, um innerhalb von 40em zu sein, die Seitengröße innerhalb von 40em war , war dieses Top erschienen. Wenn ich noch einmal darüber gehe, fällt es aus. Es ist nur eine Möglichkeit, verschiedene Bilder zu zeigen. Jetzt ist dieses HR hier nur eine horizontale Regel und ich benutze es nur als Trennzeichen. Dies gilt für die horizontale Regel hier. Hier haben wir Audio. (AUDIO GESpielt) Wir haben schöne Audio , weil es Steuerelemente zeigt, es zeigt hier, und es zeigt, was von diesen Dateien am leichtesten vom Browser verstanden wird, oder der erste, der vom Browser verstanden wird, wird es verwenden. In Chrome, denke ich, M4A und MP3 werden beide unterstützt. Ich glaube nicht, dass Ogg es ist, aber es wird in Firefox und vielleicht einem anderen Browser unterstützt. Als nächstes hatten wir Video. Dies ist das gerade Video-Tag, und da ist das Video abgespielt. Es ist nur ein schnelles Video von diesen Typen, die tanzen. Wie Sie hier sehen können, gibt es Steuerelemente enthalten sind. Wir haben unsere Quelle, wir haben Kontrollen, verschiedene Quellen und dann einen Rückfall, wenn wir sie brauchen, was wir in diesem Fall nicht tun. Dann hier ist ein iframe, der gleiche iframe, den wir auf den Folien gezeigt haben. Hier spielt es einfach über YouTube, was ein bisschen länger dauert, um zu denken und dann zeigt es einige andere Videos. In Ordnung. Das ist es für Multimedia-Horte. Als nächstes sind HTML-Tabellen. 8. Zombies mit einem (HTML) zerschlagen: In diesem Video sprechen wir über HTML-Tabellen. Wir sprechen über das Tabellenelement, das caption-Element, das Tabellenzeilenelement und das Tabellendatenelement oder Tabellenzellen. Du müsstest vorsichtig mit Tischen sein. Sie machen eine großartige Arbeit beim Auslegen von Daten. Sie neigen dazu, horizontal ausgerichtet zu sein, und in einer Welt des reaktionsfähigen Designs, in der Ihre Website sowohl auf einem riesigen Desktop als auch auf einer winzigen Uhr oder einem Telefon funktioniert , kann die horizontale Ausrichtung es für Tabellen wirklich schwierig machen in beiden Kontexten korrekt angezeigt werden. Seien Sie vorsichtig mit ihnen und stellen Sie sicher, dass Sie nur wirklich Dinge einfügen, die Sie brauchen, verwenden Sie nicht wirklich Tabellen für das Layout der tatsächlichen Seitenelemente, sondern wirklich nur für tatsächliche Daten. Tabellen verwenden viele Tags, wie Sie wahrscheinlich oben in diesem Video gesehen haben. Zuallererst müssen wir das Tabellenelement haben. Dann gibt es auch eine Tabellenbeschreibung, die die Beschriftung, Tabellenzeile und dann Tabellendaten oder Zelle ist . Es gibt auch Tabellenkopfzelle, die th ist. Hier ist eine Tabelle, öffnende Tabelle Tag und wir haben eine Beschriftung, Ein Tableau Zombies. Dann haben wir eine Tabellenzeile beginnen. Dann haben wir eine Tabelle Daten. Erste Reihe, Zombie 1, Tabellendaten 2. Unsere erste Zeile für Zombie 2, dann schließen wir die Tabellenzeile. Das ist die erste Zeile unserer Tabelle. Dann haben wir unsere zweite Reihe. Zweite Reihe für Zombie 3, zweite Reihe, Zombie 4, schließende Tabelle Zeile. Dann schließen wir den Tisch und ein wenig kommen wir in den Code und ich werde Ihnen zeigen, wie das tatsächlich aussieht. Mit Überschriften, ähnliche Art von Sache. Wir haben öffnende Tabelle, wir re Beschriftung, beginnen mit der Tabellenzeile und dann werden wir die erste Zeile der Tabellenüberschriften zu machen. Wir haben Spalte Zombies und re Spalte Zombies links, Schließen einer Tabellenzeile und dann haben wir unsere zweite Zeile, die unsere erste Zeile der tatsächlichen Daten ist, Tabellendaten erste Zeile Zombie 1, erste Zeile Zombie 2, schließen Sie die Tabellenzeile, Schließen Sie die Tabelle. Schauen wir uns diesen Code an und sehen, wie diese tatsächlich aussehen. Ich habe ein wenig CSS gemacht, nur um sicherzustellen, dass die Dinge richtig aussahen. Ich habe gerade die Grenzen zusammengebrochen, so dass sie keine Zwischenräume zwischen ihnen hatten. Dann habe ich eine feste Grenze um die tds und ths gelegt. Wir haben unsere Tabelle, h2 nur angeben, wo der Tisch ist. Wir haben unsere öffnende Tabelle Tag, und wir haben unsere Beschriftung, die ist, was hier erscheint. Wir haben unsere erste Tabellenzeile, also haben wir hier unser erstes Element. Erste Reihe Zombie 1 Dann haben wir unsere zweite Tabelle Daten, Zombie 2 genau hier, und dann haben wir unsere zweite Reihe. Hier ist die zweite Reihe. Dann haben wir die zweite Reihe Zombie 3 genau hier. Zweite Reihe Zombie 3, zweite Reihe Zombie auf 4, zweite Reihe Zombie 4. Tabellenzeile schließen, Tabelle schließen. Jetzt mit Überschriften wird es ungefähr gleich aussehen, außer dass diese Ths- oder Tabellenüberschriften standardmäßig fett angezeigt werden. Wir haben einen Eröffnungstisch, unsere Beschriftung. Wir haben mit der Tabellenzeile beginnen, Tabellenüberschrift, linke Spalte Zombies, linke Spalte Zombies. Wir haben Tabelle rechts Spalte Zombies, Rechte Spalte Zombies. Zu weit. Rechte Spalte Zombies und dann haben wir die zweite Zeile und war unsere erste Zeile Daten. Erste Reihe Zombie 1, und unsere zweite Tabelle Daten genau hier. Erste Reihe Zombie 2, schließen Sie das tr, schließen Sie den Tisch. Das war's für Tische. Als nächstes gehen wir zu Auswahlen und einigen CSS. Güte. 9. Zombie: In diesem Video werden wir auf Nachkommen Selektoren, Pseudo-Klassen und andere, Pseudo-Klassen, erstes Kind, letztes Kind und n-th-Kind, dann werden wir über Zebra Striping einer Tabelle sprechen. Nachkommen Selektoren, manchmal werden sie auch kontextbezogene Selektoren genannt und sie sind im Grunde eine Kombination aus einer ID, einem Klassenende oder Elementselektoren, die durch ein Leerzeichen getrennt sind. Zum Beispiel könnten Sie diese ID der Horde oder mit einer Klasse von Zombie mit einem Element von b haben, sie müssen nicht eine ID, eine Klasse, ein Element sein . Es kann zwei Elemente sein, es kann zwei Klassen auf einer ID sein, kann eine ID und ein Element sein. Es kann eine Kombination sein, die Sie wollen, viele Sie wollen, und in diesem Zusammenhang bedeutet dies nur b-Tags, die innerhalb eines Elements mit einer Klasse von Zombie sind und das auch ein Element mit einer ID von Horde ist. Angesichts der Horde Zombie B haben wir hier eine Horde. Wir haben eine Klasse von Zombie und b, so dass dies ausgewählt ist, da es keine b, dies ist nicht ausgewählt, da dies nicht in einer Klasse von Zombie, dies ist nicht ausgewählt. Obwohl dies ein klassischer Zombie mit einem b ist, ist er nicht ausgewählt, weil er nicht innerhalb der ID der Horde ist. Pseudo-Klassen sind Möglichkeiten, Elemente basierend auf Aspekten über sie auszuwählen. erste Kind wird das erste Kind eines anderen Elements auswählen und Pseudo-Klassen werden mit einem Doppelpunkt zwischen dem Selektor und der Pseudo-Klasse geschrieben. So ul li: erstes Kind ist ein Beispiel. Angesichts ul li: erstes Kind, wir haben eine Horde ul li:erstes Kind. Wir haben eine ul hier, wir haben ein li, also ist dies das erste Kind der ul. Dieser ist ausgewählt, dies ist ein Li innerhalb einer ul, aber es ist nicht das erste Kind, also ist es nicht ausgewählt. Hier haben wir eine andere ul, das erste Kind ist jedoch ein b-Tag, also ist es nicht ausgewählt, es ist kein Li und dies als Li ist nicht das erste Kind, also ist es nicht ausgewählt. Wir werden uns das noch einmal im Code 2 ansehen, um sicherzustellen, dass es klar ist. letzte Kind wird genauso arbeiten wie das erste Kind, sie sind einfach nicht aus der entgegengesetzten Richtung gegangen. Angesichts ul li: letztes Kind, wir haben eine ul, wir haben li. Dies ist das erste Kind, es ist nicht das letzte Kind, daher ist es nicht ausgewählt. Aber dieses li, ist ausgewählt, weil es das letzte Kind ist. Nun, wenn Sie hier nur ein li-Element hatten , dann wäre es sowohl das erste als auch das letzte Kind, so dass es als das einzige Kind ausgewählt wird, es würde sowohl für das erste Kind, letztes Kind und hier haben wir eine andere ul. Das b ist das erste Kind, li, ist das letzte Kind, also wird es ausgewählt und das b -Tag ist natürlich nicht. Dann gibt es nth-child und dies ist eine Funktion, die eine Zahl, ein Schlüsselwort oder eine Formel annehmen kann . Zum Beispiel, wenn wir nur eine sieben setzen, wird es das siebte Kind von ul auswählen, aber nur, wenn es ein Li ist, können Sie sogar setzen, die alle sogar Kinder auswählen wird, zB 2, 4, 6, 8. Wen wissen wir zu schätzen? Zombie-Zombies. Hier haben wir eine Funktion 3n minus 2. Wenn n 1 ist, 3 mal 1 ist 3, minus 2 ist 1. Wenn n 2 ist, haben wir 6 minus 2, was 4 ist, und dann 7 und 10 usw. Das wäre eine Funktion, die diese bestimmten Elemente auswählen würde. Nun, Zebra-Striping ist, wenn Sie Tabellenzeilen alternativen Farben erstellen, um es den Menschen einfacher zu machen, der Zeile über zu folgen. Sie können nth-child dafür verwenden, z. B. tr: nth-child (ungerade), die Hintergrundfarbe auf ein hellgrau zu setzen , wäre eine gute Möglichkeit, dies zu tun. Schauen wir uns einige Code hat die gleichen Beispiele von vorher. Wir haben hier, angesichts der Hashtag-Horde. Zombie b. Was ich hier getan habe, ist nur Farben auf diejenigen, die ausgewählt werden, um deutlich zu machen, dass sie ausgewählt sind oder nicht. Es sollte Farbe blau von b Tag innerhalb eines Zombie innerhalb einer Horde sein. Hier haben wir ein b-Tag, das besagt, dass es ausgewählt ist, aber es ist ein b-Tag innerhalb eines Zombie innerhalb einer Horde, also ist es blau und keiner dieser anderen wird ausgewählt, genau wie wir zuvor gesprochen haben. Dieser ist nicht ausgewählt, da es kein b-Tag gibt, dieses ist nicht ausgewählt, weil es kein Zombie-Tag gibt und dieses nicht ausgewählt ist, weil es kein Horde-Tag gibt. erste Kind ist nicht die gleichen Codes, die wir zuvor gesehen haben , und hier ändere ich nur die Farbe zu grün für diejenigen, die ausgewählt sind. Erste Horde, wir mussten eine ID hinzufügen, nur um es klar zu machen, so erste horde ul li:first child. Wir sind in der ersten Horde ul li:first child, dieses eine ausgewählt, und dieses ist das grüne. Dies ist das zweite untergeordnete Element, daher ist es nicht ausgewählt. Dies ist eine ul immer noch innerhalb der ersten Horde, aber das erste Kind ist kein li-Tag, also ist es nicht ausgewählt, es ist nur fett. Als nächstes haben wir letztes Kind, also letztes Kind hier. Letztes Kind Selektor, wir haben #last -horde ul li:last-child, alles ist innerhalb der div id last horde. Wir haben die ul und li es ist das erste Kind, es ist nicht das letzte Kind, also ist es nicht ausgewählt. Dann haben wir eine li-Klasse von Zombie, die es ausgewählt ist, weil es letztes Kind ist, also ist es rot geworden. Wir haben eine weitere ul das erste Kind ist ein b-Tag, das letzte Kind ist ein li-Tag, so ist es auch ausgewählt und so ist es rot. Dann schließlich hier haben wir eine Tabelle, die Zebrastreifen waren, also werden wir einfach die Tabellenzeile mit einem n-ten Kind von ungerade festlegen. Wählen Sie zuerst, dritte, fünfte, siebte, etc. Hintergrundfarbe eines, nur ein leichtes Grau und hier haben wir die Eröffnungstabelle, wir haben die Beschriftung, wir haben die erste Reihe, Zombie 1, Zombie 2, zweite Reihe Zombie 3, Zombie 4 . Dritte Reihe Zombie 5, Zombie 6. Vierte Reihe, Zombie 7, Zombie 8. Fünfte Reihe, Zombie 9 Zombie 10. Sechste Reihe Zombie 11, Zombie 12, etc, den ganzen Weg nach unten bis Zombie 16. Wie Sie sehen können, haben die ungeraden Zeilen einen Hintergrund, der grau ist, also haben wir diese erste, dritte, fünfte, siebte. Das ist es für die Zombie-Auswahl, wo wir als nächstes über die Zombie Polka sprechen, oder besser gesagt Akkordeon-Menüs. 10. Zombie Polka: In diesem Video sprechen wir über das Detailelement und das zusammenfassende Element und wie Sie Ihre eigenen Akkordeon-Menüs erstellen können. Zuallererst haben wir das Detail-Tag, das ein Element auf Blockebene ist, und Sie werden den größten Teil des Inhalts in diesem Element einfügen und wir haben das zusammenfassende Tag, das innerhalb des Details-Tags geht, sollte so kurz sein, wie es sinnvoll ist. Beim Rendern wird das Zusammenfassungselement mit einem Dreieck links angezeigt. Dann klickst du darauf und das Dreieck öffnet sich und zeigt den Inhalt darin an. Mal sehen, wie das aussieht. Wieder, hier haben wir Details. Dann haben wir die Zusammenfassung, da das erste Diagramm der Details die beste Vorgehensweise ist. Es sollte auch nur eine Zusammenfassung Tag haben, wenn Sie mehrere haben können den Browser verwirren und dann schließen wir die Details Tag hier nach diesem ganzen Lieben Tagebuch. Wenn wir hier runter kommen, sehen wir, dass das zusammenfassende Tag hier ist, was hier gezeigt wird und wenn ich darauf klicke und dann zeigt es mir alle Inhalte hier. Wenn ich noch einmal darauf klicke, wird es geschlossen. Ich kann direkt auf das Dreieck klicken, oder ich kann auf den Text selbst klicken und dort haben Sie Ihre Akkordeon-Menüs. Mal sehen, was passiert, wenn wir einen zweiten hier reinlegen und 3,2. Wenn wir eine zweite in setzen, wird es nur als Teil des Inhalts annehmen. Das war's für Akkordeon-Menüs. 11. Schlussbemerkung: Danke, dass du im Zombie-Killing-Abenteuer mitgekommen bist, es war großartig, dich dabei zu haben. Ich würde gerne eines der Projekte sehen, die Sie getan haben. Bitte zögern Sie nicht, sie mit mir und mit Klassenkameraden zu teilen. Ich würde gerne sehen, was du getan hast und was du gelernt hast. Danke und ich sehe dich nächste Klasse. Tschüss