suchen
HeimWeb-FrontendHTML-TutorialGründe für die Verwendung des i-Tags als kleines Symbol

  1. Die Verwendung des -Elements ist semantisch falsch (obwohl es wie die Abkürzung von icon aussieht); Es ist kürzer als , aber der Unterschied nach gzip ist sehr gering, aber Sie können beim Tippen drei Tasten weniger drücken

  2. Die meisten Symbole verwenden das

    leer ;-Elemente
  3. ,
  4. werden mit dem ::before-Pseudoelement

    implementiert. Da kein Inhalt vorhanden ist, wird der Bildschirmleser ihn nicht lesen (also wird er übersprungen, selbst wenn eine spezielle Verarbeitung erfolgt). , und es sollte keine Auswirkungen auf das Maschinenverständnis geben. Alles in allem sehe ich keine Mängel in Bezug auf die Praktikabilität. Ob Sie also verwenden, hängt davon ab, wie sauber Sie mit der Einhaltung der Vorschriften umgehen.

Grundlegende Syntax


:before- und :after-Pseudoelemente sind sehr einfach zu codieren (wie die meisten CSS-Eigenschaften benötigen Sie nicht viele Präfixe). Hier ist ein einfaches Beispiel.

Zwei Dinge werden in diesem Beispiel erwähnt. Erstens verwenden wir #example:before und #example:after, um auf dasselbe Element abzuzielen.

Zweitens ist, wie im Inhaltsmodul erwähnt, das Pseudoelement
#example:before {  content: "#";}#example:after {  content: ".";}	
nutzlos, wenn das Attribut „content“ nicht gesetzt ist

.

In diesem Beispiel wird das Element mit dem id-Attribut mit einem „Hash-Symbol“ vor dem Inhalt und einem „Punkt“ nach dem Inhalt versehen. Syntaxhinweise

Sie können den

Inhaltsattributwert auf leer setzen

und ihn einfach als Box mit wenig Inhalt behandeln. So:

Sie können das Inhaltsattribut jedoch nicht vollständig entfernen

. Andernfalls funktioniert das
#example:before {  content: "";
  display: block;  width: 100px;  height: 100px;}	
Pseudoelement nicht

. Die Content-Eigenschaft erfordert mindestens einen Nullverweis als Wert (d. h. :content:""). Vielleicht fällt Ihnen auf, dass Sie Pseudoelemente auch mit zwei Doppelpunkten (::before und ::after) schreiben können, was ich bereits besprochen habe. Die kurze Erklärung ist, dass es keinen Unterschied zwischen den beiden Syntaxen gibt. Der einzige Unterschied besteht darin, dass das Pseudoelement (doppelter Doppelpunkt) und die Pseudoklasse in CSS3 (einzelner Doppelpunkt) sind. Schließlich in Bezug auf Syntax. Technisch gesehen können Sie Pseudoelemente allgemein und nicht auf bestimmte Elemente anwenden, wie folgt:

Obwohl das oben Gesagte funktioniert, ist es ziemlich nutzlos. Der Code fügt vor dem Inhalt jedes Elements im DOM ein Hash-Symbol ein. Auch wenn Sie das -Tag und seinen gesamten Inhalt löschen, werden auf der Seite immer noch zwei Hash-Symbole angezeigt: eines im -Tag, und der Browser erkennt automatisch, welches zu erstellen.

Eigenschaften des eingefügten Inhalts
:before {  content: "#";}	

Wie bereits erwähnt,

Der eingefügte Inhalt ist im Quellcode der Seite nicht sichtbar und kann nur in CSS angezeigt werden.

Außerdem sind eingefügte Elemente standardmäßig Inline-Elemente (oder in HTML5 in der Kategorie Textsemantik). Um einem eingefügten Element Höhe, Abstand, Ränder usw. zu geben, müssen Sie es daher normalerweise explizit als Element auf Blockebene definieren.

Dies wird eine kurze Erklärung sein, wie man Pseudoelemente entwirft. Sehen Sie sich dieses Bild meines Editors unter dem Text an

In diesem Beispiel wird mein hervorgehobener Stil auf das Element angewendet, das vor und nach dem Inhalt des Zielelements eingefügt wird.

pseudo elementBeachten Sie außerdem, dass die typischen

CSS-Vererbungsregeln

für eingefügte Elemente gelten. Wenn Sie beispielsweise die Schriftfamilien Helvetica, Arial und Sans Serif auf das Body-Element angewendet haben, erbt das Pseudoelement diese Schriftfamilien wie jedes andere Element.

In ähnlicher Weise erben Pseudoelemente keine Stile, die nicht auf natürliche Weise vom übergeordneten Element geerbt werden (z. B. Abstand und Ränder). Was kommt davor oder danach?

Ihre Intuition ist, dass die Pseudoelemente :before und :after vor oder nach dem Zielelement

eingefügt werden könnten? Dies ist jedoch, wie oben erwähnt, nicht der Fall. Der von

eingefügte Inhalt ist das untergeordnete Element des zugehörigen

Zielelements, und der Inhalt

, auf den content verweist, wird darin platziert das -Kind Das „Vorher“- oder „Nachher“-Element . Um dies zu demonstrieren, schauen Sie sich den folgenden Code an. Zuerst in HTML: Das Folgende ist das CSS zum Einfügen von Pseudoelementen:

In diesem HTML hat der Text, den Sie betrachten, ein Klassenfeld und dort Ist dieser Text „Anderer Inhalt“ darin (wie Sie sehen würden, wenn Sie den Quellcode der Homepage sehen würden). In CSS wird dieser Inhalt auf eine Breite sowie einige Abstände und sichtbare Ränder
<p class="box">Other content.</p>	
festgelegt

然后我们有了伪元素。在这个例子中,它是一个散列符号插入到该段内容之前。随后css给了它一个边框以及一些padding和margins。

这里是浏览器中查看的结果:

pseudo element

外面的盒子是这个段落。围绕有散列符号的边框表示伪元素的边界。所以,不是插入“before”到段落,而是伪元素被置于到此段落的“Other content”的前面

插入非文本内容

我简要的提醒,你可以把属性的值置为空字符串或是插入文本内容。你基本上有属性的值要包含什么的两个额外的选择

首先,你可以包含一个指向一个图像的URL,就像在css里包含一个背景图像一样做你能做的

p:before {  content: url(image.jpg);}	

注意不能使用引号。如果你将URL用引号括起来,那么它会变成一个字符串和插入文本“url(image.jpg)”作为其内容,插入的而不是图像本身。

当然,你可以包含一个Data URI代替图像引用,正如你可以用css背景一样。

你还可以选择attr(X)中的函数的形式。此功能,根据规范 ,“把X属性的值以字符串的形式返回”

下面是一个例子:

a:after {  content: attr(href);}	

attr()函数的功能是什么?它得到特定属性的值并把它作为插入的文本成为一个伪元素。

上面的代码会导致页面上的每一个元素的href值立即被放置在每个各自的元素的后面。在文档被打印时,它可以用作一个包含所有URl的打印样式表。

你也可以用这个函数去获取元素的title属性,或者甚至是microdata的值。当然,并不是所有的例子都符合自己的实际,但根据不同的情况,一个特定的属性值作为一个伪元素可以是实际的。

然而,获取title或者图像的alt的值并作为实际的伪元素显示在页面上是不可能的。记住伪元素必须是被应用元素的子元素。图像,这是void(或者是空元素),没有子元素,所以它在这个列子中不可用,同样也适用于其他空元素,例如:

可怕的浏览器兼容性

任何前端技术的发展势头,第一个问题就是浏览器的支持。在这种情况之下,它不是个很大的问题。

浏览器支持:before 和 :after 伪元素栈,像这样:

  • Chrome 2+,

  • Firefox 3.5+ (3.0 had partial support),

  • Safari 1.3+,

  • Opera 9.2+,

  • IE8+ (with some minor bugs),

  • 几乎所有的移动浏览器。

唯一真正的问题是没有获得支持的(不用奇怪)IE6和IE7。所以,如果你的爱好者是在良好合适的web开发(或者其他具有较低IE版本的市场),你可以继续自由地使用伪元素。

伪元素不是决定性的

幸运的是,缺少伪元素不会造成大问题。大多数情况下,伪元素一般修饰(或者帮助)内容,不会给不支持的浏览器造成问题。所以,如果你的支持者具有较高的IE版本,你仍然可以在某种程度上使用它们。

一些提醒

正如前面提到的,伪元素不会出现在DOM中。这些元素不是真正的元素。因此,它们不是可用的。所以,不要使用伪元素生成内容,是您的网页的可用性和可访问性的关键。

另外一件需要记住的是,开发工具,例如火狐,不要用伪元素显示内容。所以,如果使用了,伪元素会造成难以维护和调试缓慢。

(更新:在评论中提到的,你可以使用谷歌的开发工具来查看一个伪元素相关联的风格,但不会出现在DOM元素里。同时,火狐在1.8版加入伪元素支持它。)

你所需要用有的理念是用这个技术以创造出实用的东西。与此同时,将来进一步研究CSS伪元素,一定要看看我们已经链接的一些文章。

 

Das obige ist der detaillierte Inhalt vonGründe für die Verwendung des i-Tags als kleines Symbol. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
HTML: Die Struktur, CSS: Der Stil, JavaScript: Das VerhaltenHTML: Die Struktur, CSS: Der Stil, JavaScript: Das VerhaltenApr 18, 2025 am 12:09 AM

Die Rollen von HTML, CSS und JavaScript in der Webentwicklung sind: 1. HTML definiert die Webseitenstruktur, 2. CSS steuert den Webseitenstil, und 3. JavaScript fügt ein dynamisches Verhalten hinzu. Zusammen bauen sie den Rahmen, die Ästhetik und die Interaktivität moderner Websites auf.

Die Zukunft von HTML: Evolution und Trends im WebdesignDie Zukunft von HTML: Evolution und Trends im WebdesignApr 17, 2025 am 12:12 AM

Die Zukunft von HTML ist voller unendlicher Möglichkeiten. 1) Neue Funktionen und Standards umfassen mehr semantische Tags und die Beliebtheit von Webcomponenten. 2) Der Webdesign -Trend entwickelt sich weiterhin für reaktionsschnelles und zugängliches Design. 3) Die Leistungsoptimierung verbessert die Benutzererfahrung durch reaktionsschnelle Bildlade- und faulen Ladetechnologien.

HTML vs. CSS vs. JavaScript: Ein vergleichender ÜberblickHTML vs. CSS vs. JavaScript: Ein vergleichender ÜberblickApr 16, 2025 am 12:04 AM

Die Rollen von HTML, CSS und JavaScript in der Webentwicklung sind: HTML ist für die Inhaltsstruktur verantwortlich, CSS ist für den Stil verantwortlich und JavaScript ist für dynamisches Verhalten verantwortlich. 1. HTML definiert die Webseitenstruktur und den Inhalt durch Tags, um die Semantik zu gewährleisten. 2. CSS steuert den Webseitenstil über Selektoren und Attribute, um es schön und einfach zu lesen. 3. JavaScript steuert das Verhalten von Webseiten über Skripte, um dynamische und interaktive Funktionen zu erzielen.

HTML: Ist es eine Programmiersprache oder etwas anderes?HTML: Ist es eine Programmiersprache oder etwas anderes?Apr 15, 2025 am 12:13 AM

HtmlisnotaprogrammingLanguage; itiSamarkuplanguage.1) htmlstructuresandFormatswebcontentuses.2) itWorkswithCSSForstylingandjavaScriptForinteraktivität, EnhancingWebDevelopment.

HTML: Erstellen der Struktur von WebseitenHTML: Erstellen der Struktur von WebseitenApr 14, 2025 am 12:14 AM

HTML ist der Eckpfeiler der Erstellung von Webseitenstruktur. 1. HTML definiert die Inhaltsstruktur und die Semantik und Verwendung usw. Tags. 2. Stellen Sie semantische Marker wie usw. zur Verfügung, um den SEO -Effekt zu verbessern. 3. Um die Benutzerinteraktion durch Tags zu verwirklichen, achten Sie auf die Verifizierung der Form. 4. Verwenden Sie fortschrittliche Elemente wie in Kombination mit JavaScript, um dynamische Effekte zu erzielen. 5. Zu den häufigen Fehlern gehören nicht abgegebene Bezeichnungen und nicht geeignete Attributwerte, und Überprüfungstools sind erforderlich. 6. Optimierungsstrategien umfassen das Reduzieren von HTTP -Anforderungen, die Komprimierung von HTML, die Verwendung semantischer Tags usw.

Von Text zu Websites: Die Kraft von HTMLVon Text zu Websites: Die Kraft von HTMLApr 13, 2025 am 12:07 AM

HTML ist eine Sprache, mit der Webseiten erstellt, die Webseitenstruktur und -inhalt über Tags und Attribute definiert werden. 1) HTML organisiert die Dokumentstruktur über Tags, wie z. B.. 2) Der Browser analysiert HTML, um das DOM zu erstellen und die Webseite zu rendern. 3) Neue Merkmale von HTML5, wie z. B. Multimedia -Funktionen. 4) Zu den häufigen Fehlern gehören nicht abgestimmte Bezeichnungen und nicht geeignete Attributwerte. 5) Die Optimierungsvorschläge umfassen die Verwendung semantischer Tags und die Reduzierung der Dateigröße.

HTML, CSS und JavaScript verstehen: Ein AnfängerhandbuchHTML, CSS und JavaScript verstehen: Ein AnfängerhandbuchApr 12, 2025 am 12:02 AM

WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.

Die Rolle von HTML: Strukturierung von WebinhaltenDie Rolle von HTML: Strukturierung von WebinhaltenApr 11, 2025 am 12:12 AM

Die Rolle von HTML besteht darin, die Struktur und den Inhalt einer Webseite durch Tags und Attribute zu definieren. 1. HTML organisiert Inhalte über Tags wie das Lesen und Verständnis. 2. Verwenden Sie semantische Tags wie usw., um die Zugänglichkeit und SEO zu verbessern. 3. Optimierung des HTML -Codes kann die Ladegeschwindigkeit und die Benutzererfahrung der Webseite verbessern.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Crossplay haben?
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

MinGW – Minimalistisches GNU für Windows

MinGW – Minimalistisches GNU für Windows

Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software

SecLists

SecLists

SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor