Zur grundlegenden Verwendung von HTML gehören Links, Stylesheets, Span und Div usw.
|
1. Links Hypertext-Links sind in HTML sehr wichtig. Das grundlegende Format ist wie folgt: <A HREF="Ressourcenadresse">Linktext</A> 1. Lokaler Link ① Absoluter Pfad: <A HREF="C:\images\article.jpg">Absoluter Pfadlink zum lokalen Bild</A> ②Relative Straßenfestigkeit <A HREF ="article2.jpg"> Relativer Pfadlink zum lokalen Bild</A> ③Link zum vorherigen Verzeichnis <A HREF="../test.htm">Link zum vorherigen Verzeichnis</A> 2. URL-Linkformat: Protokollname://Host.Domänenname/Pfad/Dateiname Das Protokoll enthält: Datei lokale Systemdatei http www server FTP FTP-Server Telnet basiert auf dem TELNET-Protokoll mailto E-Mail Neuigkeiten Usenet Newsgroups Gopher GOPHER-Server wais WAIS-Server Beispiel: <A HREF="http://www.baidu.com"> Baidu-Suche</A> 3. Verzeichnislink Legen Sie zunächst einen Absatz als Link-Speicherort fest. Das Format lautet: <A NAME="Link-Standortname"></A> Anschließend rufst Du die Datei dieses Link-Teils auf und definierst den Link: <A HREF="Dateiname#Name des Link-Speicherorts">Linktext</A> Bei Sprüngen innerhalb einer Datei kann der Dateiname natürlich auch weggelassen werden. 2. Rahmen für mehrere Fenster HTML-Dateien, die mit der FRAMES-Struktur erstellt wurden, können das gesamte Fenster in mehrere unabhängige kleine Fenster aufteilen. Jedes kleine Fenster kann verschiedene Dateien separat laden und miteinander kommunizieren. 1. Grundstruktur: <HTML> <KOPF> <TITEL></TITEL> </KOPF> <FRAMESET> <FRAME SRC="url"> <FRAME SRC="url"> ... </FRAMESET> </HTML> 2. Größeneinstellung jedes Fensters Wir teilen das Fenster in mehrere Teile auf, indem wir das ROWS-Attribut horizontal und das COLS-Attribut vertikal verwenden. Die Größe jedes Teils kann durch die Werte dieser beiden Attribute realisiert werden. <Frameset-Spalten=#> <Frameset-Zeilen=#> Der Wert von # ist ein Paar von Zeichenfolgen, die in Anführungszeichen eingeschlossen sind. Die Zahlen in der Zeichenfolge stellen die Größe jedes Fensters dar, getrennt durch Kommas. Die Zahlen können auch durch "*" ersetzt werden, was bedeutet, dass der Browser die Größe automatisch zuweist. wie <frameset cols="100,200,300"> <frameset rows="10%,20%,70%"> <frameset cols="100,*,*"> Verteilt die Fenster gleichmäßig außerhalb von 100 Pixeln 3. Interoperabilität zwischen Fenstern ①Das src-Attribut des Frames wird verwendet, um den zu verknüpfenden Inhalt anzugeben, das name-Attribut gibt den Namen des Fensters an und das target-Attribut wird verwendet, um anzugeben, in welchem Fenster die verknüpfte Datei angezeigt wird. Sein Wert kann der durch den Namen definierte Name oder einer der folgenden vier Werte sein: <a href=url target=_blank> zeigt ein neues Fenster an <a href=url target=_self> Anzeige im selben Fenster <a href=url target=_parent> Zeigt das Fenster des vorherigen Dokuments im Frameset an <a href=url target=_top> Wird im gesamten Browserfenster angezeigt②Weitere Attribute des Frames <frame frameborder=#> #=ja,nein frameborder gibt die Einstellungen jedes Fensterrahmens an: yes bedeutet, dass ein Rahmen vorhanden ist, no bedeutet, dass kein Rahmen vorhanden ist <Rahmenrandbreite=# Randhöhe=#> Der Wert von # wird in Pixeln angegeben. Dieses Attribut wird verwendet, um die Breite der oberen, unteren, linken und rechten Ränder des Fensters festzulegen. Wenn es nicht festgelegt ist, wird es automatisch vom Browser bestimmt. <Frame-Scrolling=#>#=ja,nein,auto Bildlaufleisteneinstellungen, ja bedeutet ja, nein bedeutet nein, auto bedeutet, dass es automatisch vom Browser festgelegt wird, der Standardwert ist auto. <Rahmen noresize="noresize"> Das Attribut „noresize“ gibt an, dass die Größe des Rahmens vom Benutzer nicht geändert werden kann. Standardmäßig können Sie die Größe eines Rahmens ändern, indem Sie die „Wände“ zwischen den Rahmen ziehen, diese Eigenschaft sperrt jedoch die Größe des Rahmens. 3. Stilvorlage 1. Die wichtigste Funktion eines Stylesheets besteht darin, eine Möglichkeit zu bieten, den Stil aller Webseiten konsistent zu halten. Die drei Ebenen der Stilvorlagen sind in der Reihenfolge von niedrig nach hoch wie folgt: ①. Inline-Stylesheet: Anwendbar auf den Inhalt eines einzelnen Elements ②. Stylesheet auf Dokumentebene: Anwendbar auf den Textkörper des gesamten Dokuments ③. Externes Stylesheet: Kann auf den Textkörper mehrerer Dokumente angewendet werden. Bei der Verwendung hat im Falle eines Konflikts das Stylesheet auf niedrigerer Ebene Vorrang. 2. Was Sie bei der Verwendung von CSS beachten sollten: ①Einige Browser unterstützen möglicherweise bestimmte Attributwerte nicht. In diesem Fall ignoriert der Browser diese Attributwerte entweder oder ersetzt sie durch einen optionalen Wert. ② Integrierte Stile sind nur auf ein einzelnes Element anwendbar, was eigentlich der ursprünglichen Designabsicht des Stylesheets widerspricht. Sie sollten daher mit Vorsicht verwendet werden. ③Die Stilbeschreibung auf Dokumentebene wird in der Kopfzeile des Dokuments angezeigt und gilt für den gesamten Textkörper des Dokuments. Auf diese Weise können wir einen einheitlichen Gesamtstil beim Erstellen einer Website gewährleisten. ④ Externe Stylesheets sind nicht Teil des Dokuments, das sie verwendet. Externe Stylesheets müssen separat gespeichert und bei ihrer Verwendung beschrieben werden. Externe Stylesheets können als Textdateien mit dem MIME-Typ text/css geschrieben werden. Sie können auf jedem Computer im Internet gespeichert werden und der Browser kann externe Stylesheets genauso abrufen wie Dokumente. Das <link>-Element oben auf einer Webseite kann auch verwendet werden, um ein externes Stylesheet anzugeben. In <link> wird das rel-Attribut verwendet, um die Beziehung zwischen dem verknüpften Dokument und dem Dokument anzugeben, das den Link enthält, während das href-Attribut verwendet wird, um die URL-Adresse des Stylesheet-Dokuments anzugeben. wie <link rel=stylesheet type="text/css" href="themes/AutoTheme/style.css"></link> 4. span und div In manchen Fällen erfordert <span>, dass bestimmte spezielle Schrifteigenschaften nur auf einen Teil des Textes im gesamten Absatz angewendet werden, z. B. dass für ein Wort oder eine Phrase eine andere Schriftart oder ein anderer Hintergrund verwendet wird usw. Hier können Sie beispielsweise das Element <span> verwenden: <p>Das <span style="font-size:24pt;font-family:黑体;color:red">Programmieren</span> macht mir wirklich Spaß, es ist eine sehr unterhaltsame Sache. </p> Die Verwendung von <div> ist in Webseiten sehr üblich. Abschnitte bestehen aus mehreren Absätzen. Wenn Sie den Stil nicht nur für jeden Absatz, sondern auch für die Abschnitte in der Webseite während des Entwurfs festlegen möchten. Derzeit können Sie <div> verwenden. Sein Hauptzweck besteht darin, die Anzeigedetails für das Erscheinungsbild eines Abschnitts oder Bereichs auf einer Webseite anzugeben. |
<<: Detaillierter Prozess der Installation verschiedener Software in Docker unter Windows
>>: MySQL8.0.18-Konfiguration mehrerer Master und eines Slaves
Artikel empfehlen
Beispielcode zur Implementierung eines Musikplayers mit nativem JS
Dieser Artikel stellt hauptsächlich den Beispielc...
Nginx konfiguriert denselben Domänennamen, um sowohl den http- als auch den https-Zugriff zu unterstützen
Nginx ist mit demselben Domänennamen konfiguriert...
Detailliertes Tutorial zur Überwachung von Nginx/Tomcat/MySQL mit Zabbix
Inhaltsverzeichnis Zabbix überwacht Nginx Zabbix ...
Erläuterung zum Lastenausgleich und Reverseproxy von Nginx
Inhaltsverzeichnis Lastenausgleich Klassifizierun...
Vorschläge zur Optimierung der Webseiten-Kopfzeile
Logo-Optimierung: 1. Das Logobild sollte so klein...
Detaillierter Prozess zum Kompilieren und Installieren von Storm auf dem Kylin V10-Server
1 Einleitung Apache Storm ist ein kostenloses, Op...
Detailliertes Installationstutorial für Windows 10 + MySQL 8.0.11 Zip
Vorbereiten: Downloadadresse für das MySQL 8.0 Wi...
Eine neue CSS-Bildersatztechnik (Hintergrundanzeige und Textverschiebung vom Bildschirm), um 9999 Pixeln Lebewohl zu sagen
Die -9999-Pixel-Bildersetzungstechnologie ist seit...
Das neueste grafische Tutorial zur Installation und Konfiguration von MySQL 5.7.23
Die detaillierte Installation und Konfiguration d...
MySQL-Onlineprobleme mit langsamem Log und Optimierungslösungen
Das MySQL-Slow-Log ist ein Informationstyp, auf d...
Einige Indikatoren für exzellentes Web-Frontend-Design
Die Barrierefreiheit von Webseiten scheint etwas z...
Detaillierte Erläuterung der Vue-Projektoptimierung und -verpackung
Inhaltsverzeichnis Vorwort 1. Lazy Loading-Routin...
Beispiel für die Integration von Kafka mit Nginx
Hintergrund nginx-kafka-module ist ein Plug-In fü...
Zusammenfassung einiger verwandter Vorgänge geplanter Linux-Aufgaben
Ich habe verschiedene große Websites durchsucht u...
So implementieren Sie ein Hover-Dropdown-Menü mit CSS
Wie üblich werde ich heute über einen sehr prakti...