V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Albus
V2EX  ›  问与答

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

  •  1
     
  •   Albus · 2014-06-13 10:54:34 +08:00 · 8926 次点击
    这是一个创建于 3576 天前的主题,其中的信息可能已经有所发展或是发生改变。
    初级就好。。。不求精通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  
       2014-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 坐等露珠曝照啊
    xgfan
        64
    xgfan  
       2014-06-13 19:34:03 +08:00
    这贴怎么这么多人回啊。
    Albus
        65
    Albus  
    OP
       2014-06-13 19:35:27 +08:00
    @cxd2427514
    对!露珠应届毕业啊
    进去看看有木有收实习生的呢- -
    这样都能被认出来- -
    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   ·   我们的愿景   ·   实用小工具   ·   3152 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 12:22 · PVG 20:22 · LAX 05:22 · JFK 08:22
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.