html页面css代码写在哪里,HTML、CSS代码书写规范

HTML语义化语义化标签优先

基于功能、内容命名，尽量不使用表现命名

简略、明了、无后患1.所有命名都使用英文小写

推荐：`

不推荐： `

2.命名用引号包裹

推荐：`

不推荐： `

3.用中横线连接

推荐：`

不推荐： `

4.命名体现功能，不涉及表现样式(颜色、字体、边框、背景等)

推荐：`

不推荐： `

常用命名.wrap或.wrapper -- 用于外侧包裹

.container或 .ct -- 包裹容器

.header -- 用于头部

.body -- 页面 body

.footer -- 页面尾部

aside、sidebar -- 用于侧边栏

.content -- 和header footer 对应，用于主要内容

.navigation -- 导航元素

.pagination -- 分页

.tabs > .tab -- tab 切换

.breadcrumbs -- 导航列表、面包屑

.dropdown -- 下拉菜单

.article -- 文章

.main -- 用于主体

.thumbnail -- 头像，小图像

.media -- 媒体资源

.panel -- 面板

.tooltip -- 鼠标放置上去的提示

.popup -- 鼠标点击弹出的提示

.button、.btn -- 按钮

.ad -- 广告

.subnav -- 二级导航

.menu -- 菜单

.tag -- 标签

.message或者.notice -- 提示消息

.summary -- 摘要

.logo -- logo

.search -- 搜索框

.login -- 登录

.register -- 注册

.username -- 用户名

.password -- 密码

.banner -- 广告条

.copyright -- 版权

.modal或者 .dialog -- 弹窗var 名字 = {

状态: ['inverse','toggled','switched','original','initial','dentified','disabled','loading','pending','syncing','default],

修饰: ['dark','light','shaded','flat','ghost','maroon','pale,'intense','twisted','narrow','wide','smooth','separate','clan',      'sharp','aligned'],

元素: ['pagination','modal','popup','article','story','flash,'status','state','media','block','card','teaser','badge','lbel',

'sheet','poster','notice','record','entry','item','figue','square','module','bar','button','action','knob'],

布局: ['navigation','wrapper','inner','header','footer','asie','section','divider','content','container','panel','pane',

construct','composition','spacing','frame']

}

CSS书写规范

tab 用两个空格表示

css的 :后加个空格， {前加个空格

每条声明后都加上分号

换行，而不是放到一行

颜色用小写，用缩写, #fff

小数不用写前缀, 0.5s -> .5s；0不用加单位

尽量缩写， margin: 5px 10px 5px 10px -> margin: 5px 10px

相关参考文章