原创投稿
  1. 创想鸟首页
  2. 用户投稿

head标签中有什么属性？

程序猿 • • 用户投稿

本篇文章给大家带来的内容是关于head标签中有什么属性？有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

head 标签里有什么？

每一个 html 文档中，都有一个不可或缺的标签：

 ，它作为一个容器，主要包含了用于描述 html 文档自身信息（元数据）的标签，这些标签一般不会在页面中被显示出来，大多情况下是给浏览器和搜索引擎看的。

可以用在 

 里面的标签有：  ,  ,  ,  , , , 。</p> <p style="white-space: normal">元信息标签介绍</p> <p style="white-space: normal"><title></p> <p>定义文档的标题，显示在浏览器的标题栏或标签页上，一般会完整地概括整个网页的内容。</p> <p style="white-space: normal"><p>给页面上所有相对 URL 的提供一个基础。一份文档中只能有一个 标签。</p> <p>目前我只观察到「淘宝网」使用了这个标签。</p> <p style="white-space: normal"><p>规定外部资源与当前文档的关系，常于链接样式表，如下所示：</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;"></pre> <div class="contentsignin"></div> </div> <p>当然还有很多其他的作用：比如用于 SEO，主要给搜索引擎看的：</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;"></pre> <div class="contentsignin"></div> </div> <p>在网站中常有多个 url 指向同一个页面的情况，上述标签告知搜索引擎页面的主 url 是什么，以便搜索引擎保留主要页面而去除其他重复页面。提供 rss 订阅的：</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;"></pre> <div class="contentsignin"></div> </div> <p>上述标签除搜索引擎可以看懂以外，也能被很多浏览器插件识别。表示页面 icon 的：</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;"></pre> <div class="contentsignin"></div> </div> <p>多数浏览器会读取这个 link 的资源并展示在页面上。对页面提供预处理的：</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;"></pre> <div class="contentsignin"></div> </div> <p>提前对一个域名做 dns 查询。强制对域名进行预读取在有的情况下很有用,。</p> <p>比如, 在网站的主页上，强制在整个网站上对频繁引用的域名做预解析处理，即使它们不在主页本身上使用。虽然主页的性能可能不受影响，但是会提高站点整体性能。</p> <p><p>包含文档的样式信息。</p> <p><p>一种通用的元数据信息表示标签，一般以键值对出现，如：</p> <p>charset 属性</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;"></pre> <div class="contentsignin"></div> </div> <p>从 HTML5 开始，上述写法被推荐使用，用于声明当前文档所使用的字符编码，推荐放在 中的第一位。</p> <p style="white-space: normal">http-equiv属性</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;"></pre> <div class="contentsignin"></div> </div> <p>在 HTML4 中，上述代码用于声明字符集，但是现在已不被推荐。</p> <p>除了 content-type ，还有其他几个值：</p> <p>content-language （已过时）、set-cookie （已过时）、default-style 、refresh 、content-security-policy</p> <p>因为不常用，所以就不一一介绍了，也挺容易理解，感兴趣可以点击 这里 了解。</p> <p style="white-space: normal">name 属性</p> <p>其实 标签可以被自由定义，只要读取和写入的双方约定好 name 和 content 的格式就可以了。来看一个例子：</p> <div class="code" style="position:relative;padding:0px;margin:0px"> <pre class="brush:php;toolbar:false;"></pre> <div class="contentsignin"></div> </div> <p>上面这种用法并不在 HTML 标准中，但是却移动端开发的事实标准。这里来解释一下 content 中的内容：</p> <p>width ：页面宽度，可以是一个正整数；也可以一个字符串 “device-width” ，表示跟设备宽度相等。height ：页面高度，可以是一个正整数；也可以一个字符串 “device-height” ，表示跟设备高度相等。initial-scale ：初始缩放比例。minimum-scale ： 最小缩放比例。maximum-scale ： 最大缩放比例。user-scalable ：是否允许用户缩放。</p> <p>name 属性的值除了可以是 viewport 之外，还有相当多的值：</p> <p>application-name 、author 、description 、generator 、keywords 、referrer 、robots 等。</p> <p>同样的，就不一一介绍了，感兴趣可以点击 这里 了解。</p> <p><p>用于嵌入或引用可执行脚本。来看几个 script 标签常见的全局属性：</p> <p>async</p> <p>使浏览器使用另一个线程下载脚本，这时不会阻塞页面渲染。当脚本下载完成后，浏览器会暂停渲染，执行脚本，执行完毕后继续渲染页面。</p> <p>async 无法保证脚本的执行顺序，哪个脚本先下载结束就会先执行。</p> <p>defer</p> <p>同样会使浏览器并行下载脚本，但是下载完毕不会立即执行，而是会等到 DOM 加载完成后（即刚刚读取完 标签）再执行脚本。</p> <p>defer 可以保证脚本的执行顺序就是它们在页面上出现的顺序。</p> <p>src</p> <p>定义引用外部脚本的地址，指定此属性的 script 标签内不应再有嵌入的脚本。如果脚本文件使用了非英语字符，还应该注明字符的编码。如：</p> <p>type</p> <p>默认值是 text/<span class="wpcom_tag_link"><a href="https://www.chuangxiangniao.com/p/tag/javascript" title="javascript" target="_blank">javascript</a></span></p> <p>想了解更多关于 标签的详细内容可以点击 这里 。</p> <p><p>如果页面上的脚本类型不受支持或者当前在浏览器中关闭了脚本，则在此中定义脚本未被执行时的替代内容。</p> <p>总结</p> <p>本文到这里就结束了，其实关于 link 和 meta 标签还有很多没有介绍到，很多相关标签都是有特殊的需求，只有在特定情况下才会使用，比如移动端开发就会用许多在 PC 上并不需要的标签。</p> <p>当然平时使用也主要是看需求，就拿我目前来说，只是些许用到过一些与 viewport 和 SEO 相关的标签。</p> <p>鉴于此我推荐一个不错的学习方法，就是去各大网站查看它们的 head 标签里都有什么，遇到没见过的就去搜索一下，熟悉起来会很快。</p> <p>我这边看过的网站有：「淘宝网」、「阿里巴巴」、「京东」、「网易严选」、「起点中文网」等。</p> <p>本篇文章到这里就已经全部结束了，更多其他精彩内容可以关注PHP中文网的HTML教程视频栏目！</p> <p>

以上就是head标签中有什么属性？的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1547733.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
HTML标签伪元素绑定事件的三种方式
上一篇 2025年12月21日 19:26:04
如何使用.htaccess从URL中删除文件扩展名（.php和.html）
下一篇 2025年12月21日 19:26:16

相关推荐

  • 反转字符串绕杀软

    反转字符串绕杀软反转字符串绕杀软反转字符串绕杀软反转字符串绕杀软

    在github有一个ssi的项目，项目地址如下：https://github.com/dimopouloselias/simpleshellcodeinjector/他可以实现shellcode的远程加载(十六进制)，当然ldrakura也曾经搞过类似的项目(我偷电瓶车养你啊)，当时还是一次项目时绕…

    程序猿的头像 程序猿
    2026年10月2日 • 用户投稿
    000
  • 优化PHP框架的性能表现_通过ThinkPHP实现php框架怎么用的调优 用户投稿

    优化PHP框架的性能表现_通过ThinkPHP实现php框架怎么用的调优

    启用生产模式、配置与路由缓存、优化数据库查询、合理使用页面缓存是提升ThinkPHP性能的关键。通过关闭调试模式、生成配置缓存文件、设置数据库索引与查询缓存、开启模板及页面缓存，可显著降低资源消耗、加快响应速度，实现高效稳定的Web应用运行。 提升PHP框架的性能，关键在于减少资源消耗、加快响应速度…

    程序猿的头像 程序猿
    2026年10月2日
    400

  • 5 月上线，微软预告网页版 OneDrive 更新：AI 梳理整合各种文档

    5 月上线，微软预告网页版 OneDrive 更新：AI 梳理整合各种文档5 月上线，微软预告网页版 OneDrive 更新：AI 梳理整合各种文档5 月上线，微软预告网页版 OneDrive 更新：AI 梳理整合各种文档5 月上线，微软预告网页版 OneDrive 更新：AI 梳理整合各种文档

    根据微软近期在 microsoft 365 路线图中的更新内容，该公司计划于今年5月为microsoft 365用户提供网页版onedrive云盘服务的升级。此次更新将引入ai功能，用于自动分析、整理和归纳各类文档内容。这项功能将涵盖多种文件类型，包括但不限于doc、docx、fluid、loop、…

    程序猿的头像 程序猿
    2026年10月2日 • 用户投稿
    200

  • 搜狗浏览器如何导出书签？备份书签的简单操作方法

    搜狗浏览器如何导出书签？备份书签的简单操作方法搜狗浏览器如何导出书签？备份书签的简单操作方法搜狗浏览器如何导出书签？备份书签的简单操作方法搜狗浏览器如何导出书签？备份书签的简单操作方法

    搜狗浏览器导出书签可通过三种方式：一、点击【收藏】图标，选择【更多功能】→【导入/导出收藏】→【导出收藏到html】，保存为HTML文件；二、通过菜单【三条横线】→【收藏】→【整理书签】→点击【导出】，选择路径保存；三、进入【收藏】→【备份/还原】→【备份到本地】，自动打包为HTML文件并保存。三种…

    程序猿的头像 程序猿
    2026年10月2日 • 用户投稿
    000

  • Win10 Chromium Edge新权限：阻止不安全内容

    Win10 Chromium Edge新权限：阻止不安全内容Win10 Chromium Edge新权限：阻止不安全内容Win10 Chromium Edge新权限：阻止不安全内容Win10 Chromium Edge新权限：阻止不安全内容

    和市面上多数其他浏览器一样，基于chromium内核的microsoft edge已经内置了一些规则，用于针对我们访问的每一个网站来设定权限。当然，为了提高操作便捷性，我们也能为所有页面统一配置规则，这样就能保证网站对文件、摄像头、麦克风等资源的访问能够得到妥善处理。 近期，微软在其最新的Canar…

    程序猿的头像 程序猿
    2026年10月2日 • 用户投稿
    100
  • Symfony 5与Mercure实时通信集成：配置、启动与常见访问问题排查 用户投稿

    Symfony 5与Mercure实时通信集成：配置、启动与常见访问问题排查

    本文详细介绍了如何在Symfony 5项目中集成Mercure实时通信服务。内容涵盖Mercure Hub的安装、环境变量配置、服务器启动命令，并着重解决了初次配置时常见的Mercure Hub访问问题，强调了URL端口一致性的重要性，确保开发者能顺利构建实时应用。 Mercure实时通信服务概述 …

    程序猿的头像 程序猿
    2026年10月2日
    200

  • Js处理滚动条和日期框

    Js处理滚动条和日期框Js处理滚动条和日期框Js处理滚动条和日期框Js处理滚动条和日期框

    文章总览图 此思维导图中的语法要结合文章内容来看，切记不可死读书，要活学活用。 Js处理1.常用的元素基本操作是什么？ 四个基本操作。 1.send_keys() 2.click() 3.获取元素的文本内容。 4.获取元素的属性。 find_element_by_xpath()是我们的元素对象。 .…

    程序猿的头像 程序猿
    2026年10月2日 • 用户投稿
    200

  • 悟空浏览器如何导出收藏夹书签_悟空浏览器书签导出为HTML文件教程

    悟空浏览器如何导出收藏夹书签_悟空浏览器书签导出为HTML文件教程悟空浏览器如何导出收藏夹书签_悟空浏览器书签导出为HTML文件教程悟空浏览器如何导出收藏夹书签_悟空浏览器书签导出为HTML文件教程悟空浏览器如何导出收藏夹书签_悟空浏览器书签导出为HTML文件教程

    首先通过悟空浏览器内置功能导出书签为HTML文件，进入书签页面后点击更多选项，选择书签管理并导出为HTML格式，保存至下载目录；若无此功能可手动访问应用数据目录提取书签数据库文件，再用SQLite工具转换为HTML；也可借助第三方同步工具将书签上传云端，在其他设备或浏览器中登录同一账号后导出为HTM…

    程序猿的头像 程序猿
    2026年10月2日 • 用户投稿
    000
  • Linux文件系统tree命令使用详解 用户投稿

    Linux文件系统tree命令使用详解

    tree命令用于以树状图展示目录结构，需手动安装，支持层级限制、隐藏文件显示及输出格式定制，适用于目录分析与文档整理。 tree命令用于以树状图的形式列出目录结构，直观展示文件和子目录的层级关系。它不是Linux系统默认安装的工具，但功能强大，适合快速查看复杂目录内容。 安装tree命令 大多数Li…

    程序猿的头像 程序猿
    2026年10月2日
    200

  • Archiveofownour书签同步功能使用_Archiveofownour中文版跨设备进入

    Archiveofownour书签同步功能使用_Archiveofownour中文版跨设备进入Archiveofownour书签同步功能使用_Archiveofownour中文版跨设备进入Archiveofownour书签同步功能使用_Archiveofownour中文版跨设备进入Archiveofownour书签同步功能使用_Archiveofownour中文版跨设备进入

    Archiveofownour书签同步功能位于设置界面，支持多端实时同步。用户登录同一账号后，可在手机、电脑等设备间自动同步书签数据，通过加密传输保障隐私安全，并可点击“立即同步”手动刷新。配合浏览器插件与二维码扫码登录，实现跨设备无缝接入。 Archiveofownour书签同步功能使用指南 Ar…

    程序猿的头像 程序猿
    2026年10月2日 • 用户投稿
    200
  • JavaScript数据属性值安全转换为数字的专业指南：避免NaN的策略 用户投稿

    JavaScript数据属性值安全转换为数字的专业指南：避免NaN的策略

    本教程详细阐述了在JavaScript中如何安全地将HTML数据属性（data attributes）的值转换为数字，并确保在值无效时返回0，从而有效避免在计算中出现NaN。文章重点介绍了使用parseFloat()而非Number()进行转换，并强调了将|| 0操作符正确放置在转换函数外部的关键性…

    程序猿的头像 程序猿
    2026年10月2日
    100

  • 夸克浏览器如何禁用JavaScript_夸克浏览器禁用网页JS脚本设置步骤

    夸克浏览器如何禁用JavaScript_夸克浏览器禁用网页JS脚本设置步骤夸克浏览器如何禁用JavaScript_夸克浏览器禁用网页JS脚本设置步骤夸克浏览器如何禁用JavaScript_夸克浏览器禁用网页JS脚本设置步骤夸克浏览器如何禁用JavaScript_夸克浏览器禁用网页JS脚本设置步骤

    1、可在夸克浏览器中通过高级设置关闭JavaScript以提升隐私保护并防止恶意脚本；2、启用无痕模式可临时限制脚本运行；3、通过自定义过滤规则可屏蔽特定JS文件加载。 如果您在浏览网页时遇到页面加载异常或希望提升隐私保护，可能需要禁用JavaScript来阻止某些脚本运行。夸克浏览器提供了对JS脚…

    程序猿的头像 程序猿
    2026年10月2日 • 用户投稿
    100
  • TP中JS如何获取模板变量（示例详解） 用户投稿

    TP中JS如何获取模板变量（示例详解）

    下面thinkphp框架教程栏目将给大家介绍php框架中js优雅获取模板变量的方式，希望对需要的朋友有所帮助！ PHP框架中JS优雅获取模板变量的方式 在使用PHP框架（本文以ThinkPHP为例）进行页面开发的时候，经常遇到需要将控制器方法中的模板变量代入到页面JS内操作的情况，常见的方式如： l…

    程序猿的头像 程序猿
    2026年10月2日
    100
  • 苹果手机火狐浏览器怎么改成电脑ua标识 用户投稿

    苹果手机火狐浏览器怎么改成电脑ua标识

    什么是ua标识 ua标识，全称为用户代理（User-Agent）标识，是浏览器向网站发送请求时附带的一段字符串，用于告知服务器当前所使用的设备类型、操作系统以及浏览器版本等信息。通过修改ua标识，可以让网页误认为你正在使用电脑浏览器访问，从而加载桌面版网页内容。 更改ua标识的优势 部分网站为电脑端…

    程序猿的头像 程序猿
    2026年10月2日
    000

  • Archiveofownour收藏夹导入教程_Archiveofownour中文版历史记录同步进入

    Archiveofownour收藏夹导入教程_Archiveofownour中文版历史记录同步进入Archiveofownour收藏夹导入教程_Archiveofownour中文版历史记录同步进入Archiveofownour收藏夹导入教程_Archiveofownour中文版历史记录同步进入Archiveofownour收藏夹导入教程_Archiveofownour中文版历史记录同步进入

    Archiveofownour收藏夹导入教程在个人中心的“数据管理”中，打开平台后点击“导入收藏夹”，上传HTML格式书签文件即可完成导入；多设备同步需登录同一账户并开启“同步设置”，支持端到端加密传输；平台还具备跨设备合并、智能标签、时间轴视图、自定义过滤及离线查看等核心功能。 Archiveof…

    程序猿的头像 程序猿
    2026年10月2日 • 用户投稿
    200
  • PHP文件上传系统：如何通过外键将文件精确关联到特定用户 用户投稿

    PHP文件上传系统：如何通过外键将文件精确关联到特定用户

    本教程详细阐述如何在PHP文件上传系统中，通过引入数据库外键（user_id）将上传的QR码图片与特定用户关联。内容涵盖数据库表结构设计、前端表单改造、后端文件处理逻辑及用户专属内容展示，确保文件上传的精确归属和管理。 1. 理解核心问题与解决方案 在多用户或多角色（如员工为用户上传）的应用场景中，…

    程序猿的头像 程序猿
    2026年10月2日
    100

  • 火狐浏览器怎么查看网页源代码_火狐浏览器打开页面源代码与元素检查器方法

    火狐浏览器怎么查看网页源代码_火狐浏览器打开页面源代码与元素检查器方法火狐浏览器怎么查看网页源代码_火狐浏览器打开页面源代码与元素检查器方法火狐浏览器怎么查看网页源代码_火狐浏览器打开页面源代码与元素检查器方法火狐浏览器怎么查看网页源代码_火狐浏览器打开页面源代码与元素检查器方法

    1、通过右键“查看页面源代码”或按Ctrl+U可查看网页HTML；2、右键“检查”或按F12打开开发者工具，可定位并修改具体元素；3、使用F12快捷键启动工具后，点击选择图标可快速检视页面组件。 如果您在浏览网页时需要查看页面的底层结构或调试内容，可以通过火狐浏览器快速访问网页源代码或检查具体元素。…

    程序猿的头像 程序猿
    2026年10月2日 • 用户投稿
    100
  • 如何通过云服务器运行PHP后缀文件_远程部署PHP后缀文件的实用技巧 用户投稿

    如何通过云服务器运行PHP后缀文件_远程部署PHP后缀文件的实用技巧

    首先安装LAMP或LNMP环境，以Ubuntu为例使用apt安装Apache和PHP；接着将PHP文件上传至/var/www/html目录，可通过SFTP、scp或直接编辑方式部署；然后启动Apache服务并设置开机自启，访问服务器IP确认Web服务正常；若.php文件仅显示源码，需检查PHP是否安…

    程序猿的头像 程序猿
    2026年10月1日
    200

  • sublime如何执行html文件 sublime运行网页代码方法详解

    sublime如何执行html文件 sublime运行网页代码方法详解sublime如何执行html文件 sublime运行网页代码方法详解sublime如何执行html文件 sublime运行网页代码方法详解sublime如何执行html文件 sublime运行网页代码方法详解

    如何配置sublime text运行html文件？1.创建自定义构建系统，依次点击tools->build system->new build system…，复制代码{ “cmd”: [“open”, “-a&#8…

    程序猿的头像 程序猿
    2026年10月1日 • 用户投稿
    100
  • Symfony 5 与 Mercure 的实时通信配置指南 用户投稿

    Symfony 5 与 Mercure 的实时通信配置指南

    本文详细介绍了如何在 Symfony 5 项目中配置和使用 Mercure 实现实时通信。内容涵盖 Mercure Hub 的安装、Symfony Mercure Bundle 的集成与环境配置、服务器启动步骤，并重点解析了访问 Mercure Hub 时常见的“Not Found”错误及其解决方案…

    程序猿的头像 程序猿
    2026年10月1日
    100

发表回复

登录后才能评论
关注微信