Zum Beispiel die Benutzer, die die Bildschirmsoftware lesen müssen. Wie können wir als Front-End es ertragen? Ich wollte schon immer einen solchen Artikel schreiben und mitgeteilt, wie man eine Seite mit besserer Zugänglichkeit erstellt. Der heutige Plan beinhaltet eine Kombination aus HTML TA AG- und WCAG -Standards. Ich empfehle Ihnen, Ihre HTML so zu schreiben, dass das Leben einiger Menschen einfacher sein kann.
Was ich heute teilen möchte, ist, wie Sie unser HTML -Tag verwenden, um die WCAG -Standards und semantischen Netzwerkziele widerzuspiegeln:
Tatsächlich hat dies nichts mit WCAG zu tun, aber für eine Seite mit besserer Kompatibilität, insbesondere mit Rückwärtskompatibilität, empfehle ich Ihnen, sie so zu schreiben:
<! DocType html>
Die Internetverbindung kann fast mithilfe von <a> als das häufigste Tag auf einer Seite implementiert werden. Wie sollen wir es behandeln?
<a href = title = accessKey = m rel =hideFocus> Link </a>
Es ist auch sehr wichtig, HTML -Tags korrekt zu verwenden, was dem Verständnis der Seitenstruktur der Software -Benutzer von Bildschirmlesen förderlich ist. Insbesondere bei der Verwendung von Beschriftungen wie H1, H2, H3 usw. kann Missbrauch leicht zu struktureller Verwirrung führen. Natürlich ist es auch, allgemeine Tags und dann CSS zu verwenden, um einen visuellen Kontrast zu erstellen, das gewöhnliche Personen erkennen können. Aber was ist mit dem Bildschirm Lesesoftware -Benutzer? Natürlich müssen wir hier nur auf die Verwendung von Seiten -Tags achten, und das Wichtigste an ABBR sollte sein, ein Titelattribut hinzuzufügen, um die Abkürzung zu beschreiben. Zum Beispiel:
<ABBR title = Web Developer> WD </abbr>
Wenn es große Absätze von Zitaten gibt, verwenden Sie <blockquote>, während Inline -Zitate <Cite> verwenden, um Ihre Struktur leichter zu lesen:
<blockquote> Ich wollte schon immer einen solchen Artikel schreiben und teilen, wie eine Seite mit besserer Zugänglichkeit erstellt wird. Der heutige Plan beinhaltet eine Kombination aus HTML TA AG- und WCAG -Standards. Ich empfehle Ihnen, Ihre HTML so zu schreiben, dass das Leben einiger Menschen einfacher sein kann. </blockquote> <p> Der beeindruckendste Satz von A ist, dass Sie, wenn Sie vorne sind, Liebe haben müssen. Verwenden Sie zu keinem Zeitpunkt brüllende Körper für alle möglichen Menschen </cite>. </p>
Etwas auf Papier zu schreiben kann nicht wie etwas auf einem Computer geschrieben werden. Sie können die Rückgängigentaste verwenden, um sie zu drücken, aber was sollen wir tun, wenn wir betonen, dass etwas gelöscht wird? Das ist die Verwendung des <Del> -Tags. Zum Beispiel:
<Del> Wenn Sie sich auf HTML konzentrieren, verwenden Sie bitte den & lt; b & gt; Tag </del> Wenn Sie sich auf HTML konzentrieren, verwenden Sie bitte die & lt; Strong & gt; Etikett
Der Effekt ist so:
Wenn Sie auf HTML betonen, verwenden Sie bitte das <b> TagWenn Sie auf HTML betont werden, verwenden Sie bitte das <strong> Tag
Als ich letztes Jahr Neuankömmlinge zum Alipay Front-End-Blog mitnahm, beeindruckte mich am meisten, dass ich <dl> gern mochte. Zu dieser Zeit dachte ich, dass diese Studenten ziemlich gut waren und ein gutes Verständnis der Semantik hatten. Wir verwenden immer noch selten Definitionslisten. Verwenden Sie stattdessen die beiden der allgemeinen <ul> <ol>. <dl> sollte auch mit Vorsicht verwendet werden. Es ist am besten, nur bestimmte endgültige Einträge wie das Beispiel der W3school, die Definition von Kaffee und Milch zu verwenden:
<dl> <dt> Kaffee </dt> <dd>- Schwarzes heißes Getränk </dd> <dt> Milch </dt> <dd>- weißes kaltes Getränk </dd> </dl>
Liste, das ist jedem Front-End sehr vertraut. Da die Struktur sehr flexibel angewendet werden kann, wird sie häufig in Navigation, Liste, Registerkarte usw. verwendet. Aber es gibt eine Sache, die verstanden werden muss. Glauben Sie nicht, dass <ul>/<ol> ein Ersatz für <tabelle> ist. In unseren häufig verwendeten HTML -Tags hat jedes Tag seine eigene Funktion, und niemand ist ein Ersatz für irgendjemanden.
<ol> <li> Kaffee </li> <li> Tee </li> <li> Milch </li> </ol>
Wenn es sich um eine Tabelle handelt, verwenden Sie stattdessen keine Absätze, geschweige denn Listen. Es sei denn, es ist absolut notwendig und sie sind umwandelbar. Darüber hinaus gibt es in der Tabelle einige Punkte zu beachten:
<Table Summary = Sofishs Blog -Status> <Thead> <Tr> <Th> Datum </th> <th> ip </th> <Th> PV </th> </tr> </thead> <tbody> <tr> <Td> 2011.3.11 </td> <td> 3000 </td> <Td> </td> </ttrd> </tbbody> </tdly> </tdly> </tbody
<Code> bezieht sich auf Computercode -Text, während <pre> auf vorformatierten Text bezieht. <pre> ist ein breiterer Bereich und ein blockiges Element, mit dem verschiedene Text, insbesondere Code, formatiert werden können. Es ist nicht erforderlich, bei der Verwendung besonderer Aufmerksamkeit zu schenken, hauptsächlich semantisch korrekte Verwendung, z.
<code> text-align: center </code> <pre> {(1 * 102) + (9 * 101) + (3 * 100)} </pre>Auf modernen Webseiten ist es sehr selten, <br> zu verwenden. Der leere Speicherplatz auf Webseiten wird im Allgemeinen mit CSS -Polsterung und Marge implementiert. Dies ist genauer und leichter zu kontrollieren. Die empfohlene Verwendung besteht nun darin, den allgemeinen Absatz <p> zu verwenden, um einfache Zeilenumbrüche zu machen, anstatt den Weißraum der Seite zu kontrollieren.
<p> Ich bin ein Absatz. <BR /> Politik ist immer Linienbrüche. </p>
<hr> hat einen sehr guten semantischen Effekt. Aber seine visuellen Effekte sind schwer zu kontrollieren. Ich habe solche Artikel bereits über Themen in verschiedenen Browsern geschrieben. Im Allgemeinen wird es selten verwendet. Wenn Sie eine separate Seite speziell für die Software -Benutzer von Bildschirm lesen, kann dies von großem Nutzen sein.
<h3> Titel 1 </h3> <p> lorem ipsum ist ... </p> <hr/> <h3> Titel 2 </h3> <p> Dies ist der Eintrag von ... </p>
Tatsächlich haben die beiden Tags <div>/<span> Semantik und definieren einen Abschnitt in einem Dokument. Ja, es ist tatsächlich dasselbe wie <abschnitt> in HTML5. Es ist nur so, dass Suchmaschinen aufgrund von Suchmaschinen semantische Labels sind, sodass sie semantische Etiketten werden. Die empfohlene Verwendung besteht darin, zu versuchen, andere Container als Seitenrahmen wie Layout, zusätzliche visuelle Effekte hinzuzufügen, anstatt Absätze zu ersetzen, usw.
<div id = container> <div id = content> </div> <div id = SideBar> <ul> <li> <span> Gott </span>, oh mein zsh </span> </li> </ul> </div> </div>
Diese Tags können fast die wichtigsten Tags in der Hierarchie eines Seiten -Tags sind. Wir können die Struktur eines Buches verwenden, um diese Tags zu veranschaulichen, und wenn wir eine Seite erstellen, sollten wir auch einen solchen Gedanken im Kopf haben:
Ja, natürlich gibt es auch Zitate <blockquote>, Codes in technischen Büchern <pre class = code>, Punkte, die Aufmerksamkeit <ul> benötigen, Tabellen zum einfachen Vergleich usw.
<h1> Logo </h1> <h2> Titel </h2> <div class = Eintrag> <h3> Zusammenfassung: </h3> <p> lorem ipsum ist ... <em> betont </em> </p> </div>
<em> betonen Abkürzung. Und <strong> betont stark. Viele Schüler, die gerade erst anfangen, können die Etiketten von <em>, <strong>, <cite>, <i>, <b> und <b> genau verwenden. <i> und <b> sind im Grunde genommen aufgegeben, entsprechen den aktuellen und <strong>. Im Allgemeinen ist ihre Reihenfolge der Bedeutung des Inhalts wie folgt: stark> em ≈ zitieren.
<strong> Hinweis: </strong> Verwenden Sie keine alten Tags wie <Cite> Schrift, Zentrum </cite> usw., insbesondere <em> Schriftart </em>.
Formelemente sind relativ komplexe Tags in HTML, und es gibt viele Punkte, auf die man sich beachten muss:
<form methode = post action = http: //sofish.de> <fieldset> <legend> Mein Formular </legend> <Label für = FirstName>* Vorname: </label> <Eingabe type = Text id = firstname/> <Label für = Sprache> Sag etwas: </label> <TextArea id = formname> </text -text -type> </texts text = text text
Für Bilder können blinde Menschen sie nicht sehen. Stellen Sie Alt zur Darstellung alternativer Text bereit. Sagen Sie ihnen, was für ein Bild das ist.
<img src = http: //sofish.de/favicon.ico Alt = glückliche Favoriten Favicon/>
Versuchen Sie, die Verwendung von <Iframe> Frameworks zu vermeiden, aber wenn Sie sie verwenden müssen, ist es am besten, ein Titelattribut zur Beschreibung bereitzustellen.
<iframe src = http: //sofish.de title = glückliche Favoriten/</iframe>
Medien sind auch ein relativ komplexes Format, das problematischer zu verarbeiten ist. Normalerweise können wir das tun:
<Audio Src = Mozart.MP4> Mozart 39 Symphonie </audio>
Die Seite muss den Titel enthalten, und jedes Tag sollte erkennbar sein. Dies spiegelt sich beispielsweise in Alipay wider:
<title> Kontakt mit mir-Happiness Favoriten </title>
In Ordnung. Das ist alles vorerst. WCAG ist nicht nur die Verwendung dieser einfachen HTML -Tags, und semantische Webseiten können nicht in ein oder zwei Artikeln geschrieben werden. Nehmen Sie sich Zeit. Beginnen Sie mit den häufigsten Dingen und entwickeln Sie gute Gewohnheiten. Wenn Sie zu Beginn des Artikels zum Satz zurückkehren, haben Sie das Herz, die Seite so schwer zu verwenden?