HTML5编码规范标准详.docx
- 文档编号:9222402
- 上传时间:2023-02-03
- 格式:DOCX
- 页数:11
- 大小:57.13KB
HTML5编码规范标准详.docx
《HTML5编码规范标准详.docx》由会员分享,可在线阅读,更多相关《HTML5编码规范标准详.docx(11页珍藏版)》请在冰豆网上搜索。
HTML5编码规范标准详
HTML5编码规
规目的
本文档的目标是使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(
),hr(
)等;
属性值必须用双引号包括;
目的:
更加符合web标准(w3c),也有利于seo。
1.6语义化html,
如标题根据重要性用h*(同一页面只能有一个h1),
段落标记用p,
列表用ul,
联元素中不可嵌套块级元素;
目的:
减少代码量,
1.7尽可能减少div嵌套,如
完全可以用以下代码替代:
欢迎访问XXX,您的用户名是
用户名
目的:
减少代码量,
1.8引入JS库文件,文件名须包含库名称及版本号及是否为压缩版,比如jquery-1.4.1.min.js;引入插件,文件名格式为库名称+插件名称,比如jQuery.cookie.js;
1.9书写地址时,必须避免重定向,例如:
href=”.haogu./”,即须在URL地址后面加上“/”;
2.0在页面中尽量避免使用style属性,即style=”„”除非考虑http请求,响
应速度等因素比重情况具体分析;
2.页面头部
2.1DOCTYPE
[强制]使用doctype来启用标准模式,建议使用大写的DOCTYPE
2.2语言编码
[建议]有助于提高页面的可访问性,必须设置正确的lang属性,例:
[强制]页面必须指定字符编码的meta,且必须是head的第一个直接子元素,例:
Meta标记用于定义页面的相关信息,为非成对标记,位于
标记之间。可以有三部分,namehttp-equivcontent
http-equiv属性值可以是:
refresh(页面刷新)http-equiv=“refresh”content=“5;url=.baidu.”
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.3CSS和JavaScript引入
[强制]引入css时必须指明rel="stylesheet",在引入css和javascript时必须指明type属性。
[建议]Javascript代码必须放在页面末尾或采用异步加载。
2.4Head容
[强制]Title标签必须设置为head的直接子元素,并紧随charset声明之后。
[强制]Favicon保证可访问,例:
[强制]Viewport属性必须指定。
3.图片
[强制]禁止img的src取值为空,延迟加载的图片也要增加默认的src属性值。
[建议]重要图片添加alt属性值。
[建议]添加width和height属性以避免页面抖动。
4.表单
4.1控件标题
[强制]文本标题的控件必须使用label标签将其与其标题相关联,例:
或
4.2按钮
[强制]使用button元素时必须指明type属性值
4.3可访问性
[建议]当使用JavaScript进行表单提交时,应使原生提交功能正常工作。
[建议]根据容类型指定输入框的type属性,例:
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.2css属性书写顺序,建议遵循布局定位属性–>自身属性–>文本属性–>其他属性.此条可根据自身习惯书写,但尽量保证同类属性写在一起.
1.H5新标签请查看
2.Css文件命名
模块:
module.css
基本共用:
base.css
布局、版面:
layout.css
主题:
themes.css
专栏:
columns.css
文字:
font.css
表单:
forms.css
补丁:
mend.css
打印:
print.css3.
页面框架命名强制书写必须使用
3.1页眉H5新语义化标签
3.2导航H5新语义化标签
3.3页脚H5新语义化标签
无H5新标签的页面框架,一般具有唯
一性,推荐用ID命名。
3.4主体使用main命名。
3.5容使用container命名。
3.6侧栏使用sidebar命名。
3.7栏目使用column命名。
3.8外围整体布局宽度使用wrapper命名。
4页面结构命名:
左右中:
leftrightcenter
子导航:
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-leftmargin-rightmargin-bottommargin-left
padding
设置区域的边距,是边框和元素容之间的间隔距离可以分开四个单独设置
border
可以设置边框的风格、颜色、宽度,也可以分开四个单独设置
width
可以设置百分比、像素、auto等值,不允许使用负值
height
可以设置百分比、像素、auto等值,不允许使用负值
Marginpadding
样式挨着写,布局,颜色最好分开