suchen

Heim >Web-Frontend >HTML-Tutorial >Welche Arten von Grafiken unterstützt HTML5?

Welche Arten von Grafiken unterstützt HTML5?

PHPz
PHPznach vorne
2023-08-27 11:01:161040Durchsuche

Welche Arten von Grafiken unterstützt HTML5?

Grafiken sind visuelle Darstellungen, mit denen Ideen oder Vorstellungen dargestellt werden, um das Gesamterlebnis des Benutzers auf der Website zu verbessern. Grafiken helfen dabei, dem Benutzer komplexe Informationen einfach und verständlich zu vermitteln. Einige Möglichkeiten zur grafischen Darstellung von Informationen sind Fotos, Grafiken, Diagramme, Flussdiagramme usw.

Grafiken in HTML werden verwendet, um das Erscheinungsbild einer Webseite oder Website zu verbessern und die Benutzerinteraktion zu vereinfachen. Grafiken in HTML dienen unterschiedlichen Zwecken und wir haben dafür unterschiedliche Techniken. Wir werden einige davon im Folgenden besprechen.

SVG

SVG steht für Scalable Vector Graphics. Es ist wie HTML für Grafiken. SVG-Dateien werden immer mit der Erweiterung .svg gespeichert. Das -Tag ist ein Container-Tag, da es über öffnende und schließende Tags verfügt. Damit es funktioniert, muss es innerhalb des -Elements hinzugefügt werden. Es erstellt hochwertige Grafiken, Animationen und Bilder, die wiederverwendbar, leicht verständlich und leicht zu importieren sind. Sie können leicht geändert werden, indem Sie die Auszeichnungssprache bearbeiten oder mithilfe eines Stylesheets wie CSS bearbeiten.

SVG verfügt über viele integrierte Funktionen wie Farbverläufe, Deckkraft, Filter und mehr, die alle skalierbare, glatte und wiederverwendbare Grafiken für Webseiten bereitstellen.

Beispiel: SVG als Bilddatei verwenden

<!DOCTYPE html>
<html lang="en">
<head>
   <title>SVG</title>
</head>
<body>
   <h1>Below is an example of an svg used as an image.</h1>
   <img src="https://www.tutorialspoint.com/images/physics-tutorials_icon.svg" alt="SVG">
</body>
</html>

Beispiel 2: SVG als Hintergrundbild verwenden

<!DOCTYPE html>
<html lang="en">
<head>
   <title>SVG</title>
   <style>
      body{
         background: url("https://www.tutorialspoint.com/images/physics-tutorials_icon.svg") no-repeat;
      }
   </style>
</head>
<body>
   <p>This is Using SVG as background image</p>
</body>
</html>

Beispiel 3: SVG unverändert verwenden

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Document</title>
</head>
<body>
   <svg
      xmlns="http://www.w3.org/2000/svg"
      width="375.00078"
      height="728.17084"
      viewBox="0 0 375.00078 728.17084"
      xmlns:xlink="http://www.w3.org/1999/xlink"
   >
   <path
      d="M2.79045,484.29492c-.55273,0-1-.44727-1-1V201.5c0-70.91211,57.69043-128.60254,128.60254-128.60254h217.13771c.55273,0,1,.44727,1,1s-.44727,28-1,28l217.1377-27C60.58439,74.89746,3.79045,131.69141,3.79045,201.5V483.29492c0,.55273-.44727,1-1,1Z"  fill="#3f3d56"
   />
   <path
      d="M348.29044,0c.55273,0,1,.44727,1,1V282.79492c0,70.91211-57.69043,128.60254-128.60254,128.60254H3.55021c-.55273,0-1-.44727-1-1s.44727-1,1-1H220.68792c69.80861,0,126.60255-56.79395,126.60255-126.60254V1c0-.55273,.44727-1,1-1h-.00003Z"  fill="#3f3d56"/>
</body>
</html>

CSS

CSS steht für Cascading Style Sheets. Dabei handelt es sich um eine Sprache, mit der die Darstellung einer Webseite und ihrer Komponenten wie Farbe, Layout und Schriftartinformationen beschrieben wird. CSS-Dateien werden mit der Erweiterung .css gespeichert.

Wird hauptsächlich zum Ändern von HTML- und SVG-Elementen über CSS-Attribute verwendet. HTML-Elemente verfügen über mehrere integrierte CSS-Eigenschaften, z. B. Schriftarten, Schriftgröße, Schriftbreite und Schriftstärke. Ebenso haben wir für andere Elemente andere Eigenschaften. Wenn alle diese Eigenschaften auf HTML- und SVG-Elemente angewendet werden, entstehen Webseiten, die skalierbar, einfach und für Benutzer leicht verständlich sind.

Beispiel

<!DOCTYPE html>
<html lang="en">
<head>
   <title>CSS</title>
   <link rel="stylesheet" href="style.css">
  <style>
      body{
         background-image: url("image.jpg");
         background-color:aqua;
         background-repeat: repeat;
         background-position: 0%;
      }
      h1{
         color:black;
         border: 2px solid black;
         font-size: 50px;
      }
      p{
         color:black;
         border:2px solid black;
         font-size: 50px;
      }
   </style>
</head>
<body>
   <h1>This is an exmaple of using CSS with HTML.</h1>
   <p>CSS helps in making the content and images of the webpage looks more simpler and presentable.</p>
</body>
</html>

Canvas-API

Canvas API ist eine clientseitige Skripttechnologie, die eine umfassende Erstellung oder Änderung von Rasterbildern ermöglicht. Die Canvas-API verwendet einen vektorbasierten Ansatz zum Erstellen von Formen und anderen grafischen Effekten, und da sie kein DOM (Document Object Model) hat, kann sie schneller arbeiten.

Die

Canvas-API wird zum Erstellen von Grafiken mit Javascript und -Elementen verwendet. Das -Element verfügt über zwei Attribute, Breite und Höhe, die beide optional sind. Wenn wir diese Eigenschaften jedoch verwenden und ihre Werte nicht festlegen, wird die Breite standardmäßig auf 300 Pixel und die Höhe auf 150 Pixel festgelegt. Die Canvas-API wird von Entwicklern häufig zur Entwicklung von High-End-Spielen und Anwendungen mit vollem Funktionsumfang verwendet.

Beispiel

<!DOCTYPE html>
<html lang="en">
<head>
   <title>CANVAS API</title>
</head>
<body>
   <h1>This is an example of CANVAS API in HTML</h1>>
   <canvas id="canvas" width="300" height="150" style="border:2px solid black;"></canvas>
   <script>
      var c = document.getElementById("canvas");
      var ctx = c.getContext("2d");
      ctx.beginPath();
      ctx.arc(100,55,45,0,2*Math.PI);
      ctx.stroke();
   </script>
</body>
</html>

PNG – PNG steht für Portable Network Graphics. Es handelt sich um ein statisches Dateiformat, das für die tragbare, gut komprimierte Speicherung und den Austausch von Rasterbildern verwendet wird. PNG-Dateien werden immer mit der Erweiterung .png gespeichert.

PNG-Dateien sind farbenfroh mit indizierten Farben, Graustufen und Alphakanal-Transparenz. Es kann mit HTML, CSS und SVG verwendet werden. PNG-Dateien sind aufgrund ihrer schnelleren Streaming- und progressiven Rendering-Funktionen hauptsächlich für das Web konzipiert. Aufgrund dieser Funktionen werden sie in Webbrowsern, Grafikerstellungstools und Imaging-Toolkits in hohem Maße unterstützt.

In den obigen Zeilen haben wir einige Möglichkeiten zur Verwendung von Grafiken in HTML besprochen, sind jedoch nicht auf diese Methoden beschränkt. HTML und CSS bieten viele andere Möglichkeiten zur Verwendung von Grafiken. Aufgrund der Flexibilität, die HTML bietet, ist es auch möglich, bewegte Grafiken durch Animationen zu verwenden, Grafiken mithilfe von Carasoul automatisch zu ändern und mit Videos zu arbeiten.

Fazit

Zusammenfassend lässt sich sagen, dass die Datenanalyse ein leistungsstarkes Instrument für das Notfallmanagement sein kann. Es ermöglicht Unternehmen, Daten in Echtzeit zu sammeln und zu analysieren, Trends zu erkennen und schnell auf Katastrophen zu reagieren. Datenanalysen können auch dabei helfen, zukünftige Ereignisse vorherzusagen, genauere Notfallpläne zu entwickeln und die allgemeine Bereitschaft zu verbessern. Durch die Nutzung der Leistungsfähigkeit der Datenanalyse für das Notfallmanagement können Unternehmen ihre Gemeinden besser vor katastrophenbedingten Bedrohungen schützen.

Das obige ist der detaillierte Inhalt vonWelche Arten von Grafiken unterstützt HTML5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Konvertieren Sie Videos in HTML5 ogg/ogv und mpg4Nächster Artikel：Konvertieren Sie Videos in HTML5 ogg/ogv und mpg4

In Verbindung stehende Artikel

Mehr sehen