html5 header content usually includes: 1. Web page title defined by title tag; 2. Favicon (small website icon); 3. Encoding method; 4. Website description; 5. Page keywords; 6. Page Author; 7. Viewport (mobile terminal adaptation); 8. CSS style sheet; 9. JavaScript script.
The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.
According to our needs, we can define a large amount of metadata in the HTML header, or we can define little or no metadata at all. Although the head tag is part of the HTML document, its content is not displayed in the browser.
html5 header content
1. Web page title-- tag
## The #
tag is used to define the title of an HTML document. Only documents containing the <title> tag are considered a valid HTML document. In addition, only one <title> tag is allowed in an HTML document, and the <title> tag must be placed within the tag. <p></p>Note that only plain text content is allowed inside the <title> tag, and no other HTML tags are allowed. <p></p>Example:<p><br><pre class="brush:html;toolbar:false"><head>
<title>PHP中文网</title>
</head></pre></p>
<p><img src="https://img.php.cn/upload/image/665/168/925/1639731780475326.png" title="1639731780475326.png" alt="What does html5 header content usually include?"></p>
<p>2, Favicon<strong></strong></p>The small icon to the left of the web page title, specify If his path is not specified, the browser will look for <p><pre class="brush:html;toolbar:false"><link rel="icon" href="/favicon.ico" type="image/x-icon" /></pre></p>
<p>3 in the root directory. Encoding method <strong></strong></p> The specification of the encoding method is placed at the front of the head. , if not specified, the browser will also make a determination based on the server's header, but it may not be accurate. <p><pre class="brush:html;toolbar:false"><head>
<meta charset="UTF-8">
</head></pre></p>
<blockquote>
<meta> tag is used to provide metadata about the HTML document, such as page validity period, page author, keyword list, page description, etc. The data defined by the <meta> tag will not be displayed on the page, but will be parsed by the browser. <p></p>
</blockquote>The charset attribute is used to specify the character encoding of the HTML document. In the above example, we set the character encoding of the document to "UTF-8". <p></p>
<p>4. Website description<strong></strong><pre class="brush:html;toolbar:false"><meta name="description" content="这里是对网站的描述"></pre></p>Defining the description information of the page is beneficial to search engines. <p></p>
<p>5, <strong>Page<span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: " helvetica neue yahei arial sans-serif></span>Keywords<span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: " helvetica neue yahei arial sans-serif></span></strong><pre class="brush:html;toolbar:false"><meta name="keywords" content="HTML, HTML教程, HTML入门"></pre></p>Keywords are used to provide search engines with information about the page. <p></p>
<p><strong>6, <span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: " helvetica neue yahei arial sans-serif></span>Page author<span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: " helvetica neue yahei arial sans-serif></span></strong><pre class="brush:php;toolbar:false"><meta name="author" content="作者名"></pre></p> Author information can be automatically extracted through some content management systems. <p></p>
<p><strong>7. <span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: " helvetica neue yahei arial sans-serif>Viewport (mobile terminal adaptation) </span></strong></p> This is very common. Viewport is usually adapted to the mobile terminal, and the page Put it in a virtual window - viewport. If the web page does not use the viewport, it will appear when we open the mobile browser. It is very small, and it can also be moved and zoomed. It is extremely low. The viewport allows web developers to pass its size and dynamics. Set the size of the control elements in the web page content, so that the same effect (scale reduction) as in the web page can be achieved on the browser. , used to better support responsive websites. <p><pre class="brush:html;toolbar:false"> <meta name="viewport" content="width=device-width, initial-scale=1"></pre></p>
<ul style="list-style-type: disc;">
<li>width: Control the size of the viewport. Generally, it is specified as device-width (the unit is CSS pixels scaled to 100%). You can also specify a fixed value such as 600. <p></p>
</li>
<li>Height: corresponds to width, specifies the height. <p></p>
</li>
<li>initial-scal: initial scaling ratio, the scaling ratio when the page is loaded for the first time. <p></p>
</li>
<li>maximum-scale: The maximum ratio the user is allowed to zoom to. <p></p>
</li>
<li>minimum-scale: The minimum ratio the user is allowed to zoom to. <p></p>
</li>
<li>user-scalable: Whether the user can manually zoom. <p></p>
</li>
</ul>
<p><strong>8. Embedded CSS style--<style> tag<span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;"></style></strong></p>
<p>使用 <style> 标签可以在 HTML 文档中嵌入 CSS 样式，需要注意的是在 <style> 标签中定义的样式仅对当前 HTML 文档有效。示例代码如下：</style></p><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> 标签，但对于在多个文档中通用的样式，使用外部样式表更为合适。</style></p></blockquote>
<p><strong><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: " helvetica neue yahei arial sans-serif>9、外部css样式表--<link> 标签</span></strong></p>
<p><link> 标签经常用于引用外部 CSS 样式表，<link> 标签中包含两个主要的属性，分别是 rel 和 href。rel 属性用来指示引用文件的类型，href 属性用来设置外部文件的路径。示例代码如下：</p><pre class="brush:html;toolbar:false"><head>
<title>此处书写标题</title>
<link rel="stylesheet" href="common.css">
</head></pre><blockquote>
<p>HTML </p> 标签中可以包含任意数量的 <link> 标签。</blockquote>
<p><strong><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: " helvetica neue yahei 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 yahei arial sans-serif>通过script标签嵌入JavaScript 脚本代码或链入脚本文件</span></p><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视频教程</a>》</p>
The above is the detailed content of What does html5 header content usually include?. For more information, please follow other related articles on the PHP Chinese website!
Statement：The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
