In HTML we generally refer to the head of a page as part of the web. The head part of the content, although not displayed in the page, but it can affect the search engine on the Web page of the collection and sorting, as well as the various global settings, it is important to say.
Knowledge Point One: header information to set the base URL of the Web page
base URL is the essence of the unified set hyperlink properties, the base URL tag is </base> it has two attributes, href and _target. HREF is used to set the path to the base URL, and _target is used to set how the hyperlink is opened.
through the addition of the base URL, all the relative Web site root addresses in the page can be converted to an absolute address. When the browser browses the page, the relative Web site and directory address are appended to the base URL path via the <base> tag, which translates to an absolute address. We first create a base.htm and write the HTML code as follows:
copy code code as follows:
<html>
<head>
<title> base URL settings </title>
<base href= "<a href=" http://www.3lian.com ">http://www.3lian.com</a>" _target= "_blank"/>
</head>
<body>
</body>
</html>
through the above code to the base URL settings. The address of any hyperlink in the Base.htm page will precede it with "http://www.45it.com", which translates to an absolute address. Also, hyperlinks on the page open in a new window.
Knowledge Point Two: The Meta Information label of the head information
Meta Information label is the basic label of the header information, the Professional Web page code has a detailed set of meta information. The Meta Information label is </META>, and is a single label. Meta elements provide information that is not visible to browsing users, and is generally used to define the name of the page information, keywords, authors, and so on. Within an HTML page, a META tag is a meta content, and there can be multiple meta elements in an HTML header page.
The
Meta tag properties are divided into two types: page Description Property (name) and HTTP header information (HTTP-EQUIV).
Name Property
The
Name property is mainly used to describe the content of the Web page, for the search engine optimization, must focus on mastering. Properly set the Name property so that search engines (such as Google,baidu) find, classify, search engines will automatically find meta values to classify pages. The value of name is as follows:
<1>keywords. That is, the keyword, used to explain the Web page contains keywords and other information, so as to improve the search engine to find the probability. The value that is written in the format <meta name= "keywords" content = "keyword"/>,content property is the specific keyword set by the user. (generally can set multiple keywords, they use the English half-width comma separate, search engines are limited the number of keywords, so the keyword content to concise)
<2>description. Chinese meaning "description", used to describe the main content of the Web page, theme, etc., reasonable settings can also improve the probability of being searched by search engines. The format is <meta name= "description" content = "description of the page"/>,content property value is the content of the page that the user sets, which can hold up to 1024 characters, but the search engine displays only about the first 175 characters.
<3>author. Author, used to set the name of the site author, a more professional site is often used. Format is <meta name= "Author" content = "author name"/>
<4>generator. Builder, which is used to set the name of the Web site Editing tool, which is often used on a more professional site page. Format <meta name= "generator" content = "Web site Editing Tool name"/>
<5>robots. Robot, used to limit the way pages are searched. Search engine searching robot, along the pages of links (such as HTTP and src links), constantly retrieving data to build their own database. This meta tag can restrict some content from being detected by search engines and reduce the openness of some information. Write format for <meta name= "robots" content= "instruction combination" >. The value of this property contains 4 commands, namely, Index, NOINDEX, follow, nofollow, with 4 combinations of permutations and combinations. The index and follow combinations can also be called All,noindex and nofollow or none.
HTTP-EQUIV Properties
The value of the
http-equiv attribute is specified as follows:
<1>content-type, Content category, for setting the page's category and language character set. Write format <meta http-equiv= "Content-type" context= "text/html"; charset= "gb2312"/>,content attribute's value represents the page with HTML code output. Character set for gb2312 (Simplified Chinese), the internationalization of web site development, in order to character unification, recommended CharSet use Utf-8.
<2>refresh. Refresh, for how long to set the page to refresh themselves once, or use a period of time to automatically jump to other pages, the first format <meta http-equiv= "Refresh" context= "" "/>" 30 seconds to refresh every time, the second type of writing format <meta http-equiv= "Refresh" context= "30;url=www.google.com"/>, indicating that the page automatically jumps to the www.google.com site after 30 seconds
<3>expires, the Chinese meaning is "expiration", used to set the page expiration time. Once the page expires, the page must be called back on the server. The first format is <meta http-equiv= "expires" context= "wed,10 Mar 12:00:00 GMT"/>,content values represent the time when the page expires, and you must use the GMT time format. The second format is <meta http-equiv= "expires" context= "/>", indicating how many seconds to expire.
<4>cache-control, Cache control. Used to prohibit the invocation of a Web page in the cache, writing a format of <meta http-equiv= "Cache-control" context= "No-cache"/>,no-cache the representative does not allow caching.
<5>set-cookie, set cookies, to set how long this page cookie expires, written in the format of <meta http-equiv= "Set-cookie" context= "wed,10 Mar 2011 12:00:00 GMT "/>, which represents the time at which the cookie will be deleted.
Knowledge Point Three: The realization of the head information and CSS and JavaScript mixed
CSS is responsible for the style of HTML pages, Javescript responsible for the dynamic behavior of HTML Web pages. The most commonly used fusion method for CSS and Javescript is to write the header information section.
<1> Add CSS simply add <style type= "text/css" ></style> label pairs to the header information. The example code is as follows
The
code is as follows:
<html>
<head>
<title>css Settings </title>
<style type= "Text/css" >
CSS Specific content
</style>
</head>
<body>
</body>
</html>
<2> add JavaScript only need to add <script type= "text/javascript" ></script> label pairs to the header information. The example code is as follows:
The
code is as follows:
<html>
<head>
<title>css Settings </title>
<style type= "Text/css" >
CSS Specific content
</style>
<script type= "Text/javascript" >
JavaScript Specific content
</script>
</head>
<body>
</body>
</html>
Knowledge Point Four: Common head information function recommendation
<1> page Toggle effects, one of the special effects written in the following format:
The
code is as follows:
<meta http-equiv= "Page-enter" content= "Blendtrans (duration=0.5)"/>
The value of the
Http-equiv property is page-enter when the table enters the page when the effect is enabled, and the Http-equiv property's value is page-exit to enable the effect when it exits (leaves) the page.
The value of the
content attribute represents the type of effect, which is also called a live filter. There are many types of filters, such as Blendtrans is a very common one, the effect is fading, duration value indicates the duration of the effect (in seconds).
Another filter effect is written in the following format:
The
code is as follows:
<meta http-equiv= "Page-enter" content= "Revealtrans (duration=6)"/>
Dynamic filter Revealtrans can also be used for page entry and exit effects. Duration represents the duration of the filter effect (in seconds), transition is the filter type, indicating which effect you want to use, and the value is 0~23.
<2> Force page displayed in the current window with a separate page, you can prevent web pages from being framed by other web sites, written in the following format:
The
code is as follows:
<meta http-equiv= "Window-target" content= "_top" >
<3> page icon settings, written in the following format:
The
code is as follows:
<link rel= "shortcut Icon" href= "/myicon.ico" >
The value of the href attribute is the path to the ICO icon file, where the relative root directory path is used
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
