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
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>
Nach dem Login kopieren
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>
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>
Nach dem Login kopieren
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
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>
Nach dem Login kopieren
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!
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
