当前位置：文档之家 › Web前端开发参考手册

Web前端开发参考手册

  • 格式：doc
  • 大小：39.00 KB
  • 文档页数：18

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和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里。 如下:

";>

;

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

所有标签必须合理嵌套

正确的嵌套

1111

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

不正确的嵌套

1111

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

2.3 XHTML常用标签介绍

1、div标签:块元素。可以将文档分为不同的部分。可以使用class和id属性进一步控制页面表现。div是css布局中使用最多的元素。

2、p标签:块元素，表示一个文本段落，一般用于换行。 3、标题标签:块元素，用来定义文本中的各种标题。从h1至h6有着严格的层级关系。并且每个XHTML上h1元素有且只能使用一次。其中包括一系列的元素:h1，h2，h3，h4 ，h5，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.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 下拉

合集下载

WEF3.0标签开发手册20120725

WEF3.0标签开发手册20120725

1 / 54 一. 控件配置属性列表

1. File

a) 属性列表

属性名称 说明 备注

styleId 指明元素的唯一ID

styleClass 指明元素的类名 值为button

ui-button ui-widget

ui-state-default

ui-corner-all

ui-button-text-only

style 指定元素的内嵌样式

property 属性名称 必填

disabled 指出在加载页面时是否将给定输入控件设为禁用 值为true、false

name 例如:

User temp = new User();

temp.setUserName("名称"); request.setAttribute("user",temp);request中保存名为user的属性

2、标签代码为

property="userName"/>,

3、编译后生成原生html代码

type="text" name="user" value="名称"/>

value 指定输入控件的值

accesskey 设置访问元素的键盘快捷键

dir 指定元素里内容的文本方向 rtl,ltr

tabindex 指定元素的Tab键顺序

title 指定元素的提示文本

b) 使用实例

2 / 54 2. Password（密码）

a) 属性列表

属性名称 说明 备注

styleId 指明元素的唯一ID

styleClass 指明元素的类名 值为button

ui-button ui-widget

ui-state-default

ui-corner-all

ui-button-text-only

style 指定元素的内嵌样式

property 属性名称 必填

disabled 指出在加载页面时是否将给定输入控件设为禁用 值为true、false

Web前端开发规范手册

Web前端开发规范手册

Web前端开发规范手册

一、规范目的

1.1 概述 ..................................................................................................................................... 1

二、文件规范

2.1 文件命名规则.........................................................................................................................1

2.2 文件存放位置..........................................................................................................................2

2.3 css 书写规范..........................................................................................................................3

2.4 html书写规范.........................................................................................................................7

2.5 JavaScript书写规范.............................................................................................................11

web前端开发知识点总结

web前端开发知识点总结

HTML知识总结

常用标签 文本类 span 行级元素，多个同行

div 块级元素，独占一行

p 块级元素，前后保留一行

h 标题标签，h1~h6表6个等级，加粗，前后保留一行

图片标签 img width：设置宽度

height：设置高度

alt：图片加载失败显示的文本

水平线 hr color：颜色

size：高度（粗细）

width：宽度（长度）

超链接 a herf：超链接转到的地址

target _self:默认值，在当前页面打开

_blank:在新窗口打开

带标题的框 fieldset legend 设置标题

列表标签 无序列表 ul disc：实心圆

square：小方块

circle：空心圆 有序列表 ol 表格标签

th 表示标题单元格，居中、加粗

td 表示一个单元格

caption 表示标题，定义在第一行，居中

rowspan 设置单元格占的行数

colspan 设置单元格占的列数

表单项

method get：显示提交参数，将参数用?和&拼接到url上带到服务器端

post：隐式提交参数

下拉菜单

optgroup 表示分组,分组不能选,只能选分组中的option

selected默认选中

multiple 设置下拉菜单为多选模式

文本域

web前端开发面试题及参考答案

web前端开发面试题及参考答案

web前端开发面试题及参考答案

要求求职者完成面试题已经成为web前端开发求职者求职面试过程中的重要环节之一。以下是店铺为大家整理的：web前端开发面试题及答案，仅供大家参考!

web前端开发面试题及答案

1、Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?

(1)、声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。

(2)、严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。

(3)、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

(4)、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

2、行内元素有哪些?块级元素有哪些?

(1)CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值， 比如div默认display属性值为“block”，成为“块级”元素; span默认display属性值为“inline”，是“行内”元素。

(2)行内元素有：a b span img input select strong(强调的语气)

块级元素有：div ulol li dl dtdd h1 h2 h3 h4…p

3、link 和@import 的区别是?

(1)link属于XHTML标签，而@import是CSS提供的;

(2)页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

(3)import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;

(4)link方式的样式的权重高于@import的权重.

4、浏览器的内核分别是什么?

IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink(WebKit的分支)、Opera内核原为Presto，现为Blink;