The content of this article is about what attributes are in the head tag? It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
What's in the head tag?
In every HTML document, there is an indispensable tag:
. As a container, it mainly contains tags used to describe the information (metadata) of the HTML document itself. These tags Generally, it will not be displayed on the page. In most cases, it will be seen by browsers and search engines.
The tags that can be used in
are:
, <base> , <link> , <style> , <meta> , <script> , < noscript> . </p>
<p style="white-space: normal;">Meta information tag introduction</p>
<p style="white-space: normal;"><title></p>
<p> Defines the title of the document, which is displayed on the title bar or tab page of the browser and generally summarizes the entire web page completely. Content. </p>
<p style="white-space: normal;"><base></p>
<p> Provides a base for all relative URLs on the page. There can only be one <base> tag in a document. </p>
<p>Currently I have only observed "Taobao" using this tag. </p>
<p style="white-space: normal;"><link></p>
<p>Specifies the relationship between external resources and the current document, often in the link style sheet, as shown below: </p>
<pre class="brush:php;toolbar:false"><link rel="stylesheet" href="xxx.css" type="text/css"></pre>
<p> Of course, there are many other functions: </p>
<ol><li>For example, it is used for SEO, mainly for search engines to see: </li></ol>
<pre class="brush:php;toolbar:false"><link rel="canonical" href="..."></pre>
<p>In the website, there are often multiple URLs pointing to the same page. The above tags inform the search engines. What is the main URL of the page so that search engines can retain the main page and remove other duplicate pages. </p>
<ol><li> Provide RSS subscription: </li></ol>
<pre class="brush:php;toolbar:false"><link rel="alternate" type="application/rss+xml" title="RSS" href="..."></pre>
<p> In addition to being understandable by search engines, the above tags can also be recognized by many browser plug-ins. </p>
<ol><li>Represents the page icon: </li></ol>
<pre class="brush:php;toolbar:false"><link rel="icon" href="https://xxx.png"></pre>
<p>Most browsers will read the resource of this link and display it on the page. </p>
<ol><li>Provide preprocessing for pages: </li></ol>
<pre class="brush:php;toolbar:false"><link rel="dns-prefetch" href="//xxx.com"></pre>
<p>Do dns query for a domain name in advance. Forcing prefetching of domain names can be useful in some cases. </p>
<p>For example, on the homepage of the website, force frequently referenced domain names to be pre-resolved throughout the website, even if they are not used on the homepage itself. While the performance of the home page may not be affected, it will improve overall site performance. </p>
<p><style></p>
<p>Contains the style information of the document. </p>
<p><meta></p>
<p>A general metadata information representation tag, usually appearing as a key-value pair, such as: <meta name="xxx" content="yyy"> </p>
<p>charset attribute</p>
<pre class="brush:php;toolbar:false"><meta charset="UTF-8"></pre>
<p>Starting from HTML5, the above writing method is recommended to use to declare the character encoding used in the current document. It is recommended to put it first in <head>. </p>
<p style="white-space: normal;">http-equiv attribute</p>
<pre class="brush:php;toolbar:false"><meta http-equiv="content-type" content="text/html; charset=UTF-8"></pre>
<p>In HTML4, the above code was used to declare the character set, but it is now deprecated. </p>
<p>In addition to content-type, there are several other values: </p>
<p>content-language (obsolete), set-cookie (obsolete), default-style, refresh, content-security- policy</p>
<p>Because it is not commonly used, I will not introduce it one by one. It is also quite easy to understand. If you are interested, you can click here to learn more. </p>
<p style="white-space: normal;">name attribute</p>
<p>In fact, the <meta> tag can be freely defined, as long as the reading and writing parties agree on the format of name and content. Let’s look at an example: </p>
<pre class="brush:php;toolbar:false"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"></pre>
<p>The above usage is not in the HTML standard, but it is the de facto standard for mobile development. Here is an explanation of the content in content: </p>
<p>width: page width, which can be a positive integer; it can also be a string "device-width", which means it is equal to the device width. height: page height, which can be a positive integer; it can also be a string "device-height", which means it is equal to the device height. initial-scale: Initial scaling. minimum-scale: Minimum scaling ratio. maximum-scale: Maximum scaling ratio. user-scalable: Whether to allow user scaling. In addition to the viewport, the value of the </p>
<p>name attribute also has quite a few values: </p>
<p>application-name, author, description, generator, keywords, referrer, robots, etc. </p>
<p>Similarly, I won’t introduce them one by one. If you are interested, you can click here to learn more. </p>
<p><script></p>
<p> is used to embed or reference executable scripts. Let’s take a look at some common global attributes of script tags: </p>
<p>async</p>
<p> Causes the browser to use another thread to download the script, which will not block page rendering. When the script is downloaded, the browser will pause rendering, execute the script, and continue to render the page after execution. </p>
<p>async cannot guarantee the execution order of scripts. Whichever script is downloaded first will be executed first. </p>
<p>defer</p>
<p> will also cause the browser to download the script in parallel, but it will not be executed immediately after the download is completed. Instead, it will wait until the DOM is loaded (that is, the </html> tag has just been read) before executing the script. </p>
<p>defer ensures that the scripts are executed in the order they appear on the page. </p>
<p>src</p>
<p>Define the address that refers to an external script. There should be no embedded scripts in the script tag specifying this attribute. If the script file uses non-English characters, the character encoding should also be noted. For example: </p>
<p><script charset="utf-8" src="https://www.example.com/script.js"></script><br>type</p>
<p>The default value is text/javascript</p>
<p>If you want to know more details about the <script> tag, you can click here. </p>
<p><noscript></p>
<p>If the script type on the page is not supported or scripting is currently turned off in the browser, define here the alternative content when the script is not executed. </p>
<p>Summary</p>
<p>This article ends here. In fact, there are still many things about link and meta tags that have not been introduced. Many related tags have special needs and can only be used under specific circumstances. For example, mobile development will use many tags that are not needed on PC. </p>
<p> Of course, daily use mainly depends on the needs. For now, I have only used some tags related to viewport and SEO. </p>
<p>In view of this, I recommend a good learning method, which is to go to major websites to see what is in their head tags. If you encounter something you have never seen before, search for it, and you will become familiar with it quickly. </p>
<p>The websites I have seen here include: "Taobao", "Alibaba", "JD.com", "NetEase Selection", "Qidian Chinese Network", etc. </p>
<p>This article has ended here. For more other exciting content, you can pay attention to the <a href="//m.sbmmt.com/course/list/11.html" target="_blank">HTML Tutorial Video</a> column of the PHP Chinese website! </p>
<p></p><p>The above is the detailed content of What attributes are there in the head tag?. For more information, please follow other related articles on the PHP Chinese website!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">php</a> <a href="javascript:void(0);">JavaScript</a> <a href="javascript:void(0);">html5</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">Cookie</a> <a href="javascript:void(0);">字符串</a> <a href="javascript:void(0);">线程</a> <a href="javascript:void(0);">JS</a> <a href="javascript:void(0);">default</a> <a href="javascript:void(0);">dom</a> <a href="javascript:void(0);">样式表</a> <a href="javascript:void(0);">viewport</a> <a href="javascript:void(0);">http</a> <a href="javascript:void(0);">https</a> <a href="javascript:void(0);">搜索引擎</a> <a href="javascript:void(0);">SEO</a><div class="clear"></div></div><div class="nphpQianSheng"><span>Statement：</span><div>This article is reproduced at:segmentfault.com. If there is any infringement, please contact admin@php.cn delete</div></div></div><div class="nphpSytBox"><span>Previous article：<a class="dBlack" title="How to remove file extensions (.php and .html) from URLs using .htaccess" href="//m.sbmmt.com/m/faq/416206.html">How to remove file extensions (.php and .html) from URLs using .htaccess</a></span><span>Next article：<a class="dBlack" title="How to remove file extensions (.php and .html) from URLs using .htaccess" href="//m.sbmmt.com/m/faq/416684.html">How to remove file extensions (.php and .html) from URLs using .htaccess</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>Related articles</h2><em><a href="//m.sbmmt.com/m/article.html" class="bBlack"><i>See more</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="//m.sbmmt.com/m/faq/348757.html" title="Summary of Html knowledge" class="aBlack">Summary of Html knowledge</a><div class="clear"></div></li><li><b></b><a href="//m.sbmmt.com/m/faq/348804.html" title="How to learn HTML quickly" class="aBlack">How to learn HTML quickly</a><div class="clear"></div></li><li><b></b><a href="//m.sbmmt.com/m/faq/348873.html" title="The difference between html xhtml xml" class="aBlack">The difference between html xhtml xml</a><div class="clear"></div></li><li><b></b><a href="//m.sbmmt.com/m/faq/348884.html" title="The difference between src and href attributes" class="aBlack">The difference between src and href attributes</a><div class="clear"></div></li><li><b></b><a href="//m.sbmmt.com/m/faq/348902.html" title="About HTML5 and CSS replacement use" class="aBlack">About HTML5 and CSS replacement use</a><div class="clear"></div></li></ul></div></div><div class="nphpFoot"><div class="nphpFootBg"><ul class="nphpFootMenu"><li><a href="//m.sbmmt.com/m/"><b class="icon1"></b><p>Home</p></a></li><li><a href="//m.sbmmt.com/m/course.html"><b class="icon2"></b><p>Course</p></a></li><li><a href="//m.sbmmt.com/m/wenda.html"><b class="icon4"></b><p>Q&A</p></a></li><li><a href="//m.sbmmt.com/m/login"><b class="icon5"></b><p>My</p></a></li><div class="clear"></div></ul></div></div><div class="nphpYouBox" style="display: none;"><div class="nphpYouBg"><div class="nphpYouTitle"><span onclick="$('.nphpYouBox').hide()"></span><a href="//m.sbmmt.com/m/"></a><div class="clear"></div></div><ul class="nphpYouList"><li><a href="//m.sbmmt.com/m/"><b class="icon1"></b><span>Home</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/course.html"><b class="icon2"></b><span>Course</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/article.html"><b class="icon3"></b><span>Article</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/wenda.html"><b class="icon4"></b><span>Q&A</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/dic.html"><b class="icon6"></b><span>Dictionary</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/course/type/99.html"><b class="icon7"></b><span>Manual</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/xiazai/"><b class="icon8"></b><span>Download</span><div class="clear"></div></a></li><li><a href="//m.sbmmt.com/m/faq/zt" title="Topic"><b class="icon12"></b><span>Topic</span><div class="clear"></div></a></li><div class="clear"></div></ul></div></div><div class="nphpDing" style="display: none;"><div class="nphpDinglogo"><a href="//m.sbmmt.com/m/"></a></div><div class="nphpNavIn1"><div class="swiper-container nphpNavSwiper1"><div class="swiper-wrapper"><div class="swiper-slide"><a href="//m.sbmmt.com/m/" >Home</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/article.html" class="hover">Article</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/wenda.html" >Q&A</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/course.html" >Course</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/faq/zt" >Topic</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/xiazai" >Download</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/game" >Game</a></div><div class="swiper-slide"><a href="//m.sbmmt.com/m/dic.html" >Dictionary</a></div><div class="clear"></div></div></div><div class="langadivs" ><a href="javascript:;" class="bg4 bglanguage"></a><div class="langadiv" ><a onclick="javascript:setlang('zh-cn');" class="language course-right-orders chooselan " href="javascript:;"><span>简体中文</span><span>（ZH-CN）</span></a><a onclick="javascript:;" class="language course-right-orders chooselan chooselanguage" href="javascript:;"><span>English</span><span>（EN）</span></a><a onclick="javascript:setlang('zh-tw');" class="language course-right-orders chooselan " href="javascript:;"><span>繁体中文</span><span>（ZH-TW）</span></a><a onclick="javascript:setlang('ja');" class="language course-right-orders chooselan " href="javascript:;"><span>日本語</span><span>（JA）</span></a><a onclick="javascript:setlang('ko');" class="language course-right-orders chooselan " href="javascript:;"><span>한국어</span><span>（KO）</span></a></div></div><script> var swiper = new Swiper('.nphpNavSwiper1', {
slidesPerView : 'auto',
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true,//修改swiper的父元素时，自动初始化swiper
});
</script></div></div><!--顶部导航 end--><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>
