1、推荐使用html5的文档声明
- <!DOCTYPE HTML>
2、必须申明文档的编码charset,且与文件本身编码保持一致,推荐使用UTF-8编码
- <meta charset="utf-8">
3、title 不可缺少,控制在25个字、50个字节以内。“二级栏目 - 一级栏目 - 网站名称”。
4、keywords很重要,关键词,针对SEO。
注意: 5个左右,单个8汉字以内;禁忌堆砌,与网站主题无关。
5、description网站描述,字数尽量空制在80个汉字,160个字符以内
6、采用栅格化处理,常用980栅格,1000栅格
7、书写注释,方便程序开发嵌套。注释方式:
开始注释:<!-- 注释 -->
结束注释:<!-- /注释文案 -->
允许只有开始注释
注意: 浮动的地方不要加注释,可能导致布局错位或文字的BUG。
8、img添加alt属性,增加可访问性。
- <img src="" alt="图片描述" title="图片描述">
9、带有实体名称的 ASCII 实体或特殊字符要使用实体名。
注意: 实体名称对大小写敏感。
字符 | 名称 | 实体名 |
---|---|---|
¥ | 人民币符号:元 | ¥ |
? | 版权 | © |
? | 注册商标 | ® |
? | 商标TM | ™ |
· | 间隔符号 | · |
" | 双引号 | " |
& | &符 | & |
< | 左尖括号(小于号) | < |
> | 右尖括号(大于号) | > |
半角空格 | | |
× | 乘号 | × |
÷ | 除号 | ÷ |
10、标签一定要正确嵌套,标签一定要闭合。
11、用div等标签布局;表格型数据,table首选。
12、代码风格采用树形结构,提高可读性;避免冗余嵌套。
13、模块之间必须保持独立,区块化布局,方便随意增删改,多人协作维护。
下面给出html模版:
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
- <title>网站标题,控制在25个字、50个字节以内</title>
- <meta name="keywords" content="关键词,5个左右,单个8汉字以内">
- <meta name="description" content="网站描述,字数尽量空制在80个汉字,160个字符以内!">
- <!--[if lt IE 9]>
- <script type="text/javascript" src="plug/html5.js"></script>
- <![endif]-->
- <link href="templates/lfsp/css/lfsp.css" rel="stylesheet" type="text/css" />
- <link href="templates/lfsp/css/style.css" rel="stylesheet" type="text/css" /><!--自己的样式-->
- <!--[if IE 6]>
- <script type="text/javascript" src="plug/DD_belatedPNG_0.0.8a-min.js" ></script>
- <script>DD_belatedPNG.fix(‘.pngfix,.icon‘);</script>
- <![endif]-->
- </head>
- <body>
- <header>网站头部</header>
- <div>内容部分</div>
- <footer>页脚</footer>
- <script type="text/javascript" src="plug/jquery.min.js"></script>
- <script type="text/javascript" src="templates/lfsp/lfsp.js"></script>
- </body>
- </html>