关于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 target="_blank" href="https://blog.galois21.com/privacy/Jump_ExternalUrl.php?url=http://www.baidu.com" /><base target="_blank" />

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

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

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

 

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

浏览量(2208) | 此条目发表在原百度博客文章分类目录。将固定链接加入收藏夹。

关于html头部那些你可能能用却不懂的代码》有一条回应

  1. Jacklynn Russian Federation Mozilla Firefox Windows 说:

    Walking in the prcenese of giants here. Cool thinking all around!

发表回复

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

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据