Ein Artikel, der Ihnen HTML beibringt
|
Wenn Sie nicht unbedingt Künstler werden möchten, können Sie als Entwickler einfach HTML lesen und bei Bedarf einfache Änderungen vornehmen. Folgen Sie meinen Gedankengängen weiter unten und ich garantiere Ihnen, dass dieser Artikel Ihnen dabei helfen wird, HTML zu verstehen. Natürlich ist es am besten, wenn Sie es während des Lesens selbst ausprobieren, um ein tieferes Verständnis zu erlangen. Ok, fangen wir an: (Die folgenden Symbole sind alle auf Englisch eingegeben) 1. Grundregeln von HTML <html> <Kopf> <title>Meine Webseite</title> ………………………….. </Kopf> <Text> ………………. </body> </html> Fast alle Webseiten folgen diesem Format. Dies ist ein notwendiges Tag für eine Webseite. Jedes Tag wird in < > gesetzt und endet mit </ >, außer dass anstelle der Auslassungspunkte eine Menge chaotischer Dinge hinzugefügt werden, was der Inhalt ist, den wir sehen. Kopieren Sie den obigen Code in einen Notizblock und speichern Sie ihn als HTML-Datei, um eine Webseite zu erstellen. Öffnen Sie es anschließend im Editor, fügen Sie das Wort „Home“ zwischen <body> ein, speichern Sie es und öffnen Sie es dann, um das folgende Bild anzuzeigen: Fügen Sie als Nächstes das Tag <a> vor und nach der Homepage hinzu, um es in <a href=”#”>Homepage</a> zu ändern, speichern Sie es und sehen Sie sich die Wirkung an. Ist es der Hyperlink, den wir normalerweise im Internet sehen? Es ändert sich einfach nichts, wenn Sie hier auf „Home“ klicken, weil wir einen leeren Link hinzugefügt haben. Also, schmieden Sie das Eisen, solange es heiß ist. Folgen Sie der vorherigen Methode, um eine Seite zu erstellen, speichern Sie sie als b.html, ersetzen Sie dann das „#“ oben durch b.html, öffnen Sie sie und klicken Sie auf „Home“. Soll es zu Seite b springen? (Natürlich müssen die Seiten a und b im selben Verzeichnis liegen.) Bis jetzt sollten Sie verstanden haben, dass alle Funktionen auf einer Webseite durch verschiedene Tags wie <a> implementiert werden. Sie müssen sich nur die Funktionen dieser Tags merken. 2. Webseitenstruktur Wenn Sie beim Surfen im Internet aufpassen, sind Webseiten tatsächlich in Blöcke unterteilt, wie in der Abbildung gezeigt Natürlich ist dies nur eine grobe Struktur. Sie können es je nach Bedarf in viele Blöcke unterteilen. Der Zweck der Unterteilung in Blöcke besteht hauptsächlich darin, Aspekte zu ändern und ihre jeweiligen Ausdrucksstile zu bestimmen. Dies wird hauptsächlich durch das Tag <div></div> erreicht. Lassen Sie mich versuchen, der „Homepage“ ein Tag <div> hinzuzufügen: <div> <a href=”b.html”>Startseite</a> </div> Speichern Sie es und versuchen Sie, es erneut zu öffnen. Was ist die Auswirkung? Ist es immer noch dasselbe wie vor der Änderung? Nehmen wir einige Änderungen vor: <div Stil = "Breite: 200px; Höhe: 100px; Rahmenstil: fest;" > Während des Betriebs wird der von uns markierte Bereich durch einen blauen Hintergrund gekennzeichnet! Durch das Hinzufügen vieler <div></div>-Blöcke können Sie die Webseite in acht Teile aufteilen, haha, und dann in jeden Block das einfügen, was Sie möchten. Natürlich fügen viele <div> style="" hinzu. Wenn diese Stileinstellungen ähnlich sind, wäre es für uns zu mühsam, jede einzelne festzulegen. Normalerweise fügen wir diese Stile in eine andere CSS-Datei ein (die den Anzeigestil jedes Tags auf der Webseite steuert) und rufen sie dann dort auf, wo sie benötigt wird. Lassen Sie es uns unten versuchen. Erstellen Sie einen neuen Editor, benennen Sie ihn in c.css um, öffnen Sie ihn und schreiben Sie dann: #header{width:200px;height:100px;border-style:solid;} Und löschen Sie es in a.html Fügen Sie dann <link rel="stylesheet" type="text/css" href="c.css" /> vor </head> hinzu. Hiermit wird die c.css-Datei eingeführt. Der Vorteil, CSS in eine separate Datei zu setzen, besteht darin, dass wir, wenn dieser Stil an vielen Stellen referenziert wird, nur diese eine Stelle ändern müssen und alles wird sich ändern. Andernfalls müssen wir jede Stelle manuell ändern, was einer späteren Wartung nicht förderlich ist. Ändern Sie abschließend das <div> von a.html in <div id=header> Ist die Wirkung die gleiche wie vorher? Sie sollten jetzt fast in der Lage sein, „Gedichte aufzusagen, auch wenn Sie sie nicht schreiben können“. Dieser Artikel soll Ihnen hauptsächlich ein allgemeines Verständnis von HTML vermitteln und Ihnen zeigen, worum es dabei geht. Es gibt noch viele Tags, die nicht behandelt wurden. Dazu müssen Sie ein Buch über Webdesign finden, um sie zu lesen und auswendig zu lernen. |
<<: Eine kurze Analyse der Verwendung von Rahmen- und Anzeigeattributen in CSS
>>: MySql-Entwicklung einer automatischen Synchronisierungstabellenstruktur
Artikel empfehlen
So verwenden Sie js zur Kommunikation zwischen zwei HTML-Fenstern
Szenario: Wenn Seite A Seite B öffnet, muss Seite...
Detaillierte Erklärung der Funktionen outfile, dumpfile und load_file bei der MySQL-Injektion
Im späteren Stadium der Ausnutzung von SQL-Inject...
JavaScript, um das Bild mit der Maus zu bewegen
In diesem Artikel wird der spezifische JavaScript...
Vorgang zur Zeitzonenanpassung im Docker-Container
Wie kann ich überprüfen, ob die Zeitzone des Dock...
Vue imitiert den Karusselleffekt von Ctrip (gleitendes Karussell, unten hochadaptiv)
Schauen wir uns zuerst den Fall an. Verwenden Sie...
Schritte zum Übertragen des neuen Kernels auf das Linux-System
1. Laden Sie das Ubuntu16.04-Image und den entspr...
Fehler mit ungerader Breite und Höhe in IE6
Wie in der Abbildung gezeigt: Aber bei der Anzeig...
So verwenden Sie die Lodop-Drucksteuerung in Vue, um browserkompatibles Drucken zu erreichen
Vorwort Dieses Steuerelement weist beim direkten ...
Detaillierte Diskussion zum Thema mysqldump-Datenexport
1. Bei der Verwendung von mysqldump wird ein Fehl...
MySQL Binlog-Datenwiederherstellung: Detaillierte Erklärung zum versehentlichen Löschen einer Datenbank
Wiederherstellung der MySQL Bin-Protokolldaten: v...
Stellen Sie die Breite der Tabelle so ein, dass sie sich nicht mit dem Text ändert
Nachdem die Tabellenbreite auf der Seite auf width...
Vue verwendet Drag & Drop, um einen Strukturbaum zu erstellen
In diesem Artikelbeispiel wird der spezifische Co...
CentOS8-Installationstutorial für JDK8/Java8 (empfohlen)
Vorwort Zuerst wollte ich es mit wget auf CentOS8...
Zusammenfassung der Methoden zum Überprüfen, ob der Port in Linux geöffnet ist
Methode 1: Verwenden Sie den Befehl lsof Mit dem ...
Element mit Auswahltabelle zum Ändern des Kontrollkästchens in der Kopfzeile in Textimplementierungscode
Methode 1: Verwenden Sie Tabellenattribute: Heade...