---------------------------------

一.概况

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,表现标准语言主要包括 CSS,行为标准主要包括对象模型(如  W3C DOM)、ECMAScript 等。这些标准大部分由W3C起草和发布,也有一些是其他标准组织制订的标准,比如ECMA(European Computer Manufacturers Association)的 ECMAScript 标准。

二、实现WEB标准

2.1  XHTML、CSS介绍

可扩展超文本置标语言(eXtensible HyperText Markup Language,XHTML),是一种置标语言,表现方式与超文本置标语言(HTML)类似,不过语法上更加严格。从继承关系上讲,HTML是一种基于标准通用置标语言(SGML)的应用,是一种非常灵活的置标语言,而XHTML则基于可扩展置标语言(XML),XML是SGML的一个子集。XHTML 1.0在2000年1月26日成为W3C的推荐标准。

级联样式表(Cascading Style Sheet)简称“CSS”,通常又称为“风格样式表(Style Sheet)”,它是用来进行网页风格设计的。比如,如果想让链接字未点击时是蓝色的,当鼠标移上去后字变成红色的且有下划线,这就是一种风格。通过设立样式表,可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表,可以扩充精确指定网页元素位置,外观以及创建特殊效果的能力。

2.2  XHTML书写规范

2.2.1 XHTML结构

文档分为head 和body两个部分。
html文档中在head关标签后面一定会跟着body的开标签。html的开标签下面一定跟着head的开标签,body的关标签下面一定是html的关标签,这中间都是不能插入任何东西的。head和body在一个html中有且仅有一个。

在head里面放置的内容是不会再页面里显示的。在页面中显示的内容放在body里。

如下:
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

样式地址、JS地址、样式等

</head>

<body>

浏览器能看到的内容部分

</body>
</html>

2.2.2 标签规范

标签可以分为成对标签,或者是单标签。

成对标签比如 div span ol ul li select option table tr th td dl dt dd em var span等等,而单标签就比较少了 比如 input img br iframe 等。

完整的成对标签如下:<div>这是一个快标签</div> 或者

<ol>

<li>列表项一</li>

<li>列表项二</li>

<li>列表项三</li>

</ol>;
可以看到每一个标签都有开标前和关标签组成,内容放在开和关标签之间。

而单标签的标签应该这么写:

<br/>

<img src="data:images/1.gif" alt="图片描述"/>

<input type="button" value="按钮"/> ;

像这样的单标签,是不可能再嵌套任何内容的。而我们把斜线(/)放在标签的后尖括号前面,表示标签结束。这点跟成对标签有很大区别。

所有标签必须合理嵌套

正确的嵌套

<div>

<span>

<var>1111</var>

</span>

</div>

就像一个一个大盒子套了一个小盒子 又套了一个小盒子,当然还可以继续嵌套,看起来十分对称。

不正确的嵌套

<div>

<span>

<var>1111</var>

</div>

</span>

这里的标签是不对称的。你没法一层一层的拆开盒子,这就是错误的。

2.3  XHTML常用标签介绍

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标签:块元素,无序列表,详见:http://www.w3school.com.cn/tags/tag_ul.asp

5、ol和li标签:块元素,有序列表,详见:http://www.w3school.com.cn/tags/tag_ol.asp

6、dl、dt、dd标签:块元素,常用于生成类表格别表,dt、dd位于dl内部。

详见:http://bbs.blueidea.com/thread-3023757-1-1.html

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.4  CSS书写规范

2.4.1 表命名参考

驼峰命名法 例:myName

全局样式:global.css

框架布局:layout.css

字体样式:font.css

链接样式:link.css

打印样式:print.css

2.4.2 类/ID命名规范

Container div #container 容器

Layout #layout 布局

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 投票

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 LOGO

Site information #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 #homepage 首页

Sub page subpage 二级页面子页面

Toolbar #tool, #toolbar 工具条

Next pulls #drop 下拉

Next pulls menu #dorpmenu 下拉菜单

Status #status 状态

常用类的命名应尽量以常见英文单词为准,做到通俗易懂,并在适当的地方加以注释。对于二级类/ID命名,则采用组合书写的模式,后一个单词的首字母应大写:诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn”

2.4.3 样式调用

页面内嵌法:就是将样式表直接写在页面代码的head区。

<style type=”text/css”>

body{background:white; color:black;}

</style>

外部样式表调用:将样式表写在一个独立的.css文件中,然后在页面head区用类似以下代码调用。

<link rel="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-image:url(../images/icon.gif);

background-repeat: no-repeat;

background-position:left;

}

缩写为:

.search {

background:#333 url(../images/icon.gif) no-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;}

而当上下左右四个边框的属性值都相同时,则可以直接缩写成一个,如:

.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:normal 18px/24px "微软雅黑";

background:#333 url(../images/icon.gif) no-repeat left

display:block;

}

2.5  CSS常用属性介绍

字体属性:(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-image: url(图片地址);

重复background-repeat: no-repeat;

滚动background-attachment: fixed;(固定) scroll;(滚动) 很少用

位置background-position: left(水平) top(垂直);

简写方法 background:#000 url(..) repeat fixed left top;

区块属性: (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:width  style  color;

列表属性: (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表现为:

<img src="data:images/12090.gif" width="120" height="90" alt=”人物头像” />

宽度、高度和alt属性必须给出。

当插入图片有超级链接时,会默认有蓝色边框,所以我们在页面最开始就应该格式化图片

img{border:0;}

这样就不会有蓝色边框了。

图片背景:

背景图片在CSS表现为:

background:url(../images/dot.gif) left center no-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 */

在模块制作中,可能会出现区域中还有区域的情况,为了更好的区分区域之间的层级,引入了注释层级的概念。区域注释前面的等号表示了当前注释的层级例:

/* =注释内容 start */

...

/* ==注释内容 start */

...

/* ===注释内容 start */

...

/* ===注释内容 end  */

...

/* ==注释内容 end */

...

/* =注释内容 end */

不管是CSS注释,还是XHTML最好都用英文。CSS中文注释可能产生CSS失效的BUG。

2.8  浏览器兼容

当下常用浏览器有:IE6、IE7、IE8、IE9、火狐、谷歌、Safari苹果这几种。

其中兼容性问题最大的是IE6,其次是IE7。火狐、谷歌、苹果的兼容性已经非常的好,更多

的是考虑IE6和IE7。

IE6、IE7、Firefox之间的兼容写法:

IE6 IE7特有hack:

写法一:

IE6能识别_, IE7能识别*

根据上述表达,同一类/ID下的CSS hack可写为:

.searchInput {

/* 正常属性 */

* /* 仅IE7 */

_ /* 仅IE6 */

}

一般三者的书写顺序为:正常属性、IE7、IE6.

写法二:

*+html 与 *html 是IE特有的标签, Firefox 暂不支持。

.searchInput {}

*html .searchInput {background-color:#666;}/*仅IE6*/

*+html .searchInput {}/*仅IE7*/

IE6常见bug解决:

双外边距: 某个类有属性 margin-left:10px的时候,IE6下会可能会解析成20px的边距。

这个时候,就要给这个类加属性  _display:inline;

PNG透明:JS解决

标签高度自适应:height:auto; overflow:hidden; zoom:1;

鼠标滑动事件:JS解决

更多IE6 BUG及解决方案

http://www.css88.com/archives/579

web前端基本开发手册的更多相关文章

  1. web前端网页开发一般过程

    看见很多新手同学前端开发,效率比较慢.总是拿起代码就敲,不分析,没有逻辑,反而使效率变慢.所谓磨刀不误砍柴工,有一个良好的过程,才是最主要的: 1.分析平面效果图,在草稿纸上画出基本结构图 2.建立项 ...

  2. 就来推荐一本2018年研究的Web书《移动Web前端高效开发实战》

    一线互联网公司Web前端团队实战经验总结,涵盖移动Web前端开发各个关键技术环节,包括移动开发核心技术.常用布局方案.MV*类新时代框架.预编译技术.性能优化.开发调试.混合式应用.单元测试.工程化等

  3. 《移动Web前端高效开发实战》笔记4--打造单页应用SPA

    路由是一个单页应用的核心,大部分前端框架都实现了一个复杂的路由库,包括动态路由,路由钩子,组件生命周期甚至服务器端渲染等复杂的功能.但是对于前端开发者而言,路由组件的核心是URL路径到函数的映射,了解 ...

  4. 《移动WEB前端高级开发实践@www.java1234.com》——3

    React Flux: Flux将一个应用分成四个部分. View: 视图层 Action(动作):视图层发出的消息(比如mouseClick) Dispatcher(派发器):用来接收Actions ...

  5. 《移动WEB前端高级开发实践@www.java1234.com.pdf》——2

    5.3 作用域.闭包和this let 声明的变量只存在于其所在的代码块中 由于 JS 是基于词法(静态)作用域的语言,词法作用域的含义是在函数定义时就确定了作用域,而不是函数执行时再确定 calcu ...

  6. 《移动Web前端高效开发实战》笔记1——静态布局在移动端上的自适应

    1.整体缩放 整体缩放可以用在营销活动页,营销活动可能因为设计美观需求必须使用背景图片而非背景色,因此需要考虑背景图适应屏幕大小.开发者可以用320像素的宽度作为基础宽度(高度可以固定),然后通过计算 ...

  7. 《移动WEB前端高级开发实践@www.java1234.com.pdf》

    HTTP服务器: http-server 3.6.4 利用 Performance API 分析网站性能 页面加载生命周期 4. CSS3 伪类.伪元素, 看https://www.runoob.co ...

  8. WEB前端移动开发初始化

    meta篇 1.视窗宽度 <meta name="viewport" content="width=device-width,initial-scale=1.0,m ...

  9. 《移动Web前端高效开发实战》笔记3--代码检查任务

    在项目的开发过程中,统一的代码风格对于项目的可协作性以及可维护性来说相当重要,因此可以采用一些插件来进行代码风格的检查. 本例中的源文件包含两类:Sass文件和采用ECMAScript 6规范的Jav ...

随机推荐

  1. excel技巧--批量生成工资条

    要想生成如上图的工资条,快速的方法如下: 1.在工资表右侧建立一升序数字列,完成后再复制该列,重复粘贴一次在该列底部.2.对该表排序:“开始”-->“排序和筛选”-->自定义排序.在对话框 ...

  2. Delphi XE5开发Android程序使用自定义字体文件.

    万事大吉,只欠根据字体文件(.ttf文件)切换阅读字体,通常Android系统只带三种以下字体.一般用Java/Eclipse开发的话比较简单,typeface的createFromAsset,cre ...

  3. InfluxDB HTTP API reference

    InfluxDB HTTP API reference API地址:https://docs.influxdata.com/influxdb/v1.6/tools/api/ The InfluxDB ...

  4. Windows Azure Web Site (19) Azure Web App链接到VSTS

    <Windows Azure Platform 系列文章目录> 之前遇到一个问题,客户在海外使用 我参考了一下国内Azure China的文档:https://school.azure.c ...

  5. PowerPoint’s Menu is Too Big

    转自: http://jdav.is/2016/08/31/powerpoints-menu-is-too-big/ It seems that when Microsoft deployed the ...

  6. 【springboot】之Application配置

    # =================================================================== # COMMON SPRING BOOT PROPERTIE ...

  7. Java 线程转储 [转]

    http://www.oschina.net/translate/java-thread-dump java线程转储 java的线程转储可以被定义为JVM中在某一个给定的时刻运行的所有线程的快照.一个 ...

  8. 【Java】Java初始化过程总结

    概述 Java字节代码:byte[] Java类在JVM的表现形式:Class类的对象: Java源代码被编译成class字节码 : Java字节代码 --> Class类的对象: 加载:把Ja ...

  9. Javascript中的this(七)

    一.为什么要用this      通过this可以在不同的上下文对象中重复使用函数 二.this是什么      this就是我们说的执行上下文(包含调用栈(哪里被调用).函数的调用方式.传入的参数等 ...

  10. Oracle关于自连接、左外连接、右外连接、全连接

    关于自连接.左外连接.右外连接.全连接:   简单来讲,随便来个例子: A表 B表 id name id name  1 a 1 b  2 b 3 c 4 c   内连接就是左表和右表相同的数据: s ...