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)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 19:26:04
下一篇 2025年12月21日 19:26:16

相关推荐

  • HTML标签伪元素绑定事件的三种方式

    本篇文章给大家带来的内容是关于html标签伪元素绑定事件的三种方式,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 最近项目中遇到点击一个图标执行某些操作的功能,本来很简单就能实现,但图标却是 ::after 伪元素实现的,在印象中好像不能直接对伪元素进行 dom 操作,可项目中有所…

    2025年12月21日
    000
  • 可替换元素是什么?(附示例)

    本篇文章给大家带来的内容是关于可替换元素是什么?(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 最近在群聊里偶然看到有位仁兄发了张今日头条前端面试题的截图,其中关于 HTML 的只有一题,如下: 请问什么是可替换元素和非可替换元素,它们的差异是什么?并举例说明。 前端面试…

    好文分享 2025年12月21日
    000
  • 如何在文字下面添加下划线

    在字下面加下划线的方法:首先使用word软件打开一张带有文字的文档;然后选中需要添加下划线的文本;最后点击顶部菜单栏中【u】图标或者使用快捷键【ctrl+u】即可添加下划线。 HTML页面中在文字下面添加下划线的方法 给文字添加下划线的方法有:直接使用html标签中的标签可实现下划线效果,还可以使用…

    2025年12月21日 好文分享
    000
  • 前端开发者必须知道的http协议相关知识

    htmledit_views-f57960eb32.css”/>  http(超文本传输协议)是一个基于请求与响应模式的、无状态的、应用层的协议,常基于TCP的连接方式。本文讲述的是前端开发者必须知道的http协议相关知识,做想做前端和正在做前端的小伙伴一定要知道哦。 1.概念  …

    好文分享 2025年12月21日
    000
  • 用HTML实现简单动画

    htmledit_views-f57960eb32.css”/> 看网页里动画效果很是美观 ,仔细想想要怎么完成,好像还不是那么简单的一件工程,今天小编找来一份资源,可以实现简单动画,一起来试试吧。 首先是创建一个html然后给p来完成它的样式, 给它的图片也调到合适的位置,图片设…

    2025年12月21日 好文分享
    000
  • 什么是html5技术

    HTML5技术就是继承了HTML的部分特征,同时又添加了许多新的语法特征,比如语义特性、本地存储特性、设备兼容特性、连接特性、网页多媒体特性等;此外HTML5还定义了处理非法文档的具体细节,使得所有浏览器和客户端程序能够一致地处理语法错误。 html的全称是hyper text markup lan…

    2025年12月21日
    000
  • HTML5画布如何设置字体颜色?(代码示例)

    在html5画布中我们可以使用fillstyle属性来设置文本的字体颜色,它可以接受一个颜色的代码值,比如#cc0000,也可以接受一个颜色的英文单词,比如red。下面我们就来了解一下,希望对大家有所帮助。【视频教程推荐:html教程】 首先我们需要在HTML页面中使用canvas标签创建一个画布,…

    2025年12月21日
    000
  • HTML中如何将字体加粗

    在html中要将字体加粗我们有两种方法,一种是利用b标签;另一种是利用strong标签,本篇文章我们就来介绍一下html中b标签和strong标签的用法。 b标签和strong标签虽然都是可以让字体加粗,但是实际上它们的意义并不相同,用法也有所不同,下面我们就来详细看看b标签strong标签的用法示…

    2025年12月21日
    000
  • HTML中sup标签上标字符和sub标签下标字符的使用方法介绍

    我们在学习数学的时候经常会看看比如3的平方是3²,上面的那个2就是上标,在学习化学的时候会看到h₂,下面这个2就是下标,那么我们在html中如何来实现上标和下标字符呢?本篇文章就来给大家介绍关于html中上标和下标字符的实现方法。 在HTML中我们要实现上标和下标字符需要用到sup元素和sub元素 …

    2025年12月21日 好文分享
    000
  • 如何删除内联或内联块元素之间的间隙

    删除内联或内联块元素间间隙的方法有:去掉元素标签间的空格、使用负边距、在父元素上设置字体大小为零、省略结束标签。 在页面布局时,我们经常会使用到inline元素、inline-block元素,但无可避免都会遇到一个问题,那就是这些元素之间存在间隙(如下图),会导致一些布局上的问题,那么如何删除这些元…

    2025年12月21日
    000
  • 点击HTML页面问号出现提示框(附源码)

    本篇文章给大家带来的内容是关于点击HTML页面问号出现提示框(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 本demo的功能:点击页面按钮在其边缘出现提示信息,点击页面任何一处则消失。 如下图: 1.所需插件: jquery插件; 立即学习“前端免费学习笔记(深入)”; …

    2025年12月21日
    000
  • HTML的标签如何使用

    HTML的标签是用来指定客户端脚本的,它可以帮助我们在HTML文档中放置脚本。可以在标签内嵌入脚本代码,也可以使用src属性链接外部脚本文件。本篇文章就来给大家介绍关于html中标签元素使用方法。 标签的属性 在介绍标签的使用方法前,我们要先了解一下标签的属性;标签的属性有: src属性:用来指定外…

    2025年12月21日
    000
  • html的计算机代码元素有哪些

    在html中,对用户输入,代码,程序等会使用不同的标签来显示,这些计算机代码元素分别为:元素、元素、元素、 元素、<var>元素;这些计算机代码元素支持固定的字母尺寸和间距。本篇文章就给大家介绍一下html的计算机代码元素,希望对你们有所帮助。</p><p style=…

    2025年12月21日 好文分享
    000
  • HTML和ASP之间的区别是什么

    HTML和ASP是Web编程世界中两个非常常见的语言,都可以生成Web页面的。那么它们之间存在什么差异?本篇文章就给大家介绍HTML和ASP之间的区别,让大家对HTML和ASP有一个简单的了解。 HTML HTML代表用于开发网页和特别是网页设计的超文本标记语言,是编写网页的最简单的语言。它主要是使…

    2025年12月21日
    000
  • html页面如何显示上标和下标

    在html中,可以使用标签和标签来显示文本的上标、下标。 本篇文章就来给大家介绍标签和标签,让大家对标签和标签有一个简单的了解,知道标签和标签的使用方法,希望对你们有所帮助。【视频教程推荐:HTML教程】 HTML 标签 标签是用来定义上标文本的。 立即学习“前端免费学习笔记(深入)”; 下面我们通…

    2025年12月21日 好文分享
    000
  • HTML文件路径有哪些类型

    html文件路径有两种类型,分别为:绝对文件路径和相对文件路径。 HTML文件路径是用于描述网站文件夹中文件的位置,它是在网页上用于链接外部文件的,比如:其他HTML文件(网页),图片(使用标签或background属性)、css样式表(使用标签)、JavaScript文件(使用标签)等。下面我们就…

    2025年12月21日 好文分享
    000
  • HTML 是什么

    HTML 是一个声明,它是用来指定web浏览器关于页面使用哪个HTML版本进行编写,也就是一个指示Web浏览器有关HTML页面的信息的指令。 在HTML文档中,我们经常可以看到html>标签之前都会有一个,那么是什么?有什么作用呢?下面本篇文章就给大家介绍一下HTML 是什么?希望对你们有所帮…

    2025年12月21日
    000
  • 如何在HTML中插入空格

    在前端开发中,有时候需要在页面中添加空格,那么如何添加?本篇文章就给大家介绍在html页面中插入空格的方法,希望对大家有所帮助。【相关视频教程推荐:html教程】 一、键入空格 在html页面中,我们可以通过键入“空格”键来插入空格。 例:在p.p1中键入一个空格,在p.p2中键入5个空格。注:此时…

    2025年12月21日 好文分享
    000
  • html中id属性和name属性的区别是什么

    在html中,id属性和name属性都是提供标识符,表示html元素标签的。那么它们之间有什么区别?本篇文章就给大家简单比较一下id属性和name属性,介绍id属性和name属性之间的区别是什么,希望对大家有所帮助。 html中的id属性 我们使用id属性可以标识唯一的HTML元素,可以在在URL中…

    2025年12月21日 好文分享
    000
  • html网页选择使用哪种浏览器内核渲染的方法

    html网页如何选择使用哪种浏览器内核渲染?本篇文章就给大家介绍html网页选择使用哪种浏览器内核渲染的方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。【推荐教程:html视频教程】 众所周知,国内的浏览器基本都是双内核的(ie(Trident)+webkit);而且基本默认时都…

    好文分享 2025年12月21日
    000

发表回复

登录后才能评论
关注微信