HTML 头部元素LOGIN

HTML 头部元素

HTML <head> 元素

<head> 元素是所有头部元素的容器。在head元素标签内容中,包含<title>、<base>、<link>、<meta>、<script> 以及 <style>。除<title>标签的内容会显示外,其余的标签内容都为隐藏信息。

<title> 元素标签定义文档的标题。
<base>元素标签:为页面上的所有链接规定默认地址或默认目标(target)。
<link>元素标签定义文档与外部资源之间的关系。最常用于连接样式表。
<script>元素标签用于定义客户端脚本,如JavaScript。
<style>元素标签用于为HTML文档定义样式信息。
<meta>标签用来描述一个HTML网页文档的隐藏信息,例如作者、日期和时间、网页描述、关键词、页面刷新等。meta主要分为HTTP头标信息(http-equiv)和页面描述信息(name)。头标信息包括文档类型、字符集、语言等浏览器正确显示网页的信息及处理动作;页面描述如内容的关键字、摘要、作者和定义robots行为等,为搜索引擎索引提供信息。(一些搜索引擎会利用 meta 元素的 name 和 content 属性来索引页面。)

      <meta>所支持的属性:
                     name="" 指定特性名
                     content="" 指定特性值
                     scheme="" 命名一个解释特性值的方案
                     http-equiv="" HTTP服务器以此属性收集HTTP响应头标
                     lang="" 指定语言信息
                     dir="" 指定文本方向 

知识点一:头部信息里设置网页的基底网址

基底网址的实质是统一设置超级链接的属性,基底网址标签是</base>,它有两个属性,href和_target。href用于设置基底网址的路径,_target用于设置超级链接的打开方式。

通过基底网址的添加,页面中所有的相对网站根目录地址可转换成绝对地址。当浏览器浏览页面时,通过<base>标记将相对网站跟目录地址附加在基底网址路径的后面,从而转化成绝对地址。我们首先创建一个base.htm,编写HTML代码如下:

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

通过以上代码对基底网址的设置。Base.htm页面中的任何超级链接的地址,都将在其前面加上"http://www.php.cn",即转换为绝对地址。并且,页面中的超级链接打开方式都是打开新窗口。

知识点二:头部信息的元信息标签

元信息标签是头部信息的基本标签,专业网页代码中都对元信息有详细设置。元信息标签为</meta>,为单标签。Meta元素提供的信息对于浏览用户是不可见的,一般用于定义页面信息的名称,关键字,作者等。在HTML页面中,一个meta标签内就是一个meta内容,而在一个HTML头页面中可以有多个meta元素。

meta标签属性分两种:页面描述属性(name)和http标题信息(http-equiv)。

name属性

name属性主要用于描述网页的内容,用于对搜索引擎的优化,必须重点掌握。正确地设置name属性,以便搜索引擎(比如google,baidu)的搜索机器人查找,分类,搜索引擎一般都会自动查找meta值来给网页分类。name的取值如下:

<1>keywords。即关键字,用于说明网页所包含的关键字等信息,从而提高被搜索引擎搜索到的概率。编写格式为<meta name="keywords" content =“关键字”/>,content属性的值为用户所设置的具体关键字。(一般可设置多个关键字,他们之间用英文半角的逗号分开,搜索引擎都限制关键字的数量,所以关键字内容要简洁精练)

<2>description。中文意思为"描述",用于描述网页的主要内容、主题等,合理设置也可以提高被搜索引擎搜索到的概率。格式为<meta name="description" content =“对页面的描述”/>,content属性值为用户所设置的页面具体描述的内容,最多容纳1024个字符,但搜索引擎一边只显示约前175个字符。

<3>author。作者,用于设置网站作者的名称,比较专业的网站经常用到。格式为<meta name="author" content =“作者名称”/>

http-equiv属性

http-equiv属性的取值具体如下:

<1>content-type,内容类别,用于设置页面的类别和语言字符集。编写格式<meta http-equiv=“content-type” context=“text/html”;charset=“gb2312”/>,content属性的值代表页面采用HTML代码输出,字符集为gb2312(简体中文),国际化网站开发的话,为了字符统一,建议charset采用utf-8.

<2>refresh。刷新,用于设置多长时间内网页自己刷新一次,或者用一段时间自动跳转到其他页面,第一种编写格式<meta http-equiv=“refresh” context=“30”/>表示隔30秒刷新一次,第二种编写格式<meta http-equiv=“refresh” context=“30;url=www.google.com”/>,表示30秒后页面自动跳转到www.google.com网站

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

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

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

<2>加入JavaScript只需要在头部信息中加入<script type=“text/javascript”></script>标签对。范例代码如下:

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


下一节
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="Ståle Refsnes"> <meta charset="UTF-8"> </head> <body> <p>本文档的 meta 属性描述了该文档和它的关键词。</p> </body> </html>
提交重置代码
章节课件