• HTML(3)HTML文档头部信息


     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4     <!--指定HTML文档的标题,注意:不要忘记结束标签里面的反斜杠“/”,否则整个页面将不会显示-->
     5     <title>博客园 - 程序员的网上家园</title>
     6     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     7     <meta name="keywords" content="博客园,开发者,程序员,软件开发,编程,代码,极客,Developer,Programmer,Coder,Code,Coding,Greek,IT学习" />
     8     <meta name="description" content="博客园是面向程序员的高品质IT技术学习社区,是程序员学习成长的地方。博客园致力于为程序员打造一个优秀的互联网平台,帮助程序员学好IT技术,更好地用技术改变世界。" />
     9     <link rel="shortcut icon" href="http://static.cnblogs.com/favicon.ico" type="image/x-icon" />
    10     <link rel="Stylesheet" type="text/css" href="http://common.cnblogs.com/css/reset.css" />
    11     <link rel="Stylesheet" type="text/css" href="http://common.cnblogs.com/blog/css/sitehome.css?id=20120616" />
    12     <link id="RSSLink" title="RSS" type="application/rss+xml" rel="alternate" href="http://www.cnblogs.com/rss" />
    13     <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script>
    14     <script src="http://common.cnblogs.com/blog/script/site.js?id=20120616" type="text/javascript"></script>
    15 </head>
    16 <body>
    17 </body>
    18 </html>

      以上代码定义了一个HTML文档,其中<head></head>标签对中间的部分为该HTML文档的头部信息,<head></head>标签对之间的内容是不会在浏览器的“文档”窗口中显示出来的。根据 HTML 标准,仅有几个标签在 HTML 的头部分是合法的,它们包括:<base>, <link>, <meta>, <title>, <style> 和 <script>。

      1. <!DOCTYPE> 标签:

      以上示例代码的第一行便是<!DOCTYPE>标签。现在互联网上所有的网页都有<!DOCTYPE>标签的定义。

      DTD(Document Type Definition)—文档类型定义, 是一套关于标记符的语法规则。doctype 声明不属于 HTML 标签(tag); 它是一条指令,告诉浏览器编写页面所用的标记的版本。在所有 HTML 文档中规定 doctype 是非常重要的,这样浏览器就能了解预期的文档类型。

      HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

      以下面这个 <!DOCTYPE> 标签为例:  

    1 <!DOCTYPE html
    2 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

      在上面的声明中,声明了文档的根元素是 html,它在公共标识符被定义为 "-//W3C//DTD XHTML 1.0 Strict//EN" 的 DTD 中进行了定义。浏览器将明白如何寻找匹配此公共标识符的 DTD。如果找不到,浏览器将使用公共标识符后面的 URL 作为寻找 DTD 的位置。

      第一种:HTML Strict DTD, 严格版本的文档类型定义。如果您需要干净的标记,免于表现层的混乱,请使用此类型。请与层叠样式表(CSS)配合使用:

    1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
    2 http://www.w3.org/TR/html4/strict.dtd">

      第二种:HTML Transitional DTD, 过度版本的文档类型定义,Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表(CSS)的浏览器以至于您不得不使用 HTML 的呈现特性时,请使用此类型:

    1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
    2 http://www.w3.org/TR/html4/loose.dtd">

      第三种:Frameset DTD ,基于框架的HTML文档类型定义。Frameset DTD 应当被用于带有框架的文档。除 frameset 元素取代了 body 元素之外,Frameset DTD 等同于 Transitional DTD:

    1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "
    2 http://www.w3.org/TR/html4/frameset.dtd">

    参考地址:http://www.w3school.com.cn/tags/tag_doctype.asp

      2.文档标题:

      在HTML文档中,文档标题用<title></title>标签对来表示。<title>标签中间的文本元素就是该页面的标题,当用户在浏览器中浏览时,该文本就会显示在用户浏览器的标题栏中了。对于标题的内容,如果是网站的主页,则可以用网站的名称来作为该页面的标题。如果是普通的页面,则多以表述该页面功能的字词作为页面的标题内容。需要注意的是,在写标题的结束标签的时候,不要忘记反斜杠“/”,否则可能导致整个页面无法显示。这是我以前犯过的一个错误,当页面写完之后在浏览器中浏览,页面是空白的,最后才发现是少了</title>中的反斜杠。

      3.<meta>标签:

      <meta> 元素可提供有关页面的元信息(meta-information),比如网站页面的编码、关键词和对网站的描述信息等内容。<meta> 标签必须位于文档的头部(head标签内),它是HTML文档中head区的一个辅助性标签,标签内部不包含任何内容。<meta> 标签的属性定义了与文档相关联的“名称/值”对。

      <meta>标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。比如通过name属性的keywords 和 description属性就可以设置网站关键词,对网站进行SEO优化。

      <meta>标签在HTML 与 XHTML 之间的差异 :在 HTML 中,<meta> 标签没有结束标签。 在 XHTML 中,<meta> 标签必须被正确地关闭。

      <meta name=“名字” content=“值” />  --name属性是关于网页的描述信息。
      <meta http-equiv="名字" content="值" /> --http-equiv属性用于模拟http响应头信息。  

      例如:
      a.指定网页编码:
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />  --指定网页使用utf-8编码
      或者
      <meta content="text/html; charset=gb2312" http-equiv="Content-Type"/> --指定网页使用gb2312编码
      b.刷新/重定向网页:
      <meta http-equiv="Refresh" content="3" /> 三秒钟后刷新此网页。
      <meta http-equiv="Refresh" content="3;url=http://www.cnblogs.com" />  三秒钟后重定向到content属性的url从那时所指定的新网页。
      c.设置页面缓存:
      <meta http-equiv=“Cache-Control” content=“no-cache” />  禁止浏览器缓存页面。
      d.网页关键词和页面的描述信息:
      <meta name=“keywords” content=“博客园,程序员,八卦”/> 网站关键词
      <meta name=“description” content=”博客园是最适合DotNet开发人员的技术家园”/> 描述信息
      4.<link>标签:
      <link>元素用于将外部的CSS文件引入页面,比如:
       <link rel="shortcut icon" href="http://static.cnblogs.com/favicon.ico" type="image/x-icon" />
      需要注意的是:<link>元素设置路径是使用href属性,这个需要和下面的<script>标记的src属性区分开来,我在一次面试中被考到,但当时我忘记了。必须同                要为<link>元素指定 type属性和rel属性。
      5.<script>标签:
      位于<head>标签中的<script>标签,是用来引入外部的js文件。比如:
       <script src="http://common.cnblogs.com/blog/script/site.js?id=20120616" type="text/javascript"></script> 
      该标签需要指定“src” 属性和“type”属性。
      注意:在引入外部JS文件的时候,是通过上面这种方式实现的(使用</scipt>作为结束标记),不能将它改为下面直接以反斜杠结束的形式:
       <script src="http://common.cnblogs.com/blog/script/site.js?id=20120616" type="text/javascript"/>
      这样页面就找不到所引用的JS文件了。
      此外,我们还可以在<head>标签中定义属于某一个页面自己的CSS和JS,但是现在已经为了做到标记结构和页面的样式相分离,更好的方式是将CSS和JS定义为单独的文件,然后通过<link>标签和<script>标签来引入到HTML页面。
      6.<base>标签  

      <base> 标签用于为页面上的所有链接规定默认地址(URL)或默认目标(target)。通常情况下,浏览器会从当前文档的 URL 中提取相应的元素来填写相对 URL 中的空白。使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL,而使用指定的基本 URL 来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form> 标签中的 URL。

     1 <html>
     2 <head>
     3 <base href="http://www.w3school.com.cn/i/" />
     4 <base target="_blank" />
     5 </head>
     6 <body>
     7 <img src="eg_smile.gif" /><br />
     8 <p>请注意,我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准 URL,浏览器将在如下地址寻找图片:</p>
     9 <p>"http://www.w3school.com.cn/i/eg_smile.gif"</p>
    10 <br /><br />
    11 <p><a href="http://www.w3school.com.cn">W3School</a></p>
    12 <p>请注意,链接会在新窗口中打开,即使链接中没有 target="_blank" 属性。这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。</p>
    13 </body>
    14 </html>
  • 相关阅读:
    Java Web 开发必须掌握的三个技术:Token、Cookie、Session
    $.proxy和$.extend
    手机端和网页端使用同一后台时进行会话控制
    js中使用EL表达式总结
    Durandal入门
    RequireJs入门
    阿里云Prismplayer-Web播放器的使用
    Mac系统实现git命令自动补全
    Mac系统的终端显示git当前分支
    Gulp实现css、js、图片的压缩以及css、js文件的MD5命名
  • 原文地址:https://www.cnblogs.com/sunyunh/p/2609199.html
Copyright © 2020-2023  润新知