Web前端开发手册_第1页
Web前端开发手册_第2页
Web前端开发手册_第3页
Web前端开发手册_第4页
Web前端开发手册_第5页
已阅读5页，还剩32页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

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在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"""><htmlxmlns=""><head>样式地址、JS地址、样式等</head><body>浏览器能看到内容部分</body></html>2.2.2标签规范标签能够分为成对标签，或者是单标签。成对标签比如divspanolulliselectoptiontabletrthtddldtddemvarspan等等，而单标签就比较少了比如inputimgbriframe等。完整成对标签以下：<div>这是一个快标签</div>或者<ol><li>列表项一</li><li>列表项二</li><li>列表项三</li></ol>；能够看到每一个标签都有开标前和关标签组成，内容放在开和关标签之间。而单标签标签应该这么写：<br/><imgsrc="images/1.gif"alt="图片描述"/><inputtype="button"value="按钮"/>;像这么单标签，是不可能再嵌套任何内容。而我们把斜线(/）放在标签后尖括号前面，表示标签结束。这点跟成对标签有很大区分。全部标签必须合理嵌套正确嵌套<div><span><var>1111</var></span></div>就像一个一个大盒子套了一个小盒子又套了一个小盒子，当然还能够继续嵌套，看起来十分对称。不正确嵌套<div><span><var>1111</var></div></span>这里标签是不对称。你没法一层一层拆开盒子，这就是错误。2.3XHTML惯用标签介绍1、div标签：块元素。能够将文档分为不一样部分。能够使用class和id属性深入控制页面表现。div是css布局中使用最多元素。2、p标签：块元素，表示一个文本段落，通惯用于换行。3、标题标签：块元素，用来定义文本中各种标题。从h1至h6有着严格层级关系。而且每个XHTML上h1元素有且只能使用一次。其中包含一系列元素：h1，h2，h3，h4，h5，h6,其中每个元素都对应有默认字体样式其代码以下：<h1>text</h1><h2>text</h2><h3>text</h3><h4>text</h4><h5>text</h5><h6>text</h6>4、ul和li标签：块元素，无序列表，详见：5、ol和li标签：块元素，有序列表，详见：6、dl、dt、dd标签：块元素，惯用于生成类表格别表，dt、dd位于dl内部。详见：7、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="stylesheet"type="text/css"href="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:10px8px12px5px;}而假如当上边与下边、左边与右边边框属性值相同时，则属性值能够直接缩写为两个，如：.btn{margin-top:10px;margin-right:5px;margin-bottom:10px;margin-left:5px;}缩写为：.btn{margin:10px5px;}而当上下左右四个边框属性值都相同时，则能够直接缩写成一个，如：.btn{margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px;}缩写为：.btn{margin:10px;}一段完整Css属性编写次序为：浮动、宽度、高度（行高）、内边距、外边距、字体、背景色、背景图、其余属性。如：.head{float:left;width:136px;height:16px;padding:10px;margin:10px;font:normal18px/24px"微软雅黑";background:#333url(../images/icon.gif)no-repeatleftdisplay:block;}2.5CSS惯用属性介绍字体属性：(font)大小font-size:只要用数值就能够，单位：PX样式font-style:normal;(正常)行高line-height:单位：PX粗细font-weight:bold;(粗体)normal;(正常)大小写text-transform:capitalize;(首字母大写)uppercase;(大写)none;(无)修饰text-decoration:underline;(下划线)none;(无)惯用字体：(font-family)通惯用Tahoma(英文和数字愈加好看)、宋体、微软雅黑背景属性：(background)色彩background-color:#FFFFFF;图片background-image:url(图片地址);重复background-repeat:no-repeat;滚动background-attachment:fixed;(固定)scroll;(滚动)极少用位置background-position:left(水平)top(垂直);简写方法background:#000url(..)repeatfixedlefttop;区块属性：(Block)字间距letter-spacing:normal;数值对齐text-align:left;(左对齐)right;(右对齐)center;(居中)缩进text-indent:数值em;通常一段话前面缩进为2em,表现形式为缩进两个汉字垂直对齐vertical-align:baseline;(基线)sub;(下标)super;(下标)top;text-top;middle;bottom;text-bottom;显示display:block;(块)inline;(内嵌)当两个属性同时用着时候能够用display:inline-block处理。方框属性：(Box)浮动float：left左浮right右浮none去除浮动宽度width:数值高度height:数值内边距:padding上右下左外边据：margin上右下左边框属性：(Border)border-style:dotted;(点线)dashed;(虚线)solid(实线);border-width:;边框宽度border-color:#;简写方法border：widthstylecolor;列表属性：(List-style)类型list-style用值none格式化li定位属性：(Position)Position:absolute;relative;overflow用其hidden属性与height:数值能够预防溢出；用其hidden属性与height:auto、zoom:1(兼容IE6必须要用这个属性)设置自适应高度2.6图片规范图片命名规范：名称分为头尾两两部分，用下划线隔开。头部分表示此图片大类性质。比如：放置在页面顶部广告、装饰图案等长方形图片我们取名：banner；标志性图片我们取名为：logo；在页面上位置不固定而且带有链接小图片我们取名为button；在页面上某一个位置连续出现，性质相同链接栏目标图片我们取名：menu；装饰用照片我们取名：pic；不带链接表示标题图片我们取名：title依照此标准类推。尾部分用来表示图片详细含义，用英文字母表示。比如：banner_sohu.gif有onmouse或hover效果图片，两张分别在原有文件名后加"_on"和"_off"命名。如：banner_sohu_on.gif图片质量：图片质量与图片格式有很大关系，尽可能用gif图，而且在制作效果图时就应少用阴影、半透明效果图，这么能够降低图片数量。PNG图片尽可能不要用，IE6下对PNG支持非常不好，兼容性调整时候又要分背景PNG和插入图片PNG，很麻烦。图片尺寸：不一样页面，相同栏目标图片尺寸应按相同百分比设计，尺寸不一样，百分比相同同一张图片在浏览器里不会变形和失真太严重。插入图片：插入图片在XHTML表现为：<imgsrc="images/12090.gif"width="120"height="90"alt=”人物头像”/>宽度、高度和alt属性必须给出。当插入图片有超级链接时，会默认有蓝色边框，所以我们在页面最开始就应该格式化图片img{border:0;}这么就不会有蓝色边框了。图片背景：背景图片在CSS表现为：background:url(../images/dot.gif)leftcenterno-repeat;2.7注释规范XHTML注释：在实际工作中，有时会出现分不清注释应该在标签之上还是标签之下，为了防止这种情况，注释信息统一写在区域标签开始之前和结束之后，并以“S”或“E”开始，表示区域注释开始或结束。例：<!--=注释内容start--><div>...</div><!--=注释内容end-->在模块制作中，可能会出现区域中还有区域情况，为了愈加好区分区域之间层级，引入了注释层级概念。区域注释前面等号表示了当前注释层级例：<!--=注释内容start-->...<!--==注释内容start-->...<!--===注释内容start-->...<!--===注释内容end-->...<!--==注释内容end-->...<!--=注释内容end-->提醒：不提议XHTML里写注释，两个浮动标签之间添加注释时候，可能会引发IE6字符复制掉行BUG，极难处理，只有二者间删除注释。假如不添加注释，页面标签排列必须层次清楚，排列对称。再辅助火狐插件FireBug使用，就能清楚明了查看网页布局和层次结构，完全能够不添加注释。CSS注释：在实际工作中，有时会出现分不清注释应该在标签之上还是标签之下，为了防止这种情况，注释信息统一写在区域标签开始之前和结束之后，并以“S”或“E”开始，表示区域注释开始或结束。例：/*=注释内容start*/.class{...}.class{...}/*=注释内容end*/在模块制

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论