网页重构的html规范
2013-10-25 22:26
232 查看
html代码规范:
html基础设施
如我们所知不同的Doctype声明,将会触发浏览器不同的渲染模式,主要分为遵循W3C规范的标准模式和怪异模式。而因为html5的流行,我们不需要去管因为遗留下原因的不同dtd,主需要统一的在文件的顶格开始声明”<!DOCTYPEhtml>”。
必须申明文档的编码charset,且与文件本身编码保持一致,推荐使用UTF-8编码。
根据页面内容和需求填写适当的keywords和description。
页面title是极为重要的不可缺少的一项。
对于兼容性的处理可以考虑使用IE注释法加上class锚点
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>页面标题</title> <meta name="keywords" content=""/> <meta name="description" content=""/> <meta name="viewport" content="width=device-width"/> <link rel="stylesheet" href="css/style.css"/> <link rel="shortcut icon" href="img/favicon.ico"/> <link rel="apple-touch-icon" href="img/touchicon.png"/> </head> <body> </body> </html>
结构、表现、行为三者分离,避免内联
使用link将css文件引入,并置于head中。使用script将js文件引入,并置于body底部。
保持良好的简洁的树形结构
1) 每一个块级元素都另起一行,每一行都使用Tab缩进对齐(head和body的子元素不需要缩进)。删除冗余的行尾的空格。2) 使用4个空格代替1个Tab(大多数编辑器中可设置)。
3) 你也可以在大的模块之间用空行隔开,使模块更清晰。
4) 模块首尾使用注释标示
<body> <!--S 侧栏内容区 --> <div class="m-side"> <div class="side"> <div class="sidein"> <!-- 热门标签 --> <div class="sideblk"> <div class="m-hd3"><h3 class="tit">热门标签</h3> </div> ... </div> <!-- 最热TOP5 --> <div class="sideblk"> <div class="m-hd3"><h3 class="tit">最热TOP5</h3> <a href="#" class="s-fc02 f-fr">更多»</a></div> ... </div> </div> </div> </div> <!--E 侧栏内容区 --> </body>
另外,请做到以下几点
结构上如果可以并列书写,就不要嵌套。如果可以写成<div></div><div></div>那么就不要写成<div><div></div></div>
如果结构已经可以满足视觉和语义的要求,那么就不要有额外的冗余的结构。
比如<div><h2></h2></div>已经能满足要求,那么就不要再写成<div><div><h2></h2></div></div>
一个标签上引用的className不要过多,越少越好。
比如不要出现这种情况:<div class=”class1 class2 class3 class4”></div>
对于一个语义化的内部标签,应尽量避免使用className。
比如在这样一个列表中,li标签中的itm应去除:<ul class=”m-help”><li class=”itm”></li><li class=”itm”></li></ul>
严格的嵌套
尽可能以最严格的xhtml strict标准来嵌套,比如内联元素不能包含块级元素等等。 + 正确闭合标签且必须闭合。
严格的属性
1) 属性和值全部小写,每个属性都必须有一个值,每个值必须加双引号。2) 没有值的属性必须使用自己的名称做为值(checked、disabled、readonly、selected等等)。
3) 可以省略style标签和script标签的type属性。
内容类型决定使用的语义标签
在网页中某种类型的内容必定需要某种特定的HTML标签来承载,也就是我们常常提到的根据你的内容语义化HTML结构。
加强“资源型”内容的可访问性和可用性
在资源型的内容上加入描述文案,比如给img添加alt属性,在audio内加入文案和链接等等。
加强“不可见”内容的可访问性
背景图上的文字应该同时写在html中,并使用css使其不可见,有利于搜索引擎抓取你的内容,也可以在css失效的情况下看到内容。
适当使用实体
以实体代替与HTML语法相同的字符,避免浏览解析错误。常用HTML字符实体(建议使用实体):
字符 | 名称 | 实体名 | 实体数 |
---|---|---|---|
" | 双引号 | " | " |
& | &符 | & | & |
< | 左尖括号(小于号) | < | < |
> | 右尖括号(大于号) | > | > |
空格 |
字符 | 名称 | 实体名 | 实体数 |
---|---|---|---|
¥ | 元 | ¥ | ¥ |
¦ | 断竖线 | ¦ | ¦ |
© | 版权 | © | © |
® | 注册商标R | ® | ® |
™ | 商标TM | ™ | ™ |
· | 间隔符 | · | · |
« | 左双尖括号 | « | « |
» | 右双尖括号 | » | » |
° | 度 | ° | ° |
× | 乘 | × | × |
÷ | 除 | ÷ | ÷ |
‰ | 千分比 | ‰ | ‰ |
相关文章推荐
- 关于12306.cn网页设计重构有感
- 网页重构应该避免的10大 CSS 糟糕用法
- 从微博的改版谈网页重构——bigpipe中的页面构建优化
- 网页重构中区分IE6、IE7、IE8及标准浏览器的最佳方法
- 从微博的改版谈网页重构——bigpipe中的页面构建优化
- 重构技巧一:解说css3 @media实现网页自适应
- Android开发--身高体重指数(BIM)计算--查看线上内容(Uri)--打开网页--重构--使用Uri查看Google地图
- 无废话网页重构系列——(8)重构难点:语义和命名
- 从微博的改版谈网页重构
- JS一般般的网页重构可以使用Node.js做些什么(转)
- 从微博的改版谈网页重构——bigpipe中的页面构建优化
- 用Div+CSS重构网页
- 网页重构步骤
- 网页重构中区分IE6、IE7、IE8及标准浏览器的最佳方法
- CSS+DIV 网页重构技术
- 无废话网页重构系列——(6)HTML主干结构:站点(site)、页面(page)
- 无废话网页重构系列——(9)习惯:书写顺序
- CSS+DIV网页重构比TABLE的优势
- 网站重构经验之谈:解读Div+CSS网页制作误区
- 经验分享:网页设计与重构那些事儿【基础篇】