Was beinhaltet der HTML5-Header-Inhalt normalerweise?-Front-End-Fragen und Antworten-php.cn

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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><head> <title>PHP中文网</title> </head></pre><div class="contentsignin">Nach dem Login kopieren</div></div><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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><link rel="icon" href="/favicon.ico" type="image/x-icon" /></pre><div class="contentsignin">Nach dem Login kopieren</div></div></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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><head> <meta charset="UTF-8"> </head></pre><div class="contentsignin">Nach dem Login kopieren</div></div></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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><meta name="description" content="这里是对网站的描述"></pre><div class="contentsignin">Nach dem Login kopieren</div></div><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", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;"></span><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><meta name="keywords" content="HTML, HTML教程, HTML入门"></pre><div class="contentsignin">Nach dem Login kopieren</div></div></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", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;"></span><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><meta name="author" content="作者名"></pre><div class="contentsignin">Nach dem Login kopieren</div></div></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", 微软雅黑, "Microsoft Yahei", Helvetica, 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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"> <meta name="viewport" content="width=device-width, initial-scale=1"></pre><div class="contentsignin">Nach dem Login kopieren</div></div></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 文档有效。示例代码如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><head> <title>此处书写标题</title> <style> body { background-color: YellowGreen; } h1 { color: red; } p { color: green; } </style> </head></pre><div class="contentsignin">Nach dem Login kopieren</div></div><blockquote><p>注意：对于文档中的唯一样式可以使用 <style> 标签，但对于在多个文档中通用的样式，使用外部样式表更为合适。</p></blockquote><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> 标签</span></strong></p><p><link> 标签经常用于引用外部 CSS 样式表，<link> 标签中包含两个主要的属性，分别是 rel 和 href。rel 属性用来指示引用文件的类型，href 属性用来设置外部文件的路径。示例代码如下：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><head> <title>此处书写标题</title> <link rel="stylesheet" href="common.css"> </head></pre><div class="contentsignin">Nach dem Login kopieren</div></div><blockquote><p>HTML <head> 标签中可以包含任意数量的 <link> 标签。</p></blockquote><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 脚本</span></strong><br/></p><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 脚本代码或链入脚本文件</span></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><head> <script> document.write("PHP中文网") </script> </head></pre><div class="contentsignin">Nach dem Login kopieren</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><head> <script src="js/test.js"></script> </head></pre><div class="contentsignin">Nach dem Login kopieren</div></div><p>相关推荐：《<a href="http://www.php.cn/course/list/11.html" target="_blank" textvalue="html视频教程">html视频教程</a>》</p>

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!