求问自学 CSS/HTML 的话如何入手- -#

自学

精通

初级

76 条回复 • 2015-07-24 12:30:23 +08:00

1

ChiangDi

2014-06-13 10:59:03 +08:00 via Android

一本书好像叫《head first html and css》，我觉得很好，第一次就几乎全看懂了。
另外楼主是女生吗？

2

Albus

OP

2014-06-13 11:01:05 +08:00

这样哦~ 谢谢你~
我去看看
嗯怎？

3

FEIF

2014-06-13 11:01:12 +08:00

看这里http://www.w3school.com.cn/index.html 我也在学。。。看着都很简单。。。但是东西比较多不知道怎么理清楚，写几个简单的站点？

4

learnshare

2014-06-13 11:03:18 +08:00

等 LZ 表明性别再说。

5

imn1

2014-06-13 11:03:28 +08:00

1

html 先学 tag
css 先学定位（上下左右宽高）和盒模型（宽高内外边距，边框）

6

Mutoo

2014-06-13 11:03:45 +08:00

1

http://www.codecademy.com/zh/tracks/web

7

andyliu

2014-06-13 11:04:30 +08:00

1

@Albus
额，妹纸下次提问时标题带上“妹纸” 回复会更多。。。

8

canesten

2014-06-13 11:05:37 +08:00

Chrome浏览器按F12打开面板
多看看
然后右键选Edit as HTML试试改一些东西
配合http://www.w3schools.com/
就学会了

那个中文的http://www.w3school.com.cn/index.html
有些东西写的不对，英语有能力建议不要看中文的

9

tangzujun

2014-06-13 11:05:45 +08:00

被头像吸引进来再看主题 codecademy在线学习入门不错

10

Albus

OP

2014-06-13 11:05:54 +08:00

@FEIF
一个学长也跟我推荐了这个网站
看了下真心东西太多了感觉脉络不是太清晰呢
我只求能略懂啦0.0

11

Albus

OP

2014-06-13 11:06:18 +08:00

@learnshare
世界怎么了。。。

12

ChiangDi

2014-06-13 11:06:27 +08:00 via Android

@learnshare 楼主已经表明性别了，她回复了“嗯，怎？”
话说最近V2上妹子好像越来越多了，我已经关注5个了...

13

Albus

OP

2014-06-13 11:07:13 +08:00

@andyliu
没事。。。
有几个人回就行了。。。

14

botao1

2014-06-13 11:07:35 +08:00

http://www.w3school.com.cn/

15

Albus

OP

2014-06-13 11:07:50 +08:00

@tangzujun 锻炼劲椎请歪脑袋~

16

tangzujun

2014-06-13 11:13:22 +08:00

@Albus 嗯谢谢！好人！

17

FEIF

2014-06-13 11:27:08 +08:00

@Albus
同求略懂。。。我只是为了学 JavaScript 打基础
这两天刚开始找了一本《head first html and css》第 2 版配合中文版一起看。。。加 w3school
先整个 demo 站点吧- -

18

Albus

OP

2014-06-13 11:30:17 +08:00

@FEIF 我是为了学点网页设计打基础- -#

19

vansje

2014-06-13 11:30:21 +08:00

楼主找个首页psd图自己切自己div css 没有多难切三个psd div css 就算合格了

20

learnshare

2014-06-13 11:33:48 +08:00

7

我来认真回复：

新手入门的话，建议先从 w3school.com.cn 上面的资料开始学习。建议的学习顺序为 HTML -> CSS -> CSS3 -> JavaScript -> BOM -> DOM -> HTML5 -> jQuery -> 其他扩展部分。

学习完整个教程之后，可以找一些书来看，系统地学习所有内容，并掌握其中的应用实例。

知识简单分为三个部分：HTML CSS，JavaScript BOM DOM，JavaScript 框架。

学习分为三步：基础（w3school），全面（看书），应用（抄写、模仿实例，自己动手创造）。

-----------------
扩展部分还有很多：

1. 后端编程语言（PHP、Node.js、Python 等）；
2. 数据库（MySQL 等）；
3. LESS/Sass；
4. Emmet；
5. 各种 JavaScript 框架（Angular.js、Backbone.js 等）。

慢慢接触吧。

-----------------
资源推荐：

1. w3school.com.cn 和 w3schools.com 简单而且详细的入门参考资料；
2. developer.mozilla.org 和 webplatform.org 科学严谨的参考文档，也有不少示例代码；
3. https://github.com/LearnShare/blog/tree/master/posts/drafts 我自己学习时整理的一些东西，作为文档随时查找（当做教程也是不错的，不过有一些乱了）；
4. 一些看过的书（还算不错的）：

1) HTML5 秘籍 -- 李松峰；
2) HTML5 与 CSS3 权威指南 -- 陆凌牛；
3) Web 变成入门经典（第二版）-- 杜静、敖富江；
4) JavaScript 权威指南（第六版）-- 淘宝前端；

-----------------
一开始建议的学习顺序还是很重要的。ps: 别吓坏了。

21

FEIF

2014-06-13 11:34:34 +08:00

@Albus
那你肯定会 PS 吧。
请问如何入手只求略懂即可

22

learnshare

2014-06-13 11:38:13 +08:00

@FEIF 多媒体方面，建议看视频教程，成套的。

23

Albus

OP

2014-06-13 11:45:20 +08:00

@vansje 主要露珠是个白痴。。。TAT

24

andyhu

2014-06-13 12:15:07 +08:00

v2上的宅男们如狼似虎啊，楼主要小心了，呵呵
w3schools就挺不错的，我最初学html的时候就用的是这个站，主要是先要理解DOM树结构，和css box模型，有这个基础的话，会掌握的比较快一点，另外可以加入一个前端群，有问题了可以找群里的人问问。其他就是记一些属性和怎样运用了，可以自己在chrome多尝试，按f12可出调试工具，随便改改各个属性，看看效果之类的，把w3schools的html和css教程都过一遍，就差不多了。先不要管html5和css3，那些都是html和css的扩展，循序渐进来比较靠谱。
html编辑器的话可以选editplus，可以在编辑器里直接预览，有时候还挺方便的

25

andyhu

2014-06-13 12:18:44 +08:00

如果再想深入的话，可适当研究些css3 html5和javascript/jquery的内容，如果有人带一带的话，自己再肯钻研一点耐得住性子去研究，应该还是很快可以掌握一些基础的。不过要熟练掌握的话还需要时间和经验积累

26

yangqi

2014-06-13 12:24:43 +08:00

1

楼上提供的都是资料类的网站,楼主明显更需要的是教程类的网站

不知楼主英文水平怎么样, 下面两个网站很适合初学者
http://www.codecademy.com/tracks/web
https://www.codeschool.com/paths/html-css

27

learnshare

2014-06-13 12:30:49 +08:00

其实有人指导才是最好的学习方式。（不要乱想）

28

jsonline

2014-06-13 12:38:31 +08:00

自己做一个页面，然后用一年的时间去思考如果把这个页面做得「更」好。

29

jsonline

2014-06-13 12:39:19 +08:00

如果头像即楼主的话，我可以提供无偿指导，啊哈哈

30

nagato

2014-06-13 12:40:47 +08:00

楼主留个联系方式，我可以手把手的教你

31

huwewa

2014-06-13 12:43:38 +08:00

看来又是翻页的节奏。 XD

32

Albus

OP

2014-06-13 13:02:40 +08:00

@learnshare
嗯谢谢0.0
好认真的回答昂。。。

33

Albus

OP

2014-06-13 13:04:14 +08:00

@FEIF
PS的话感觉就是先了解工具
找个基础教程或者是书看一看
剩下的就是自己发挥想象力啦

34

Albus

OP

2014-06-13 13:06:05 +08:00

@andyhu
唔只是稍微了解下就好啦0.0
主要是视觉方向的呢
大家这么认真回答真是不胜惶恐= =

35

tank

2014-06-13 13:07:25 +08:00

楼主学的什么专业？设计系吗？

36

Albus

OP

2014-06-13 13:08:34 +08:00

@jsonline
0.0

37

Albus

OP

2014-06-13 13:09:11 +08:00

@tank
嗯平面设计-。-
但是希望多学点东西拓宽小宇宙- -#

38

andyhu

2014-06-13 13:09:26 +08:00

@FEIF 几年以前看一个叫大师之路的教程，感觉挺不错的，浅显易懂，不知现在更新没

39

nikolai

2014-06-13 13:10:10 +08:00

http://www.codecademy.com/tracks/web

如果觉得看书太闷，可以试试这个

40

andyhu

2014-06-13 13:16:00 +08:00

@Albus 不错，楼主还是挺有钻研精神的，其实国外的设计大牛好多都是懂代码的，尤其是jquery和一些特效，可以突破只是平面设计的局限，做出一些很漂亮的交互。可以看下
http://www.smashingmagazine.com/
http://www.awwwards.com/
等等

41

chairuosen

2014-06-13 13:20:30 +08:00

找个前端蓝票

42

Albus

OP

2014-06-13 13:28:40 +08:00

@andyhu
我逛https://dribbble.com/shots比较多
嗯。。。
交互设计又是另外一块啦
现在国内的设计教育还是不太完善

43

juicy

2014-06-13 13:54:53 +08:00

学ios吧。。。前端太苦了，不容易混出头

44

7anshuai

2014-06-13 13:57:37 +08:00

推荐网易云课堂 http://study.163.com/#/index
有HTML/CSS/PhotoShop、网页设计、平面设计等等各种教程，适合自学入门

45

andyhu

2014-06-13 14:08:07 +08:00

其实感觉v2应该做个功能，设计师和程序员组团一起设计一些新鲜有趣的idea，互补彼此的不足

46

Albus

OP

2014-06-13 14:08:17 +08:00

@juicy 我只是想熟悉就好啦~

47

andyhu

2014-06-13 14:10:32 +08:00

我其实设计方面技术上也都多少懂点皮毛，PS AI都能简单的用两下，但感觉颜色和整体视觉效果搭配太差劲了，小时候美术都没及格过，也希望能多接触些设计方面的内容平衡下

48

hitbastank

2014-06-13 14:11:25 +08:00

1. 到 codecademy 或者 w3school 过一遍基础知识
2. 到 youtube 或者 Tuts + 上面找个视频教程例子看两遍
3. 自己动手做个简单的页面

这样就可以熟悉了，离精通还有距离
设计师的话熟悉就可以，不然抢了前端的饭碗哈哈

49

Albus

OP

2014-06-13 14:12:43 +08:00

@andyhu
嗯创意工作者好少昂。。。

50

Albus

OP

2014-06-13 14:13:51 +08:00

@hitbastank
噗
抢饭碗如果那么容易就好了- -（认真脸！）

51

RaymondYip

2014-06-13 14:20:32 +08:00

hm 我是由w3c入门的感觉还不错看完那个再看点别的深入

52

ibolee

2014-06-13 14:49:18 +08:00

http://www.w3school.com.cn/

53

Seita

2014-06-13 14:56:17 +08:00 via iPhone

在成都的话来我家一起学吧XD

54

P233

2014-06-13 15:11:16 +08:00

CSS 的话，把这里的每条属性都搞明白 XD

http://p233.github.io/Emmet-Css-Snippets-for-Sublime-Text-2/

55

elvba

2014-06-13 15:13:28 +08:00

1

还有人推荐www.w3school.com.cn？
css选择器那部分能看？
坑了多少人了还推荐。

56

coolicer

2014-06-13 15:19:10 +08:00

你们这些人走开，我才是专业的页面仔，楼主加我QQ可好

57

cxd2427514

2014-06-13 15:35:05 +08:00

撸主头像好熟是不是在elya的微信群

58

xdazz

2014-06-13 16:01:50 +08:00

1

http://www.w3fools.com/

推荐 MDN.

59

adspe

2014-06-13 16:05:20 +08:00

MDN相当全。

60

LucasW

2014-06-13 16:18:26 +08:00

唉，看在头像不错的样子就回复下吧，
直接去看视频跟着自己敲吧，简单直接，不用自己规划课程什么的，一个礼拜就会了。
记得当时有个传智播客张鹏的视频不错，适合入门（无任何利息相关）

61

taobeier

2014-06-13 16:19:37 +08:00

看《head first html and css》这本书就好了。毕竟你说了你只是想打点基础而已，不需要太过深入的

62

ChiangDi

2014-06-13 16:34:09 +08:00 via Android

但是20人收藏是怎么个意思？

63

t2doo

2014-06-13 16:54:59 +08:00

@ChiangDi 坐等露珠曝照啊

64

6IbA2bj5ip3tK49j

2014-06-13 19:34:03 +08:00

这贴怎么这么多人回啊。

65

Albus

OP

2014-06-13 19:35:27 +08:00

@cxd2427514
对！露珠应届毕业啊
进去看看有木有收实习生的呢- -
这样都能被认出来- -

66

ReSur

2014-06-13 21:47:09 +08:00

自己写一些小作品

67

wintr

2014-06-14 01:07:11 +08:00

我收实习生，鹅厂北京

68

wintr

2014-06-14 01:08:13 +08:00

mailto:[email protected]

69

ai0by

2014-06-14 10:29:25 +08:00 via Android

专业课老师让我们用DW，图形界面，PS切片，扔到DW加链接

70

Albus

OP

2014-06-14 11:23:49 +08:00

@wintr
请问是那个方向的实习？

71

Albus

OP

2014-06-14 11:25:30 +08:00

@ai0by
网页设计的专业课老师嘛？

72

wintr

2014-06-14 13:06:42 +08:00

@Albus 设计 + 前端，跨界

73

Albus

OP

2014-06-14 13:38:03 +08:00

@wintr
前端刚开始自己看基本不会啊。。。
交互也没接触过
我是视觉传达专业的呢0.0
这样也OK么

74

wintr

2014-06-17 13:27:40 +08:00

@Albus 这些入门都很快的。
个人建议，先用 2-3 个月自学些基础，做一些小实践，然后再实习

75

Albus

OP

2014-06-17 23:02:52 +08:00

@wintr 我今年应届毕业生啦~
平面是专业- -
前端是想自己学一点啦~

76

waveiron

2015-07-24 12:30:23 +08:00

这有个视频教程，讲的还行
http://edu.51cto.com/course/course_id-4130.html