Web前端开发参考手册

WEB前端开发参考手册一．概况1.1WEB标准二．实现WEB标准2.1XHTML、CSS介绍2.2XHTML书写规范2.2.1XHTML结构2.2.2标签规范2.3XHTML常用标签介绍2.4CSS书写规范2.4.1表命名参考2.4.2类/ID命名规范2.4.3样式调用2.4.4样式简写2.5CSS常用属性介绍2.6图片规范2.7注释规范2.8浏览器兼容一．概况1.1WEB标准WEB标准不是一个标准，而是一系列标准的集合。网页主要由三部分组成：结构、表现和行为。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3CDOM）、ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（EuropeanComputerManufacturersAssociation）的ECMAScript标准。二、实现WEB标准2.1XHTML、CSS介绍可扩展超文本置标语言（eXtensibleHyperTextMarkupLanguage，XHTML），是一种置标语言，表现方式与超文本置标语言（HTML）类似，不过语法上更加严格。从继承关系上讲，HTML是一种基于标准通用置标语言（SGML）的应用，是一种非常灵活的置标语言，而XHTML则基于可扩展置标语言（XML），XML是SGML的一个子集。XHTML1.0在2000年1月26日成为W3C的推荐标准。级联样式表（CascadingStyleSheet）简称“CSS”，通常又称为“风格样式表（StyleSheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。2.2XHTML书写规范2.2.1XHTML结构文档分为head和body两个部分。html文档中在head关标签后面一定会跟着body的开标签。html的开标签下面一定跟着head的开标签，body的关标签下面一定是html的关标签，这中间都是不能插入任何东西的。head和body在一个html中有且仅有一个。在head里面放置的内容是不会再页面里显示的。在页面中显示的内容放在body里。如下：!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN=样式地址、JS地址、样式等/headbody浏览器能看到的内容部分/body/html2.2.2标签规范标签可以分为成对标签，或者是单标签。成对标签比如divspanolulliselectoptiontabletrthtddldtddemvarspan等等，而单标签就比较少了比如inputimgbriframe等。完整的成对标签如下：div这是一个快标签/div或者olli列表项一/lili列表项二/lili列表项三/li/ol；可以看到每一个标签都有开标前和关标签组成，内容放在开和关标签之间。而单标签的标签应该这么写：br/imgsrc=images/1.gifalt=图片描述/inputtype=buttonvalue=按钮/;像这样的单标签，是不可能再嵌套任何内容的。而我们把斜线(/）放在标签的后尖括号前面，表示标签结束。这点跟成对标签有很大区别。所有标签必须合理嵌套正确的嵌套divspanvar1111/var/span/div就像一个一个大盒子套了一个小盒子又套了一个小盒子，当然还可以继续嵌套，看起来十分对称。不正确的嵌套divspanvar1111/var/div/span这里的标签是不对称的。你没法一层一层的拆开盒子，这就是错误的。2.3XHTML常用标签介绍1、div标签：块元素。可以将文档分为不同的部分。可以使用class和id属性进一步控制页面表现。div是css布局中使用最多的元素。2、p标签：块元素，表示一个文本段落，一般用于换行。3、标题标签：块元素，用来定义文本中的各种标题。从h1至h6有着严格的层级关系。并且每个XHTML上h1元素有且只能使用一次。其中包括一系列的元素：h1，h2，h3，h4，h5，h6,其中每个元素都对应有默认的字体样式其代码如下：h1text/h1h2text/h2h3text/h3h4text/h4h5text/h5h6text/h64、ul和li标签：块元素，无序列表，详见：、ol和li标签：块元素，有序列表，详见：、dl、dt、dd标签：块元素，常用于生成类表格别表，dt、dd位于dl内部。详见：、strong标签：内联元素，使文本以粗体显示。8、a标签：内联元素，用于超链接(herf属性)和设置内部文档书签(ID或Name属性)。9、em标签：内联元素，显示效果为文本斜体。10、span标签：内联元素，用来区分文本中的一个部分。11、br标签：使文本换行。12、img标签：内联元素，用来插入图像文件，当使用img元素时候，其alt属性必须加上，属性内容将在图片不能加载的时候显示。13、label标签：触发鼠标事件，当鼠标事件作用于该元素时，也作用于相对应的input标签。14、input标签：根据不同的type属性值，可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。用于获取提交的数据。当input标签为单选按钮和复选框时，浏览器的兼容性比较差，需要细心调整。15、select和option标签：下拉列表，option位于select内部。16、textarea标签：文本区域，用于输入多行文本文字。17、table，tr，th，td标签：表格，不推荐使用。2.4CSS书写规范2.4.1表命名参考驼峰命名法例：myName全局样式：global.css框架布局：layout.css字体样式：font.css链接样式：link.css打印样式：print.css2.4.2类/ID命名规范Containerdiv#container容器Layout#layout布局Headerorbannerdiv#head,#header页头部分Footerdiv#foot,#footer页脚部分Navigationlist#nav主导航Sub-navigationlist#subNav二级导航Menu#menu菜单SubMenu#submenu子菜单Leftorrightsidecolumns#sidebar_a,#sidebar_b左边栏或右边栏Maindiv#main页面主体Tag#tag标签Message#msg#message提示信息Tips#tips小技巧Vote#vote投票FriendLink#friendlink友情连接Title#title标题Summary#summary摘要Searchinput#searchInput搜索输入框Searchoutput#search_output搜索输出和搜索结果相似Search#search搜索Searchbar#searchBar搜索条Searchresults#search_results搜索结果Copyrightinformation#copyright版权信息brand#branding商标branding-logo#logoLOGOSiteinformation#siteinfo网站信息Copyrightinformationetc.#siteinfoLegal法律声明Designerorothercredits#siteinfoCredits信誉Joinus#joinus加入我们Partnershipopportunities#partner合作伙伴Services#service服务Regsiter#regsiter注册Arrowarr/arrow箭头Little#little标题Websitemap#sitemap网站地图List#list列表Homepage#homepage首页Subpagesubpage二级页面子页面Toolbar#tool,#toolbar工具条Nextpulls#drop下拉Nextpullsmenu#dorpmenu下拉菜单Status#status状态常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn”2.4.3样式调用页面内嵌法：就是将样式表直接写在页面代码的head区。styletype=”text/css”body{background:white;color:black;}/style外部样式表调用：将样式表写在一个独立的.css文件中，然后在页面head区用类似以下代码调用。linkrel=stylesheettype=text/csshref=css/style.css/在符合web标准的设计中，推荐使用外部调用法，可以不修改页面只修改.css文件而改变页面的样式。如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。2.4.4样式简写公共样式的缩写：当两个或多个类有想通的属性值时，可以对属性值进行缩写。如：.search{padding-left:30px;height:35px;color:#fff;}.foot{padding-left:30px;height:15px;color:#fff;}缩写为：.search,.foot{padding-left:30px;color:fff;}.search{height:35px;}.foot{height:15px;}同一属性根据它的属性值也可以进行简写，如：.search{background-color:#333;background-image:url(../images/icon.gif);background-repeat:no-repeat;background-position:left;}缩写为：.search{background:#333url(../images/icon.gif)no-repeatleft}颜色值的缩写：当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:10px8px12px5px;Padding