ShopEX模板制作教程之Html规范

2024-07-09 22:58:03

字体：大中小

来源：转载

供稿：网友

页面编码规范和标签规范

1、页面统一utf-8编码，如果中文不能正常显示，请用editplus打开，另存，编码选utf-8。友情提示:模板代码当中很多莫名其妙的换行都可能跟编码有关！

2、 DTD统一加<!DOCTYPE html>

3、页面中引入样式或js时，不需要加类型声明：（html5 规范）

<link rel="stylesheet" href="..." /><style>...</style><script src="..."></script><script></script>

4、所有编码均遵循 xhtml 标准，包括标签、属性、属性名全部小写，属性值用 "" (双引号)引起来，标签要闭合，非单标签要加对应的结束标记，单标签以" />"结束。提醒：IE下的页面变形很多都与标签未闭合有关系。

5、标签要按顺序合理嵌套。如：

<p><b></p></b>

须修改为：

<p><b></b></p>

6、 <div>里可以包含<p>，但是<p>里不允许包含<div>。类似的还有<ul>和<ol>里不允许包含<li>以外的标签。

7、 <li>标签必须被<ul>或<ol>包裹,<dt>和<dd>必须被<dl>包裹。

8、 <input>和<button>必须指明默认的type，form必须有默认的method，可避免在不同浏览器下产生的差异。

9、按钮用<button>而不用<input />。

10、前台不用table做布局。

11、 html功能块之间写明注释，注释亦精不亦多。如：

<!-- sample START -->

<div id="sample">		...</div>

<!-- /sample END -->

12、视情况为链接添加title，图片要添加alt及title。

13、把css调用写在头部，js尽量写在尾部。

14、不在html中混合js及event事件。

15、模仿a链接点击样式可用class="pointer"或class="lnk"，尽量少用javascript:void(0);伪协议，避免ie6出错。

16、明确指定图片的width和height。不仅对seo有用，对因各种原因无法显示图片的情况下，也能保持布局样式不变。

17、通过给元素设置自定义属性来存放与 JS 交互的数据，属性名格式为 data-xx (例如：data-lazyload-url) 。

id和class命名规范

1、 id 和 class 的命名总规则为：内容优先，表现为辅。首先根据内容来命名，比如 main-nav。如果根据内容找不到合适的命名，可以再结合表现来定，比如 skin-blue， present-tab，col-main。

2、 id 和 class 名称可采用连字结符连接与驼峰式写法相结合，i比如 recommend-presents，pictureList-item。d必须使用下划线进行连接，如product_title。class必须使用连字符进行连接，如productItem-lists。这样容易区分，同时对脚本调试有帮助。

3、 id 和 class 名称中只能出现 26 个英文字母、数字、下划线"_"和连字符"-"，任何其它字符都是不被允许使用的。

4、 id 和 class 尽量用英文单词命名。对于某些产品特色词汇，也可以使用拼音，其它任何情况下都禁止使用拼音。

5、系统级前台class名称都以 ex 开头,比如 ex-goods-detail.尽量不要超过三级。