html书写规范

出自h-ui前端框架
1、推荐使用html5的文档声明。
<!DOCTYPE HTML>
2、必须申明文档的编码charset，且与文件本身编码保持一致，推荐使用UTF-8编码。
<meta charset="utf-8">
3、title 不可缺少，控制在25个字、50个字节以内。“二级栏目 - 一级栏目 - 网站名称”。
4、keywords很重要，关键词，针对SEO。
注意： 5个左右,单个8汉字以内；禁忌堆砌，与网站主题无关。
5、description网站描述，字数尽量空制在80个汉字，160个字符以内。
6、建议采用响应式栅格化处理，兼容多个平台设备。
7、书写注释，方便程序开发嵌套。注释方式：
开始注释：
结束注释：
允许只有开始注释
注意：浮动的地方不要加注释，可能导致布局错位或文字的BUG。
8、img添加alt属性，增加可访问性。
<img src="" alt="图片描述" title="图片描述">
9、带有实体名称的 ASCII 实体或特殊字符要使用实体名。

注意：实体名称对大小写敏感。

字符	名称	实体名
¥	人民币符号：元	¥
©	版权	©
®	注册商标	®
™	商标TM	™
·	间隔符号	·
"	双引号	"
&	&符	&
<	左尖括号	（小于号） <
>	右尖括号	（大于号） >
	半角空格	`&nbsp`;
×	乘号	×
÷	除号	÷

10、标签一定要正确嵌套，标签一定要闭合。
11、用div等标签布局；表格型数据，table首选。
12、代码风格采用树形结构，提高可读性；避免冗余嵌套。
13、模块之间必须保持独立，区块化布局，方便随意增删改，多人协作维护。
14、非特殊情况下，css采用外链，加在之间；js文件放在页面底部之前。
15、自定义标签或者属性，用data-开头。
16、需要程序单独赋值或者控制的地方尽量用独立的标签包括起来，方便添加id和其他自定义属性。
17、可能程序在套用时候标签之间会出现空数据，产生（冗余标签）造成多余空白间距，请一定注释声明给后端程序员注意一下，将判断包住标签。
18、避免元素的滚动条和body的滚动条同时出现，影响体验。
19、需要异步加载的地方给出加载中（loading）状态效果。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" /> 
<title>网站标题，控制在25个字、50个字节以内</title> 
<meta name="keywords" content="关键词,5个左右,单个8汉字以内"> 
<meta name="description" content="网站描述，字数尽量空制在80个汉字，160个字符以内！"> 
<link rel="Bookmark" href="favicon.ico" > 
<link rel="Shortcut Icon" href="favicon.ico" /> 
<!--[if lt IE 9]> 
<script type="text/javascript" src="Lib/html5.js"></script>
<script type="text/javascript" src="Lib/respond.min.js"></script>
<![endif]--> 
<link href="h-ui/css/H-ui.css" rel="stylesheet" type="text/css" />
<link href="lib/Hui-iconfont/1.0.9/iconfont.css" rel="stylesheet" type="text/css" />
<link href="h-ui/css/style.css" rel="stylesheet" type="text/css" /><!--自己的样式-->
<!--[if IE 6]> 
<script type="text/javascript" src="Lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('.pngfix,.icon');</script> 
<![endif]--> 
</head> 
<body>
<header>网站头部</header>
<div>内容部分</div>
<footer>页脚</footer>
<script type="text/javascript" src="lib/jquery.min.js"></script> 
<script type="text/javascript" src="h-ui/js/h-ui.js"></script> 
</body>
</html>

css写作注意事项

页面编码规范
1.1. 统一使用 UTF-8 编码,用@charset “utf-8"指定页面编码。
1.2. 全局字体设置：
windows 7系统：微软雅黑 Arial；
windows XP及以下：新宋体，宋体，Arial
MAC默认字体：Helvetica Neue和Helvetica Hiragino Sans GB。
font-family:“Microsoft Yahei”,“Hiragino Sans GB”,“Helvetica Neue”,Helvetica,tahoma,arial,Verdana,sans-serif,“WenQuanYi Micro Hei”,”\5B8B\4F53";
1.3. 中文字体使用编码转换，请参阅下节“中文字体css编码转换”
1.4. 推荐使用216web安全色
属性写在一行内，属性之间、属性名和值之间以及属性与“{}”之间应减少空格，去掉最后一个“;”，例如：.class{width:200px;height:100px}
属性的书写顺序：
3.1. 按照元素模型由外及内，由整体到细节书写，大致分为五组：
位置：position,left,right,float
盒模型属性：display,margin,padding,width,height
边框与背景：border,background
段落与文本：line-height,text-indent,font,color,text-decoration,…
其他属性：overflow,cursor,visibility,…
3.2. 针对特殊浏览器的属性，应写在标准属性之前，例如：-webkit-box-shadow:;-moz-box-shadow:;box-shaow:;
带有前缀的属性，单独一行，通过缩进，让每个属性的值垂直对齐，方便编辑维护。
谨慎添加新的选择符规则，尤其不可滥用 id，尽可能继承和复用已有样式
选择符、属性、值均用小写（格式的颜色值除外），缩写的选择符名称须说明缩写前的全称，例如 .cl -> Clearfix
避免使用各种CSS Hack，如需对 IE 进行特殊定义，请参阅下节“关于 CSS Hack 的说明”
勿使用冗余低效的 CSS 写法，例如：ul li a span{… }
慎用 !important
建议使用具有语义化的classname或id，请参阅下节“css命名规范”。
11.避免使用兼容性不好的使用滤镜
12.开发过程中的未定事项，须用 [!] 标出，以便于后续讨论整理。
13.注释格式，统一使用双斜杠加*。
14.上下模块之间的间距统一使用下一个模块的margin-top来实现，好处是：如果没有下一个模块也不会多出一段空隙。
15.hover，selected，disabled，current等具有特定意义的请勿直接占用。
16.:link :visited :hover :active书写顺序 L-V-H-A，速记：LoVe（喜欢）HAte（讨厌）。
17.不要使用 @import

1. 内容优先,表现为辅
2. css命名中英文对照
current 当前    hover 悬停    selected 挑选   disabled 禁用   focus 得到焦点    blur 失去焦点   checked 勾选    success 成功    error 出错

header(hd) 头部   content(cnt) 内容   title(tit) 标题   item 项目（条）    cell 单元   image/pic(img) 图片   text(txt) 文字    top 顶部    scrubber 时序菜单

nav 导航    mainnav 主导航   subnav 子导航    topnav 顶部导航   breadcrumb 面包屑导航

flink 友情链接    footer 尾    copyright 版权

menu 菜单   submenu 子菜单   dropdown 下拉菜单

searchBar 搜索条   search 搜索条    searchTxt 搜索框   searchBtn 搜索按钮    search_key 搜索词

member 会员   ucenter 用户中心    loginBar 登陆条    login 登录    loginBtn 登录按钮   regsiter 注册按钮   btn-regsiter注册按钮    name 用户名    password 密码   nickname 昵称   mobilephone/mobile 手机    telephone/tel 电话   defaultavatar 默认头像

hot 热点    news 新闻   banner/AD 广告    download 下载

content 内容    title 标题    summary 摘要    time 时间

share 分享    digg 顶    like 喜欢

list 列表   pList 图片列表    tList 文字列表    tpList 图文列表

table 表格    row 行   column 列    gutter 间隔   viewport 视口

tab 标签    tags 标签   scroll 滚动 

sidebar 侧边栏   column 栏目   section 区块    msg 提示信息    status 状态   vote 投票   tips 小技巧    guild 指南    note 注释

icon- 图标    btn- 按钮

goods 商品    goodsList 商品列表    goodsDetail 商品详情    goodsInfo 商品信息

tuan 团购   tuanList 团购列表   tuanDetail  团购详情    tuanInfo 团购信息

transition 动画   shadow 阴影   fade 淡入淡出   flip 翻页效    slide 滑动    slideup 上滑动   slidedown 下滑动   turn 翻页   horizontal 水平   vertical 垂直   collapsible 折叠    corners 拐角    flow 流    reverse 反向    pop 弹窗

count 总数/计数   plus 加号/正   minus 减号/负    controlgroup 控制组

中文字体css编码转换

微软雅黑   \5FAE\8F6F\96C5\9ED1  或 Microsoft YaHei
黑体       \9ED1\4F53
新宋体     \65b0\5b8b\4f53
宋体       \5b8b\4f53

abolition cc

发布了12 篇原创文章 · 获赞 3 · 访问量 328

私信关注

html+css书写规范

html书写规范

css写作注意事项

中文字体css编码转换

猜你喜欢