DIV+CSS 常用 HTML 标签解释和命名规则参考

(一)常用 HTML 标签解释:
div:主要用于布局,分割页面的结构

ul/ol:用于无序/有序列表
span:没有特殊的意义,可以用作排版的辅助,例如:
HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

然后在css中定义span为右浮动,实现了日期和标题分两侧显示的效果

h1-h6:标题
h1-h6 根据重要性依次递减
h1位最重要的标题

label:为了使你的表单更有亲和力而且还能辅助表单排版的好东西,例如:

HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


dl,dt,dd:当页面中出现第一行为类似标题/简述,然后下面为详细描述的内容时应该使用该标签,例如:

HTML代码


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]


C #content
S #subcol
M #maincol
X #xcol

这是纵向布局的XHTML结构,c-smx表示网页有三个纵栏, c-sm表示有两个纵栏, c-mx表示有两个纵栏其中一个是附属的, c-m表示一个纵栏。

其中在三纵栏的布局需要分为两层 第一层是#subcol与#main第二层是#main中的#maincol与#xcol。

自定义命名:
根据w3c网站上给出的,最好是用意义命名
比如:是重要的新闻高亮显示(像红色)
有两种

.red{color:red}
.important-news{color:red}


很显然第二种传达的意义更加明确,所以尽量不要用意义不明确的作为自己自定义的名字

常用的CSS命名规则:

头: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

(二)注释的写法:

/* Footer */
内容区
/* End Footer */


(三)id的命名:

(1)页面结构

  容器: container  页头:header  内容:content/container
  页面主体:main  页尾:footer  导航:nav
  侧栏:sidebar  栏目:column  页面外围控制整体布局宽度:wrapper
  左右中:left right center

(2)导航

  导航:nav  主导航:mainbav  子导航:subnav
  顶导航:topnav  边导航:sidebar  左导航:leftsidebar
  右导航:rightsidebar  菜单:menu  子菜单:submenu
  标题: title  摘要: summary

(3)功能

  标志:logo  广告:banner  登陆:login  登录条:loginbar
  注册:regsiter  搜索:search  功能区:shop
  标题:title  加入:joinus  状态:status  按钮:btn
  滚动:scroll  标签页:tab  文章列表:list  提示信息:msg
  当前的: current  小技巧:tips  图标: icon  注释:note
  指南:guild 服务:service  热点:hot  新闻:news
  下载:download  投票:vote  合作伙伴:partner
  友情链接:link  版权:copyright

(四)class的命名:

(1)颜色:使用颜色的名称或者16进制代码,如
  .red { color: red; }
  .f60 { color: #f60; }
  .ff8600 { color: #ff8600; }

(2)字体大小,直接使用’font+字体大小’作为名称,如
  .font12px { font-size: 12px; }
  .font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如
  .left { float:left; }
  .bottom { float:bottom; }

(4)标题栏样式,使用’类别+功能’的方式命名,如
  .barnews { }
  .barproduct { }

注意事项:

  1.一律小写;
  2.尽量用英文;
  3.不加中杠和下划线;
  4.尽量不缩写,除非一看就明白的单词.

  主要的 master.css  模块 module.css  基本共用 base.css
  布局,版面 layout.css  主题 themes.css  专栏 columns.css
  文字 font.css  表单 forms.css  补丁 mend.css  打印 print.css

其他命名规范

1.CSS ID 的命名:
外 套:  wrap
主导航:  mainnav
子导航:  subnav
页 脚:  footet
整个页面: content
页 眉:  header
页 脚:  footer
商 标:  label
标 题:  title
主导航:  nav(mainnav/globalnav)
顶导航:  topnav
边导航:  sidebar
左导航:  leftsidebar
右导航:  rightsidebar
当前位置: loc
旗 志:  logo
标 语:  banner
菜单内容1: menu1 content
菜单容量: menu container
子菜单:  submenu
边导航图标:sidebarIcon
注释:   note
面包屑:  breadcrumb(即页面所处位置导航提示)
容器:   container
内容:   content
搜索:   search
登陆:   Login
功能区:  shop(如购物车,收银台)
当前的   current

2.另外在编辑样式表时可用的注释可这样写:
<– Footer –>
内容区
<– End Footer –>

3.样式文件命名
主要的 master.css
布局,版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css
[本日志由 parno 于 2014-09-16 07:42 AM 更新]
上一篇: 键盘翻页脚本[JS]
下一篇: 谷歌浏览器(Chrome)扩展收藏
文章来自: 网络
引用通告: 查看所有引用 | 我要引用此文章
Tags: CSS DIV HTML
相关日志:
评论: 0 | 引用: 0 | 查看次数: 8589
发表评论
昵 称:
密 码: 游客发言不需要密码.
邮 箱: 邮件地址支持Gravatar头像,邮箱地址不会公开.
网 址: 输入网址便于回访.
内 容:
验证码:
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.
字数限制 500 字 | UBB代码 关闭 | [img]标签 关闭