Web前端开发基础总结

时间：2023-07-22 06:21:01 | 来源：网站运营

时间：2023-07-22 06:21:01 来源：网站运营

Web前端开发基础总结：1、前端技术包括4个部分：前端美工、IE兼容、CSS、HTML“传统”技术与Adode AIP、Google Gears以及概念性较强的交互式设计、艺术性较强的视觉设计。更多文章 http://www.icketang.com/?sxt175

2、前端开发工程师职责：根据设计图用HTML+CSS 完成页面制作，在此基础上对完成页面进行维护和对网站前端性能做相应的优化，有一定的美工，审美能力。

3、资深前端开发工程师：使用JavaScript或ActionScript来编写和封装具有良好性能的前端交互式组件，熟悉使用CSS+XTHML完美输出视觉界面，对Web项目的前端实现方案提供专业指导、监督，并在日常工作中对新人员以及相关开发人员进行培训和指导、跟踪研究前端开发技术，设计并实施全网前端优化。

4、XHTML CSS 基础知识

（1）、文档类型：DW打开html第一句代码

（2）、语言编码：gb2312（简体中文） UTF-8（国际通用）

（3）、html标签：在页面中都必须有结束标志

（4）、css样式：外部、内部、行内、导入

（5）、css优先级：id优于class；后面覆盖前面的定义

（6）、css盒模型组成：由css定义大小不一的盒子

5、标准的xhtml是由小写字母组成的

6、css样式导入中用：@import url（”路径“）；全局都用到的样式嵌入所要用的单独表

7、css样式中盒子的width只是内容的宽度，模型的宽度是由左右边界+左右边框+左右填充+内容

8、居中：外边界自动，margin：auto；

9、display：inline将块级元素改为内联元素，display：block则相反

10、导航：menu---ul li 二级导航：nav 定义

11、网页制作全局global.css样式，去掉网页默认设置属性

12、超链接的四种样式：a:link a:visited a:hover a:active

13、首字下沉：p｛属性｝p：fisrt-letter｛属性,float:left｝

14、layout版面设计

15、文字垂直居中 line-height：10px；图片垂直居中：vertical-align：middle；

16、网站首页的主体样式：头部、导航、内容、底部

17、写样式：全局样式表：global.css 基础样式定义

18、layout.css 版面设计样式表 /*body*/

（1）、#container｛全局div 宽度、居中｝

（2）、头部 #header｛｝

（3）、导航 #menu｛｝

（4）、内容整体框架 #main content｛｝ #main｛左边内容区域｝ #side｛右边内容区域｝

（5）、底部#footer｛｝

19、头部一般分两个部分：logo 和 search （inp_srh 和 btn_srh）

20、导航：一般有一级导航和二级导航（menu 和 nav）列表形式：ul li a

21、标题形式可用：h1-h6 加粗用strong

22、列表形式用 ul li 有序号 1.2.3用ol li

23、内容标题形式用 dl dt dd

24、浏览器独有的识别符号：_ IE6 ; * IE6 IE7 ; *+html IE7 ; *html IE6 写在样式前面 ！import IE7 FF ；/g IE8 写在样式后面

25、css属性：<nobr></nobr>强行不换行 互换为大小写：text-transform：uppercase/lowercase/首个字母大写capitlize

26、css if hack 语法 <!--[if IE6]>only IE6 <[!end if]-->

27、静态语句截断字符：定义css宽度 overflow：hidden//多余的隐藏 text-overflow：ellipsis； 文本省略（…）代替 white-space：nowrap； 文本不换行

28、所有的xhtml元素和属性名字都必须使用小写

29、为所有图片添加alt属性

30、标准的w3c校正网址

31、注释：<!--这里是注释=======================这里是注释-->

32、辅助图片一律用杭州形式表示。