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
Lösung für das Problem, dass synchrone Replikationsfehler im MySQL5.6 GTID-Modus nicht übersprungen werden können
Datenbankversion: mysql> select version(); +--...
Lösung für den Fehler bei der Installation von Docker auf der CentOS-Version
1. Versionsinformationen # Katze /etc/system-rele...
HTML+CSS+jQuery imitiert den Such-Hotlist-Tab-Effekt mit Screenshots
Code kopieren Der Code lautet wie folgt: <!DOC...
Detaillierte Erläuterung der Werteübertragung von Vue-Eltern-Kind-Komponenten und der Probleme beim unidirektionalen Datenfluss
Inhaltsverzeichnis Vorwort 1. Die übergeordnete K...
HTML-Grundlagen - CSS-Stylesheets, Style-Attribute, Format- und Layoutdetails
1. Position : fest Gesperrte Position (relativ zu...
CSS 3.0 Text Hover Jump Spezialeffekte-Code
Hier ist ein mit CSS 3.0 implementierter Textschw...
So verwenden Sie JSX in Vue
Was ist JSX JSX ist eine Syntaxerweiterung von Ja...
Welchen MySQL-Eindeutigen Index oder Normalen Index soll ich wählen?
Stellen Sie sich ein Szenario vor, in dem beim En...
Optimierung der Datenbank-SQL-Anweisung
Warum optimieren: Beim Start des eigentlichen Pro...
Detaillierte Installation und Verwendung von RocketMQ in Docker
Um nach RocketMQ-Images zu suchen, können Sie auf...
Das Prinzip und die Anwendung der ES6-Dekonstruktionszuweisung
Inhaltsverzeichnis Array-Destrukturierungszuweisu...
Flussdiagramm für den Webserverzugriff auf HTTP und HTTP-Zusammenarbeit
Ein Webserver kann mehrere Websites mit unabhängi...
Installationsschritte und Tutorial zur grundlegenden Verwendung von MySQL 8.0.12 unter Windows
In diesem Artikel werden die Installationsschritt...
Detaillierte Erläuterung zum Ausführen von JMeter unter einem Linux-System und zur Optimierung des lokalen Speichers
1. Installieren Sie das systemübergreifende Datei...
Implementierung eines einfachen Altersrechners auf Basis von HTML+JS
Inhaltsverzeichnis Vorwort Demonstrationseffekt H...