Heim  >  Artikel  >  Web-Frontend  >  Was beinhaltet der HTML5-Header-Inhalt normalerweise?

Was beinhaltet der HTML5-Header-Inhalt normalerweise?

青灯夜游
青灯夜游Original
2021-12-17 17:17:396155Durchsuche

HTML5-Header-Inhalt umfasst normalerweise: 1. Webseitentitel, definiert durch Titel-Tag; 3. Kodierungsmethode; (Anpassung für mobile Endgeräte); 8. CSS-Stylesheet; 9. JavaScript-Skript.

Was beinhaltet der HTML5-Header-Inhalt normalerweise?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, HTML5-Version, Dell G3-Computer.

Je nach Bedarf können wir eine große Menge an Metadaten im HTML-Header definieren oder wir können nur wenige oder gar keine Metadaten definieren. Obwohl das Head-Tag Teil des HTML-Dokuments ist, wird sein Inhalt nicht im Browser angezeigt.

HTML5-Header-Inhalt

1. Webseitentitel – -Tag

;-Tag kann als gültiges HTML-Dokument betrachtet werden. Darüber hinaus ist in einem HTML-Dokument nur ein <title>-Tag zulässig, und das <title>-Tag muss innerhalb des -Tags platziert werden. <p>Beachten Sie, dass innerhalb des </p> <title>-Tags nur reiner Textinhalt zulässig ist und keine anderen HTML-Tags zulässig sind. <p>Beispiel: <br></p><pre class="brush:html;toolbar:false"><head> <title>PHP中文网</title> </head></pre><p><img src="https://img.php.cn/upload/image/665/168/925/1639731780475326.png" title="1639731780475326.png" alt="Was beinhaltet der HTML5-Header-Inhalt normalerweise?"></p> <p><strong>2. Das kleine Symbol auf der linken Seite des Webseitentitels gibt den Pfad an. Wenn nicht angegeben, sucht der Browser im Stammverzeichnis nach </strong><pre class="brush:html;toolbar:false"><link rel="icon" href="/favicon.ico" type="image/x-icon" /></pre></p> <p>3 Verzeichnis. Kodierungsmethode </p> <p><strong>Die Angabe der Kodierungsmethode wird am Anfang des Headers platziert. Wenn sie nicht angegeben wird, ermittelt der Browser sie auch anhand des Headers des Servers, diese ist jedoch möglicherweise nicht korrekt. </strong><pre class="brush:html;toolbar:false"><head> <meta charset="UTF-8"> </head></pre></p> <p><meta>-Tag wird verwendet, um Metadaten über das HTML-Dokument bereitzustellen, wie z. B. Seitengültigkeitsdauer, Seitenautor, Schlüsselwortliste, Seitenbeschreibung usw. Die durch das <meta>-Tag definierten Daten werden nicht auf der Seite angezeigt, sondern vom Browser analysiert. Das Attribut </p> <blockquote><p>charset wird verwendet, um die Zeichenkodierung des HTML-Dokuments anzugeben. Im obigen Beispiel setzen wir die Zeichenkodierung des Dokuments auf „UTF-8“. </p></blockquote> <p>4. Website-Beschreibung</p> <p><pre class="brush:html;toolbar:false"><meta name="description" content="这里是对网站的描述"></pre><strong> Das Definieren der Beschreibungsinformationen der Seite ist für Suchmaschinen von Vorteil. </strong></p> <p>5, </p>Seite<p><strong>Schlüsselwörter<span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: " helvetica neue yahei arial sans-serif></span><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: " helvetica neue yahei arial sans-serif><pre class="brush:html;toolbar:false"><meta name="keywords" content="HTML, HTML教程, HTML入门"></pre></span>Schlüsselwörter werden verwendet, um Suchmaschinen Informationen über die Seite bereitzustellen. </strong></p> <p></p>6, <p><strong>Seitenautor<span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: " helvetica neue yahei arial sans-serif></span><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: " helvetica neue yahei arial sans-serif><pre class="brush:php;toolbar:false"><meta name="author" content="作者名"></pre></span>Die Autoreninformationen können über einige Content-Management-Systeme automatisch extrahiert werden. </strong></p> <p></p>7. <p>Viewport (Mobile Adaption) <strong><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: " helvetica neue yahei arial sans-serif></span>Dies wird normalerweise für die mobile Adaption verwendet. Die Seite wird so angezeigt Wenn wir den mobilen Browser öffnen, ist er sehr klein und kann auch verschoben und gezoomt werden. Mit dem Viewport können Webentwickler die Größe von Steuerelementen in ihren Webinhalten dynamisch festlegen Browser Es wird der gleiche Effekt wie auf der Webseite (Maßstabsverkleinerung) erzielt. , wird verwendet, um reaktionsfähige Websites besser zu unterstützen. </strong><pre class="brush:html;toolbar:false"> <meta name="viewport" content="width=device-width, initial-scale=1"></pre></p> <p></p>width: Steuern Sie die Größe des Ansichtsfensters. Im Allgemeinen wird sie als Gerätebreite angegeben (die Einheit ist CSS-Pixel skaliert auf 100 %). <ul style="list-style-type: disc;"> <li> <p></p> height: und width Geben Sie entsprechend die Höhe an. </li> <li> <p></p>initial-scal: anfängliches Skalierungsverhältnis, das Skalierungsverhältnis, wenn die Seite zum ersten Mal geladen wird. </li> <li> <p></p>maximaler Maßstab: Der maximale Maßstab, auf den der Benutzer zoomen darf. </li> <li> <p></p>minimaler Maßstab: Der minimale Maßstab, auf den der Benutzer zoomen darf. </li> <li> <p></p>Benutzerskalierbar: Ob der Benutzer manuell zoomen kann. </li> <li><p></p></li> </ul>8. Eingebetteter CSS-Stil – <style><p>使用 <style> 标签可以在 HTML 文档中嵌入 CSS 样式,需要注意的是在 <style> 标签中定义的样式仅对当前 HTML 文档有效。示例代码如下:<pre class="brush:html;toolbar:false"><head> <title>此处书写标题</title> <style> body { background-color: YellowGreen; } h1 { color: red; } p { color: green; } </style> </head></pre><blockquote><p>注意:对于文档中的唯一样式可以使用 <style> 标签,但对于在多个文档中通用的样式,使用外部样式表更为合适。<p><strong><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;">9、外部css样式表--<link> 标签<p><link> 标签经常用于引用外部 CSS 样式表,<link> 标签中包含两个主要的属性,分别是 rel 和 href。rel 属性用来指示引用文件的类型,href 属性用来设置外部文件的路径。示例代码如下:<pre class="brush:html;toolbar:false"><head> <title>此处书写标题</title> <link rel="stylesheet" href="common.css"> </head></pre><blockquote><p>HTML <head> 标签中可以包含任意数量的 <link> 标签。<p><strong><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;">10、JavaScript 脚本<br/><p><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;">通过script标签嵌入JavaScript 脚本代码或链入脚本文件<pre class="brush:js;toolbar:false"><head> <script> document.write("PHP中文网") </script> </head></pre><pre class="brush:js;toolbar:false"><head> <script src="js/test.js"></script> </head></pre><p>相关推荐:《<a href="http://www.php.cn/course/list/11.html" target="_blank" textvalue="html视频教程">html视频教程》</style>

Das obige ist der detaillierte Inhalt vonWas beinhaltet der HTML5-Header-Inhalt normalerweise?. 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