网页书写代码规范和SEO注意事项

最新推荐文章于 2022-09-02 10:42:04 发布

Raymon-LS

最新推荐文章于 2022-09-02 10:42:04 发布

阅读量1.4k

点赞数 2

分类专栏： SEO 文章标签： SEO

SEO 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、网站代码的主体结构布局：

01、<!–页面注释解–> 
02、<html> 
03、<head> 
04、<title>网页标题</title> 
05、<meta http-equiv="Content-Type" content="text/html"; charset="GB2312">
06、<meta http-equiv="Content-type" content="text/html"; charset="utf-8"> (英文版,一定要用这个国际码) 
07、<meta name="keywords" content="关键词"> 
08、<meta name="description" content="网站描述"> 
09、<link href="style/css.css" type="text/css" rel="stylesheet">
10、<script type="text/javascript" src="../javascript.js"></script> 
11、</head> 
12、<body>
13、<table>
14、<div>
15、<h1>页面内容标题</h1>
16、<h2>页面相关性标题</h2>
17、<h3>标题系列</h3>
18、<h4>标题系列</h4>
19、<h5>标题系列</h5>
20、<h6>标题系列</h6>
21、<img src="xxx.jpg" alt="图片说明">
22、<a href="/" title=“链接说明”>链接词</a>
23、<strong>重点关键词强调</strong>
24、<b>关键词强调</b><u>关键词强调</u><i>关键词强调</i>
25、</div>
26、<div>
27、版权部分关键词强调
28、</div>
29、</table>
30、</body>
31、</html>

二、有利于优化的代码使用说明：

<!--这个标签是用来做HTML代码注解的，一般使用<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">即可！-->

2. 标记

HTML 对大小写不敏感，但XHTML对大小写敏感，为改善可读性，规定所有标志、属性、属性值外必须加引号，且一律用小写，如：

<table border="0" cellspacing="0" cellpadding="0" align="left">

 <title>页面标题</title>

很重要，这个标签是在搜索引擎当中排名能否靠前的重点，而且这个重点绝对不容忽视。在此不得堆关键字，保持主要词在这里出现三次就行，而且关键字在标题中越靠前越好。

4. META标记

所有中文页面，必须在<head> … </head>头中加入如下META标记：

<meta http-equiv="content-type" content="text/html; charset=GB2312">

该META标记描述本页使用的语言。浏览器根据此项，就可以选择正确的语言编码，而不需要读者自己在浏览器里选择。

5. 在首页和各频道首页应加入如下META标记：

<meta name="keywords" content="关键字">  <meta name="description" content="网站描述">

虽然这两个标签现在的权重不高，但还需认真对待，关键字不易过多，少于3个，尽量不要重复；描述内容越具体越好，有可能在索引的时候出现这个标签中的内容，有利于浏览者了解网站功能。

6. 对于页面的布局，首先根据设计效果图进行分析，把握主体结构，用<table>…</table>架构主体框架，用CSS处理细节问题，实现div+table+css的结合，这样有利用各个浏览器的兼容和优化。

<h1>页面内容标题</h1>

这个标签是一个页面在body中最重要的标签，也是搜索引擎定位这个页面的主要依据，必须有标准的关键字出现在这里，但此标签不易在页面中过多引用，最好一个，以达到明确说明的目的；

<h1>…</h1>和<h2>…</h2>

道理一样，若是没有前者它所代表的含义和使用h1标签一样，要是有h1标签在此做几个长尾关键词可以为页面带来可观的流量；后面<h3>--<h6>重要性是依次递减的，在一个页面的权重越来越低,需要对其进行合理安排；

<img src="xxx.jpg" alt="图片说明”>

需要对图片进行说明，alt标记做的好，可以增加的图片匹配度，让搜索引擎知道这张图片是关于什么的，这样有利于在图片搜索的结果里显示排名更前面一点；

9. <a href="/" title="链接说明">链接词</a>；这是链接说明，对于”链接”词最好写成自己的关键词，若是不能写，需在链接说明里出现关键词，这是SEO的重点！

10.<strong>重点关键词强调</strong>这个标签的重要性仅次于<h1>，它比<b>、<u>、<i>等标签要权重高，但不宜出现太多，多了没有重点，相当于没做。需要强调的相对不重要的词用<b>、<u>、<i>等标签；

11.版权部分关键词强调，可以使关键词的布局更加合理，这不止是一种手法，而且其所在页面中权重越来越高；

12. 对于<table><tr><td>…</td></tr></table>各属性标签注意闭合；

13. 关于代码优化主要解决的问题就是页面浏览速度和适应性的问题。

文字和图片是构成页面的两个主要因素，所以我们的优化也要从文字和图片开始。文字我们在制作页面的时候基本上都是定义好的一般使用宋体和12px，随着代码的标准化字体的样式大小等等的指定应该使用css样式表来完成，而现在被广泛应用的< h1 >< /h1 >、< font size="××" color="××" >< /font >等等标签都是不标准的，也会慢慢被css取代，现在很多大型的网站包括各个门户网站像是这样不标准的问题还是广泛存在几乎每个页面都会有，所以css样式表是我们在优化过程中应该注意检查的问题；

图片问题主要存在size过大的问题，网页中一般应用两种格式的图片jpeg和gif，这两种图片的应用很多人把握的并不是很好，jpeg适用于颜色比较多、构成比较复杂的图片（比如一些照片、渐变颜色等等），gif适用于颜色比较少、构成比较简单的图片（比如网站的logo、大的色块构成的图片等等）。gif图片尤其要注意导出的时候选择颜色数目这样也会达到很好的减小尺寸的效果。对于一些比较大的图片我们还可以将它切割成比较小的图片进行拼接这样也可以提高网页的下载速度。还应该注意的是在使用dreamweaver制作网页的时候经常会出现很多垃圾代码，注意检查删除一些没有用的代码。

网页的适应性就是在不同系统、不同浏览器和不同分辨率的适应能力。要注意的是分辨率，应该最低照顾到800×600的用户（分辨率800×600的显示尺寸780×428、分辨率1024×768的显示尺寸1007×600），所以800的分辨率一般设定780左右；1024的设定990左右，一定不要让用户横向拖页面。

三、样式表写法规范：

1. 代码顺序的排列：

重定义的最先，伪类其次，自定义最后，便于自己和他人阅读！

2. 适当的缩进：

在书写代码的时候，缩进并不影响网页外观，但使用适当的缩进能使代码更具可读性，标准的缩进方法是当你开始一个新的元素时缩进一个Tab位（或几个空格）。另外，记得，关闭元素的标签与开始标签对齐。

3. 使用外部CSS:

一般情况不应该把样式放在head部分，要使用外部样式，养成良好习惯；

4. 正确的标签嵌套：

在网站标题当中，我们使用HEAD作为网站标题标签，有的时候需要加上链接，应写成：<h1><a href=“ “></a></h1>,链接应在<h1>…</h1>里面，锚链接是一个内联元素，而<h1>…</h1>标题是一个区块元素，区块元素不应该被放在内联元素中。

5. 去除不必要的DIV：

如果遇到两个同是块元素，如：（<div>和<ul>），我们没必要用<div>再包裹<ul>元素，对于没有必要的DIV可以去除。这样有利于调试和编辑；

7. 在创建CSS样式时，应当保持随手注释的习惯。一般情况使用/* 注释内容 */在每一版块的结尾需要添加注释,方便代码浏览和修改；在使用<HTML>标签时用<!—注释内容-->进行注释；

不要在注释内容中使用：“–”
   “–”只能发生在XHTML注释的开头和结束，也就是说，在内容中它们不再有效。例如下面的代码是无效的：
   <!–这里是注释———–这里是注释–>
   用等号或者空格替换内部的虚线。
   <!–这里是注释============这里是注释–>
   以上这些规范有的看上去比较奇怪，但这一切都是为了使我们的代码有一个统一、唯一的标准，便于以后的数据再利用。

四、表格嵌套注意事项：

首先，网页的排版嵌套有时会很复杂，在外部需要一个表格来控制总体布局，如果内部排版的细节也通过总表格来实现，容易引起行高列宽等的冲突，给表格的制作带来困难。
其次，浏览器在解析网页的时候，是将整个网页的结构下载完毕之后才显示表格，如果不使用嵌套，表格非常复杂，浏览者要等待很长时间才能看到网页内容。引入嵌套表格，由总表格负责整体排版，由嵌套的表格负责各个子栏目的排版，并插入到总表格的相应位置中，各司其职，互不冲突。
因此我们要尽量减少表格层次，尽量避免将一些小的表格嵌套在大的表格中间。

五、关于样式命名规范：
（一）命名全部使用小写字母，如果需要多个单词，单词间使用“-”分隔，比如content-title.
（二）对于一个网站样式表的命名，没有很标准的一个规则，我们为了方便其他人浏览和修改，定义了以下主要命名项的规则：
1. div+css命名规范

    页头:header
   登录条:loginBar
   标志:logo
   侧栏:sideBar
   广告:banner
  导航:nav
  子导航:subNav
   菜单:menu
   子菜单:subMenu
   搜索:search
  滚动:scroll
  页面主体:main
   内容:content
   标签页:tab
   文章列表:list
   提示信息:msg
   小技巧:tips
   栏目标题:title
   友情链接:friendLink
   页脚:footer
  加入:joinus
   指南:guild
  服务:service
   热点:hot
   新闻:news
   下载:download
   注册:regsiter
   状态:status
   按钮:btn
   投票:vote
   合作伙伴:partner
   版权:copyRight产品管理

2. CSS的Id命名规范

外套:wrap
   主导航:mainNav00
   子导航:subnav
   页脚:footer
   整个页面:content
   页眉:header
   页脚:footer
   商标:label
   标题:title
   主导航:mainNav(globalNav)
   顶导航:topnav
   边导航:sidebar
   左导航:leftsideBar
   右导航:rightsideBar
   旗志:logo
   标语:banner
   菜单内容1:menu1Content
   菜单容量:menuContainer
   子菜单:submenu
   边导航图标:sidebarIcon
   注释:note
   面包屑:breadCrumb(即页面所处位置导航提示)
   容器:container
   内容:content
   搜索:search
   登陆:login
   功能区:shop(如购物车，收银台)
   当前的：current

3. css样式文件命名

首页：index.css
   主要的：master.css
   布局版面：layout.css
   专栏：columns.css
   文字：font.css
   打印样式：print.css
   主题：themes.css
   通用：basic.css

六、网站公共部分：
每个网站，不管是首页还是其子页面，他们之间都会有相同的部分，为了有利于代码简洁规整、操作方便和代码优化的考虑，我们需要对其定义一种通用公共部分，一般公用的样式表放在一个CSS里,其余的一个模块一个CSS. 链接公用，进行分类，新建统一目录用Public来命名，把所需公共部分内容放在此目录当中，这样不易混淆，以方便引用和查看！

七、关于脚本语言的调用：

（一）脚本语言(JavaScript)的放置位置：
1.在head中的脚本
　　在脚本被调用、或事件被触发时，脚本就会被执行。把脚本放置到 head 部分，可以确保在需要使用脚本之前，它已经被载入了。
　2. 在body中的脚本
     在页面载入时脚本就会被执行。
   3. 在body和head部分的脚本
    可以在文档中放置任何数量的脚本，因此既可以把脚本放置到 body，又可以放置到 head 部分。
   4. 使用外部脚本语言（JavaScript）
    如果遇到需要在若干个页面中运行 JavaScript，同时不在每个页面中写相同的脚本。为了达到这个目的，可将 JavaScript 写入一个外部文件之中。然后以 .js 为后缀保存这个文件。注意：外部文件不能包含 <script> 标签。然后把 .js 文件指定给 <script> 标签中的 "src" 属性，就可以使用这个外部文件了；

(二)CSS调用
与上述同理：

1. 非特殊情况下样式文件必须外链至<head>…</head>之间;非特殊情况下JavaScript文件必须外链至页面外部;

2. 引入样式文件或JavaScript文件时, 不可略去默认类型声明, 写法如下:

<link rel="stylesheet" href="…" type="text/css" />
<style>…</style>
<script src="… " type="text/javascript"></script>

3.引入JS插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js;

八、确保html代码整体的可读性：

   1.分解样式
    在写代码之前，按页面结构或页面内容将代码分为几块并给予注释。例如，可以分别将全局样式、布局、字体样式、表单、评论和其他分为几个不同的块来继续工作。
   2.适当缩进
     为了让你的代码给人感觉更为直观，你可以使用一行来定义大纲元素的样式。当指定的选择器里的属性超过三个的时候，这种方式将带来混乱。但是，适度的使用这种方式，你可以很清楚的区分相同类的不同点。同时，样式修改的维护也是个比较麻烦的问题。很多人修改样式之后就忘记了，结果后来又发现修改的样式导致了页面出错，不得不苦苦寻找。因此，为修改的样式构建一个特殊的格式就很必要了。一种很简单的方式是，给修改过的样式缩进，同时，也可以使用一些注释（比如"@new"）来做一个标识。
    3. 建立CSS文件索引
        先简单的将内容列举出来，也不需要缩进。下面的一个例子中，如果你需要跳至RSS部分你只需要简单的搜索8.RSS。
/*------------------------------------------------------------------

[Table of contents]
1. Body
2. Header / #header
3. Navigation / #navbar
4. Content / #content
5. Left column / #leftcolumn
6. Right column / #rightcolumn
7. Sidebar / #sidebar
8. RSS / #rss
9. Search / #search
10. Boxes / .box
11. Sideblog / #sideblog
12. Advertisements / .ads
13. Footer / #footer

-------------------------------------------------------------------*/

4.特殊编码排列
为了当我们编写代码的时候，使用一些特殊的编码风格会对提高CSS代码的可读性有很大帮助。许多人都有各自不同的编码风格。一部分人习惯于将颜色和字体的代码放在前面，另外一部分则更喜欢将类似浮动和定位的更“重要”的属性放在前面。而我们将页面元素按照它在布局中的结构进行排序：

body，h1, h2, h3, p, ul, li,form {
  border: 0;
  margin: 0;
  padding: 0;
}

九、避免出现同一网站加载多个css脚本问题：
   1. 设计图必须标准，因为做网页不管是切图、还是设置网页大小、还有各个框架之间的宽度以及间隔，都需要在设计图当中体现出来；一能提升建站速度；二能更合理规划公用样式的定位；
　2．前台所做静态页面各个版块都需注释说明，方便其他人员修改和浏览；
   3. 后台对静态页面所做修改、调用、增删等操作时，也需注释说明，若出问题易于调试；
   4. 对于通用样式必须统一命名，统一引用，不得擅自修改；
   5. 前后台之间必须加强协作，对于引用冲突问题，提前通知协同解决等；

原博客地址：http://www.flcat.xyz/content/136

Raymon-LS

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
网页书写代码规范和SEO注意事项

一、网站代码的主体结构布局：01、<!–页面注释解–>02、<html>03、<head>04、<title>网页标题</title>05、<metahttp-equiv="Content-Type"content="text/html";charset="GB2312">06、<me...
复制链接

扫一扫