这章我们还是用《SEO需要会用的HTML代码都有什么》这章网站的源代码作为列子，没看过的朋友们呢可以在小编的文章里面找下，这章我本人将分析这个列子里面所有的源代码。

图片里面我们可以看到啊这是HTML标签的一个头部head，《SEO需要会的HTML代码》这章讲过DOCTYPE命名和空间，字符编码的声明TDK，下面接着讲剩下的内容，<link rel="icon" type="image/png" href="/twcms/view/default/images/ico.png">这串代码的文件路径是蓝色可以点开的，这里是这个网站的LOGO图案，<link key="resetcommon" href="/twcms/view/default/css/resetcommon.css" rel="stylesheet" type="text/css" />这个是一个css的外部样式表点开是这个网站的一个CSS样式比如字体高度宽度样式按钮页面布局都在里面可以理解为是一个CSS库图片如下：

<script type="text/javascript" key="nsw_index" src="/twcms/view/default/js/NSW_Index.js"></script>

这串代码点开是JS的事件，

// JavaScript Document function urlredirect() {var sUserAgent = navigator.userAgent.toLowerCase();if ((sUserAgent.match(/(ipod|iphone os|midp|ucweb|android|windows ce|windows mobile)/i))) {// 盛千网络的跳转var thisUrl = window.location.href;window.location.href = 'http://www.gylrshl.com/3g';urlrediurlredirect();在浏览器中，与用户进行数据交换都是通过客户端的

javascript代码来实现的，而完成这些交互工作大多数是document对象及其部件进行的，因此document对象是一个比较重要的对象。

下面是网站的顶部布局导航页如图

进入文章的body部分，<div class="t_bg"><div class="header"><div class="h_top">首先声明顶部<i>贵州科阳之星金属制品有限公司官网欢迎您！</i>如图

<a rel="nofollow" href="http://wpa..com/msgrd?v=3&uin=&site=&menu=yes" title="在线咨询" target="_blank" >在线咨询</a>

<p>|<a rel="nofollow" href="/guanyuwomen/" title="关于我们" target="_blank" >关于我们</a>

<a rel="nofollow" href="/lianxiwomen/" title="联系我们" target="_blank" >联系我们</a>

<a rel="nofollow" href="/sitemaps.xml" title="网站地图" target="_blank" >网站地图</a><p/>这串代码是对应的网站右边顶部导航栏上面的关于我们 在线咨询 联系我们 网站地图

<div class="h_con"><h1><a href="/" title="公司名字我们省略"><img src="/twcms/view/default/images/logo.jpg" alt="公司名字我们省略" title="公司名字我们省略" /></a></h1>这一行代码是网站的标题的文字和插入的LOGO标识，

<div class="h_bt fl">公司名字我们省略</div><div class="h_pho fr">刘经理咨询热线：<span>联系方式我们省略</span></div>这串代码是网站标题右边的联系方式。

div class="hot_nav"><div class="h_nav"><ul><li class="cur"><a href="http://www.gylrshl.com/" target="_blank" title="网站首页">如下图

这个导航是用的有序列表加上可跳转的a标签写的，很简单，我们跳过。

这里是设置导航的宽度，背景色的填充和跳转。

由于时间原因，小编先更到导航栏这里，剩下篇幅，后续在更，大家不见不散。