《Web前端开发参考手册》由会员分享，可在线阅读，更多相关《Web前端开发参考手册（13页珍藏版）》请在金锄头文库上搜索。
1、 WEB 前 端 开 发 参 考 手 册一 概况1.1 WEB 标准二 实现WEB标准2.1 XHTML、CSS介绍2.2 XHTML书写规范2.2.1 XHTML结构2.2.2 标签规范2.3 XHTML常用标签介绍2.4 CSS书写规范2.4.1 表命名参考2.4.2 类 /ID命名规范2.4.3 样式调用2.4.4 样式简写2.5 CSS常用属性介绍2.6 图片规范2.7 注释规范2.8 浏览器兼容一概况1.1 WEB 标准WEB 标准不是一个标准，而是一系列标准的集合。网页主要由三部分组成：结构、表现和行为。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主
2、要包括 CSS，行为标准主要包括对象模型（如 W3C DOM） 、ECMAScript 等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的 ECMAScript 标准。 二、实现WEB标准2.1 XHTML、 CSS介绍可扩展超文本置标语言（eXtensible HyperText Markup Language，XHTML） ，是一种置标语言，表现方式与超文本置标语言（HTML）类似，不过语法上更加严格。从继承关系上讲，HTML是一种基于标准通用置标语言（SGML）的
3、应用，是一种非常灵活的置标语言，而XHTML则基于可扩展置标语言（XML） ，XML是SGML的一个子集。XHTML 1.0在2000年1月26日成为W3C的推荐标准。级联样式表（Cascading Style Sheet）简称“CSS” ，通常又称为“风格样式表（Style Sheet） ”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。2.2 X
4、HTML书写规范2.2.1 XHTML结构文档分为head 和body两个部分。html文档中在head关标签后面一定会跟着body的开标签。html的开标签下面一定跟着head的开标签，body的关标签下面一定是html的关标签，这中间都是不能插入任何东西的。head和body在一个html中有且仅有一个。在head里面放置的内容是不会再页面里显示的。在页面中显示的内容放在body里。如下：样式地址、JS 地址、样式等浏览器能看到的内容部分2.2.2 标签规范标签可以分为成对标签，或者是单标签。成对标签比如 div span ol ul li select option table tr t
5、h td dl dt dd em var span等等，而单标签就比较少了 比如 input img br iframe 等。完整的成对标签如下：这是一个快标签 或者列表项一列表项二列表项三；可以看到每一个标签都有开标前和关标签组成，内容放在开和关标签之间。而单标签的标签应该这么写：;像这样的单标签，是不可能再嵌套任何内容的。而我们把斜线(/）放在标签的后尖括号前面，表示标签结束。这点跟成对标签有很大区别。所有标签必须合理嵌套正确的嵌套1111就像一个一个大盒子套了一个小盒子 又套了一个小盒子，当然还可以继续嵌套，看起来十分对称。不正确的嵌套 1111这里的标签是不对称的。你没法一层一层的拆开
6、盒子，这就是错误的。2.3 XHTML常用标签介绍1、div 标签：块元素。可以将文档分为不同的部分。可以使用class和id属性进一步控制页面表现。div是css布局中使用最多的元素。2、p标签：块元素，表示一个文本段落，一般用于换行。3、标题标签：块元素，用来定义文本中的各种标题。从h1至h6有着严格的层级关系。并且每个XHTML上h1元素有且只能使用一次。其中包括一系列的元素：h1，h2，h3，h4 ，h5，h6,其中每个元素都对应有默认的字体样式其代码如下：texttexttexttexttexttext4、ul 和li标签：块元素，无序列表，详见：http:/ li标签：块元素，有序
7、列表，详见：http:/ 标签：块元素，常用于生成类表格别表，dt、dd位于dl内部。详见：http:/ 标签：内联元素，显示效果为文本斜体。10、span 标签：内联元素，用来区分文本中的一个部分。11、br标签：使文本换行。12、img标签：内联元素，用来插入图像文件，当使用img元素时候，其alt属性必须加上，属性内容将在图片不能加载的时候显示。13、label 标签：触发鼠标事件，当鼠标事件作用于该元素时，也作用于相对应的input标签。14、input标签：根据不同的 type 属性值，可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。用于获取提交的数据。当input标签
8、为单选按钮和复选框时，浏览器的兼容性比较差，需要细心调整。15、select和option标签：下拉列表，option位于select 内部。16、textarea 标签：文本区域，用于输入多行文本文字。17、table，tr ，th ，td 标签：表格，不推荐使用。2.4 CSS书写规范 2.4.1 表命名参考驼峰命名法 例：myName全局样式：global.css框架布局：layout.css字体样式：font.css链接样式：link.css打印样式：print.css2.4.2 类 /ID命名规范Container div #container 容器Layout #layout 布局
9、Header or banner div #head, #header 页头部分Footer div #foot, #footer 页脚部分Navigation list #nav 主导航Sub-navigation list #subNav 二级导航Menu #menu 菜单Sub Menu #submenu 子菜单Left or right side columns #sidebar_a, #sidebar_b 左边栏或右边栏Main div #main 页面主体Tag #tag 标签Message #msg #message 提示信息Tips #tips 小技巧Vote #vote 投票
10、Friend Link #friendlink 友情连接Title #title 标题Summary #summary 摘要Search input #searchInput 搜索输入框Search output #search_output 搜索输出和搜索结果相似Search #search 搜索Search bar #searchBar 搜索条Search results #search_results 搜索结果Copyright information #copyright 版权信息brand #branding 商标branding-logo #logo LOGOSite inform
11、ation #siteinfo 网站信息Copyright information etc. #siteinfoLegal 法律声明Designer or other credits #siteinfoCredits 信誉Join us #joinus 加入我们Partnership opportunities #partner 合作伙伴Services #service 服务Regsiter #regsiter 注册Arrow arr/arrow 箭头Little #little 标题Website map #sitemap 网站地图List #list 列表Home page #homep
12、age 首页Sub page subpage 二级页面子页面Toolbar #tool, #toolbar 工具条Next pulls #drop 下拉Next pulls menu #dorpmenu 下拉菜单Status #status 状态常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如“搜索框”则应命名为“searchInput” 、 “搜索图标”命名这“searchIcon” 、 “搜索按钮”命名为“searchBtn”2.4.3 样式调用页面内嵌法：就是将样式表直接写在页面代码的h
13、ead区。bodybackground:white; color:black;外部样式表调用：将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。在符合web标准的设计中，推荐使用外部调用法，可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。2.4.4 样式简写公共样式的缩写：当两个或多个类有想通的属性值时，可以对属性值进行缩写。如：.searchpadding-left:30px; height: 35px; color:#fff;.footpadding-left:30px;heig
14、ht: 15px;color:#fff;缩写为：.search,.footpadding-left:30px; color:fff;.searchheight:35px;.footheight:15px;同一属性根据它的属性值也可以进行简写，如：.search background-color:#333;background-image:url(./images/icon.gif);background-repeat: no-repeat;background-position:left;缩写为：.search background:#333 url(./images/icon.gif) no
15、-repeat left颜色值的缩写：当RGB三个颜色值数值相同时，可缩写颜色值代码。如：.menu color:#ff3333;可缩写为:.menu color:#f33;在CSS中关于内外侧边框的距离是按照上、右、下、左的顺序来排列的，当这四个属性值不同时也可直接缩写，如：.btn margin-top:10px;margin-right:8px;margin-bottom:12px;margin-left:5px;padding-top:10px;padding-right:8px;padding-bottom:12px;padding-left:8px;则可缩写为：.btn Margin:10px 8px 12px 5px;Padding:10px 8px 12px 5px;而如果当上边与下边、左边与右边的边框属性值相同时，则属性值可以直接缩写为两个，如：.btn margin-top:10px;margin-right:5px;margin-bottom:10px;margin-left:5px;缩写为：.btn margin:10px 5px;而当上下左右四个边框的属性值都相同时，则可以
