首页 工作日记正文

HTML5编码规范

admin 工作日记 2020-04-23 292 0

规范目的: 
本文档的目标是使HTML5代码风格保持一致,容易被理解、维护和升级,提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档,同是为网站有一个更好的前端架构,网站的发展及未来打好一个基础。 
基本准则 
符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有序, 尽可能的减小服务器负载, 保证最快的解析速度. 
文件规范 
1、 html, css, js, images文件均归档至约定的目录中。 
2、html文件命名: 必须单词全字母小写,单词间以-分隔,依实际模块命名,如果同一模块以_& title& _ 来组合命名, 以方便添加功能时查找对应页面,团结里的相互理解。 
 
HTML5代码规范 
1. 代码风格 
1.1 缩进与换行 
[建议]使用4个空格作为一个缩进层级。 
[建议]模板代码的缩进优先保证 HTML 代码的缩进规则。 
1.2 命名规则 
[强制]class:必须单词全字母小写,单词间以-分隔,且必须代表相应的模块或部件的内容或功能,不得以html内置样式进行命名,命名应该具有明确的语义。 
[强制]id:必须保持在页面中的唯一性,命名应该具有明确的语义。 
1.3 标签 
[强制]Html中的标签名必须使用小写字母。 
[强制]标签的闭合要符合html5的规定。 
[强制]标签的使用必须符合标签的嵌套规则,例:div不得置于p中,tbody必须置于table中。 
[建议]标签的使用必须遵循标签的语义,
例: p - 段落 
h1,h2,h3,h4,h5,h6 - 层级标题 
strong,em - 强调 
ins - 插入 
del - 删除 
abbr - 缩写 
code - 代码标识 
cite - 引述来源作品的标题 
q - 引用 
blockquote - 一段或长篇引用 
ul - 无序列表 
ol - 有序列表 
dl,dt,dd - 定义列表 
[建议]在CSS可以实现相同需求的情况下不得使用表格进行布局。 
1.4 属性 
[强制]属性必须使用小写字母,其属性值必须用双引号包围。 
[建议]布尔类型的建议不添加属性值。
自定义属性建议以 xxx- 为前缀,推荐使用data- 
1.5所有编码均遵循xhtml标准, 标签 & 属性 & 属性命名 必须由小写字母及下划线数字组成, 且所有标签必须闭合, 包括br (<br />), hr(<hr />)等; 
属性值必须用双引号包括;
目的:更加符合web标准(w3c),也有利于seo。 
1.6语义化html, 
如 标题根据重要性用h*(同一页面只能有一个h1), 
段落标记用p, 
列表用ul, 
内联元素中不可嵌套块级元素;
目的:减少代码量,
1.7尽可能减少div嵌套, 如
<div class=”box”>
<div class=”welcome”>欢迎访问XXX, 您的用户名是
<div class=”name”>用户名</div>
</div>
</div>
完全可以用以下代码替代: 
<div class=”box”>
<p>欢迎访问XXX, 您的用户名是
<span>用户名
</span>
</p>
< /div>;
目的:减少代码量,
1.8引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js; 
1.9书写链接地址时, 必须避免重定向,例如:href=”http://www.haogu.com/”, 即须在URL地址后面加上“/”; 
2.0在页面中尽量避免使用style属性,即style=”„”除非考虑网站http请求,网站响
应速度等因素比重情况具体分析;   
2. 页面头部 
2.1 DOCTYPE 
[强制]使用doctype 来启用标准模式,建议使用大写的 DOCTYPE 
2.2 语言编码
[建议]有助于提高页面的可访问性,必须设置正确的lang属性,例:<html lang="zh-CN"> 
[强制]页面必须指定字符编码的meta,且必须是 head 的第一个直接子元素,例:<meta charset="UTF-8">。 
Meta 标记用于定义页面的相关信息,为非成对标记,位于<head>标记之间。可以有三部分,name  http-equiv  content
http-equiv属性值可以是:
refresh(页面刷新)  http-equiv=“refresh” content=“5;url=http://www.baidu.com”
reply-to(页面回复信息)
keywords(页面关键字)  用于某些搜索引擎
content-type(页面内容格式)     content-type:text/html
author(页面作者)
description(页面内容摘要)
注:如果没有name属性,那么名称/值对中的名称会采用http-equiv属性的值。
Base 页面中的所有标签在新窗口中打开,target值有_blank,_parent,_self,_top。对应的是连接,href的值可以确定。
Title 定义文档的标题
Link 用于样式的连接
Style 用于直接写样式
Script 定义用户客户端脚本文件

2.3 CSS和JavaScript引入 
[强制]引入css时必须指明rel="stylesheet",在引入css和javascript时必须指明type属性。 
[建议]Javascript代码必须放在页面末尾或采用异步加载。 

2.4 Head内容 
[强制]Title标签必须设置为head的直接子元素,并紧随charset声明之后。 
[强制]Favicon保证可访问,例:<link rel="shortcut icon" href="path /favicon.ico"> 
[强制]Viewport属性必须指定。 
3. 图片 
[强制]禁止 img 的 src 取值为空,延迟加载的图片也要增加默认的 src属性值。 
[建议]重要图片添加 alt 属性值。 
[建议]添加 width 和 height 属性以避免页面抖动。 
4. 表单 
4.1 控件标题 
[强制]文本标题的控件必须使用 label 标签将其与其标题相关联,例: 
<label>
<input type="checkbox" name="confirm" value="on"> 我已确认上述条款
</label>

<label for="user">用户:</label>
<input type="text" name="user" id="user"> 
4.2 按钮 
[强制]使用 button 元素时必须指明 type 属性值 
4.3 可访问性 
[建议]当使用 JavaScript 进行表单提交时,应使原生提交功能正常工作。 
[建议] 根据内容类型指定输入框的 type 属性,例:<input type="date"> 
5. 多媒体 
[建议]使用 audio 以及 video 标签来播放音频、视频时,应当注意格式: 音频格式:MP3、WAV、Ogg 视频格式:MP4、WebM、Ogg 
6. 注释 
[强制]针对页面或模块的CSS、javascript代码必须进行详细的注释 
7. Css命名 
7.1样式命名推荐使用英文避免使用汉语拼音, 尽量使用简易的单词组合; 
命名方式采用驼峰命名法和划线命名法两种,提高可读性。例如:dropMenu、subNavMenu、drop-menu、sub_nav_menu。驼峰命名法用来区别不同的单词。
划线命名法表明从属关系。如:“.timeList”和“.time_list”分别表示时间列表和时间部分下的列表。 
7.2 css属性书写顺序, 建议遵循 布局定位属性–>自身属性–>文本属性–>其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 
1.H5 新标签请查看 
2. Css 文件命名
模块:module.css 
基本共用:base.css 
布局、版面:layout.css 
主题:themes.css 
专栏:columns.css 
文字:font.css 
表单:forms.css 
补丁:mend.css 
打印:print.css 3. 
 
页面框架命名  强制书写必须使用 
3.1 页眉H5新语义化标签  <header>
 3.2 导航 H5新语义化标签  <nav> 
3.3 页脚 H5新语义化标签  <footer> 
无H5新标签的页面框架,一般具有唯
一性,推荐用ID命名。 
3.4 主体  使用 main 命名。 
3.5 内容  使用 container 命名。 
3.6 侧栏  使用 sidebar 命名。 
3.7 栏目  使用 column 命名。 
3.8 外围整体布局宽度   使用 wrapper 命名。 
4页面结构命名: 
左右中:left right center  
子导航:subnav 
顶导航:topnav 
边导航:sidebar 
左导航:leftsidebar 
右导航:rightsidebar 
菜单:menu 
子菜单:submenu  
标题: title 
摘要: summary+功能 
标志:logo 
广告:banner 
登陆:login 
登录条:loginbar 
注册:regsiter  
搜索:search 
功能区:shop 
标题:title 
加入:joinus 
状态:status 
按钮:btn 
滚动:scroll 
标签页:tab 
文章列表:list 
提示信息:msg  
5模块结构命名 
友情链接:friendlink  
版权:copyright  
滚动:scroll  
小技巧:tips   
指南:guild 
服务:service 
投票:vote  
合作伙伴:partner 
H5与之前的兼容性问题

具有boolean值的属性
在html中有一些元素的属性,当只写属性名称而不指定属性值时,表求属性值为true, 如果设置该属性值为false,则不使用该属性即可。另外,要想将属性值设定true时,也可以将属性名设定为属性值, 或将空字符串设定为属性值。例如input元素中的disabled与readonly就是这样的属性。
引号使用
在html中使用属性时, 属性值可以使用双引号,也可以使用单引号括起来,在HTML5中做了一些改进,当属性值不包括空字符串、“<”、“>”、“=”、单引号、双引号等字符时, 属性两边的引号是可以省略的。

页面布局的W3C盒子模型
每个HTML元素都可以看作一个装了东西的盒子,盒子具有宽度(width)和高度(height),盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其他盒子之间,还有边界(margin)。



属性 描述
margin 有1-4个值设置元素的边界,每个值都是长度、百分比或者auto,百分比值参考上级元素的宽度,允许使用负边界值。还可以使用margin-left margin-right margin-bottom margin-left
padding 设置区域的内边距,是边框和元素内容之间的间隔距离  可以分开四个单独设置
border 可以设置边框的风格、颜色、宽度,也可以分开四个单独设置
width 可以设置百分比、像素、auto等值,不允许使用负值
height 可以设置百分比、像素、auto等值,不允许使用负值

Margin padding
样式挨着写,布局,颜色最好分开

评论