Mit der zunehmenden Abhängigkeit von JavaScript-Frameworks und -Bibliotheken schenken viele Menschen HTML weniger Aufmerksamkeit. Dies führt dazu, dass wir viele Funktionen von HTML, die die Funktionalität der Website erheblich verbessern können, nicht in vollem Umfang nutzen können. Durch das Schreiben von semantischem HTML können Sie außerdem den richtigen Kontext zu den Inhalten Ihrer Website hinzufügen und so das Benutzererlebnis deutlich verbessern.
In diesem Artikel werden einige nützliche HTML-Tags vorgestellt, die Sie möglicherweise übersehen haben. Mit dem
<!DOCTYPE html>
<html>
<head>
<base href="https://www.google.com/" target="_blank">
</head>
<body>
<h1>The base element(Google As a case study)</h1>
<p> <a href="gmail">Gmail</a> - Used to send emails; which are messages distributed by electronic means from one computer user to one or more recipients via a network.</p>
<p><a href="hangouts">Hangouts</a> - It's used for Messaging, Voice and Video Calls</p>
</body>
</html>
Nach dem Login kopieren
这样就不必为每个请求重复 URL 的前缀了。
一个 HTML 文档中只能有一个 <code><base> 元素，并且它必须位于 <code><head> 元素内。
<code>x1, y1, x2, y2, .….<code><base>-Tag können Sie ein Szenario erstellen, in dem es eine Basis-URL gibt, die als alle relativen URLs im dient Dokumentpräfix. Das Tag muss über ein <code>href- oder <code>target-Attribut oder beides verfügen, das die Basis-URL enthält.
<p><dfn title="HyperText Markup Language">HTML</dfn>
Is the standard markup language for creating web pages.
</p>
Nach dem Login kopieren
Nach dem Login kopieren
Auf diese Weise müssen Sie das URL-Präfix nicht bei jeder Anfrage wiederholen.
In einem HTML-Dokument kann es nur ein <code><base>-Element geben, und es muss sich innerhalb des <code><head>-Elements befinden.
Imagemap
Eine Imagemap ist ein Bild mit einem bestimmten anklickbaren Bereich und wird durch das <code>map-Tag definiert. Diese Bereiche werden mit dem Tag <code><area> festgelegt. Auf diese Weise können Sie Links in verschiedene Teile des Bildes einbetten, die zu anderen Seiten führen können, was für die Beschreibung des Bildinhalts nützlich ist.
Sehen Sie sich ein Beispiel an:
Der erste Schritt besteht darin, wie gewohnt ein Bild mit dem Tag <code><img alt="Nützliche HTML-Tags, die Sie möglicherweise ignorieren (Zusammenfassung)" > einzufügen, dieses Mal jedoch mit dem Attribut <code>usemap. 🎜
<!DOCTYPE html>
<html>
<body>
<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn>
It's the standard markup language for creating web pages.</p>
</body>
</html>
Nach dem Login kopieren
Nach dem Login kopieren
🎜Als nächstes erstellen Sie ein <code><map>-Tag und verwenden denselben <code>Namen wie den <code>usemap-Attributwert im <code>img-Tag < /code>-Attribut. Dadurch wird das <code><image>-Tag mit dem <code>map-Tag verknüpft. 🎜
<abbr title="Cascading Stylesheet">CSS</abbr>
Nach dem Login kopieren
Nach dem Login kopieren
🎜Dann beginnen Sie mit der Erstellung anklickbarer Bereiche. Wir müssen definieren, wie jeder Bereich gezeichnet werden soll, normalerweise unter Verwendung von <code>shape und <code>coords. 🎜
🎜Verwenden Sie das <code><area>-Element, um anklickbare Bereiche auf dem Bild zu definieren. Es wird innerhalb eines <code>map-Elements hinzugefügt. 🎜🎜Zu diesen Eigenschaften gehören: 🎜
<code>shape ist erforderlich, wenn ein Rechteck über den relevanten Bereich gezeichnet wird. Sie können andere Formen wie Rechteck, Kreis, Polygon oder die Standardform (ganzes Bild) verwenden.
<code>alt wird verwendet, um anzugeben, wann der <code>Bereich</code ist >-Element ist Alternativtext, der angezeigt wird, wenn die Seite aus irgendeinem Grund nicht gerendert werden kann</li><li><code>href Enthält eine URL, die den anklickbaren Bereich mit einer anderen Seite verknüpft
< code>coords< /code> Schneiden Sie die Form mithilfe von Koordinaten in Pixeln genau aus. Sie können verschiedene Software verwenden, um die genauen Koordinaten eines Bildes zu ermitteln. Als einfaches Beispiel wird im Folgenden die Zeichensoftware von Microsoft verwendet. Verschiedene Formen stellen ihre Koordinaten auf unterschiedliche Weise dar. Ein Rechteck wird beispielsweise durch <code>links, oben, rechts, unten dargestellt.
🎜Hier haben wir die Koordinaten <code>oben, links: 🎜🎜🎜🎜Sie können den Cursor in der unteren linken Ecke des Bildes lesen Sie können das Lineal auch nur auf der horizontalen und vertikalen Ebene verwenden. 🎜🎜Der Screenshot unten zeigt die Koordinaten <code>rechts, unten: 🎜🎜🎜🎜Abschließend: 🎜
<fig>
<img src="https://images.unsplash.com/photo-1600618538034-fc86e9a679aa?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ" alt="Nützliche HTML-Tags, die Sie möglicherweise ignorieren (Zusammenfassung)" >
<figcaption>basketball<figcaption/>
<fig>
Nach dem Login kopieren
Nach dem Login kopieren
🎜Andere Formen können auch verwendet werden, aber die Koordinaten jeder Form werden anders geschrieben. 🎜🎜Für <code>Kreis sollten die Koordinaten des Mittelpunkts des Kreises angegeben und dann der Radius hinzugefügt werden: 🎜
<figcaption>The code block
🎜🎜🎜Die Koordinaten des Zentrums von Der Kreis muss sich in der unteren linken Ecke befinden, und der horizontale Abstand von der Mitte bis zum Ende ist der Radius. 🎜🎜Das Erstellen eines <code>Poly ähnelt eher dem Freihandzeichnen. Sie verknüpfen einfach die verschiedenen Punkte auf dem Bild und sie werden verbunden: 🎜
<figure>
<video src="ex-b.mov"></video>
<figcaption>Exhibit B. The <cite>Rough Copy</cite> trailer.</figcaption>
</figure>
Nach dem Login kopieren
Nach dem Login kopieren
🎜🎜🎜Die folgenden Werte sind beim Erstellen einer Form in HTML erforderlich: 🎜
<p><dfn title="HyperText Markup Language">HTML</dfn>
Is the standard markup language for creating web pages.
</p>
Nach dem Login kopieren
Nach dem Login kopieren
也可以与 <code><abbr> 结合使用：
<!DOCTYPE html>
<html>
<body>
<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn>
It's the standard markup language for creating web pages.</p>
</body>
</html>
Nach dem Login kopieren
Nach dem Login kopieren
这可以增强可访问性，因为这样编写语义 HTML 可以使阅读器和浏览器在适合用户的上下文中解释页面上的内容。
<details>
<summary>
<span>I am an introvert</span>
</summary>
<div>An introvert is a person with qualities of a personality type known as introversion, which means that they feel more comfortable focusing on their inner thoughts and ideas, rather than what's happening externally. They enjoy spending time with just one or two people, rather than large groups or crowds</div>
<div>
</details>
<blockquote cite="https://en.wikipedia.org/wiki/History_of_Nigeria">
The history of Nigeria can be traced to settlers trading across the middle East and Africa as early as 1100 BC. Numerous ancient African civilizations settled in the region that is known today as Nigeria, such as the Kingdom of Nri, the Benin Empire, and the Oyo Empire. Islam reached Nigeria through the Borno Empire between (1068 AD) and Hausa States around (1385 AD) during the 11th century,[1][2][3][4] while Christianity came to Nigeria in the 15th century through Augustinian and Capuchin monks from Portugal. The Songhai Empire also occupied part of the region.[5]
</blockquote>
<p>The best movie ever made is <cite>The Godfather</cite> by
Francis Ford Coppola . My favorite song is <cite>Monsters You Made</cite> by the Burna boy.</p>
Das obige ist der detaillierte Inhalt vonNützliche HTML-Tags, die Sie möglicherweise ignorieren (Zusammenfassung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
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
🎜🎜Sie können den Cursor in der unteren linken Ecke des Bildes lesen Sie können das Lineal auch nur auf der horizontalen und vertikalen Ebene verwenden. 🎜🎜Der Screenshot unten zeigt die Koordinaten <code>rechts, unten: 🎜🎜
🎜🎜Die Koordinaten des Zentrums von Der Kreis muss sich in der unteren linken Ecke befinden, und der horizontale Abstand von der Mitte bis zum Ende ist der Radius. 🎜🎜Das Erstellen eines <code>Poly ähnelt eher dem Freihandzeichnen. Sie verknüpfen einfach die verschiedenen Punkte auf dem Bild und sie werden verbunden: 🎜
