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><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">Copy after login</div></div></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><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">Copy after login</div></div></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><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">Copy after login</div></div></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><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><meta name="description" content="这里是对网站的描述"></pre><div class="contentsignin">Copy after login</div></div></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", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;"></span>Keywords<span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;"></span></strong><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">Copy after login</div></div></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", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;"></span>Page author<span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: "Helvetica Neue", 微软雅黑, "Microsoft Yahei", Helvetica, Arial, sans-serif;"></span></strong><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><meta name="author" content="作者名"></pre><div class="contentsignin">Copy after login</div></div></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", 微软雅黑, "Microsoft Yahei", Helvetica, 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><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">Copy after login</div></div></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;"></span></strong><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">Copy after login</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">Copy after login</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">Copy after login</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">Copy after login</div></div></p>
<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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
