HTML 30-Minuten-Anfängertutorial

Ziel dieses Artikels

In 30 Minuten werden Sie verstehen, was HTML ist, und ein grundlegendes Verständnis davon gewinnen. Sobald Sie angefangen haben, können Sie online ausführlichere Ressourcen finden, um weiterzulernen.

Was ist HTML

HTML ist die Abkürzung für den englischen Ausdruck Hyper Text Mark-up Language (Hypertext-Auszeichnungssprache). Sie definiert eigene Syntaxregeln, um Bedeutungen auszudrücken, die reichhaltiger als "Text" sind, wie Bilder, Tabellen, Links usw. Browsersoftware (IE, FireFox usw.) versteht die Syntax der HTML-Sprache und kann zum Anzeigen von HTML-Dokumenten verwendet werden. Derzeit wird die überwiegende Mehrheit der Webseiten im Internet mit HTML geschrieben.

Wie sieht HTML aus

Einfach gesagt besteht die Syntax von HTML darin, dem Text bedeutungsanzeigendeTags(Tag) hinzuzufügen, damit Benutzer (Personen oder Programme) den Text besser verstehen.

Das Folgende ist das einfachste HTML-Dokument:

<html>
   <head>
     <title>第一个Html文档</title>
   </head>
   <body>
     欢迎访问<a href="../index.html">Example</a>！
   </body>
</html>

Alle HTML-Dokumente sollten einen <html>-Tag haben. Der <html>-Tag kann zwei Teile enthalten: <head> und <body>.

Der <head>-Tag wird verwendet, um allgemeine Informationen über das gesamte Dokument aufzunehmen, wie den Titel des Dokuments (der <title>-Tag wird verwendet, um den Titel aufzunehmen), eine Beschreibung des gesamten Dokuments, die Schlüsselwörter des Dokuments und so weiter. Der konkrete Inhalt des Dokuments sollte im <body>-Tag platziert werden.

Das <a>-Tag wird verwendet, um einen Link darzustellen. Wenn ein HTML-Dokument in einem Browser (wie IE, Firefox usw.) angezeigt wird, führt ein Klick auf den vom <a>-Tag eingeschlossenen Inhalt normalerweise zu einer anderen Seite. Die Adresse der Seite, zu der gesprungen werden soll, wird durch das href-Attribut des <a>-Tags angegeben. Im obigen <a href="../www.example.com/index.html"> ist der Wert des href-Attributs http://www.example.com/.

Was ein HTML-Dokument enthalten kann

Durch verschiedene Tags kann ein HTML-Dokument unterschiedliche Inhalte enthalten, wie Text, Links, Bilder, Listen, Tabellen, Formulare, Frames und so weiter.

Text: HTML bietet die reichhaltigste Unterstützung für Text. Sie können Überschriften verschiedener Ebenen, Absätze und Zeilenumbrüche festlegen, die Semantik und das Erscheinungsbild von Text angeben, kennzeichnen, dass Text von anderswo zitiert wird, und so weiter.
Links: Links werden verwendet, um anzuzeigen, dass ein Inhalt mit einer anderen Seite oder einer bestimmten Stelle auf der aktuellen Seite zusammenhängt.
Images: Bilder werden verwendet, um die Seite attraktiver zu machen oder mehr Informationen bereitzustellen.
Listen: Listen werden verwendet, um anzuzeigen, dass eine Reihe von Elementen miteinander zusammenhängt.
Tabellen: Eine Tabelle ist eine Form der Organisation von Daten in Zeilen und Spalten. Viele Leute verwenden Tabellen auch für das Seitenlayout.
Formulare: Formulare bestehen normalerweise aus Texteingabefeldern, Schaltflächen, Kontrollkästchen, Optionsfeldern, Dropdown-Listen usw., wodurch HTML-Seiten interaktiver werden.
Frames: Frames ermöglichen es einer Seite, andere Seiten zu enthalten.

Detaillierte Erklärung des HTML-Dokumentformats

Das Grundformat von HTML-Dokumenten wurde bereits vorgestellt; unten folgt eine detaillierte Erklärung.

HTML-Dokumente können mit jedem beliebigen Texteditor (wie Notepad, UltraEdit usw.) erstellt und bearbeitet werden, da ihr Inhalt im Wesentlichen nur Text ist.

Im HTML-Text werden die in spitze Klammern eingeschlossenen Teile Tags genannt. Wenn Sie spitze Klammern (oder Größer-als- und Kleiner-als-Zeichen, kurz dasselbe) im Fließtext verwenden möchten, müssen SieZeichen-Escapingverwenden, das heißt, die ursprüngliche Bedeutung von Zeichen umzuwandeln. < sollte<stattdessen verwenden, und > sollte>verwenden, und was das &-Zeichen selbst betrifft, sollte es&stattdessen verwenden. (Es muss gesagt werden, dass viele HTML-Dokumente diese Regel nicht befolgen, und gängige Browser können immer erkennen, ob & der Anfang eines Escapes oder ein Symbol ist, aber das ist nicht empfehlenswert.)

Tags sind im Wesentlichen Beschreibungen des Inhalts, den sie enthalten, und können Attribute haben, um weitere Informationen bereitzustellen. Zum Beispiel hat das <img>-Tag (Bild) ein src-Attribut (dient zur Angabe der Adresse des Bildes) sowie width- und height-Attribute (dienen zur Angabe der Breite und Höhe des Bildes). Welche Tags in HTML verwendet werden können und welche Attribute jedes Tag haben kann, ist alles festgelegt. Sobald Sie die hier beschriebenen Grundlagen kennen, ist das Erlernen von HTML tatsächlich nur das Erlernen dieser Tags. Später in diesem Artikel wird eine kurze Einführung in gängige HTML-Tags gegeben.

Tags haben normalerweise einen Startteil und einen Endteil (auch Start-Tag und End-Tag genannt), die zusammen den vom Tag enthaltenen Inhalt definieren. Attribute können nur im Start-Tag angegeben werden, und Attributwerte können in einfache oder doppelte Anführungszeichen gesetzt werden. End-Tags werden alle durch / plus den Tag-Namen dargestellt. Manchmal enthalten einige Tags keinen anderen Inhalt (sie haben nur ihre eigenen Attribute oder sogar überhaupt keine Attribute). In diesem Fall kann es so geschrieben werden: <img src="logo.gif.html" />. Beachten Sie das abschließende Leerzeichen und den Backslash; es zeigt an, dass dieses Tag beendet ist und kein separates End-Tag benötigt wird.

Einige Tags können neue Tags innerhalb ihres Inhalts enthalten, und der Name des neuen Tags kann sogar mit dem Namen des Tags übereinstimmen, das ihn enthält (welche Tags Tags enthalten können und welche Tags sie enthalten können, ist ebenfalls festgelegt). Zum Beispiel:

<div>
  <div>分类目录...</div>
  <div>当前分类内容列表...</div>
</div>

In diesem Fall sollte das zuletzt erscheinende Tag zuerst enden.

Alle Whitespace-Zeichen in HTML-Dokumenten (Leerzeichen, Tabs, Zeilenumbrüche, Wagenrückläufe) werden vom Browser ignoriert. Die einzige Ausnahme ist das Leerzeichen; die Behandlung von Leerzeichen besteht darin, dass alle aufeinanderfolgenden Leerzeichen als ein Leerzeichen behandelt werden, egal ob es eines, zwei oder 100 sind. Der Grund für diese Regel ist, dass das Ignorieren von Whitespace es HTML-Autoren ermöglicht, Inhalte in dem für sie bequemsten Format anzuordnen, zum Beispiel nach jedem beginnenden Tag eine Einrückung hinzuzufügen und nach einem endenden Tag die Einrückung zu verringern. Da Leerzeichen im englischen Text häufig verwendet werden (um Wörter zu trennen), wird diese besondere Behandlung auf Leerzeichen angewendet. Wenn Sie aufeinanderfolgende Leerzeichen anzeigen möchten (z. B. für Einrückung), sollten Sie , um Leerzeichen darzustellen.

Einführung in gängige Tags

Text

Das am häufigsten verwendete Tag ist möglicherweise <font>, das verwendet wird, um Schriftart, Schriftgröße und Textfarbe zu ändern.

<font size="6">6</font>
<font size="4">4</font>
<font color="red" size="5">红色的5</font>
<font face="黑体">黑体的字</font>

Fetter, unterstrichener und kursiver Text sind ebenfalls übliche Texteffekte, die jeweils durch <b>, <u> und <i> dargestellt werden:

<b>Bold</b>
<i>italic</i>
<u>underline</u>

Es gibt auch einige Tags, die anzeigen, dass der enthaltene Text eine besondere Bedeutung hat, wie <abbr> (Abkürzung), <em> (Hervorhebung), <strong> (stärkere Hervorhebung), <cite> (Zitat), <address> (Adresse) und so weiter. Diese Tags existieren nicht, um Darstellungseffekte zu definieren, daher haben sie in Browsern möglicherweise keine sichtbare Wirkung, oder verschiedene Browser können diese Tags auf völlig unterschiedliche Weise darstellen.

Bei einem sehr langen Artikel können Sie, wenn geeignete Unterüberschriften vorhanden sind, schnell einen allgemeinen Überblick über seinen Inhalt gewinnen. In HTML sind die Tags, die zur Darstellung von Überschriften verwendet werden: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, die Überschrift der Ebene 1, Überschrift der Ebene 2, Überschrift der Ebene 3 und so weiter darstellen.

<h1>HTML 30分钟教程</h1>
<h2>什么是HTML</h2>
...
<h2>HTML是什么样的</h2>
...

Images

Das <hr>-Tag wird verwendet, um eine horizontale Linie zur Seite hinzuzufügen. Sie können die Länge und Farbe der horizontalen Linie steuern, indem Sie die Attribute width und color angeben.

<hr width="90%" color="red" />

Das <img>-Tag wird verwendet, um ein Bild zur Seite hinzuzufügen. Das src-Attribut gibt die Adresse des Bildes an. Wenn das durch src angegebene Bild nicht geöffnet werden kann, zeigt der Browser normalerweise den durch das alt-Attribut definierten Text an der Stelle an, an der das Bild angezeigt werden soll.

<img src="http://www.w3.org/Icons/valid-xhtml10" alt="图片简介" />

Links

Hyperlinks werden durch das <a>-Tag dargestellt, und das href-Attribut gibt die Adresse an, mit der verlinkt werden soll. Das <a>-Tag kann Text oder Bilder enthalten.

<a href="../index.html">Example</a>
<a href="http://validator.w3.org"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="验证HTML" /></a>

Absätze und Zeilenumbrüche

Da HTML-Dokumente Leerzeichen ignorieren, müssen Sie, um normale Absätze und Zeilenumbrüche sicherzustellen, angeben, welcher Text zum selben Absatz gehört; hierfür wird das <p>-Tag verwendet.

<p>这是第一段。</p>
<p>这是第二段。</p>

Manche Leute verwenden nicht <p>, sondern <br>. <br> steht nur für einen Zeilenumbruch, nicht für den Anfang oder das Ende eines Absatzes, daher hat es normalerweise kein End-Tag.

这是第一段。<br>
这是第二段。<br />
这是第三段。

Manchmal muss ein Dokument als Kombination verschiedener Teile betrachtet werden. Zum Beispiel kann eine typische Seite drei Teile enthalten: Kopfbereich, Hauptteil und Fußbereich. Das <div>-Tag wird speziell verwendet, um verschiedene Abschnitte zu markieren:

<div>页头内容</div>
<div>主体内容</div>
<div>页脚内容</div>

Tabellen

HTML-Dokumente werden in einem Browser normalerweise von links nach rechts und von oben nach unten angezeigt und umgebrochen, wenn sie den rechten Rand des Fensters erreichen. Um einen Mehrspalteneffekt zu erzielen, verwenden viele Leute Tabellen (<table>) für das Seitenlayout (obwohl der ursprüngliche Zweck von Tabellen in HTML nicht das Layout war).

Das <table>-Tag enthält normalerweise mehrere <tr>-Tags, wobei <tr> eine Zeile in der Tabelle darstellt. <tr>-Tags enthalten wiederum <td>-Tags, wobei jedes <td> eine Zelle darstellt.

<table>
  <tr>
    <td>2000</td><td>悉尼</td>
  </tr>
  <tr>
    <td>2004</td><td>雅典</td>
  </tr>
  <tr>
    <td>2008</td><td>北京</td>
  </tr>
</table>

<tr>-Tags können innerhalb von <table> auch von <thead>, <tbody> oder <tfoot> enthalten sein. Sie stellen jeweils den Tabellenkopf, den Tabellenkörper und den Tabellenfuß dar. Beim Drucken einer Webseite, wenn die Tabelle zu groß ist, um auf eine Seite zu passen, erscheinen <thead> und <tfoot> auf jeder Seite.

<th> ist sehr ähnlich zu <td> und wird ebenfalls innerhalb von <tr> verwendet; der Unterschied besteht darin, dass <th> angibt, dass diese Zelle die Überschrift ihrer Zeile oder Spalte ist.

<table>
  <thead>
    <tr><th>时间</th><th>地点</th></tr>
  </thead>
  <tbody>
    <tr><td>2000</td><td>悉尼</td></tr>
    <tr><td>2004</td><td>雅典</td></tr>
    <tr><td>2000</td><td>北京</td></tr>
  </tbody>
</table>

Listen

Tabellen werden verwendet, um zweidimensionale Daten (Zeilen, Spalten) darzustellen, während eindimensionale Daten durch Listen dargestellt werden. Listen lassen sich in ungeordnete Listen (<ul>), geordnete Listen (<ol>) und Definitionslisten (<dl>) unterteilen. Die ersten beiden Listenarten sind gebräuchlicher, und beide verwenden das <li>-Tag, um Listenelemente zu enthalten.

Eine ungeordnete Liste stellt eine Reihe ähnlicher Elemente dar, zwischen denen keine bestimmte Reihenfolge besteht.

<ul>
  <li>苹果</li>
  <li>桔子</li>
  <li>桃</li>
</ul>

Bei einer geordneten Liste ist die Reihenfolge der Elemente wichtig; Browser generieren dafür normalerweise automatisch Nummern.

<ol>
  <li>打开冰箱门</li>
  <li>把大象赶进去</li>
  <li>关上冰箱门</li>
</ol>

Frames

Zum Schluss sprechen wir über Frames, eine Technologie, die einst sehr beliebt war. Frames ermöglichen es, in einem einzigen Fenster mehrere Dokumente gleichzeitig anzuzeigen. Die Haupt-Frameset-Seite hat kein <body>-Tag; stattdessen verwendet sie <frameset>.

Die Attribute Rows und Cols des <frameset>-Tags werden verwendet, um anzugeben, wie viele Zeilen (Spalten) das Frameset hat, sowie die Höhe (Breite) jeder Zeile (Spalte).

Das <frameset>-Tag kann <frame>-Tags enthalten. Jedes <frame>-Tag repräsentiert ein Dokument (das src-Attribut gibt die Adresse des Dokuments an).

Wenn du findest, dass eine solche Seite nicht komplex genug ist, kannst du auch <frameset>-Tags innerhalb von <frameset>-Tags einfügen.

<frameset rows="15%,*">
     <frame src="top.html" name=title scrolling=no>
     <frameset cols="20%,*">
          <frame src="left.html" name=sidebar>
          <frame src="right.html" name=recipes>
     </frameset>
</frameset>

Was nach 30 Minuten zu tun ist

Dieser Artikel soll Personen, die noch nie mit HTML in Berührung gekommen sind, einen ersten Eindruck von HTML vermitteln, daher werden viele Dinge nicht behandelt. Dieser Artikel listet nicht alle HTML-Tags auf und führt auch nicht alle Attribute der Tags ein, die er auflistet. Darüber hinaus werden Dinge nicht erwähnt, die ich für sehr wichtig halte: CSS, JavaScript, XHTML, XML, Webstandards und ihre Beziehungen zu HTML. Diese lassen sich jedoch kaum in 30 Minuten erlernen. Glücklicherweise kann man nach dem Einstieg auf viele Online-Ressourcen zurückgreifen, um weiterzulernen. Wenn man natürlich ein gedrucktes Buch hat, ist das noch besser; in dieser Hinsicht empfehle ich „HTML & XHTML: The Definitive Guide“. Nachfolgend finden Sie einige Online-Ressourcen, die ich für gut halte:

Quelle: http://deerchao.net/tutorials/html/html.htm