html头部转码


学习html是件比较容易的事情，但单单学html语言肯定是不够用的，所以大多数人并没有拿html作为学习核心，而是将html作为javascript、动态语言或者css学习的必经之路。于是很多人并不关注一些其他的html标签。主流书籍大多对此也是一掠而过，我倒更认为，是书本的作者本身对此一知半解，受惑于此，最近幸运看到关于这部分古老标签的介绍，想在这里写一下。所谓知其然当知其所以然，html已经有十几年历史了，现行html语法中很多是以前的老知识，于是一些以前对html有研究的觉得这不必说，重点是这些标签可移植性好，所以一些典型代码被作为副本广为传抄，以至于能做网站的人不必去了解这些。本文列举这些只为深究，如上所述，实际用到这里谈到的知识的不多，但是如果你真的不幸被这些因素绊倒，很难知道html到底出现了什么问题。可以去问问从事3年以内网络的人员，也许他们那会儿学html的时候，前辈们也不讲这些。

1、<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这是一个典型被广泛传抄而不被理解的代码，因为Dreamwear设计html时会自动帮你设计好这些代码，所以确实不需要去理解，正常情况它不会困扰到你。

这代码由来是DTD标准，DTD标准可以理解成一种语法，这种语法规定了标签嵌套的规则，不同的DTD文件说明不同的标准DTD。比如有的DTD可以承认<baidu>百度</baidu>这种标签，但html专用的DTD文件（如：http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd）写的标准不能识别<baidu></baidu>这种标签，xml文件和html文件一样由DTD文件指定规则。xml是一种只负责信息内容的文件，DTD负责信息的结构，xml可以用指定的DTD文件校正，保证xml不会乱来，这和html文件linkcss有点相似。xml和css结合可以呈现网页，css单纯通过xml个性标签来识别，xml标签<A>对应css中A:{} 。而html一般能特别指定样式，标签style、class、ID属性等，但css中的p：{}这种通用标签属性写法也是从xmll+css标准传承下来的。因为html由W3C指定的有限的几个DTD文件限定，所以成为html，但xml可以由任何自写的DTD文件限定信息结构，所以可以简单认为html是xml的特例，但目前html已经不仅仅是xml延续这么简单了，增加了很多东西，但是html中看到了xml的影子，因为XML更贴近DTD。

理解这一点，以下是这段代码意思：

<!DOCTYPE        这是xml指定DTD文件的语法标签，就像html链接外部css用到的<link 标签一样，但<!DOCTYPE属于xml解释器

                           的内置规则（类似C语言编译器内置C语言语法），而<link 是用DTD文件指定的规则，这个两个还是不一样的

html                      这个是指定当前文件最外层标签，xml里面叫root（根）标签，如果是xml中用<!DOCTYPE 指定DTD，这可以指定为

                            任何字符串，只要对应当前xml文件的root标签，否则就是不合法的xml文件，就像不合法的C程序一样，解释器也会报错。

PUBLIC               说明指定的DTD文件是公共文件，相对私有文件来说的，也就是后面的url是任何人都可以访问的，比如可以是SYSTEM。

 "-//W3C//DTD XHTML 1.0 Transitional//EN"             指定本html文件使用的DTD的版本号，这个部分只是针对html才有的。

                                                                                 W3C指的是出品的单位

                                                                                 DTD XHTML 1.0 是指定版本号，其他还有html 4.01等

                                                                                 Transitional这里是过渡型版本，一般分Strict(严格)、Transitional、Frameset(框架)

                                                                                 EN  应该是English的缩写，没有具体查实

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   指定DTD文件位置，在xml中还可以是相对路径、绝对路径

2、<meta name="keywords" content="世界，奥运" /> <meta name="description" content="中国奥运会，世界瞩目." />

相信了解SEO（Search Engine Optimization搜索引擎优化）的人对此并不陌生，这行代码主要是为google、百度这类搜索引擎写的，keywords是关键字，如果用户使用搜索引擎搜索你在这里列举的关键字（如奥运），搜索引擎就会将你的网页和没有奥运关键字的网页区别开，你的网页会优先显示，也就是排名较高。keywords使用，或|分隔开。同时description是指网页描述，出现在搜索引擎结果的小字部分（大字部分是你的title标签内的文字）。cms系统、博客管理等系统中提供的“关键字”编辑以及“描述”编辑（cms中多见）就是这个道理，这部分文件分别通过php类动态语言输出到对应文章页面的这行代码中。

友情提示：由于keyword被大量SEO初学者滥用（因为keywords没有长度和个数限制），所以优秀的搜索引擎必须足够聪明（比如google），有时候会忽视keywords的这行代码，而直接通过html内容检索来分析你的关键词，比如加粗变色字体等，加上各个因素（包括title、keywords、description）综合分析出最重要几个真实关键词，而不是任由你在keywords里面说多少就是多少个。所以现在这部分对SEO意义也不是很大，但专业的SEO肯定是需要注意这一点的。

3、<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

指定字符集，这不用说，吃过亏的网络工作者必定深有体会，一个网站一开始的字符集就必须确定，否则到后面会非常麻烦，gb2312针对中国用户，如果你的网站未来肯定不会指望给国外用户访问，选择gb2312有轻量的优点。但推荐UTF-8，因为数据库一般都建议utf-8，所以网页最好也统一用Utf-8，UTF-8是国际可以通用的字符集，未来如果用外部工具处理网站数据会遇到更少麻烦。text/html是MEMI类型，告诉浏览器解析成文本类的html类型，如果是图片或者zip，这个MEMI类型会修改。典型应用是在php的GD库处理图像时，输入之前必须指定这是个图像，否则就会按默认text/html类型变成乱码显示出来。php处理文件的下载会用到，发送一个Content-Type值告诉浏览器这是一个下载文件，浏览器就会弹框。比如提供一个未打包php文件给用户下载，正常情况，点击php文件就会在服务器上执行php，只用通过先发送下载文件的MEMI类型给浏览器才能正常下载。

4、<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

先放个位置，对这个我个人也不是很了解，多数网站会添加这个，先挖个坑吧，以后明白了再补

5、<meta http-equiv="refresh" content="3">

以上设置能让html页面自动每3秒刷新一次，可以修改3为其他秒数，这个功能并不常见，没有什么应用价值，有的浏览器会默认禁用该功能，使代码失效。一个扩展的写法是<meta http-equiv="refresh" content="3:url=http://www.baidu.com"> ，表示在本页面停留3秒后转到百度网址，由于这些功能可能被SEO用来做“黑帽子”，该功能受部分浏览器和搜索引擎抵制。

6、<meta http-equiv="expires" content="0"> 

禁止浏览器缓存本页面，浏览器默认是会缓存html文件的，如果修改0为其他正数X，表示缓存过X秒后失效，在X秒内是缓存，过X秒之后就必须像服务器重现请求网页。

7、<meta http-equiv="Winows-Tagrget" content="_top"> 

(禁用被引用)一些其他网站可能使用动态语言或者框架将本页面置入自己的页面，可以利用本页面为自己页面增加访问量，本页面不允许被这么做，浏览器如果看到这行代码，就会把本页面升为最顶层，占满整个浏览器，而不是沦为别人页面的一部分。

8、<meta http-equiv="Page-Enter" content="revealTrans(Transition=22，Duration=1.000)">
<meta http-equiv="Page-Exit" content="revealTrans(Transition=2，Duration=1.000)"> 

这个功能很少为人所知，该功能能够实现类似ppt中页面过渡效果，Page-Enter是指进入本页面时的动态效果，Page-Exit反之。代号选择特效，进出特效共23种。但页面有flash会破坏效果，而且效果美观并不突出，目前并不是主流，用得比较少，正式网站基本不会见到，但不也排除现在网页设计者浮躁并不了解这个功能。

9、<base href="http://www.baidu.com" /><base target="_blank" />

这个用于规定页面中所有相对链接的基准 URL。如果有一行代码链接到图片./abc/aa.jpg，那么点击就会访问到http://www.baidu.com/abc/aa.jpg ,如果是写成<base href="http://www.google.com.hk" />，那就会访问到www.google.com.hk/abc/aa.jpg这个图片。

<base target="_blank" />用于指定本页面中打开页面的默认形式，这里修改成新的窗口打开，浏览器默认是直接打开，除非在链接上指定_blank或者浏览器使用者对浏览器有特别设置。

最后<title></title>就不多说了,而<link>标记能链接javascript、css等这些常用功能也不再赘述了。

 

以上这些就是html文件头部常见或者能见到的一些代码，帮助读者了解一些知识死角，成为优秀的程序开发员，而不是没了DW就什么都不会的网页施工者。


原文转自：http://www.cnblogs.com/exmyth/archive/2013/02/16/2913728.html

posted @ 2014-11-25 22:01  qingguoing  阅读(288)  评论(0)  编辑  收藏  举报