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