web前端学习计划[优秀范文五篇]

第一篇：web前端学习计划

web前端学习计划

时光飞逝，时间在慢慢推演，我们的学习目标和学习任务同时也不断变化，是时候写学习计划了哦。估计许多人是想得很多，但不会写，以下是小编收集整理的web前端学习计划，希望对大家有所帮助。

所谓行万里路，必先始于足下。刚开始学习WEB前端基础的时候，老师说，其实你们学的这个后面真正去工作的时候可能也不是很会用到，所以就有很多人会问，既然我们都用不到，那干嘛还学呀？其实，对于一个程序员来说，你不仅要有很好的后端专业能力，你还应当具备一定的前端素养，知道一些起码的前端知识。

来到传智的第一个月，我们是以基础为主吧，因为大家到这里的基础都不一样，有一些本身就具备很高水准的人，也有很多像自己一样从小白开始的人，所以，对我们而言，传智开设的这种双元模式对我们是有很大用处的。我们从最基础的开始学习，在学习HTML的时候，我们还延续着很古老和古老的表格制作网站，然后到后面的CSS学习，用CSS样式去进一步完善我们制作的网址，再到着一期的难点JS课程体系，一级最后的JQ和BOOtstrap，可以说这个过程其实也是一个循序肩颈的过程，有简到难的过程。

首先我们回顾一下最开始我们对HTML的学习。

其实HTML的四天学习的话，重要的就是一个标记的学习，这大概是学习一门语言最基础的一部分吧。但是也不是说背一背就解决问题的，选择IT，程序员这一方面，只要多练习，多敲代码感觉就好了，所以熟练的使用这些标记其实不是很大的问题，对自己来说，比较难的是一个表格和框架，也许会有人说，表格有什么难的，就行列的问题啊，但是不知道为什么，在学习的那几天对于表格的学习和接受能力都没有别的那么好，表格的整体框架能搭出来，但是就是对于表格的美化总做不到自己心里所预期的那样。其实练习的话也是挺多的，对于表格的`网页练习做了应该也有一二十个的，但是就是没那么理想，所以这方面的话也是需要自己多加练习和修正的，因为表格的用处还是挺大的。HTML的学习方面还有框架和表单，框架的话，就是一个网页的主体了，网页的大致形式基本上从你的框架结构就可以知道的，学习框架，重要的就是网页的布局如何划分，然后利用框架的嵌套，浮动就可以解决的，学习过程也不会是很大的难度。

想想HTML还学了些什么呢？表单！表单对前端开发来说还是挺高的，因为我们能在一个网页中看到很多的表单应用。包括用户的注册啦，密码验证啦，还有搜索栏之类的，几乎全是表单的应用。表单学习比较重要的地方应该就是那十来个表单控件的应用，这些表单控件进一步区分的话还有就是单边标记和双边标的的表单控件，因为很多单边标记的表单，他的值一般只能是存在value当中，如果不注意的话，很多时候我们会忘记写上这个value。这个阶段的表单感觉并不是那么难，当然，学到后面的JS之后，相对于表单验证之类的才感觉难了很多。

第二部分：CSS学习

对我来说，CSS课程虽然只有三天，但是却是更应该学好的一个模块。因为我们都知道，其实一个网站的WEB前端，就是用加CSS来写的，不是用之前的表格来写的，足以见得CSS的重要性。CSS就是网页样式，一个网页的整体美感，在你确定了框架之后，就看你的CSS样式的添加了，所以一直以来都很想把CSS学好。记得CSS学习的那几天，自己的消化还是很好的，自己去独立完成练习的时候也是没有太大难度的，但是不知道是为什么，到后面学习JS JQ的时候，操作CSS时居然会吧CSS和HTML弄的有点混淆，这一点一直没做好。CSS的学习还有一个地方就是浮动，因为存在块元素和行辈元素，块元素因为其本身特性，一个块元素标记他要占用一整行的空间，而一个行内元素他只能占用行内的一些空间，但是在实际操作中，很多时候我们却要想将多个块元素排在同一行，或者将多个行内元素排在不同行，这时候就可以使用浮动的方法来实现，浮动最主要做的就是这个，唯一要记住的一点就是做了浮动之后，如果他的父元素是没有进行匡高的设定的话，是不是要进行清除浮动，防止下面的操作也是有浮动的。

第三部分：重点学习----JS

JS是相对于这整个月学习的重点吧，也是很多人没办法很好接触的地方，当然，自己在这里的学习也是有不足的地方。像一些对属性的操作的标记之类，懂得怎么用，但是不是很熟悉，所以经常在操作的时候要去查手册。学的最不好的一个地方应该是将数组中的元素按照一定的规则或者顺序添加到指定或对应的表格中，这中题型是自己做的比较少的，也是掌握很不好的地方，所以也希望用放假的这几天好好练习一下，不能拖到下一个阶段去。个人对JS的理解其实就是大量算法的集合，因为很多时候你都会用到函数，只是多了一些找元素和对元素绑定标记的过程，最重要的还是构造函数，调用函数的过程！

第四部分：JQ及Bootstrap

对于JQ和Bootstrap的学习来说，其实就是一个应用的过程吧，所有的函数都帮你写好了，你只需要学会调用就好了的。当然。调用他，其实对于JQ来说，学习的过程没有具备很大的难度，只是尝试着去多写写，写两三次基本就记住怎么用了。最后还有一天的Bootstrap学习，写过一些案例，只要会改，基本没有太大的难度。

后续：其实对于WEB前端的学习的话重要的就是多用，很多东西我们上课听得时候其实都基本听得懂，但是更重要的是在于你课后的练习，离开了老师的一个思维引导，我们该怎样去完成项目才是我们该学会的。这一个月的学习难度系数都不是很高。但却是一个比较繁杂的过程，因为作为前端来说，我们需要不断的优化，不断的修正，美化整个页面。不管是前端还是后端，都希望自己能好好学！

Fightting！

第二篇：最新web前端学习路线

最新web前端的学习路线

程序设计之道无远弗届，御晨风而返。———— 杰佛瑞 · 詹姆士 很多前端初学者总会问以下两个问题： 第一种一直在问：如何学习前端？

第二种总说：前端很简单，就那么一点东西。

我从没有听到有人问：如何做一名优秀、甚至卓越的WEB前端工程师。详细了解成为一个优秀的前端工程师，都需要具备哪些特质？ 何为前端工程师

前端工程师，也叫Web前端开发工程师。他是随着web发展，细分出来的行业。Web前端开发技术主要包括三个要素：HTML、CSS和JavaScript!

HTML 甚至不是一门语言，他仅仅是简单的标记语言!

CSS 只是无类型的样式修饰语言。当然可以勉强算作弱类型语言。

Javascript 的基础部分相对来说不难，入手还算快。

此篇文章中就HTML、CSS、JS都有哪些区别？进行了全面的解读！

前端开发的入门门槛其实很低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。也正因为如此，前端开发领域有很多自学成“才”的同行，但大多数人都停留在会用的阶段，因为后面的学习曲线越来越陡峭，每前进一步都很难。

现在市场很需要优秀的、高级的前端工程师。

一方面是因为这是一个比较新的细分行业，而且前端程序员大都自学一部分，知识结构不系统;另一方面，大学里面没有这种课程，可以加入web前端学习君羊：前面数字是五一四，中间数字是一六七，后面三位数字是六七八，将数字串联起来，了解学习更多在学校学不到的技术干货。如何学习前端知识

我们生活在一个充满规则的宇宙里面。社会秩序按照规则运行，计算机语言几乎全部是规则的集合。计算机前辈们定义规则，规则约束我们，我们用规则控制数据。大部分时候，对数据的合理控制，来自于你对规则的掌握。

学习HTML，CSS 应该先跟着书仔细、扎实的学一遍。然后就需要做大量的练习，做各种常规的、奇怪的、大量的布局练习来捆固、理解自己的知识。

而学习Javascript 首先要知道这门语言可以做什么，不能做什么，擅长做什么，不擅长做什么!

如果你只想当一个普通的前端程序员，你只需要记住大部分 Javascript 函数，做一些练习就可以了。

如果你想当深入了解Javascript，你需要了解 Javascript 的原理、机制。需要知道他们的本源，需要深刻了解 Javascript 基于对象的本质。

还需要深刻了解浏览器宿主下的 Javascript 的行为、特性。

初学者全面了解JavaScript，用心读这篇文章 掌握六大JavaScript框架，薪水就是比同级别高！

作为一个优秀的前端工程师还需要深入了解、以及学会处理 Javascript 的这些缺陷。

优秀的前端工程师应具备什么条件

首先，优秀的Web前端开发工程师要在知识体系上既要有广度和深度!做到这两点，其实很难。所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。技术非黑即白，只有对和错，而技巧则见仁见智。

在以前，会一点Photoshop和Dreamweaver的操作，就可以制作网页。成为一个优秀的前端工程师，都需要具备哪些特质？

现在，只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。

Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，它的主要职能就是把网站的界面更好地呈现给用户。

优秀的Web前端开发工程师应该具备快速学习能力

Web发展的很快，甚至可以说这些技术几乎每天都在变化!如果没有快速学习能力，就跟不上 Web发展的步伐。前端工程师必须不断提升自己，不断学习新技术、新模式;仅仅依靠今天的知识无法适应未来。Web的明天与今天必将有天壤之别，而前端工程师的工作就是要搞清楚如何通过自己的Web应用程序来体现这种翻天覆地的变化。

说到这里，我想起了一个大师说过的一句话：对于新手来说，新技术就是新技术。

对于一个高手来说，新技术不过是就技术的延伸。优秀的前端工程师需要具备良好的沟通能力

因为前端工程师至少都要满足四类客户的需求：

1、产品经理。这些是负责策划应用程序的一群人。他们会想出很多新鲜的、奇怪的、甚至是不可是实现的应用。一般来说，产品经理都追求丰富的功能。

2、UI设计师。这些人负责应用程序的视觉设计和交互模拟。他们关心的是用户对什么敏感、交互的一贯性以及整体的好用性。一般来说，UI设计师于流畅靓丽、但并不容易实现的用户界面，而且他们经常不满前端工程师造成 1px 的误差。

3、项目经理。这些人负责实际地运行和维护应用程序。项目管理的主要关注点，无外乎正常运行时间、应用程序始终正常可用的时间、性能和截止日期。项目经理追求的目标往往是尽量保持事情的简单化，以及不在升级更新时引入新问题。

4、最终用户。指的是应用程序的主要消费者。尽管前端工程师不会经常与最终用户打交道，但他们的反馈意见至关重要。最终用户要求最多的就是对个人有用的功能，以及竞争性产品所具备的功能。总结

要做优秀的前端工程师，还需要继续努力：《高性能网站建设指南》、《Yahoo工程师的网站性能优化的建议》、“YSLOW”性能优化建议、《网站重构》、《Web开发敏捷之道》、“ jQuery 库”、“前端框架”、“HTML5”、“CSS3” 这些都要深入研究!

万事开头难！如果你能到这个境界，剩下的路自己就可以走下去了。

人们常说：不想当裁缝的司机，不是个好厨师。

在成为一个优秀的前端工程师的道路上，充满了汗水和辛劳，如果你对前端开发有更多的见解以及不同的意见，欢迎留言将您的见解分享给所有web前端开发爱好者。

程序设计之道无远弗届，御晨风而返。———— 杰佛瑞 · 詹姆士 现在互联网的大环境的发展如日中天，网络已经深入到每个人生活的的各个方面，各种项目层出不穷，以及各种定制化的ui风格神马的，PC端、手机端、mobile端，各种兼容问题真的很浪费时间，大家在不断的摸索中发现，把html+css+js这部分工作独立出来一个新的岗位来处理。发展前景我是看好的，对于一个技术行业，我认为首先如何提升自己的个人能力是保持行业发展的源动力。没有真是过硬的技术，前景发展都是免谈。

那么很多情况又是这样： 第一种一直在问：如何学习前端？

第二种总说：前端很简单，就那么一点东西。

我从没有听到有人问：如何做一名优秀、甚至卓越的WEB前端工程师。详细了解成为一个优秀的前端工程师，都需要具备哪些特质？ 何为前端工程师

前端工程师，也叫Web前端开发工程师。他是随着web发展，细分出来的行业。Web前端开发技术主要包括三个要素：HTML、CSS和JavaScript!

HTML 甚至不是一门语言，他仅仅是简单的标记语言!

CSS 只是无类型的样式修饰语言。当然可以勉强算作弱类型语言。

Javascript 的基础部分相对来说不难，入手还算快。此篇文章中就HTML、CSS、JS都有哪些区别？进行了全面的解读！

前端开发的入门门槛其实很低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。也正因为如此，前端开发领域有很多自学成“才”的同行，但大多数人都停留在会用的阶段，因为后面的学习曲线越来越陡峭，每前进一步都很难。

现在市场很需要优秀的、高级的前端工程师。

一方面是因为这是一个比较新的细分行业，而且前端程序员大都自学一部分，知识结构不系统;另一方面，大学里面没有这种课程，可以加入web前端学习君羊：前面数字是五一四，中间数字是一六七，后面三位数字是六七八，将数字串联起来，了解学习更多在学校学不到的技术干货。

如何学习前端知识

我们生活在一个充满规则的宇宙里面。社会秩序按照规则运行，计算机语言几乎全部是规则的集合。计算机前辈们定义规则，规则约束我们，我们用规则控制数据。大部分时候，对数据的合理控制，来自于你对规则的掌握。

学习HTML，CSS 应该先跟着书仔细、扎实的学一遍。然后就需要做大量的练习，做各种常规的、奇怪的、大量的布局练习来捆固、理解自己的知识。

而学习Javascript 首先要知道这门语言可以做什么，不能做什么，擅长做什么，不擅长做什么!

如果你只想当一个普通的前端程序员，你只需要记住大部分 Javascript 函数，做一些练习就可以了。

如果你想当深入了解Javascript，你需要了解 Javascript 的原理、机制。需要知道他们的本源，需要深刻了解 Javascript 基于对象的本质。

还需要深刻了解浏览器宿主下的 Javascript 的行为、特性。初学者全面了解JavaScript，用心读这篇文章 掌握六大JavaScript框架，薪水就是比同级别高！

作为一个优秀的前端工程师还需要深入了解、以及学会处理 Javascript 的这些缺陷。

优秀的前端工程师应具备什么条件

首先，优秀的Web前端开发工程师要在知识体系上既要有广度和深度!做到这两点，其实很难。所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。技术非黑即白，只有对和错，而技巧则见仁见智。

在以前，会一点Photoshop和Dreamweaver的操作，就可以制作网页。成为一个优秀的前端工程师，都需要具备哪些特质？

现在，只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。

Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，它的主要职能就是把网站的界面更好地呈现给用户。

优秀的Web前端开发工程师应该具备快速学习能力

Web发展的很快，甚至可以说这些技术几乎每天都在变化!如果没有快速学习能力，就跟不上 Web发展的步伐。前端工程师必须不断提升自己，不断学习新技术、新模式;仅仅依靠今天的知识无法适应未来。Web的明天与今天必将有天壤之别，而前端工程师的工作就是要搞清楚如何通过自己的Web应用程序来体现这种翻天覆地的变化。

说到这里，我想起了一个大师说过的一句话：对于新手来说，新技术就是新技术。

对于一个高手来说，新技术不过是就技术的延伸。优秀的前端工程师需要具备良好的沟通能力 因为前端工程师至少都要满足四类客户的需求：

1、产品经理。这些是负责策划应用程序的一群人。他们会想出很多新鲜的、奇怪的、甚至是不可是实现的应用。一般来说，产品经理都追求丰富的功能。

2、UI设计师。这些人负责应用程序的视觉设计和交互模拟。他们关心的是用户对什么敏感、交互的一贯性以及整体的好用性。一般来说，UI设计师于流畅靓丽、但并不容易实现的用户界面，而且他们经常不满前端工程师造成 1px 的误差。

3、项目经理。这些人负责实际地运行和维护应用程序。项目管理的主要关注点，无外乎正常运行时间、应用程序始终正常可用的时间、性能和截止日期。项目经理追求的目标往往是尽量保持事情的简单化，以及不在升级更新时引入新问题。

4、最终用户。指的是应用程序的主要消费者。尽管前端工程师不会经常与最终用户打交道，但他们的反馈意见至关重要。最终用户要求最多的就是对个人有用的功能，以及竞争性产品所具备的功能。

总结

要做优秀的前端工程师，还需要继续努力：《高性能网站建设指南》、《Yahoo工程师的网站性能优化的建议》、“YSLOW”性能优化建议、《网站重构》、《Web开发敏捷之道》、“ jQuery 库”、“前端框架”、“HTML5”、“CSS3” 这些都要深入研究!

万事开头难！如果你能到这个境界，剩下的路自己就可以走下去了。

人们常说：不想当裁缝的司机，不是个好厨师。

在成为一个优秀的前端工程师的道路上，充满了汗水和辛劳。

第三篇：web前端学习总结2

1.WEB标准以及W3C标准是什么？

标签闭合、标签小写、不乱嵌套、使用外链css和js、结构行为表现的分离。

1.xhtml和html有什么区别

XHTML 元素必须被正确地嵌套，闭合，区分大小写，文档必须拥有根元素。

3.行内元素有哪些？块级元素有哪些？

行内元素: a b img em br i span input select strong textarea

块级元素：div p h1-h6 form ul dl ol table 4.行内元素和块级元素有什么区别？

行内元素不可以设置宽高，不独占一行;

块级元素可以设置宽高，独占一行。

5.我想让行内元素跟上面的元素距离10px，加margin-top和padding-top可以吗？

margin-top,padding-top无效

6.CSS的盒模型由什么组成？

内容，border ,margin，padding

7.说说display属性有哪些？可以做什么？

display:block行内元素转换为块级元素

display:inline块级元素转换为行内元素

display:inline-block转为内联元素

8.CSS 选择符有哪些？

1.id选择器（# myid）

2.类选择器（.myclassname）

3.标签选择器（div, h1, p）

4.相邻选择器（h1 + p）

5.子选择器（ul < li）

6.后代选择器（li a）

7.通配符选择器（*）

8.属性选择器（a[rel = “external”]）

9.伪类选择器（a: hover, li: nth-child）

9.哪些css属性可以继承？

可继承： font-size font-family color, ul li dl dd dt;

不可继承 ：border padding margin width height;

10.css优先级算法如何计算？

!important > id > class > 标签

!important 比 内联优先级高

*

优先级就近原则，样式定义最近者为准;

*

以最后载入的样式为准;

11.text-align:center和line-height有什么区别？

text-align是水平对齐，line-height是行间。

12.前端页面由哪三层构成，分别是什么？作用是什么？

结构层 Html 表示层 CSS 行为层 js

13.标签上title与alt属性的区别是什么？

Alt是图片属性，让搜索引擎认识你的图片。当图片不显示的时候显示。

title是网站标题，是seo中最重要的属性。(seo:做关键词给百度搜索用的)

14.使用css 精灵有什么好处？

Css 精灵 把一堆小的图片整合到一张大的图片上，减轻HTTP的请求数量。

15.什么是语义化的HTML？

标签使用的合理性，对于搜索引擎的抓取有好处。

16.b标签和strong标签,i标签和em标签的区别？

后者有语义，前者则无。

17.tite与h1的区别。

title侧重于网站信息标题

从文章而言，h1侧重于文章主题

站在seo的角度看，好网站少不了title，好文章少不了h1标题，title权重高于h1。

18.清除浮动的几种方式，各自的优缺点

1.使用空标签清除浮动clear:both（缺点，增加无意义的标签）

2.使用overflow:auto（使用zoom:1用于兼容IE）

3.是用afert伪元素清除浮动(用于非IE浏览器)

19.display:none和visibility:hidden的区别是什么？

visibility: hidden----将元素隐藏，但是还占着位置。

display: none----将元素的显示设为无，不占任何的位置。

20.说出几种IE6 BUG的解决方法

1.双边距BUG float引起的 解决：使用display：inline , 取消元素的块级属性。

2.3像素问题 使用float引起的 解决：使用dislpay:inline;margin：-3px

3.超链接hover 点击后失效 解决：使用正确的书写顺序 link visited hover active

4.Ie z-index问题 解决：给父级添加position:relative

5.Png 透明 解决：使用js代码

6.Min-height 最小高度！Important 解决

7.img出现边框

8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的overflow:hidden,zoom:0.08 line-height:1px可以解决）

21.域名和服务器相关知识？

22.HTTP状态码都有那些。

200 OK

//客户端请求成功

400 Bad Request //客户端请求有语法错误，不能被服务器所理解

403 Forbidden //服务器收到请求，但是拒绝提供服务

404 Not Found //请求资源不存在，输入了错误的URL

500 Internal Server Error //服务器发生不可预期的错误

503 Server Unavailable //服务器当前不能处理客户端的请求，一段时间后可能恢复正常

23.如何优化网页加载速度？

1.减少css，js文件数量及大小(减少重复性代码，代码重复利用)，压缩CSS和Js代码

2.图片的大小

3.把css样式表放置顶部，把js放置页面底部

4.减少http请求数

5.使用外部 Js 和 CSS

24.position属性absolute与relative的区别？

absolute绝对定位 //相对于浏览器定位

relative相对定位 //相对于前面的容器定位

25.HTML5 的有那些新标签？

26.CSS3新增伪类有那些？

p:first-of-type 选择属于其父元素的首个

元素的每个

元素。

p:last-of-type 选择属于其父元素的最后

元素的每个

元素。

p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。

p:only-child

选择属于其父元素的唯一子元素的每个

元素。

p:nth-child(2)选择属于其父元素的第二个子元素的每个

元素。

:enabled、:disabled 控制表单控件的禁用状态。

:checked，单选框或复选框被选中。

27.全局变量和局部变量有什么区别？

28.谈谈This对象的理解。

this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。但是总有一个原则，那就是this指的是调用函数的那个对象。

this一般情况下：是全局对象Global。作为方法调用，那么this就是指这个对象

29.documen.write和 innerHTML有什么区别？

DOM的innerHTML是DOM元素对象的一个属性

而write是document对象的一个方法

第四篇：Web前端工作总结

Web前端学习总结

一.名词解释 1.横切

在固定页面的宽度(按栅格化进行)并且对高度没有限制的容器称为一个标准横切 2.留白 两个容器或碎片之间的上、下、左、右的空白距离 3.继承

元素可以从其父级元素中获得一些可为自己使用的属性或值。4.图片定位

把图片元素放置到一个静态的、相对的、绝对的、或固定的位置中，利用CSS中对图片进行遮罩属性，多用于页面中的修饰图 5.底图

页面中在标签中使用的背景图 6.齐底(图)线 用于区分横切或碎片结束的线或图 7.页面结构

页面的基础框架，由横切、布局元素组成 8.焦点区(图)最易注意的区域 9.导航

在页面中具有导向性的链接集合 10.头图 页面主题图片 11.间距

碎片或文字间的距离 12.行高

文字段落中行与行之间的距离 13.首行缩进 文字段落首行缩进 14.浮动

使被定义的区域脱离正常的页面文档流 15.碎片 由文字、图片组合成的内容区域 16.通栏广告 与页面内容区同宽的广告区域 17.功能按钮 具有交互属性的按钮 18.私有样式

当前页面独立使用的样式，不具备公用性 19.水平(垂直)居中

在页面中的某个元素处于父级的上下或左右的相同距离 20.标准头(尾)定义相同的页面头或尾元素集合 二.文本格式化 1.段落：p 2.斜体：address（联系信息）em（强调）i（突出不同）cite（引用）dfn（首次定义术语）3.粗体：strong（重要）b（提醒）4.图片块：figure 5.引述文段，段落缩进：blockquote 6.背景颜色：mark 7.虚线下划线：abbr 8.上标下标：sub/sup 9.下划线：ins 10.删除线：del（标记已删除内容）s（标记不准确内容）11.等宽字体：code 12.预格式化：pre 13.字号减小，表注释：small 14.时间：time 15.换行：br 16.html5定义区块：header nav article section aside footer div span 三.表单表格

1.

...

2.表单元素的组织：

...

...

3.创建各种框: 注：text→password/url/tel/email Id:为了让对应的标签识别，添加CSS Name：为了让服务器和脚本识别，通常与id设为一样 Size：文本框大小 Maxlength：能输入的最大字符数 Pattern：正则表达式

4.添加标签： „ 5.单(多)选按钮：

北京 上海 注：id各自唯一，name必须相同。checked：默认选择 6.下拉框：

北京 上海 成都 注：size:选择框的高度 multiple：允许多选 selected：默认选择 用„对选择框进行分组 7.上传文件： 注：size：输入路径和文件名的字段的宽度 8.禁用表单元素： 9.创建提交按钮： 创建带图像的提交按钮：点击这里 创建图像按钮： Submit→reset重置

10.文本区域：请在此输入字符 11.表格 :

..	..
..	..	..

四.文本格式化 1.{font：（斜体 粗体 小型大写字母）字体大小(必有)行距 字体集（必有）;} 2.文本背景：{ background：#foc url（1.jpg）repeat-x scroll 0 0；} 3.字间距：word-spacing:12px;4.字偶距：letter-spacing:12px;5.缩进增加：text-indent:12px;6.小型大写字母: font-variant:small-caps;7.文本对齐：text-align:left；适用于block，inline-block 8.单词大小写: text-transform:capitalize(单词首字母大写)/uppercase(大写)/lowercase(小写)9.文本上的线：text-decoraion:underline/overline/line-through;11.空格：white-space:pre(显示所有空格回车)/nowrap（非断行空格）； 12.h3—16px;h5—12px;verdana,Geneva,sans-serif;13.列表属性： li{list-style:url(1.jpg)inside square;} 五.CSS布局

1.width：不包括padding，border，margin；max-width设置外围限制； 2.浮动：float:left;清除浮动：clear:both;3.设置边框： border:dotted 4px red;(dotted点状、dashed虚线、solid实线)4.使元素对齐：vertical-align:baseline/middle/text-bottom..5.显示：display:black/inline/inline-block;6.显示：visibility:visible/hiddle;7.相对定位：{position:relative;top:5px;} 相对于该元素的原始位置 8.绝对定位：{position:absolute;top:5px;} 相对于body或离他最近定位的祖先元素 9.三维位置：{z-index:50;} 越大的在最上面

10.厂商前缀：-webkit-(safari)–moz-(firefox)–ms-(IE)–o-(opera)11.创建圆角： {-moz-border-radius-topleft:50px;-webkit-border-top-left-radius:50px;border-top-left-radius:50px;}(左上角,角的半径是50px){border-radius:50px;}(所有角简写)12.创建椭圆角：{„ „ border-radius:40px/20px;}（x半径/y半径）13.创建圆形：{„ „ border-radius:50px;} 50px为元素半径大小 14.文本加阴影：{text-shadow: 2px 5px 5px #999;} x/y/模糊半径

15.元素加阴影：{(-moz-/-webkit-)box-shadow:(inset内阴影)2px 5px 5px #999;5px 10px 2px #555(多重阴影);} 16.多重背景：{background:#000 url(1.png)50% 102% no-repeat,#222 url(2.png)12px-150px repeat-x;} 17.透明度： {opacity:.5;} 0→1 透明→不透明

18.渐变背景：{background:linear-gradient(left,#000,#999);}(left ：渐变线沿逆时针方向转至水平线的角度)六.html5视频音频

1.html5支持3种视频：.ogg/.ogv.mp4/.m4v.webm 2.添加视频： 视频属性：src autoplay controls muted loop poster width height preload 3.为视频添加多个来源： 4.html5支持5中音频：.ogg.mp3.wav.aac.mp4 5.添加音频： 音频属性：src autoplay controls muted loop preload。多个来源同video。七.一些约定

我们结合常用的一些命名习惯，再结合CSS的实际应用，整理出一些较好的命名习惯。1.样式名称首字母统一为小写字母，不能为数字，下划线及特殊字符；

3.设置边框： border:dotted 4px red;(dotted点状、dashed虚线、solid实线)4.使元素对齐：vertical-align:baseline/middle/text-bottom..5.显示：display:black/inline/inline-block;6.显示：visibility:visible/hiddle;7.相对定位：{position:relative;top:5px;} 相对于该元素的原始位置 8.绝对定位：{position:absolute;top:5px;} 相对于body或离他最近定位的祖先元素 9.三维位置：{z-index:50;} 越大的在最上面

10.厂商前缀：-webkit-(safari)–moz-(firefox)–ms-(IE)–o-(opera)11.创建圆角： {-moz-border-radius-topleft:50px;-webkit-border-top-left-radius:50px;border-top-left-radius:50px;}(左上角,角的半径是50px){border-radius:50px;}(所有角简写)12.创建椭圆角：{„ „ border-radius:40px/20px;}（x半径/y半径）13.创建圆形：{„ „ border-radius:50px;} 50px为元素半径大小 14.文本加阴影：{text-shadow: 2px 5px 5px #999;} x/y/模糊半径

15.元素加阴影：{(-moz-/-webkit-)box-shadow:(inset内阴影)2px 5px 5px #999;5px 10px 2px #555(多重阴影);} 16.多重背景：{background:#000 url(1.png)50% 102% no-repeat,#222 url(2.png)12px-150px repeat-x;} 17.透明度： {opacity:.5;} 0→1 透明→不透明

18.渐变背景：{background:linear-gradient(left,#000,#999);}(left ：渐变线沿逆时针方向转至水平线的角度)六.html5视频音频

1.html5支持3种视频：.ogg/.ogv.mp4/.m4v.webm 2.添加视频： 视频属性：src autoplay controls muted loop poster width height preload 3.为视频添加多个来源： 4.html5支持5中音频：.ogg.mp3.wav.aac.mp4 5.添加音频： 音频属性：src autoplay controls muted loop preload。多个来源同video。七.一些约定

我们结合常用的一些命名习惯，再结合CSS的实际应用，整理出一些较好的命名习惯。1.样式名称首字母统一为小写字母，不能为数字，下划线及特殊字符； 2.样式名尽量语义化或简写； 3.样式名需要组合拼写时，采用全部小写拼写并使用下划线连接，即：all_keyword； 4.使用px(像素)为基本计量单位； 5.页面中空格的使用：全角：中文空格 半角；  6.项目完成包中，文件夹及文件名称全部采用小写字母，不使用中文文件名； 7.减少DIV的嵌套层数；

8.给重要图片加上alt属性；给重要的元素和截断的元素加上title； 9.使用正确的注释方法（详见“注释”章节）； 10.特殊情况下要求表现和内容分离，代码中不要涉及任何表现的元素，例如：style、font 等；

11.双标记签都要有开始和结束标签，单标记标签的后面一定要加“ /”,例如：
等，并且有正确的层次； 12.其它特殊符号： 1)<(<)2)>(>)八.命名空间

8.1外挂样式名称 全局：public.css 全局样式为全站公用，为页面样式基础，页面中必须包含。结构：layout.css 页面结构类型复杂，并且公用类型较多时使用。多用在首页级页面和产品类页面中。私有：style.css 独立页面所使用的样式文件，页面中必须包含。模块 module.css 产品类页面应用，将可复用类模块进行剥离后，可与其它样式配合使用。默认 default.css 文章 article.css 图片 photo.css 下载 soft.css 主题 themes.css 实现换肤功能时应用。补丁 mend.css 基于以上样式进行的私有化修补。8.2 常用名称(1)页面结构 容器: container 页头：header 内容：content/container/content(A)页面主体：main 页尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体布局宽度：wrapper 左右中：left right center 浮左浮右：fl fr 清除浮动 clear(2)导航 导航：nav 主导航：mainbav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 标题：title 摘要：summary 路径：path(3)模块化命名 模块头部：hd 模块内容部分：bd 模块底部：ft(4)各内容页对应 标题：title 副标题：subtitle 属性：properties 简介：infor 内容：content 分页：page 插入广告：insert_ad 表情：expression 功能选项：options 上下篇：up_down 评论：comments 相关内容：related 下载地址：download 播放地址：play_add(5)功能 标志：logo 广告：banner 登陆：login 登录条：loginbar 注册：regsiter 搜索：search 日期：date 功能区：shop 标题：title 加入：joinus 状态：status 按钮：btn 滚动：scroll 标签页：tab 文章列表：list 提示信息：msg 当前的：current 小技巧：tips 图标：icon 注释：note 指南：guild 服务：service 热点：hot 新闻：news 下载：download 投票：vote 合作伙伴：partner 友情链接：link 版权：copyright 九.基本设置-public.css 9.1 全局设置

上下边距(margin、padding)：0(px)左右边距(margin)：auto(自动)底色(background):#FFF(白色)字体(font-family)、字号(font-szie)、字色(color)：”宋体” 12px #666 代码： /* 全局CSS定义 */ body{margin:0 auto;padding:0;background:#FFF;color:#666;font:12px ‘宋体';} div,form,ul,ol,li,span,p,dl,dt,dd,img{margin:0;padding:0;border:0;} h1,h2,h3,h4,h5,h6{margin:0;padding:0;font-size:12px;font-weight:normal;} ul,ol,li{list-style:none} table,td,input,textarea{font-size:12px} 9.2 页面标签初始化设置 1.常用基本标div,form,ul,ol,li,span,p,dl,dt,dd,img 设置基本标签的间距、边框默认值为0。2.h1～h6标题

默认标题内字号12px，内外间距为0px，文字不加粗。3.ul,ol,li 列表 默认不显示项目符号。4.h2 栏目标题

说明：h2标签被定义为栏目标题特殊使用，在标签中非标题文字默认居右显示，主标题文字使用span标签包含，居左显示。5.默认链接颜色

常态下不显示文字下划线，颜色为灰(#333)，鼠标悬浮时：显示文字下划线，颜色变为暗红(#ccc)。6.状态：a:link{未点} a:visited{已点} a:focus{键盘选中} a:hover{指针停留} a:active{正在点} 9.3 页面宽度 默认页面宽(命名规范)：按栅格化进行 9.4.clear 结束容器内各元素的浮动属性，使相邻容器或元素节点正常显示。以下是清除浮动的几种方法 方法一.clear { clear:both;height:0;font-size:0;line-height:0 } 或.clear { border-top: 1px solid transparent!important;margin-top:-1px!important;border-top: 0px;margin-top: 0px;height: 0px;clear: both;background: none;font-size: 0px;visibility: hidden;} 或.clear{ clear:both;font-size:1px;width:1px;height:0;visibility:hidden;margin-top:0px!important;*margin-top:-1px;line-height:0 } 使用方法: