网页制作中规范使用DIV+CSS命名规则，可以改善优化功效特别是团队合作时候可以提供合作制作效率，下面就是具体DIV/CSS命名规则CSS命名大全内容篇。
我们开发CSS+DIV网页（Xhtml）时候,比较困惑和纠结的事就是CSS命名，特别是新手不知道什么地方该如何命名，怎样命名才是好的方法。

一、命名规则说明

1）、所有的命名最好都小写

2）、属性的值一定要用双引号("")括起来，且一定要有值如class="divcss5",id="divcss5"

3）、每个标签都要有开始和结束，且要有正确的层次，排版有规律工整

4）、空元素要有结束的tag或于开始的tag后加上"/"

5）、表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等

6）、<h1>到<h5>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。

7）、给每一个表格和表单加上一个唯一的、结构标记id

8）、给图片加上alt标签

9）、尽量使用英文命名原则

10）、尽量不缩写，除非一看就明白的单词

二、相对网页外层重要部分CSS样式命名

外套 wrap —— 用于最外层

头部 header —— 用于头部

主要内容 main —— 用于主体内容（中部）

左侧 main-left —— 左侧布局

右侧 main-right —— 右侧布局

导航条 nav —— 网页菜单导航条

内容 content —— 用于网页中部主体

底部 footer —— 用于底部

三、DIV+CSS命名参考表

以下为CSS样式命名与CSS文件命名参考表，DIV CSS命名集合：

网页公共命名

| ----CSS样式命名---- | ----说明---- |
|#wrapper|页面外围控制整体布局宽度|
|#container或#content|容器,用于最外层|
|#layout|布局|
|#head,#header|页头部分|
|#foot,#footer|页脚部分|
|#nav|主导航|
|#subnav|二级导航|
|#menu|菜单|
|#submenu|子菜单|
|#sideBar|侧栏|
|#sidebar_a,#sidebar_b|左边栏或右边栏|
|#main|页面主体|
|#tag|标签|
|#msg,#message|提示信息|
|#tips|小技巧|
|#vote|投票|
|#friendlink|友情连接|
|#title|标题|
|#summary|摘要|
|#loginbar|登录条|
|#searchInput|搜索输入框|
|#hot|热门热点|
|#search|搜索|
|#search_output|搜索输出和搜索结果相似|
|#searchBar|搜索条|
|#search_results|搜索结果|
|#copyright|版权信息|
|#branding|商标|
|#logo|网站LOGO标志|
|#siteinfo|网站信息|
|#siteinfoLegal|法律声明|
|#siteinfoCredits|信誉|
|#joinus|加入我们|
|#partner|合作伙伴|
|#service|服务|
|#regsiter|注册|
|arr/arrow|箭头|
|#guild|指南|
|#sitemap|网站地图|
|#list|列表|
|#homepage|首页|
|#subpage|二级页面子页面|
|#tool,#toolbar|工具条|
|#drop|下拉|
|#dorpmenu|下拉菜单|
|#status|状态|
|#scroll|滚动|
|.tab|标签页|
|.left.right.center|居左、中、右|
|.news|新闻|
|.download|下载|
|.banner|广告条(顶部广告条)|

电子贸易相关

| ------------ | ------------ |
|.products|产品|
|.products_prices|产品价格|
|.products_description|产品描述|
|.products_review|产品评论|
|.editor_review|编辑评论|
|.news_release|最新产品|
|.publisher|生产商|
|.screenshot|缩略图|
|.faqs|常见问题|
|.keyword|关键词|
|.blog|博客|
|.forum|论坛|

CSS文件命名

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

CSS命名其它说明

无论是使用“.”（小写句号）选择符号开头命名，还是使用“#”(井号)选择符号开头命名都无所谓，但我们最好遵循，主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名，同时考虑命名的CSS选择器在HTML中重复使用调用。

通常我们最常用主要命名有：wrap（外套、最外层）、header（页眉、头部）、nav(导航条)、menu(菜单)、title(栏目标题、一般配合h1\h2\h3\h4标签使用)、content (内容区)、footer(页脚、底部)、logo（标志、可以配合h1标签使用）、banner（广告条，一般在顶部）、copyRight（版权）。其它可根据自己需要选择性使用。

建议：主要的、重要的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名。

四、英文命名技巧

如果遇到不常用的，可以借助翻译工具进行翻译取其英文命名。

在线翻译工具：

百度：http://fanyi.baidu.com/

有道：http://fanyi.youdao.com/

Google：http://translate.google.cn/
以上为DIV+CSS的命名规则总结，相信通过规范的CSS命名给你以后网站网页的维护带来方便。

转自：点击进入

表单的元素：

1.单行文本框<input type="text"/>（input 的type 属性的默认值就是"text"）

文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等。

<input type = “text” name=“名称”/>

以下是单行文本框的主要属性：
size：指定文本框的宽度，以字符个数为单位；在大多数浏览器中，文本框的缺省宽度是20个字符。
value：指定文本框的默认值，是在浏览器第一次显示表单或者用户单击<input type="reset"/>按钮之后在文本框中显示的值。
maxlength：指定用户输入的最大字符长度。

2.多行文本框<textarea></textarea>

也是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容。

<textarea name="..." cols="..." rows="..." wrap="VIRTUAL"></textarea>

属性解释：
name属性定义多行文本框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
readonly属性定义多行文本框为只读。
cols属性定义多行文本框的宽度，单位是单个字符宽度；
rows属性定义多行文本框的高度，单位是单个字符宽度；
wrap属性定义输入内容大于文本域时显示的方式，可选值如下：
默认值是文本自动换行；当输入内容超过文本域的右边界时会自动转到下一行，而数据在被提交处理时自动换行的地方不会有换行符出现； Off，用来避免文本换行，当输入的内容超过文本域右边界时，文本将向左滚动，必须用Return才能将插入点移到下一行； Virtual，允许文本自动换行。 Physical，让文本换行，当数据被提交处理时换行符也将被一起提交处理。

3.密码框<input type="password"/>

是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏。

<input type=“password” name=“名称”/>

4.单选按钮<input type="radio"/>

当需要访问者在待选项中选择唯一的答案时，就需要用到单选框了。

<input type="radio" name="sexrdo" value="男">男  
<input type="radio" name="sexrdo" value="女">女 

属性解释：
name属性定义单选框的名称，要保证数据的准确采集，单选框都是以组为单位使用的，在同一组中的单选项都必须用同一个名称；
value属性定义单选框的值，在同一组中，它们的域值必须是不同的。

5.复选框<input type="checkbox"/>

复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称。

<input type="checkbox" name="chkhobby" value="吃" checked>  
<input type="checkbox" name="chkhobby" value="喝">  
<input type="checkbox" name="chkhobox" value="玩">  
<input type="checkbox" name="chkhobox" value="乐" > 

属性解释：
name属性定义复选框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
value属性定义复选框的值

6.隐藏域<input type="hidden"/>

隐藏域通常用于向服务器提交不需要显示给用户的信息。

<input type=“hidden” name=“隐藏域”/>

属性解释：
name属性定义隐藏域的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
value属性定义隐藏域的值

7.文件上传<input type="file"/>

有时候，需要用户上传自己的文件，文件上传框看上去和其它文本域差不多，只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件

<input type="file" name="txtfile" size="15">

注意：在使用文件域以前，请先确定你的服务器是否允许匿名上传文件。表单标签中必须设置enctype="multipart/form-data"来确保文件被正确编码；另外，表单的传送方式必须设置成POST。
属性解释：
name属性定义文件上传框的名称，要保证数据的准确采集，必须定义一个独一无二的名称；
size属性定义文件上传框的宽度，单位是单个字符宽度；
maxlength属性定义最多输入的字符数。

8.下拉框<select>标签

下拉选择框允许你在一个有限的空间设置多种选项。标记创建一个列表框,标记创建一个列表项,与嵌套的一起使用，共同提供在一组选项中进行选择的方式。

<select name="sel" size="3" multiple>  
                <option value="深圳">深圳</option>  
                <option value="北京">北京</option>  
                <option value="上海">上海</option>  
                <option value="广州" selected>广州</option>  
            </select>

属性解释：
size属性定义下拉选择框的行数；
name属性定义下拉选择框的名称；
multiple属性表示可以多选，如果不设置本属性，那么只能单选；
value属性定义选择项的值；
selected属性表示默认已经选择本选项。

9.<label></label>标签

在<input type=“text”>前可以写普通的文本来修饰，但是单击修饰文本的时候input并不会得到焦点，而用label则可以，for属性指定要修饰的控件的id，<label for=“txt1” >内容</label>；”,然后按下alt+u(了解)。accesskey=“u“，label的另一个属性。注意：要为被修饰的控件设置一个唯一的id。我觉得<label></label>标签对<input type="radio"/>和<input type="checkbox"/>这两个标签是非常有用的。

<input type="radio" name="sex" id="male" value="0" checked="checked" /><label for="male">男</lable>
<input type="radio" name="sex" id="fmale" value="1" /><label for="fmale">女</label>

10.<fieldset></fieldset>标签

fieldset标签将控件划分一个区域，看起来更规整。

<fieldset name="filed">  
            <legend>请输入个人信息</legend>  
                用户名称：<input type="text" name="txtUsename" value="请输入用户名称" >  
                <br/>  
                用户密码：<input type="password" name="txtUsepwd" >  
        </fieldset>

11.提交按钮<input type="submit"/>

当用户单击<inputt type="submit"/>的提交按钮时，表单数据会提交给<form>标签的action属性所指定的服务器处理程序。中文IE下默认按钮文本为“提交查询”，可以设置value属性修改按钮的显示文本。

<input type="submit" value="提交"/>

属性解释：
type="submit"定义提交按钮；
name属性定义提交按钮的名称；
value属性定义按钮的显示文字；

12.重置按钮<input type="reset"/>

当用户单击<input type="reset"/>按钮时，表单中的值被重置为初始值。在用户提交表单时，重置按钮的name和value不会提交给服务器。

<input type=“reset” value=“重置按钮"/>

属性解释：
type="reset"定义重置按钮；
name属性定义复位按钮的名称；
value属性定义按钮的显示文字；

13.普通按钮<input type="button"/>

普通按钮通常用于单击执行一段脚本代码。

<input type="button" value="普通按钮"/>

属性解释：
type="button"定义一般按钮；
name属性定义一般按钮的名称；
value属性定义按钮的显示文字；
onClick属性，也可以是其它的事件，通过指定脚本函数来定义按钮的行为；

表单实例代码：

<!DOCTYPE html>  
<html>  
<head>  
<title>Day905</title>  
<meta charset="utf-8">  
</head>  
<body>  
<form>
<!--文本框--> 
<p>  
用户名称：<input type="text" name="txtUsename" value="请输入用户名称" readonly>  
</p>  
<p>  
用户密码：<input type="password" name="txtUsepwd" >  
</p>  
<!--单选框-->  
<p>  
用户性别：<input type="radio" name="sexrdo" value="男">男  
<input type="radio" name="sexrdo" value="女" checked>女       
</p>  
<!--复选框-->  
<p>  
用户爱好：
吃<input type="checkbox" name="chkhobby" value="吃" checked>  
喝<input type="checkbox" name="chkhobby" value="喝">  
玩<input type="checkbox" name="chkhobox" value="玩">  
乐<input type="checkbox" name="chkhobox" value="乐">  
</p>  
<!-- 按钮 -->  
<p>  
<input type="submit" name="btnsbt" value="提交">  
<input type="reset" name="btnrst"    value="重置">  
<input type="button" name="btnbtn" value="普通按钮">  
</p>  
<!-- 隐藏域 -->  
<p>  
<input type="hidden" name="txtID" value="407862858@qq.com">  
</p>  
<!--文件选择框-->  
<p>  
请上传文件：<input type="file" name="txtfile">  
</p> 
<!--下拉列表-->  
<p>意向工作城市：  
<select name="sel" >  
<option value="深圳">深圳</option>  
<option value="北京">北京</option>  
<option value="上海">上海</option>  
<option value="广州" selected>广州</option>  
</select>  
</p>  
</form>  
</body>  
</html>

HTML 表单

表单是一个包含表单元素的区域。
通常用于搜集不同类型的用户输入。
表单使用表单标签 <form> 来设置:

<form>
.
 <!--表单元素在这里-->
.
</form>

HTML 表单 - 输入元素

表单元素指的是不同类型的 input 元素,比如：
文本域、下拉列表、单选框、复选框、提交按钮等等。
一个简单的 HTML 表单，包含两个文本输入框和一个提交按钮：

<form action="form_action.asp" method="get">
  First name: <input type="text" name="fname" />
  Last name: <input type="text" name="lname" />
  <input type="submit" value="Submit" />
</form>

多数情况下被用到的表单标签是输入标签（<input>）。
输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

• 文本域

文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域。

• 密码字段

密码字段通过标签<input type="password"> 来定义: 注意:密码字段字符不会明文显示，而是以星号或圆点替代。

• 单选按钮

<input type="radio"> 标签定义了表单单选框选项

• 复选框

<input type="checkbox"> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。

• 提交按钮

<input type="submit"> 定义了提交按钮. 当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

点击了解更多