博客园  :: 首页  :: 新随笔  :: 订阅 订阅  :: 管理

名站HTML文件结构分析

Posted on 2010-11-09 20:55  PHP-张工  阅读(3199)  评论(4)  编辑  收藏  举报

2010/11/5 各个著名网站首页HTML分析

2010-11-05 网站首页HTML纯文本资料

文本大小

对于门户网站新浪居然首页就有539KB，GOOGLE、Baidu很小，因为首页内容很少！

各大网站首页都包含了大量的JS脚本！

HTML结构及其头部

http://www.163.com/

编码为：gb2312

所有连接默认为新页面打开

使用IE7兼容模式

有两个搜索机器人标识

代码 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>网易</title> 
<base target="_blank" /> 
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信,数码,汽车,手机,财经,科技,相册" /> 
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" /> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
<meta name="robots" content="index, follow" /> 
<meta name="googlebot" content="index, follow" /> 
</head> 
<body></body>
</html>

http://www.hao123.com/

编码为：gb2312

使用简洁DOCTYPE标识

所有连接默认为新页面打开

NOODP（表示No Open Directory Project）让搜索引擎不使用这些分类目录上的信息，改成使用网站的现有信息。

代码 
<!DOCTYPE html> 
<html><!--STATUS OK--> 
<head> 
<base target="_blank"> 
<meta http-equiv="X-UA-Compatible" content="IE=7"> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<meta name="ROBOTS" content="NOODP"> 
<meta name="description" content="hao123网址之家——最专业权威的上网导航。及时收录包括音乐、视频、小说、游戏等热门分类的优秀网站，与搜索完美结合，提供最简单便捷的网上导航服务，是数千万网民的上网主页。精彩网络生活，从hao123开始。"> 
<title>hao123－－我的上网主页</title> 
</head> 
<body> 

</body> 
</html>

http://www.google.com/

编码为：UTF-8

使用简洁DOCTYPE标识

BODY上设置了好多属性

BODY  onload="document.f.q.focus();if(document.images)new Image().src='/images/srpr/nav_logo21.png'"

为设置焦点和预加载图片

很奇怪GOOGLE的HTML和BODY并没有闭合！！！

代码 
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Google</title>
</head>
<body bgcolor=#ffffff text=#000000 link=#0000cc vlink=#551a8b alink=#ff0000 onload="document.f.q.focus();if(document.images)new Image().src='/images/srpr/nav_logo21.png'" >

http://www.google.com.hk/webhp?hl=zh-CN&sourceid=cnhp

google中国同google

当浏览器是IE时，google使用<meta http-equiv="X-UA-Compatible" content="IE=8"> IE8模式

代码 
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Google</title>
</head>
<body bgcolor=#ffffff text=#000000 link=#0000cc vlink=#551a8b alink=#ff0000 onload="document.f.q.focus();if(document.images)new Image().src='/images/srpr/nav_logo14.png'" >

http://www.qq.com/

QQ与163类似

但body中  onload="document.execCommand('BackgroundImageCache',false,true)"

解决IE6背景不缓存问题

代码 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
<meta name="description" content="腾讯网(www.QQ.com)是中国浏览量最大的中文门户网站，是腾讯公司推出的集新闻信息、互动社区、娱乐产品和基础服务为一体的大型综合门户网站。腾讯网服务于全球华人用户，致力成为最具传播力和互动性，权威、主流、时尚的互联网媒体平台。通过强大的实时新闻和全面深入的信息资讯服务，为中国数以亿计的互联网用户提供富有创意的网上新生活。" /> 
<title>腾讯首页</title> 
<link rel="shortcut icon" href="http://mat1.gtimg.com/www/images/favicon.ico"/> 
<base target="_blank"> 
</head> 
<body onload="document.execCommand('BackgroundImageCache',false,true)"> 
</body> 
</html><!--[if !IE]>|xGv00|bab5808e89758563e4913863bc2e6e83<![endif]-->

http://www.baidu.com/

编码为：gb2312

baidu的结构很简洁！我明明设置了折叠，不知道为什么底下的样式不能折叠呢？

最后的<!--d6a61f289cd51e48-->不知道是什么意思！应该是什么标示吧！

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<title>百度一下，你就知道      </title>
</head> 
<body></body> 
</html><!--d6a61f289cd51e48-->

http://www.cnblogs.com/

编码为：UTF-8

博客园的结构是标准的VS生成结构！

代码 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>博客园 - 程序员的网上家园</title> 
<meta name="keywords" content="博客园,开发者,程序员,软件开发,编程,代码,极客,Developer,Programmer,Coder,Code,Coding,Greek,IT学习"/> 
<meta name="description" content="博客园是面向程序员的高品质IT技术学习社区，是程序员学习成长的地方。博客园致力于为程序员打造一个优秀的互联网平台，帮助程序员学好IT技术，更好地用技术改变世界。"/> 
<link  rel="Stylesheet" type="text/css" href="http://common.cnblogs.com/css/reset.css" /> 
<link rel="Stylesheet" type="text/css" href="/css/sitehome.css" /> 
<link id="RSSLink" title="RSS" type="application/rss+xml" rel="alternate" href="http://www.cnblogs.com/rss"/> 
<link rel="shortcut icon" href="http://www.cnblogs.com/favicon.ico"/> 
<script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> 
<script src="/script/site.js" type="text/javascript"></script> 
</head> 
<body></body>
</html>

http://www.apple.com/

编码为：UTF-8

苹果头部信息很多！

其中<link rel="home" href="http://www.apple.com/" />表示首页位置（非官方标准）

代码 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <meta http-equiv="pics-label" content='(pics-1.1 "http://www.icra.org/ratingsv02.html" l gen true for "http://www.apple.com" r (cz 1 lz 1 nz 1 oz 1 vz 1) "http://www.rsac.org/ratingsv01.html" l gen true for "http://www.apple.com" r (n 0 s 0 v 0 l 0))' /> 
    <meta name="Author" content="Apple Inc." /> 
    <meta name="viewport" content="width=1024" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
    
 
    <title>Apple</title> 
    <meta name="omni_page" content="Apple - Index" /> 
    <meta name="Keywords" content="Apple" /> 
    <meta name="Description" content="Apple designs and creates iPod and iTunes, Mac laptop and desktop computers, the OS X operating system, and the revolutionary iPhone and iPad." /> 
    <link rel="home" href="http://www.apple.com/" /> 
    <link rel="alternate" type="application/rss+xml" title="RSS" href="http://images.apple.com/main/rss/hotnews/hotnews.rss" /> 
    <link rel="index" href="http://www.apple.com/sitemap/" /> 
</head> 
<body id="home"> 
</body> 
</html>

http://www.taobao.com/

编码为：GBK <meta charset="gbk" />写法很简洁

所有连接默认为新页面打开

代码 
<!doctype html> 
<html> 
<head> 
<meta charset="gbk" /> 
<title>淘宝网 - 淘！我喜欢</title> 
<meta name="description" content="淘宝网 - 亚洲最大、最安全的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 2亿优质特价商品，同时提供担保交易(先收货后付款)、先行赔付、假一赔三、七天无理由退换货、数码免费维修等安全交易保障服务，让你全面安心享受网上购物乐趣！" /> 
<meta name="keywords" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" /> 
<link rel="search" type="application/opensearchdescription+xml" href="http://a.tbcdn.cn/plugins/opensearch/provider.xml" title="淘宝购物" /> 
<base target="_blank" /> 
</head> 
<body></body> 
</html>

http://www.microsoft.com/en/us/default.aspx

编码为：UTF-8

微软头部包含大量信息！

使用IE7兼容模式！

其中<meta id="WtCampaignId" name="DCSext.wt_linkid" 包含了大量信息！不知道是做什么用的！

代码 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
    <title>Microsoft Corporation</title>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta id="WtTarget" name="DCSext.wt_target" content="Chrome;Developer;Generic;Windows 7;zh-CN" />
    <meta id="WtSp" name="WT.sp" content="_en_us_" />
    <script type="text/javascript" src="/en/shared/core/2/js/js.ashx?s=Csp;shared"></script>
    <link rel="stylesheet" type="text/css" href="/en/shared/core/2/css/css.ashx?sc=/en/us/site.config&pc=/En/us/PageConfig/takeover/Kinect/Kinect_page.config.xml&m=cspMscomHomePageBase" />
    <link rel="stylesheet" type="text/css" href="/en/shared/core/2/css/css.ashx?sc=/en/us/site.config&amp;pc=/En/us/PageConfig/takeover/Kinect/Kinect_page.config.xml&amp;c=cspMscomHeader" />
    <script type="text/javascript" src="/en/shared/core/2/js/js.ashx?pt=cspMscomHomePage&c=cspSearchComponent;cspMedia;cspMscomMasterNavigation;cspMscomNewsBand;cspVerticalRolloverTab;cspMscomVerticalTab;cspSilverGate"></script>
    <link rel="stylesheet" type="text/css" href="/en/shared/core/2/css/css.ashx?sc=/en/us/site.config&amp;pc=/En/us/PageConfig/takeover/Kinect/Kinect_page.config.xml&amp;pt=cspMscomHomePage&amp;c=cspMscomSiteBrand;cspSearchComponent;cspMscomFeaturePanel;cspMscomMasterNavigation;cspMscomNewsBand;cspVerticalRolloverTab;cspAdControl;cspMscomVerticalTab;cspSilverGate" />
    <script type="text/javascript" src="http://i3.microsoft.com/library/svy/broker.js"> </script>
    <link rel="stylesheet" type="text/css" href="/global/En/us/RenderingAssets/takeover/Kinect/Kinect.css" />
    <meta name="SearchTitle" content="Microsoft.com" scheme="" />
    <meta name="Description" content="Get product information, support, and news from Microsoft."
        scheme="" />
    <meta name="Title" content="Microsoft.com Home Page" scheme="" />
    <meta name="Keywords" content="Microsoft, product, support, help, training, Office, Windows, software, download, trial, preview, demo,  business, security, update, free, computer, PC, server, search, download, install, news"
        scheme="" />
    <meta name="SearchDescription" content="Microsoft.com Homepage" scheme="" />
    <meta name="WT.z_gTrackExceptions" content="sg-install,sg-no-thanks,h15-group,h15-link,h15-menu,h15-groups,nbd_newsBand,smp_menu,smp_map,h15-marketing,cspSearchComponent,vt_tabPanel"
        scheme="" />
    <meta name="DCSdir.ClearVars" content="DCSext.ngn_clevel,DCS.ngn_type,WT.si_p,DCSext.ngn_lname,DCSext.ngn_spdl,DCSext.ngn_spn"
        scheme="" />
    <meta name="DCSext.wt_pt" content="HP" scheme="" />
    <link rel="stylesheet" type="text/css" href="/en/shared/core/2/css/css.ashx?sc=/en/us/site.config&amp;pc=/En/us/PageConfig/takeover/Kinect/Kinect_page.config.xml&amp;c=cspMscomFooter" />
</head>
<body class="ltr">
</body>
</html>

http://www.sina.com.cn/

编码为：gb2312

使用IE7兼容模式

代码 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<!--[30,69,1] published at 2010-11-05 11:39:41 from #150 by 2684--> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>新浪首页</title> 
<meta name="description" content="新浪网为全球用户24小时提供全面及时的中文资讯，内容覆盖国内外突发新闻事件、体坛赛事、娱乐时尚、产业资讯、实用信息等，设有新闻、体育、娱乐、财经、科技、房产、汽车等30多个内容频道，同时开设博客、视频、论坛等自由互动交流空间。" /> 
<meta name="stencil" content="PGLS000022" /> 
<meta name="publishid" content="30,69,1" /> 
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> 
<meta name="verify-v1" content="6HtwmypggdgP1NLw7NOuQBI2TW8+CfkYCoyeB8IDbn8=" /> 
</head> 
<body id="body"></body> 
</html>

总结

大部分网站都使用了IE7兼容模式（包括微软），IE真的是让人头痛！

兼容模式更多资料：http://www.cnblogs.com/Libra/archive/2009/03/24/1420731.html

doctype声明使用<!doctype html> 简洁、好记、又兼容

都会指定编码，用的多的还是UTF-8 使用淘宝的<meta charset="gbk" /> 

描述和关键字，搜索引擎本身都未设置，其他网站都详细设置了！

标准HTML结构

代码 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title>网站标题</title> 
<meta name="description" content="网站描述" /> 
<meta name="keywords" content="网站关键字" /> 
</head> 
<body></body> 
</html>