Menu Close

HTML元标签

学究 0 Comments
元标签是关于数据的“数据”（信息）。<meta>标签提供描述一个HTML页面的宏信息。元标签不会显示在网页，但计算机是会处理这些标签的。
元标签 meta Tags
元标签 meta Tags
元标签通常用来准确描述一个网页，包括描述、关键词、页面作者、最后修改事件等其它信息。
元标签可以在浏览器用来判断如何显示网页内容或如何重复加载页面，在搜索引擎服务用来作为索引的关键词，或被其它第三方网络服务使用。
元标签有很多种，但是只有少数是有用的。事实上，假如一个站点根本没有使用任何元标签，它也会跟使用了元标签的站点一样表现良好。不过使用元标签还是有好处的，特别是在与搜索引擎的蜘蛛交流的时候。

如何在HTML文档中加入元标签

 <meta> 标签一般放置在由 <head> 和 </head> 元素之间的头文件中。

1. HTML <head> 元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种 meta 信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

<head> 元素描述了文档的各种属性和信息，其中包括文档的标题、在 Web 中的位置以及和其他文档的关系等。

2. HTML <title> 元素

<title> 标签定义了不同文档的标题。

title 在 HTML/XHTML 文档中是必须的。

title 元素:

  • 定义了浏览器工具栏的标题
  • 当网页添加到收藏夹时，显示在收藏夹中的标题
  • 显示在搜索引擎结果页面的标题

一个简单的 HTML 文档:

<!DOCTYPE html>      

<html>        

<head>        

<title>HTML教程 </title>        

</head>                

<body>       

<p>HTML 教程 for 初学者</p>

</body>                

</html>

4. HTML keywords 关键词

您可以使用 <meta> 标签来指定与文档相关的重要关键字，搜索引擎会为网页编制索引,  同时搜索时使用这些关键字。

<!DOCTYPE html>
<html>
   
   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
   </head>
   
   <body>
      <p>Hello HTML5!</p>
   </body>
   
</html>

 

5. HTML description 文件说明

您可以使用 <meta> 标签给出关于文档的简短描述。 该描述可以被各种搜索引擎使用，同时让搜索引擎搜索网页。

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
   </head>
    
   <body>
      <p>Hello HTML5!</p>
   </body>
   
</html>

6. HTML Revision Date 文档修订日期

您可以使用 <meta> 标签给出关于文档的修订日期。各种网络浏览器可根据该信息刷新该网页。

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "2743问答网，09/09/2021" />
   </head>
    
   <body>
      <p>Hello HTML5!</p>
   </body>
    
</html>

7. HTML  刷新 （Refresh）

您可以使用 <meta> 标签给出浏览器刷新的间隔时间。下面举例显示访问者访问期间浏览器5秒钟刷新一次

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />     
      <meta http-equiv = "refresh" content = "5" />
   </head>
    
   <body>
      <p>Hello HTML5!</p>
   </body>
    
</html>

7. HTML  页面重新定向 （Redirect）

您可以使用 <meta> 标签将浏览器重新定向一个心的页面。还可以设置重新定向的时间 （本页面停留时间）.下面例子网页在五秒以后导向本站的主页。如果没有时间“5”，将立即转走。
<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />   
      <meta http-equiv = "refresh" content = "5; url = https://2743.com" />
   </head>
    
   <body>
      <p>Hello HTML5!</p>
   </body>
    
</html>

HTML <META> 标签清单：

<meta charset='UTF-8'>
<meta name='keywords' content='your, tags'>
<meta name='description' content='150 words'>
<meta name='subject' content='your website's subject'>
<meta name='copyright' content='company name'>
<meta name='language' content='ES'>
<meta name='robots' content='index,follow'>
<meta name='revised' content='Sunday, July 18th, 2010, 5:15 pm'>
<meta name='abstract' content=''>
<meta name='topic' content=''>
<meta name='summary' content=''>
<meta name='Classification' content='Business'>
<meta name='author' content='name, email@hotmail.com'>
<meta name='designer' content=''>
<meta name='reply-to' content='email@hotmail.com'>
<meta name='owner' content=''>
<meta name='url' content='http://www.websiteaddrress.com'>
<meta name='identifier-URL' content='http://www.websiteaddress.com'>
<meta name='directory' content='submission'>
<meta name='pagename' content='jQuery Tools, Tutorials and Resources - O'Reilly Media'>
<meta name='category' content=''>
<meta name='coverage' content='Worldwide'>
<meta name='distribution' content='Global'>
<meta name='rating' content='General'>
<meta name='revisit-after' content='7 days'>
<meta name='subtitle' content='This is my subtitle'>
<meta name='target' content='all'>
<meta name='HandheldFriendly' content='True'>
<meta name='MobileOptimized' content='320'>
<meta name='date' content='Sep. 27, 2010'>
<meta name='search_date' content='2010-09-27'>
<meta name='DC.title' content='Unstoppable Robot Ninja'>
<meta name='ResourceLoaderDynamicStyles' content=''>
<meta name='medium' content='blog'>
<meta name='syndication-source' content='https://mashable.com/2008/12/24/free-brand-monitoring-tools/'>
<meta name='original-source' content='https://mashable.com/2008/12/24/free-brand-monitoring-tools/'>
<meta name='verify-v1' content='dV1r/ZJJdDEI++fKJ6iDEl6o+TMNtSu0kv18ONeqM0I='>
<meta name='y_key' content='1e39c508e0d87750'>
<meta name='pageKey' content='guest-home'>
<meta itemprop='name' content='jQTouch'>
<meta http-equiv='Expires' content='0'>
<meta http-equiv='Pragma' content='no-cache'>
<meta http-equiv='Cache-Control' content='no-cache'>
<meta http-equiv='imagetoolbar' content='no'>
<meta http-equiv='x-dns-prefetch-control' content='off'>

 

READ  PHP & XML介绍，PHP XML操作方法解析

 

Related posts:

  1. HTML的元素
  2. HTML属性
  3. HTML 列表
  4. HTML 属性：autocomplete
除教程外，本网站大部分文章来自互联网，如果有内容冒犯到你，请联系我们删除！

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Leave the field below empty!

Posted in HTML 教程
Tagged , , ,

Related Posts