HTML规范(HTML specification)
在书写html时规范化的意义是什么
减少不必要的错误
便于团队合作(cooperation)
代码工程的全过程中,仅凭一个人的力量是力不从心的,永远要团队作战,那么代码的规范,是团队配合的重要一环
所有的HTML代码都使用小写
编码
页面编码采用GBK,在系统允许的前提下可以使用UTF-8
文字编码可以理解为电脑的二进制的具体一个数字00001111对应哪个中文.而utf-8,gbk就是其中的对应方式,由于特性与历史遗留问题,这些对应方式,还不能完全100%统一.
图片
内容性质的图片加上alt
- 这个好理解,综旨是让内容更清晰的传达出去
- 方便盲人阅读
- 方便搜索引擎识别(identify)
签名
- 在head中添加对页面相关人员团队的注释.
- 将任务与具体人员挂勾,以便定位更多与这个作者相关的事宜安排
- 以便出问题时快速找到作者进行调整,因为他最熟悉
- 离职交接
- 责任划分
<!--页面设计:xxx|页面制作:xxx|团队博客:http://www.xxx.com/-->
html注释
注释的要求
- 醒目
- 可以精简可以详细,具体形式依据团队风格而定.具有明确的作用
- 详尽的注释,更让人能读懂代码
- 精简的注释,让代码整体结构更清晰,让错误无处藏身.
ie条件注释—判断不同的ie 版本,显示不同的内容,,,针对浏览器兼容性问题的解决方案.
- http://www.zcool.com.cn/article/ZNDAyMjE2.html
- 判断为低版浏览器后的两个解决方案
- “对不起,你的浏览器版本过低,为了本站对您的服质,请尽快升级浏览器+升级链接”
- 提供相应版本的浏览器的样式方案,采用古老通用的技术实现相同的效果
- 具体为在同一效果上进行条件判断,
- 如果为某些低版本浏览器,用a样式方案
- if 版本高,则显示为b方案.
IE下判断IE版本的语句...[if lte IE 6]……[endif]
------------------------------以ie6为分水岭
<!--[if IE 6]>
<![endif]-->
只有IE6版本可见
<!--[if lte IE 6]>
<![endif]-->
IE6及其以下版本可见
<!--[if gte IE 6]>
<![endif]-->
IE6及其以上版本可见
------------------------------以ie7为分水岭
<!--[if IE 7]>
<![endif]-->
只有IE7版本可见
<!--[if lte IE 7]>
<![endif]-->
IE7及其以下版本可见
<!--[if gte IE 7]>
<![endif]-->
IE7及其以上的版本可见
-----------------------------以ie8为分水岭
<!--[if IE 8]>
<![endif]-->
只有IE8版本可见
<!--[if lte IE 8]>
<![endif]-->
IE8及其以下的版本可见
<!--[if gte IE 8]>
<![endif]-->
IE8及其以上的版本可见
<![if !IE]>
<![endif]>
----------------------------
单标签不要写/ 闭合,声明为html5页面会息动处理
- 具体单标签(Single-label)有img,br,hr,input,meta.link
- 记住每个标签后面都不要跟反斜杠了
对标签的特性熟悉,不同的内容合理选择标签
1、框架布局(使用DIV标签)
2、列表型布局(使用ul li标签)
3、标题型布局(使用h1、h2、h3、h4标签)
4、内容独立样式型(使用span)
5、功能型布局(img、b、strong、u、s等标签)
6、段落(p标签)
7、手动强行换行布局(br标签)
8、表格型(table表格标签)
9、表单布局(form、input等)
详细规定input的类型有利于相应第三方程序做适配
鼠标光标(cursor)悬浮带小手,多选用a标签
小图标用i标签!
CSS命名规范
避免使用id来调节样式
- CSS (Cascading Style Sheets)的优势就在于一次编写,处处使用,而id 与这个优势违背
以字母开头
- 不允许单个字母(letter)
单词之间的连接
- 用减号连接,省事
- css书写的一些规范,行内的习惯!!最好不要用驼峰—可以用做视觉区分,当看到驼峰,立刻可以知道是js 里面的布局
css导入文件的命名
- 基本文件叫 base.css
- 全局样式 global.css
- 布局样式 layout.css
- 字体样式 font.css
css文件命名: 主要的 master.css 模块 module.css 基本共用 base.css 布局,版面 layout.css 主题 themes.css 专栏 columns.css 文字 font.css 表单 forms.css 补丁 mend.css 打印 print.css
见名知意命名法
常用id的命名: 页头:header 登录条:loginbar 注册:regsiter 标志:logo 侧栏:sidebar 广告:banner 导航:nav 子导航:subnav 菜单:menu 子菜单:submenu 搜索:search 滚动:scroll 页面主体:main 内容:content 图标: icon 显示当前所在位置:breadcrumbs 标签页:tab 文章列表:list 提示信息:msg 小技巧:tips 栏目标题:title 加入:joinus 指南:guild 服务:service 热点:hot 新闻:news 下载:download
状态:status 按钮:btn 投票:vote
页脚:footer
合作伙伴:partner
友情链接:friendlink
版权:copyright“`
属性书写顺序,慢慢总结
- 先总后细
- 先大后小
类名的组合使用
“`
这个div即是a类也是c 类, 加类名的方法是在原有的双引号里 括格,写第二个类名.
<div class="a c"></div>