求问自学 CSS/HTML 的话如何入手- -# - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Albus
V2EX    问与答

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

  •  1
     
  •   Albus 2014-06-13 10:54:34 +08:00 9816 次点击
    这一个创建于 4140 天前的主题,其中的信息可能已经有所发展或是发生改变。
    初级就好。。。不求精通TAT
    76 条回复    2015-07-24 12:30:23 +08:00
    ChiangDi
        1
    ChiangDi  
       2014-06-13 10:59:03 +08:00 via Android
    一本书好像叫《head first html and css》,我觉得很好,第一次就几乎全看懂了。
    另外楼主是女生吗?
    Albus
        2
    Albus  
    OP
       2014-06-13 11:01:05 +08:00
    这样哦~ 谢谢你~
    我去看看
    嗯 怎?
    FEIF
        3
    FEIF  
       2014-06-13 11:01:12 +08:00
    看这里http://www.w3school.com.cn/index.html 我也在学。。。看着都很简单。。。但是东西比较多不知道怎么理清楚 ,写几个简单的站点?
    learnshare
        4
    learnshare  
       2014-06-13 11:03:18 +08:00
    等 LZ 表明性别再说。
    imn1
        5
    imn1  
       2014-06-13 11:03:28 +08:00   1
    html 先学 tag
    css 先学 定位(上下左右宽高)和盒模型(宽高内外边距,边框)
    Mutoo
        6
    Mutoo  
       2014-06-13 11:03:45 +08:00   1
    andyliu
        7
    andyliu  
       2014-06-13 11:04:30 +08:00   1
    @Albus
    额 ,妹纸 下次 提问时 标题带上“妹纸” 回复会更多。。。
    canesten
        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
    有些东西写的不对,英语有能力建议不要看中文的
    tangzujun
        9
    tangzujun  
       2014-06-13 11:05:45 +08:00
    被头像吸引进来再看主题 codecademy在线学习入门不错
    Albus
        10
    Albus  
    OP
       2014-06-13 11:05:54 +08:00
    @FEIF
    一个学长也跟我推荐了这个网站
    看了下真心东西太多了感觉脉络不是太清晰呢
    我只求能略懂啦0.0
    Albus
        11
    Albus  
    OP
       2014-06-13 11:06:18 +08:00
    @learnshare
    世界怎么了。。。
    ChiangDi
        12
    ChiangDi  
       2014-06-13 11:06:27 +08:00 via Android
    @learnshare 楼主已经表明性别了,她回复了“嗯,怎?”
    话说最近V2上妹子好像越来越多了,我已经关注5个了...
    Albus
        13
    Albus  
    OP
       2014-06-13 11:07:13 +08:00
    @andyliu
    没事。。。
    有几个人回就行了。。。
    botao1
        14
    botao1  
       2014-06-13 11:07:35 +08:00
    Albus
        15
    Albus  
    OP
       2014-06-13 11:07:50 +08:00
    @tangzujun 锻炼劲椎请歪脑袋~
    tangzujun
        16
    tangzujun  
       2014-06-13 11:13:22 +08:00
    @Albus 嗯 谢谢!好人!
    FEIF
        17
    FEIF  
       2014-06-13 11:27:08 +08:00
    @Albus
    同求略懂。。。我只是为了学 Javascript 打基础
    这两天刚开始找了一本 《head first html and css》 第 2 版配合中文版一起看。。。加 w3school
    先整个 demo 站点吧- -
    Albus
        18
    Albus  
    OP
       2014-06-13 11:30:17 +08:00
    @FEIF 我是为了学点网页设计打基础- -#
    vansje
        19
    vansje  
       2014-06-13 11:30:21 +08:00
    楼主找个首页psd图 自己切 自己div css 没有多难 切三个psd div css 就算合格了
    learnshare
        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.cnw3schools.com 简单而且详细的入门参考资料;
    2. developer.mozilla.orgwebplatform.org 科学严谨的参考文档,也有不少示例代码;
    3. https://github.com/LearnShare/blog/tree/master/posts/drafts 我自己学习时整理的一些东西,作为文档随时查找(当做教程也是不错的,不过有一些乱了);
    4. 一些看过的书(还算不错的):

    1) HTML5 秘籍 -- 李松峰;
    2) HTML5 与 CSS3 权威指南 -- 陆凌牛;
    3) Web 变成入门经典(第二版)-- 杜静、敖富江;
    4) Javascript 权威指南(第六版)-- 淘宝前端;
    -----------------
    一开始建议的学习顺序还是很重要的。ps: 别吓坏了。
    FEIF
        21
    FEIF  
       2014-06-13 11:34:34 +08:00
    @Albus
    那你肯定会 PS 吧。
    请问如何入手 只求略懂即可
    learnshare
        22
    learnshare  
       2014-06-13 11:38:13 +08:00
    @FEIF 多媒体方面,建议看视频教程,成套的。
    Albus
        23
    Albus  
    OP
       2014-06-13 11:45:20 +08:00
    @vansje 主要露珠是个白痴。。。TAT
    andyhu
        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,可以在编辑器里直接预览,有时候还挺方便的
    andyhu
        25
    andyhu  
       2014-06-13 12:18:44 +08:00
    如果再想深入的话,可适当研究些css3 html5和Javascript/jquery的内容,如果有人带一带的话,自己再肯钻研一点耐得住性子去研究,应该还是很快可以掌握一些基础的。不过要熟练掌握的话还需要时间和经验积累
    yangqi
        26
    yangqi  
       2014-06-13 12:24:43 +08:00   1
    楼上提供的都是资料类的网站,楼主明显更需要的是教程类的网站

    不知楼主英文水平怎么样, 下面两个网站很适合初学者
    http://www.codecademy.com/tracks/web
    https://www.codeschool.com/paths/html-css
    learnshare
        27
    learnshare  
       2014-06-13 12:30:49 +08:00
    其实有人导才是最好的学习方式。(不要乱想)
    jsonline
        28
    jsonline  
       2014-06-13 12:38:31 +08:00
    自己做一个页面,然后用一年的时间去思考如果把这个页面做得「更」好。
    jsonline
        29
    jsonline  
       2014-06-13 12:39:19 +08:00
    如果头像即楼主的话,我可以提供无偿指导,啊哈哈
    nagato
        30
    nagato  
       2014-06-13 12:40:47 +08:00
    楼主留个联系方式,我可以手把手的教你
    huwewa
        31
    huwewa  
       2014-06-13 12:43:38 +08:00
    看来又是翻页的节奏。 XD
    Albus
        32
    Albus  
    OP
       2014-06-13 13:02:40 +08:00
    @learnshare
    嗯 谢谢0.0
    好认真的回答昂。。。
    Albus
        33
    Albus  
    OP
       2014-06-13 13:04:14 +08:00
    @FEIF
    PS的话感觉就是先了解工具
    找个基础教程或者是书看一看
    剩下的就是自己发挥想象力啦
    Albus
        34
    Albus  
    OP
       2014-06-13 13:06:05 +08:00
    @andyhu
    唔 只是稍微了解下就好啦0.0
    主要是视觉方向的呢
    大家这么认真回答真是不胜惶恐= =
    tank
        35
    tank  
       2014-06-13 13:07:25 +08:00
    楼主学的什么专业?设计系吗?
    Albus
        36
    Albus  
    OP
       2014-06-13 13:08:34 +08:00
    Albus
        37
    Albus  
    OP
       2014-06-13 13:09:11 +08:00
    @tank
    嗯 平面设计-。-
    但是希望多学点东西拓宽小宇宙- -#
    andyhu
        38
    andyhu  
       2014-06-13 13:09:26 +08:00
    @FEIF 几年以前看一个叫大师之路的教程,感觉挺不错的,浅显易懂,不知现在更新没
    nikolai
        39
    nikolai  
       2014-06-13 13:10:10 +08:00
    http://www.codecademy.com/tracks/web

    如果觉得看书太闷,可以试试这个
    andyhu
        40
    andyhu  
       2014-06-13 13:16:00 +08:00
    @Albus 不错,楼主还是挺有钻研精神的,其实国外的设计大牛好多都是懂代码的,尤其是jquery和一些特效,可以突破只是平面设计的局限,做出一些很漂亮的交互。可以看下
    http://www.smashingmagazine.com/
    http://www.awwwards.com/
    等等
    chairuosen
        41
    chairuosen  
       2014-06-13 13:20:30 +08:00
    找个前端蓝票
    Albus
        42
    Albus  
    OP
       2014-06-13 13:28:40 +08:00
    @andyhu
    我逛https://dribbble.com/shots比较多
    嗯。。。
    交互设计又是另外一块啦
    现在国内的设计教育还是不太完善
    juicy
        43
    juicy  
       2014-06-13 13:54:53 +08:00
    学ios吧。。。前端太苦了,不容易混出头
    7anshuai
        44
    7anshuai  
       2014-06-13 13:57:37 +08:00
    推荐网易云课堂 http://study.163.com/#/index
    有HTML/CSS/PhotoShop、网页设计、平面设计等等各种教程,适合自学入门
    andyhu
        45
    andyhu  
       2014-06-13 14:08:07 +08:00
    其实感觉v2应该做个功能,设计师和程序员组团一起设计一些新鲜有趣的idea,互补彼此的不足
    Albus
        46
    Albus  
    OP
       2014-06-13 14:08:17 +08:00
    @juicy 我只是想熟悉就好啦~
    andyhu
        47
    andyhu  
       2014-06-13 14:10:32 +08:00
    我其实设计方面技术上也都多少懂点皮毛,PS AI都能简单的用两下,但感觉颜色和整体视觉效果搭配太差劲了,小时候美术都没及格过,也希望能多接触些设计方面的内容平衡下
    hitbastank
        48
    hitbastank  
       2014-06-13 14:11:25 +08:00
    1. 到 codecademy 或者 w3school 过一遍基础知识
    2. 到 youtube 或者 Tuts + 上面找个视频教程例子看两遍
    3. 自己动手做个简单的页面

    这样就可以熟悉了,离精通还有距离
    设计师的话熟悉就可以,不然抢了前端的饭碗哈哈
    Albus
        49
    Albus  
    OP
       2014-06-13 14:12:43 +08:00
    @andyhu
    嗯 创意工作者好少昂。。。
    Albus
        50
    Albus  
    OP
       2014-06-13 14:13:51 +08:00
    @hitbastank

    抢饭碗如果那么容易就好了- -(认真脸!)
    RaymondYip
        51
    RaymondYip  
       2014-06-13 14:20:32 +08:00
    hm 我是由w3c入门的 感觉还不错 看完那个再看点别的深入
    ibolee
        52
    ibolee  
       2014-06-13 14:49:18 +08:00
    Seita
        53
    Seita  
       2014-06-13 14:56:17 +08:00 via iPhone
    在成都的话来我家一起学吧XD
    P233
        54
    P233  
       2014-06-13 15:11:16 +08:00
    CSS 的话,把这里的每条属性都搞明白 XD

    http://p233.github.io/Emmet-Css-Snippets-for-Sublime-Text-2/
    elvba
        55
    elvba  
       2014-06-13 15:13:28 +08:00   1
    还有人推荐www.w3school.com.cn
    css选择器那部分能看?
    坑了多少人了还推荐。
    coolicer
        56
    coolicer  
       2014-06-13 15:19:10 +08:00
    你们这些人走开,我才是专业的页面仔,楼主加我QQ可好
    cxd2427514
        57
    cxd2427514  
       214-06-13 15:35:05 +08:00
    撸主 头像好熟 是不是在elya的微信群
    xdazz
        58
    xdazz  
       2014-06-13 16:01:50 +08:00   1
    adspe
        59
    adspe  
       2014-06-13 16:05:20 +08:00
    MDN相当全。
    LucasW
        60
    LucasW  
       2014-06-13 16:18:26 +08:00
    唉,看在头像不错的样子就回复下吧,
    直接去看视频跟着自己敲吧,简单直接,不用自己规划课程什么的,一个礼拜就会了。
    记得当时有个传智播客张鹏的视频不错,适合入门(无任何利息相关)
    taobeier
        61
    taobeier  
       2014-06-13 16:19:37 +08:00
    看《head first html and css》这本书就好了。毕竟你说了你只是想打点基础而已 , 不需要太过深入的
    ChiangDi
        62
    ChiangDi  
       2014-06-13 16:34:09 +08:00 via Android
    但是20人收藏是怎么个意思?
    t2doo
        63
    t2doo  
       2014-06-13 16:54:59 +08:00
    @ChiangDi 坐等露珠曝照啊
    6IbA2bj5ip3tK49j
        64
    6IbA2bj5ip3tK49j  
       2014-06-13 19:34:03 +08:00
    这贴怎么这么多人回啊。
        65
    Albus  
    OP
       2014-06-13 19:35:27 +08:00
    @cxd2427514
    对!露珠应届毕业啊
    进去看看有木有收实习生的呢- -
    这样都能被认出来- -
    Albus
    ReSur
        66
    ReSur  
       2014-06-13 21:47:09 +08:00
    自己写一些小作品
    wintr
        67
    wintr  
       2014-06-14 01:07:11 +08:00
    我收实习生,鹅厂北京
    wintr
        68
    wintr  
       2014-06-14 01:08:13 +08:00
    ai0by
        69
    ai0by  
       2014-06-14 10:29:25 +08:00 via Android
    专业课老师让我们用DW,图形界面,PS切片,扔到DW加链接
    Albus
        70
    Albus  
    OP
       2014-06-14 11:23:49 +08:00
    @wintr
    请问是那个方向的实习?
    Albus
        71
    Albus  
    OP
       2014-06-14 11:25:30 +08:00
    @ai0by
    网页设计的专业课老师嘛?
    wintr
        72
    wintr  
       2014-06-14 13:06:42 +08:00
    @Albus 设计 + 前端,跨界
    Albus
        73
    Albus  
    OP
       2014-06-14 13:38:03 +08:00
    @wintr
    前端刚开始自己看基本不会啊。。。
    交互也没接触过
    我是视觉传达专业的呢0.0
    这样也OK么
    wintr
        74
    wintr  
       2014-06-17 13:27:40 +08:00
    @Albus 这些入门都很快的。
    个人建议,先用 2-3 个月自学些基础,做一些小实践,然后再实习
    Albus
        75
    Albus  
    OP
       2014-06-17 23:02:52 +08:00
    @wintr 我今年应届毕业生啦~
    平面是专业- -
    前端是想自己学一点啦~
    waveiron
        76
    waveiron  
       2015-07-24 12:30:23 +08:00
    这有个视频教程,讲的还行
    http://edu.51cto.com/course/course_id-4130.html
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     2753 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 30ms UTC 15:09 PVG 23:09 LAX 08:09 JFK 11:09
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86