html头部的标签有哪些？

作为一个前端，经常写html文档，但是却很少去在意头部的标签有哪些，也很少在意每个标签的作用，下面我们来详细了解下。

头部的标签，也就是写在里。通常会有6个标签：　



 
 
文档标题






 
 文档内容......

一、元素。</p> <p>1.title 标签定义了文档的标题，在HTML文档中是必须的。它会展示在浏览器的工具栏上。</p> <p>2.如果要展示一个图标，可以再加一个<link>标签，<link>标签的 rel属性为“icon”,后面的href跟上图片的地址。</p> <pre><link rel="icon" href="图片url"></pre> <p>二、<base>元素。</p> <p>base标签描述了基本的链接地址，该标签作为HTML文档中所有的链接的默认链接</p> <pre>　<head> 　　<base href="http://www.php.cn/tpl/Index/Static/img/" target="_blank" /> <br> </head> 　　<br> <body> 　<br> 　<img src="banner7.jpg"/><br> </body>　</pre> <p>上面的img标签的src链接的地址就是base里的地址加上img里的地址。</p> <p>三、<link>元素。</p> <p>link标签定义了文档与外部资源之间的关系，它通常用于链接到样式表。</p> <pre><head> <link rel="stylesheet" type="text/css" href="style.css"> </head></pre> <p>四、<style>元素。</p> <p>style标签定义了HTML文档的样式，这个我们经常会使用到，都不会陌生。</p> <p>五、<meta>元素。</p> <p>meta标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。它常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。</p> <p>元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。这个更详细：https://blog.csdn.net/weixin_45456533/article/details/109825808</p> <pre>// 编码格式定义<br><meta charset="utf-8"> </pre> <pre>// 为搜索引擎定义关键词:<br><meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"><br>// 为网页定义描述内容: <meta name="description" content="头部标签 & 使用"><br>// 定义网页作者: <meta name="author" content="Runoob"><br>// 每30秒钟刷新当前页面: <meta http-equiv="refresh" content="30"><br><br></pre> <pre>// 视图层的参数定义</pre> <pre><meta<br>name="viewport"<br> content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"<br>/></pre> <p>content属性值 :</p> <p> width:可视区域的宽度，值可为数字或关键词device-width</p> <p> height:同width</p> <p> intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放</p> <p> maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，</p> <p> maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。</p> <p> user-scalable:是否可对页面进行缩放，no 禁止缩放</p> <p>// referer定义</p> <h1 class="postTitle"> </h1> <p>在某些情况下，出于一些原因，网站想要控制页面发送给 server 的 referer 信息的情况下，可以使用这一 referer metadata 参数。 </p> <p><strong>参数</strong></p> <h1 class="postTitle"> <em id="__mceDel" style="font-size: 12px">referer 的 metedata 属性可设置content属性值为以下集合：</em></h1> <ul> <li>never</li> <li>always</li> <li>origin</li> </ul> <p><strong>结果</strong></p> <ol> <li>如果referer-policy的值为never：删除http head中的referer；</li> <li>如果referer-policy的值为default：如果当前页面使用的是https协议，而正要加载资源使用的是普通的http协议，则将http header中额referer置为空；</li> <li>如果referer-policy的值origin：只发送origin部分；</li> <li>如果referer-policy的值为always：不改变http header中的referer的值；</li> </ol> <p><strong>举例</strong></p> <p>　　如果页面中包含了如下 meta 标签，所有从当前页面中发起的请求将不会携带 referer：<meta name="referrer" content="never"></p> <p>　　如果页面中包含了如下 meta 标签，则从当前页面中发起的 http请求将只携带 origin 部分：<meta name="referrer" content="origin"></p> <p>六、<script>元素。</p> <p>script标签用于加载脚本文件，比如说javascript,可以直接书写js,也能用于链接外部的js文件。</p> <pre><script><span style="color: rgba(0, 0, 0, 1)"> document.write(</span>"Hello World!"<span style="color: rgba(0, 0, 0, 1)">) </span></script><br><br>// or </pre> <pre><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script></pre> </div>  <div class="p-2"></div> <div class="arcinfo my-3 fs-7 text-center"> <a href='/t/etagid95-0.html' class='tagbtn' target='_blank'>H5</a> </div> <div class="p-2"></div> </div> <div class="p-2"></div>  <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle"><h2 class="fs-4">相关</h2></div> <hr> <div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-560516.html">h5 video 封面poster IOS下无效不显示，安卓显示正常</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-558621.html">H5唤起APP实践指南</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-554645.html">C#支付宝支付接口H5版（手机网页支付）</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-535132.html">Golang学习-CH5 Go语言函数</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-534421.html">H5监听手机的返回键</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-510527.html">h5自定义播放器得实现原理</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-486573.html">H5 播放Hls</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-484911.html">H5+CSS3 学习</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-470805.html">移动H5开发，CSS的单位汇总与用法</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-468643.html">简单谈谈如何利用h5实现音频的播放</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-456548.html">H5多图上传调研</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-443203.html">H5中调起地图导航</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div>   </div>  </div> <div class="col-lg-3 col-12 p-0 ps-lg-2">     <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div> <div class="clearfix"></div> <ul class="m-0 p-0 fs-7 r-tag"> </ul> <div class="clearfix"></div> </div>  </div> </div> </div> </main> <div class="p-2"></div> <footer> <div class="container-fluid p-0 bg-black"> <div class="container p-0 fs-8"> <p class="text-center m-0 py-2 text-white-50">一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a></p> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script> </body> </html>