html头部的标签有哪些？

admin2026-07-24 09:38:48【活动福利】

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

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

文档标题

文档内容......

一、元素。</p> <p>1.title 标签定义了文档的标题，在HTML文档中是必须的。它会展示在浏览器的工具栏上。</p> <p>2.如果要展示一个图标，可以再加一个<link>标签，<link>标签的 rel属性为“icon”,后面的href跟上图片的地址。</p> <p><link rel="icon" href="图片url"></p> <p>二、<base>元素。</p> <p>base标签描述了基本的链接地址，该标签作为HTML文档中所有的链接的默认链接</p> <p><head></p> <p><base href="http://www.php.cn/tpl/Index/Static/img/" target="_blank" /> </head> <body> <img src="banner7.jpg"/> </body></p> <p>上面的img标签的src链接的地址就是base里的地址加上img里的地址。</p> <p>三、<link>元素。</p> <p>link标签定义了文档与外部资源之间的关系，它通常用于链接到样式表。</p> <p><head></p> <p><link rel="stylesheet" type="text/css" href="style.css"></p> <p></head></p> <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> <p>// 编码格式定义<meta charset="utf-8"></p> <p>// 为搜索引擎定义关键词:<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">// 为网页定义描述内容:</p> <p><meta name="description" content="头部标签 & 使用">// 定义网页作者:</p> <p><meta name="author" content="Runoob">// 每30秒钟刷新当前页面:</p> <p><meta http-equiv="refresh" content="30"></p> <p>// 视图层的参数定义</p> <p><metaname="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/></p> <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> <p>在某些情况下，出于一些原因，网站想要控制页面发送给 server 的 referer 信息的情况下，可以使用这一 referer metadata 参数。</p> <p>参数</p> <p>referer 的 metedata 属性可设置content属性值为以下集合：</p> <p>never</p> <p>always</p> <p>origin</p> <p>结果</p> <p>如果referer-policy的值为never：删除http head中的referer；</p> <p>如果referer-policy的值为default：如果当前页面使用的是https协议，而正要加载资源使用的是普通的http协议，则将http header中额referer置为空；</p> <p>如果referer-policy的值origin：只发送origin部分；</p> <p>如果referer-policy的值为always：不改变http header中的referer的值；</p> <p>举例</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> <p><script></p> <p>document.write("Hello World!")</p> <p></script>// or</p> <p><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script></p> </p> <div class="con_text"> <div class="nextinfo"> <p><a href="/562f66251dc8abef/e5ea90400012b571.html">荒野行动跑车如何购买</a></p> <p><a href="/562f66251dc8abef/e899dec18a790527.html">XML技术详解</a></p> </div> </div> </div> </div>  <div class="rbox"> <div id="newmodule" class="widget widget_765765"> <div class="whitebg"> <h2 class="htitle">最新发表</h2> <div class="widget-content newmodule"><ul> <li><a title="浡然兴之是什么意思" href="/1ec12ec32f7f9c92/4bd4ebcb5816f43a.html">浡然兴之是什么意思</a></li> <li><a title="《暗黑觉醒》2025春季觉醒庆典：探索无尽深渊，赢取稀有觉醒装备！" href="/1ec12ec32f7f9c92/857726244ba385e3.html">《暗黑觉醒》2025春季觉醒庆典：探索无尽深渊，赢取稀有觉醒装备！</a></li> <li><a title="凶宅笔录" href="/a38c76b8790e4316/a787a5fd86af0fa0.html">凶宅笔录</a></li> <li><a title="葛根粉的功效与作用、禁忌和食用方法" href="/a38c76b8790e4316/6c01b1e2b4072475.html">葛根粉的功效与作用、禁忌和食用方法</a></li> <li><a title="时空召唤吕布好不好吕布技能属性图鉴详解" href="/a38c76b8790e4316/07d6a351b74cd9a8.html">时空召唤吕布好不好吕布技能属性图鉴详解</a></li> <li><a title="我国各省市“邻居”知多少，首都有2个，最多邻8个" href="/1ec12ec32f7f9c92/7fa23cd1b2be276a.html">我国各省市“邻居”知多少，首都有2个，最多邻8个</a></li> <li><a title="如何下载YouTube(油管)上的高清视频" href="/562f66251dc8abef/f2c18c9b75ffd285.html">如何下载YouTube(油管)上的高清视频</a></li> <li><a title="如何在 Word 中插入水平线或垂直线" href="/a38c76b8790e4316/13106506e69a60a8.html">如何在 Word 中插入水平线或垂直线</a></li> <li><a title="开校车需要什么条件校车驾驶资格证怎么办理" href="/1ec12ec32f7f9c92/fe7f52d66bc323a7.html">开校车需要什么条件校车驾驶资格证怎么办理</a></li> <li><a title="无袖上衣原来有这么多搭配，9套穿搭发现清凉又吸睛穿搭" href="/562f66251dc8abef/03c253bff4e4d5bc.html">无袖上衣原来有这么多搭配，9套穿搭发现清凉又吸睛穿搭</a></li> </ul></div> </div> </div> <div id="newmodule" class="widget widget_youqing"> <div class="whitebg"> <h2 class="htitle">友情链接</h2> <div class="widget-content newmodule"><script> var _mtj = _mtj || []; (function () { var mtj = document.createElement("script"); mtj.src = "https://node91.aizhantj.com:21233/tjjs/?k=gdvpk3plqch"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(mtj, s); })(); </script></div> </div> </div> </div> </article> <footer> <div class="box"> <div class="endnav"> <p></p> <p>Copyright © 2022 异样游戏社区 - 福利活动与玩家互动平台 All Rights Reserved.</p> </div> </div> <a href="#"> <div class="top"></div> </a> </footer> <script type="text/javascript" src="/static/js/san_praise_sdk.js"></script> <script src="/static/js/jquery-1.8.3.min.js"></script> <script src="/static/js/comm.js"></script> <script src="/static/js/modernizr.js"></script> <script src="/static/js/custom.js"></script> </body> </html>