html5头部内容通常包括：1、title标签定义的网页标题；2、Favicon（网站小图标）；3、编码方式；4、网站描述；5、页面关键字；6、页面作者；7、Viewport（移动端适配）；8、CSS样式表；9、JavaScript脚本。
本教程操作环境：windows7系统、HTML5版、Dell G3电脑。
根据我们的需求，可以在 HTML 头部定义大量的元数据，也可以定义很少或者根本就不定义。虽然头部标签是 HTML 文档的一部分，但其中的内容并不会显示在浏览器中。
html5头部内容
1、网页标题-- 标签
立即学习“前端免费学习笔记（深入）”；
标签用来定义 HTML 文档的标题，只有包含 <title> 标签的文档才算是一个有效的 HTML 文档。另外，一个 HTML 文档中仅允许存在一个 <title> 标签，并且 <title> 标签必须放置在 标签中。<p>注意，在 </p>
<title> 标签内部仅允许包含纯文本内容，不能包含其他 HTML 标签。<p>示例：<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">登录后复制</div></div><p><img src="https://img.php.cn/upload/image/665/168/925/1639731780475326.png" title="1639731780475326.png" alt="1.png"></p>
<p><strong>2、Favicon</strong></p>
<p>网页标题左边的小图标，指定他的路径，如果没有指定，浏览器会在根目录下寻找</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">登录后复制</div></div><p><strong>3、编码方式</strong></p>
<p>编码方式的规范是放在head的最前面，如果不指定，浏览器也会根据服务器的header进行判定，但是不一定准确。</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">登录后复制</div></div><blockquote><p><meta> 标签用于提供有关 HTML 文档的元数据，例如页面有效期、页面作者、关键字列表、页面描述等信息。<meta> 标签定义的数据并不会显示在页面上，但却会被浏览器解析。</p></blockquote>
<p>charset 属性用来指定 HTML 文档的字符编码，上面的示例中，我们将文档的字符编码设置为了“UTF-8”。</p>
<p><strong>4、网站描述</strong></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">登录后复制</div></div><p>定义页面的描述信息有利于搜索引擎的搜索。</p>
<p><strong>5、<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>关键字</span></strong></p><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">登录后复制</div></div><p>关键字用于为搜索引擎提供与页面有关的信息。</p>
<p><strong><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: " helvetica neue yahei arial sans-serif>6、</span><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: " helvetica neue yahei arial sans-serif>页面作者</span></strong></p>
<div class="aritcle_card">
<a class="aritcle_card_img" href="/ai/1511">
<img src="https://img.php.cn/upload/ai_manual/000/969/633/68b7a3574b022434.png" alt="文心大模型">
</a>
<div class="aritcle_card_info">
<a href="/ai/1511">文心大模型</a>
<p>百度飞桨-文心大模型 ERNIE 3.0 文本理解与创作</p>
<div class="">
<img src="/static/images/card_xiazai.png" alt="文心大模型">
<span>168</span>
</div>
</div>
<a href="/ai/1511" class="aritcle_card_btn">
<span>查看详情</span>
<img src="/static/images/cardxiayige-3.png" alt="文心大模型">
</a>
</div>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><meta name="author" content="作者名"></pre><div class="contentsignin">登录后复制</div></div><p>通过某些内容管理系统可以自动提取作者信息。</p>
<p><strong><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: " helvetica neue yahei arial sans-serif>7、</span>Viewport（移动端适配）</strong></p>
<p>这个就很常见了，viewport一般是做移动端适配，将页面放在一个虚拟的窗口中-viewport中，如果网页没有用viewport就会出现我们在手机浏览器打开时很小，而且还可以移动缩放，low爆了，viewport就是让网页开发者通过其大小,动态的设置其网页内容中控件元素的大小,从而使得在浏览器上实现和web网页中相同的效果(比例缩小)。，用来更好支持响应式网站。</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">登录后复制</div></div><ul style="list-style-type: disc;">
<li><p>width:控制viewport的大小，一般情况下指定为device-width(单位为缩放为100%的CSS像素),也可以指定一个固定的值例如600.</p></li>
<li><p>height:和width相应,指定高度。</p></li>
<li><p>initial-scal:初始缩放比例,页面第一次load的时候的缩放比例。</p></li>
<li><p>maximum-scale:允许用户缩放到的最大比例。</p></li>
<li><p>minimum-scale:允许用户缩放到的最小比例。</p></li>
<li><p>user-scalable:用户是否可以手动缩放。</p></li>
</ul>
<p><strong><span style="background-color: rgb(255, 255, 255); color: rgb(68, 68, 68); font-family: " helvetica neue yahei arial sans-serif>8、内嵌CSS样式--<style>标签</style></span></strong></p>
<p>使用 <style> 标签可以在 HTML 文档中嵌入 CSS 样式，需要注意的是在 <style> 标签中定义的样式仅对当前 HTML 文档有效。示例代码如下：</style></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">登录后复制</div></div><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><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">登录后复制</div></div><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><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">登录后复制</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">登录后复制</div></div><p>相关推荐：《<a href="http://www.php.cn/course/list/11.html" target="_blank" textvalue="html视频教程">html视频教程</a>》</p>
以上就是html5头部内容通常包括哪些的详细内容，更多请关注php中文网其它相关文章！
广告
收藏
650
