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
Detaillierte Schritte zur Installation von MySQL 5.7 über YUM auf CentOS7
1. Gehen Sie zu dem Speicherort, an dem Sie das I...
So erhalten Sie die dynamische Anzahl der verbleibenden Wörter im Textbereich
Ich bin bei der Arbeit auf einen Fall gestoßen, ü...
Ändern des Standard-Bildlaufleistenstils im Front-End-Projekt (Zusammenfassung)
Ich habe viele Projekte geschrieben, bei denen de...
Einführung und Installation von MySQL Shell
Inhaltsverzeichnis 01 ReplicaSet-Architektur 02 E...
Objektorientierte JavaScript-Implementierung eines Lupengehäuses
In diesem Artikel wird der spezifische Code der o...
JavaScript+html zur Implementierung der Sliding-Verifizierung auf Front-End-Seiten (2)
In diesem Artikelbeispiel wird der spezifische Co...
Detaillierte Erläuterung des Prozesses zum Einrichten einer NVIDIA-Docker-Umgebung auf einem Linux-Server
Docker entspricht einem Container, der je nach de...
Vier Methoden zur Datentypbeurteilung in JS
Inhaltsverzeichnis 1. Art von 2. Instanz von 3. K...
MySQL 5.7.10 Installationsdokumentation Tutorial
1. Installieren Sie Abhängigkeitspakete yum -y in...
Tutorial zum Herunterladen und Installieren von MySQL 8.0.12 WinX64
MySQL 8.0.12 Download- und Installations-Tutorial...
Detaillierter Installationsprozess der MySQL 8.0 Windows-ZIP-Paketversion
Der Installationsprozess von MySQL 8.0 Windows Zi...
Detaillierte Erklärung der Angular-Komponentenprojektion
Inhaltsverzeichnis Überblick 1. Einfaches Beispie...
Zusammenfassung der Lastausgleichsmethoden von Nginx
Um den Lastenausgleich zu verstehen, müssen Sie s...
MySQL-Datenbankgrundlagen: Eine Zusammenfassung der grundlegenden Befehle
Inhaltsverzeichnis 1. Hilfeinformationen nutzen 2...