网页重构的html规范
来源:互联网 发布:淘宝店铺页头装修教程 编辑:程序博客网 时间:2024/06/07 22:59
html代码规范:
html基础设施
如我们所知不同的Doctype声明,将会触发浏览器不同的渲染模式,主要分为遵循W3C规范的标准模式和怪异模式。而因为html5的流行,我们不需要去管因为遗留下原因的不同dtd,主需要统一的在文件的顶格开始声明”<!DOCTYPE html>”。
必须申明文档的编码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™™·间隔符··«左双尖括号««»右双尖括号»»°度°°×乘××÷除÷÷‰千分比‰‰
- 网页重构的html规范
- 网页重构的css规范
- 网页重构的步骤
- Html网页页面head区规范知识
- Html网页页面head区规范知识
- Html网页页面head区规范知识
- Html网页页面head区规范知识
- 关于HTML的规范
- html中网页重定向效果
- 大家比较忽略的知识:Html网页页面head区规范知识
- 聊聊HTML静态页面编码规范和前端代码重构
- 网页重构步骤
- 网页重构笔试
- XML:网页制作的规范
- 检查网页的不规范
- MVVM代码重构规范
- API规范与重构
- 提取网页的html
- ObjectiveC - 类的声明和实现(一)
- UVA 10604 (记忆化搜索 + hash)
- 排序之四(线性时间排序)
- Excel集成工具
- 我要加油了
- 网页重构的html规范
- 【leetcode】Search for a Range
- 大神Linus Torvalds语录
- Hadoop源码分析_DatanodeDescriptor
- Documentation/blockdev/ramdisk
- win 7 蓝屏、清理注册表、杀毒软件
- 工作与生活
- 要开始了。。。
- Smart Hands-Eclipse Debug的一些用法--图文