Detailed description of HTML web page header code examples-HTML Tutorial-php.cn

Detailed description of HTML web page header code examples

高洛峰

Release： 2017-03-09 16:15:03

Original

3219 people have browsed it

In HTML we generally call this part the head of the web page. Although the content in the header will not be displayed on the page, it can affect the inclusion and sorting of web pages by search engines, as well as various global settings of web pages, which can be said to be crucial

Knowledge point 1: Setting the base URL of the web page in the header information

The essence of the base URL is to uniformly set the attributes of the hyperlink. The base URL tag is , which has two attributes. href and _target. href is used to set the path of the base URL, and _target is used to set the opening method of the hyperlink.

By adding the base URL, all relative website root addresses in the page can be converted into absolute addresses. When the browser browses the page, the relative website and directory address are appended to the back of the base URL path through the tag, thereby converting it into an absolute address. We first create a base.htm and write the HTML code as follows:

The code is as follows:

<html> 
<head> 
<title>基底网址的设置</title> 
<base href="<a href="http://www.php.cn">http://www.php.cn/;/a>" _target="_blank" /> 
</head> 
<body> 
</body> 
</html>

Copy after login

The base URL is set through the above code. The address of any hyperlink in the Base.htm page will have "http://www.jb51.net" in front of it, which is converted to an absolute address. Moreover, the hyperlinks on the page are opened in new windows.

Knowledge point 2: Meta information tag of header information

Meta information tag is the basic tag of header information. Meta information is detailed in professional web page codes. set up. The meta information tag is , which is a single tag. The information provided by the Meta element is invisible to browsing users and is generally used to define the name, keywords, author, etc. of page information. In an HTML page, a meta tag contains a meta content, and there can be multiple meta elements in an HTML header page.

meta tag attributes are divided into two types: page description attribute (name) and http title information (http-equiv).

name attribute

The name attribute is mainly used to describe the content of the web page and is used for search engine optimization. It must be mastered. Correctly set the name attribute so that the search robots of search engines (such as Google, Baidu) can find and classify. Search engines will generally automatically find meta values to classify web pages. The value of name is as follows:

<1>keywords. That is, keywords are used to describe the keywords and other information contained in the web page, thereby increasing the probability of being searched by search engines. The writing format is , and the value of the content attribute is the specific keyword set by the user. (Generally, multiple keywords can be set, separated by English half-width commas. Search engines limit the number of keywords, so the keyword content should be concise and concise)

<2>description. It means "description" in Chinese and is used to describe the main content, theme, etc. of a web page. Reasonable settings can also increase the probability of being searched by search engines. The format is . The content attribute value is the specific description of the page set by the user. It can accommodate up to 1024 characters, but the search engine only displays about the first half of the page. 175 characters.

<3>author. Author, used to set the name of the website author, often used by more professional websites. The format is

<4>generator. Generator, used to set the name of the website editing tool, is often used on more professional website pages. Format

<5>robots. Bots, used to limit how pages are searched. The search engine's search robot continuously retrieves information and builds its own database along the links on the web page (such as http and src links). This meta tag can limit some content from being detected by search engines and reduce the disclosure of some information. The writing format is . The value of this attribute contains 4 commands, namely index, noindex, follow, and nofollow. There are 4 combinations according to the arrangement and combination. The combination of Index and follow can also be called all, and noindex and nofollow can also be called none.

http-equiv attribute

The value of the http-equiv attribute is as follows:

<1>content-type, content category, use Category and language character set for the settings page. Writing format , the value of the content attribute represents that the page is output in HTML code, and the character set is gb2312 (Simplified Chinese) , for international website development, in order to unify characters, it is recommended to use utf-8.

<2>refresh for charset. Refresh is used to set how long the webpage refreshes itself, or automatically jumps to other pages within a period of time. The first writing format means interval Refresh once every 30 seconds. The second writing format is , which means the page will automatically jump to www.google after 30 seconds. com website

<3>expires，中文意思为“到期”，用于设置页面到期时间。一旦网页过期，必须到服务器上重新调用网页。第一种编写格式为，content值代表网页过期的时间，必须使用GMT时间格式。第二种编写格式为，表示多少秒后过期。

<4>cache-control，缓存控制。用于禁止在缓存中调用网页，编写格式为，no-cache代表不允许缓存。

<5>set-cookie，设置cookie，用于设置本页面cookie多久过期，编写格式为，代表到这个时间，cookie将被删除。

知识点三：头部信息实现与CSS及JavaScript混编

CSS负责HTML网页的样式，JaveScript负责HTML网页的动态行为。CSS和JaveScript最常用的融合方式是写入头部信息部分。
<1>加入CSS只需在头部信息中加入标签对。范例代码如下

代码如下:

<html> 
<head> 
<title>CSS的设置</title> 
<style type=“text/css”> 
CSS具体内容 
</style> 
</head> 
<body> 
</body> 
</html>

Copy after login

<2>加入JavaScript只需要在头部信息中加入标签对。范例代码如下：

代码如下:

<html> 
<head> 
<title>CSS的设置</title> 
<style type=“text/css”> 
CSS具体内容 
</style> 
<script type=“text/javascript”> 
JavaScript具体内容 
</script> 
</head> 
<body> 
</body> 
</html>

Copy after login

知识点四：常用头部信息功能推荐

<1>页面切换特效，其中一种特效的编写格式如下：

代码如下:

<meta http-equiv=“page-enter” content=“blendtrans（duration=0.5）”/>

Copy after login

http-equiv属性的值为page-enter时表进入该页面时启用特效，http-equiv属性的值为page-exit时代表退出（离开）该页面时启用特效。

Content属性的值代表特效的种类，这种特效也叫动态滤镜。滤镜种类很多，比如blendtrans就是很常见得一种，效果为淡入淡出，duration值表示效果持续的时间（单位为秒）。

另一种滤镜特效编写格式如下：

代码如下:

<meta http-equiv=“page-enter” content=“revealTrans（duration=6）”/>

Copy after login

动态滤镜revealTrans也可用于页面进入与退出效果。Duration表示滤镜特效持续时间（单位为秒），Transition是滤镜类型，表示想使用哪种特效，取值为0~23。

<2>强制页面在当前窗口以独立页面显示，可以防止网页被其他网站框架，编写格式如下：

代码如下:

<meta http-equiv="window-target" content=“_top">

Copy after login

<3>页面图标设置，编写格式如下：

代码如下:

<link rel="Shortcut Icon" href="/myicon.ico">

Copy after login

href属性的值是ico图标文件的路径，这里采用的是相对根目录路径

The above is the detailed content of Detailed description of HTML web page header code examples. For more information, please follow other related articles on the PHP Chinese website!