HTML in the <head> tag you can put what
- <Head> tag is defined for the head of the document, which is a container for all the head elements.
- <Head> tag elements can reference a script, tells the browser where to find style sheets, provide meta-information and so on.
- The vast majority of data contained in the document header will not actually appear to readers <head> as the content.
- <Head> tags inside these may contain the following <base>, <link>, <meta>, <script>, <style> and <title>.
- In the <head> element is only required <title> tag is used to define the title of the document.
Tip: Remember to always document specifies the title!
1, html the <base> tag
Definition and Usage:
<base> tag all links on the page specified default address or a default target.
Typically, the browser will extract the appropriate elements from the current URL of the document to fill in the blank ** ** relative URL.
Use labels can change that. The browser then will no longer use the current URL of the document, using the specified base URL ** ** ** to resolve all relative URL **. This includes <a>, <img>, <link >, <form> tag in a URL.
Tip: The label must be located inside the head element.
Properties:
whether the attribute value must be described
href URL specified page is all relative links ** ** reference URL.
target _blank, _parent, _self, _top , framename whether to open links in the page where
to example:
< HTML > < head > < Base the href = "http://www.w3school.com.cn/i/" /> < Base target = "_ blank" /> </ head > < body > < IMG the src = "eg_smile .gif " /> < br /> < the p- > Please note that we have an image specifies a relative address. But we in the head section provides a standard URL, the browser will eventually find pictures in the following address: </ the p- > < the p- > "http://www.w3school.com.cn/i/eg_smile.gif" </ the p- > br /> < the p- > < A href = "https://blog.csdn.net/z1324402468/article/details/85728591" > recognize objects Promise </ A > </ the p- > < the p- > Please note that the link will a new window opens, even if the link does not target = "_ blank" attribute. This is because the target attribute base element has been set to "_blank" up. </ P > </ body > </ HTML >
2, HTML <link> tag
Definition and Usage:
<Link> tag defines the relationship between a document and an external resource.
<link> tag most common use is linked style sheet.
Note: This element can only exist in the head section, but it can occur any number of times.
Properties:
whether the attribute value must be described
href URL is specified positions that are linked document.
rel alternate, author, help, icon , licence, next, pingback, prefetch, prev, search, sidebar, stylesheet, tag is defined relationship between the current document and the linked document.
type MIME_type MIME type is defined whether the linked document.
sizes heightxwidth, any size are provisions linked resources. Only for rel = "icon".
media screen, print, all, handheld whether the provisions of the linked document will be displayed on any device, used for different types of regulations for different media styles.
For example:
< HTML > < head > < Link the rel = "this stylesheet" type = "text / CSS" the href = "/ HTML / csstest1.css" > < Link the rel = "this stylesheet" type = "text / CSS" the href = "/ Example /html/demo_screen.css " /> <-! If you print this page, or open it in print preview mode, this page will be through the media =" print "format style sheet -> < Link rel =" this stylesheet " type =" text / CSS " the href =" / Example / HTML / demo_print.css " media="print" /> <!--DNS Prefetch be able to speed up resolution of a page, but not abuse, developers have pointed disable DNS prefetching can save 10 billion DNS queries per month. -> < Link the rel = "DNS-prefetch" the href = "// api.share.zhix.net" > </ head > < body > < h1 of > I to format the external style sheet. </ H1 > < the p- > Me too! </ P > </ body > </ HTML >
If you need to prohibit implicit DNS Prefetch
<meta http-equiv="x-dns-prefetch-control" content="off">
A small icon in front of the title tag definitions
< HTML > < head > <-! Cites favicon.ico picture as an icon -> < Link rel = "Shortcut icon" href = "favicon.ico" > </ head > < body > < the p- > define a title a small icon in front of the label. </ P > </ body > </ HTML >
Achieve a dynamic ico icon
<! - The following can achieve a dynamic link icon ico -> < link the rel = "icon" the href = "favicon.gif" type = "Image / GIF" >
3, html <meta> tag
Definition and Usage:
< Meta > element provides meta-information about the page (meta-information), such as for search engines and the frequency of updating the description and keywords. < Meta > tag at the head of the document does not contain any content. < Meta > tag's attributes defines the name associated with the document / value pairs.
Note: the metadata is always delivered in the form of pairs of name / value.
Properties:
attribute value must describe
content some_text meta http-equiv related information or name attribute definition.
http-equiv content-type, expires , refresh, set-cookie whether the associated content attributes to the HTTP header.
name author, description, keywords, generator , revised, others whether the content attribute to associate a name.
No scheme some_text defines a format translation of the content attribute values.
For example
1) name attribute
<-! Name attribute provides the name / value pairs of name. Under normal circumstances, we can freely use the name meaningful to the reader and the source document is. "keywords" is a name often used. It defines a set of keywords for the document. Some search engines in the face of these keywords, these keywords will be used to categorize documents. -> < meta name = "keywords" Content = "HTML, CSS, JS" > <-! This meta attribute defines the document describes -> < meta name = "the Description" Content = "HTML examples" > <! - the meta attribute defines the name of the editor -> < meta name = "Generator" Content = "Dreamweaver8.0en" > <! name="revised" content="sai,17/1/19">
Note: If no name attribute, then the name / value pair will use the name value http-equiv attribute.
2) http-equiv attribute
<-! HTTP-equiv attribute name / value pairs to provide a name. And instructs the server before sending the actual document, prior to transferring to the browser MIME document header contains the name / value pairs. When the server sends a document to the browser, it will first send a number of name / value pairs. But all servers to send at least a: content-type: text / html . This will tell the browser prepared to accept an HTML document. -> < meta HTTP-equiv = "charset" Content = "ISO-8859-1" > < meta HTTP-equiv = "the Expires" Content = "31 Dec 2008" > <-! Defined above meta causes the server sent to the browser header should contain the following information Content-of the type: text / HTML charset: ISO-8859-1 the Expires: 18 Dec 2018 -> ! <- the following defines a meta redirect, you will see within 5s redirected to the new address -> < content="5;url=https://blog.csdn.net/z1324402468/article/details/85954278" />
. 3) content attribute
content attribute provides the name / value pair. This value can be any valid string.
Always use the content property with the property and the name or http-equiv attribute.
Look at some tips page
1) completely shield Right
<! - This code shield <body> area of the right mouse button event -> < body oncontextmenu = "window.event.returnValue = false" >
2) Select the page to be copied with the cancellation prevent page
<! - This code can make the <body> area of the page can not be selected with the copy -> < body onselectstart = "return false" >
3) not allowed to be pasted page
<! - This code allows <body> area of the page can not be pasted -> < body onpaste = "return to false" >
4) prevent the page being copied
<! - This code allows <body> area of the page can not be copied -> < body oncopy, = "return to false" >
5) pages automatically refresh
<! - the following code to the <head> 5 refers to the area where once every 5 seconds to refresh the page the user can increase the click-through rate article, which is cheating. -> < Meta HTTP-equiv = "Refresh" Content = ". 5" >
6) prevent iframe people
Note: I did not take effect here verification
<! - the following code to your page is to prevent iframe. -> < Script the LANGUAGE = JAVASCRIPT > <! - IF (top.location =! Self.location) top.location = self.location; // -> </ Script>
7) when entering the web page fade effect
Note: I did not take effect here verification
<! - join this code between the head head, you'll find the link when the page is reality fade effect. Page-Exit "(to leave the page)," Site-Enter "(to enter the site)," Site-Exit "(to leave the site) where" Duration = 3.0 "can be set for each period of time is how long (in seconds). - -> < Meta HTTP-equiv = "Page-the Exit" ; Content = "blendTrans (the Duration = 3.0)" >