前端开发规范[html篇]
2024-06-15 16:07:14
html规范
协作开发及分工: 根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构&表现&行为; 共用html组件, 协作开发过程中， 此文件不可随意修改.
1. 代码格式
* 每个块级、列表、表格元素单独占一行，每个子元素都相对父元素缩进。
* 纯文本在 HTML 标签结束之前不要换行。
* 缩进: 统一两个空格缩进（总之缩进统一即可），不要使用 Tab 或者 Tab、空格混搭。
* HTML 属性值使用双引号。
* 结构、样式、行为分离: 尽量确保文档和模板只包含 HTML 结构，样式都放到样式表里，行为都放到脚本里。
* 文件编码: 使用不带 BOM 的 UTF-8 编码,在 HTML中指定编码 <meta charset="utf-8">.
* 充分利用html自身属性及样式继承原理减少代码量, 比如:
<ul class="list"><li>这儿是标题列表<span>2010-09-15</span></ul>
定义 ul.list li{position:relative} ul.list li span{position:absolute; right:0}
即可实现日期居右显示* 书写代码前, 考虑并提高样式重复使用率。
* 一律使用小写字母
* 省略外链资源 URL 协议部分: 省略外链资源（图片及其它媒体资源）URL 中的 http / https 协议，使 URL 成为相对地址，避免Mixed Content 问题，减小文件字节数。其它协议（ftp 等）的 URL 不省略。
* 语言属性: lang属性的取值应该遵循 BCP 47 - Tags for Identifying Languages。
* 文档类型: 标准模式（standard mode）的声明， 这样能够确保在每个浏览器中拥有一致的表现。
* 引号: 属性的定义，统一使用双引号。
* 统一注释: 可以根据编译器统一生成注释。
2. 命名规则
* 头：header
* 内容：content/container
* 尾：footer
* 导航：nav
* 侧栏：sidebar
* 栏目：column
* 页面外围控制整体布局宽度：wrapper
* 左右中：left right center
* 登录条：loginbar
* 标志：logo
* 广告：banner
* 页面主体：main
* 热点：hot
* 新闻：news
* 下载：download
* 子导航：subnav
* 菜单：menu
* 子菜单：submenu
* 搜索：search
* 友情链接：friendlink
* 页脚：footer
* 版权：copyright
* 滚动：scroll
* 内容：content
* 标签页：tab
* 文章列表：list
* 提示信息：msg
* 小技巧：tips
* 栏目标题：title
* 加入：joinus
* 指南：guild
* 服务：service
* 注册：regsiter
* 状态：status
* 投票：vote
* 合作伙伴：partner
3. 标签使用
* 自闭合（self-closing）标签，无需闭合 ( 例如： img input br hr 等 )。
* 可选的闭合标签（closing tag），需闭合 ( 例如：</li> 或 </body> )。
* 表格table: 互相嵌套时，严格按照的规范，对于单独的一个<table>来说，<table><tr>对齐，<td> 缩进两个半角空格，<td> 中如果还有嵌套的表格，<table>也缩进两个半角空格，如果<td>中没有任何嵌套的表格，</td> 结束标记应该与 <td> 处于同一行，不要换行
/*recommended*/<td><img src=”../images/sample.gif”></td>/*not recommended*/<td><img src=”../images/sample.gif”> </td>这是因为浏览器认为换行相当于一个半角空格，以上不规范的写法相当于无意中增加一个半角空格，如果确实有必要增加一个半角空格，也应该这样写： <td><img src=”../images/sample.gif”> </td>
* 链接a: 网站中的链接路径全部采用相对路径，一般链接到某一目录下的缺省文件的链接路径不必写全名。
/*recommended*/<a href=”aboutus/index.htm”>/*not recommended*/<a href=”aboutus/”>所有内页指向首页的链接写成<a href=”/”>在浏览器里，当我们点击空链接时，它会自动将当前页面重置到首端，从而影响用户正常的阅读内容，我们用代码“javascript:void(null)”代替原来的“#”标记* Alt和Title
<p Title="给链接文字提示">文字</p><a href="#" Title="给链接文字提示">文字</a><img src="图片.gif" alt="给图片提示"> * 尽量减少标签数量。
4. 图片处理
* banner> 全尺寸banner为468X60px，半尺寸banner为234X60px，小banner为88X31px。另外120X90，120X60也是小图标的标准尺寸。全尺寸banner不超过14K。普遍的banner尺寸760X100，750X120，468X60，468X95，728X90，585X140次级页的pip尺寸360X300，336X280游标:100X100或120X120* LOGO的国际标准规范> 为了便于INTERNET上信息的传播，一个统一的国际标准是需要的。实际上已经有了这样的一整套标准。其中关于网站的LOGO，目前有三种规格：88*31 这是互联网上最普遍的LOGO规格。120*60 这种规格用于一般大小的LOGO。120*90 这种规格用于大型LOGO。
* 页面修饰图片处理: 图片经过优化以加快下载的速度,有较佳的视觉空间效果，用图要与页面风格、页面内容相符；制作精美，细节处理得当。
5. Class 与 ID
* class 应以功能或内容命名，不以表现形式命名.
* class 与 id 单词字母小写，多个单词组成时，采用中划线-分隔.
* 使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class.
6. 属性顺序
HTML 属性应该按照特定的顺序出现以保证易读性。
* 1. id
* 2. class
* 3. name
* 4. data-xxx
* 5. src, for, type, href
* 6. title, alt
* 7. aria-xxx, role
7. 注释
<!--<div class="sell"></div>--><!-- HTML推荐注释，注释符号一上一下覆盖整个要注释的区块，多行注释 --><!--<div class="sell"><p>多行注释</p><p>多行注释</p><p>多行注释</p><p>多行注释</p></div>
-->参考文档
html: 主要有缩进，标签，加载顺序等等。可以参考：- Code Guide
ps:建议大家在各个产品，严格遵守规范，以便后期的维护以及代码的健壮性等。
如果文档有更好的补充和好的建议，欢迎联系@博主
如有雷同，请联系@博主。
欢迎进入个人公众号 ，一起学习啊！
前端开发规范[html篇]相关推荐
- 前端开发规范[js篇]
js规范 协作开发及分工: 根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构&表现&行为; 共用js工具类, 协作开发过程中, 此文件不可随意 ...
- 前端开发规范V2023.5
前端开发规范 本文档适用于所有前端项目的开发,为了方便开发团队和个人统一规范风格而作.文档中包含了开发中需要注意的事项以及参考建议,本文档不单是一篇规范要求,同时也是前端开发手册,当你不知如何做比较好 ...
- Web前端开发规范文档（更新于2013-01-13）
规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不 ...
- 前端架构之路（3） - 前端开发规范
前端开发规范 1. 为什么需要 "前端开发规范" 规范不是强制性的,对代码的编写和程序的运行不会有致命的问题,但是没有规范会有一系列的问题,比如: 缺乏规范,第一个问题就是团队编码 ...
- 前端开发规范之html编码规范
前端开发whqet,csdn,王海庆,whqet,前端开发专家 前端开发规范系列文章之html编码规范,感兴趣的同学请关注<前端开发规范>专栏.随着html5的逐渐深入人心,html5和x ...
- 前端传中文文件名_前端工程师需要掌握哪些知识，web前端开发规范总结
Web前端作为开发团队中不可或缺的一部分,需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦).不同公司不同团队具有不同的规范和文档.下面是根据不同企业和团队的要求进行全面详 ...
- 前端开发规范文档(html,css,js)
首先吐槽一句,本来想上传word文档的,可是发现博客不能上传word文档,这就很尴尬了. 首先声明该规范不是本人写的,网上搜前端规范发现这个很详细就先复制下来做笔记,当然不可能啥都按规范来,每个公司的 ...
- w3c html规范规范文档,前端开发规范
为什么要有web网站前端开发规范手册?因为人多不一定就力量大,还有可能一团糟.因此为了提升团队凝聚力,统一团队代码风格,优化团队协作效率,需要推出专门的<前端开发规范手册>来约束同一项目不 ...
- （16）WEB前端开发规范之HTML规范
一.WEB前端开发规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档: 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发: 本 ...
最新文章
- CruiseControl.NET开篇
- 利用javascript和WebGL绘制地球 【翻译】
- 【解题报告】Leecode 2057. 值相等的最小索引——Leecode周赛系列
- 训练测试数据大小不一致_三步学会训练狗狗不随地大小便
- LoadRunner如何监控Linux下的系统资源
- Request header field content-type is not allowed by Access-Control-Allow-Headers(请求头设置问题)
- MyBatis-Plus工具快速入门使用
- 三星可折叠手机Galaxy F再曝光 外观酷炫设计出色
- Linux下挂载和格式化虚拟磁盘图文教程
- 《最优化理论》：运输问题（一）求最小运费【西北角法、最小元素法、伏格尔法】
- 优化 API 的处理说明以及思路
- 【题解】二进制优化的多重背包问题
- 熊猫人表情包python 代码_Python实现表情包的代码实例
- 心得体会标题大全_心得体会题目大全
- return返回值详解
- 解决CitSpace分析新版本web of science文献报错“the timing slicing setting is outside the range of your data”
- tomcat端口修改
- swagger3 不能传header未解之谜
- MAC OS X 问题库
- Android高手秘笈之View的绘制你应该知道的一切