返回首页
当前位置: 主页 > 网络编程 > Asp实例教程 >

HTML的规范化

时间:2013-04-01 12:43来源:知行网www.zhixing123.cn 编辑:麦田守望者

良好规范的html代码是一个网站的基础,建立在这良好基础之上的是后期维护的高效快速、seo优化的轻松便捷,毕竟规范的代码蜘蛛爬起来也轻松愉悦。

html代码规范化主要从三方面入手:

  1. 可维护性
  2. 规范性
  3. 标签语义化

一、可维护性

a) 适当的回车和缩进

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

<table>

<tbody><!—这个标签一定不要省略-->

<tr>

<a href=”…..” target=”_blank”>html</a>

</tr>

<tr>

<a href=”…..” target=”_blank”>

<img src=”….” width=”96” height=”32” alt=”关键词相关图片相关” />

</a>

</tr>

</tbody>

</table>

b) 小写所有字母

html语言是不区分大小写的,但为改善可读性,规定小写所有字母(标签和属性)。

c) 适量的注释

尽量在每一个独立部分的开始和结束给出该部分的注释,让人一目了然

<!—左侧垂直导航 start-->

<!—左侧垂直导航 end-->

d) 更好的命名

友好的class和id名称,class和id紧随标签空一格

<div class=”mainNav”></div>主导航栏

<div id=“searchbar” ></div>搜索框

二、 规范性

a) 正确的标签嵌套

在我们的网站标题里面,我们使用<h1>作为网站标题标签,这是完美的。并且添加了一个到首页的链接,但错误就出在把链接放到了<h1>外面,<a>链接包围了<h1>。这种简单的嵌套错误,大多数浏览器都能良好的处理,但从技术上来说,这是不行的。

锚链接是一个内联元素,而<h1>标题是一个区块元素,区块元素不应该被放在内联元素中

<h1><a href=””>标题一</a></h1>

b) 闭合所有标签

闭合所有的标签,单标签要内部闭合的。

<a href=””></a>

<p></p>

<br/>

c) 标签内的属性

标签内的属性必须用双引号包围并且小写,属性之间空一格

<img id=”logo” src=”/logo.gif” width=”32” height=”32” alt=”蓝绫家纺logo” title=”蓝绫家纺” />

d) 把排版留给css

把字体,颜色,位置的排版留给css

字母大写 text-transform:upprease;

颜色:color:red;

三、标签语义化

a) 合理的逻辑顺序

不能出于排版的需要颠倒各部分的逻辑顺序。

例如footer应该在侧边栏sidebar下边,不能处于页面的外观该更改他们的顺序,不利于搜索引擎。

b) 使用正确的标签

段落使用<p>;

标题使用<h1>到<h6>的标签,权重依次变小,<h1>权重最大

重点关键词强调<strong> </strong>

关键词强调<b> </b> <u> </u> <i> </i>

罗列使用无序列表标签<ul><li></li></ul>

图片使用<img>标签<img id=”logo” src=”/logo.gif” width=”32” height=”32” alt=”知行网logo” title=”知行网” />

顶一下
(1)
100%
踩一下
(0)
0%
标签(Tag):html5 HTML html技巧 html实例教程 html源代码 html基础教程
------分隔线----------------------------
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片