你的位置： 异次元首页>全部文章>技术教程>阅读文章
PD虚拟机     VPS     Win11     微软     苹果     SetApp     Office     精选

学习网站开发必备推荐！30天学会HTML和CSS基础入门视频教程 (免费精品课程)

 技术教程       2011-11-24
学习网站开发必备推荐！30天学会HTML和CSS基础入门视频教程 (免费精品课程)
84 下载

很多人都对制作网站很有兴趣，我们之前就有介绍过一些傻瓜式的建站工具如 Tap.cn，也有介绍过一些诸如 WordPress 的视频教程。不过前者对于想学习的人来说作用不大，后者入门门槛又稍高。于是今天给大家介绍一套HTML+CSS的入门视频教程。

一直以来很多朋友来信询问我如何学习网站开发，我的建议总是必须先学扎实的 HTML+CSS基础，毕竟它们是构成网页的根本。很多人 (起码我遇到非常多) 自以为学神马 Javascript、PHP、AJAX、.Net 才够牛逼，一上来就学“高级货”，那么你肯定学不好，或者走很多弯路。砖子都还不会砌，你就想建罗马城？所以，想学网页开发的同学，脚踏实地一步一步走吧……

30天学会HTML和CSS

如上，这套视频来自国外著名网站 Tuts+，原名为“30 Days to Learn HTML & CSS”，称可以30天学会HTML和CSS，它以日历的格式排版，就是每天学习一段课程由浅入深带你入门，非常适合初学者！可惜的是，这套教程是英文解说的，不过作者的言语用得比较简单，对有些许英语基础的人难度不大吧。反正只看视频也能理解绝大部分的意思，边学网站，边学英语，一举两得了吧。

推荐网页开发的书籍：

HTML 和 CSS 其实并不难，随便一个0基础的人都能轻易理解，所以30天学会算是很容易吧。不过一般市面上的什么30天学懂C++学懂Java学懂iPhone开发之类的书就不建议。当然，搞定HTML和CSS之后，再学习 Javascript、PHP什么的就如鱼得水了。

如果你不喜欢英文的视频，我强烈推荐大家去找一本《深入浅出 HTML 与 CSS/XHTML》的书来看看，我个人认为那是非常优秀的图文入门的书籍，而且这个 深入浅出 (Head First) 系列的其他书籍都非常有特色，就是能用精彩有趣的图解来阐述一些乏味的技术原理，让你不觉得自己在读晦涩的技术书。

我就记得以前曾遇到过一个不算复杂的问题，在大多数的书籍中用长篇大论的文字来描述，辛辛苦苦来回读几次都有点不着边际，换来 Head First 一看，就简单一张图让我彻底理解透了。所以我个人还是很推崇这个系列的书的！当然，它主要是面向初学者，高手们就别吐槽了。另外，关于CSS有一本《CSS网站布局实录》，个人感觉良好。

好了，废话就这么多，如果你有兴趣就去看看吧。最后提下，这视频在国内直接在线看的话网络有点OOXX，建议使用迅雷或者之前我们推荐过的 Orbit Downloader 把视频下载回来再慢慢品尝吧。当然，如果谁网络条件好，打包好给我们那就更美了～

视频在线观看网址：

感谢“多年后叫西毒”、“可C” 和 “阿西” 等朋友帮忙打包上传。
解压密码：www.iplaysoft.com

打包下载 30 Days to Learn HTML & CSS 视频教程  |  优酷在线观看  |  来自异次元  |  更多教程

/ 关注 “异次元软件世界” 微信公众号，获取最新软件推送 /


异次元软件世界、iPcFun.com 网站创始人。
本来名字很酷，但很无辜地被叫成小X，瞬间被萌化了。据说爱软件，爱网络，爱游戏，爱数码，爱科技，各种控，各种宅，不纠结会死星人，不折腾会死星人。此人属虚构，如有雷同，纯属被抄袭……
看看Ta的专栏  |   微博  |  微信公众号  |  Twitter  |  邮箱  |  
本文作者
  • 本文分类：技术教程
  • 本文标签：, , , , , , , , , ,
  • 流行热度：已超过 - 人围观了本文
  • 生产日期：异次纪元 11年11月24日 - 17时16分34秒
  • 文章链接：https://www.iplaysoft.com/30days-to-learn-html-css.html [复制] (转载时请注明本文出处及文章链接)

还有这些值得一看：

  • erikzhao

    最近就在看，先收下了

    回复他/她   2011-11-24 17:34:34
    • erikzhao

      我去啊，居然第一次沙发了，太难得了……

      2011-11-24 17:35:18
  • FrozenXZeus

    以前看过小X反对速成教程的， 说最快的方法就是学个40年然后发明时间机
    哎……

    回复他/她   2011-11-24 17:40:21
    • X-Force

      文中有提到，反对速成教程是对那些需要花费比较长时间才能掌握的知识来说的，比如C++，Java等。HTML与CSS相对来说是非常简单的，我认为几天就能入门，30天可以熟练了，当然，要说精通则是另一回事。

      2011-11-24 18:02:27
    • 熊猫

      正在学哦

      2011-11-25 07:39:56
  • 山人主一

    今天这么靠前，前三么···“悸动”不已···

    回复他/她   2011-11-24 18:17:57
  • 小梦

    最近正在学，正好找不到一套比较系统，简洁的视频教程，及时

    回复他/她   2011-11-24 18:55:09
  • Cfan

    不错 好帖子吖

    回复他/她   2011-11-24 19:13:57
  • 啊啊啊啊

    HTMLxCSS真心就那么点东西,用30天应付它都是抬举它了,学好了对读网页还是很有很大帮助的,至于html的那个不一致标准…还是xhtml比较靠谱吧,看到网站里似乎还有其它教程,html5什么的,最近传得很神奇的一个东西

    回复他/她   2011-11-24 19:36:27
    • xingge

      面对国内的IE用户，CSS3都不敢用，HTML5简直就是浮云啊~~~~~

      2011-11-24 22:13:25
  • 坠枯禅

    很不错的介绍啊，考完试要看看！！

    回复他/她   2011-11-24 19:57:54
  • lintao

    这个真可以有，真不错呀···

    回复他/她   2011-11-24 20:26:56
    • lintao

      有木有字幕的哦？？·····

      2011-11-24 20:39:07
  • Charlestanchao

    希望小x出一个HTML5、CSS3、javascript的教程文章。

    回复他/她   2011-11-24 20:42:17
  • skyangel79

    叫大家html哦（how to make love~！）

    回复他/她   2011-11-24 20:54:40
  • XFAN

    这文章风格不对丫~一般文章末尾会有官网 和打包下载地址的 很方便的 可是现在没打包下载地址了~

    回复他/她   2011-11-24 21:27:01
  • Danievil

    要的，要的。

    回复他/她   2011-11-24 22:14:15
  • 小梦

    完整的好大，1G多

    回复他/她   2011-11-24 22:20:22
  • puluo

    好人感谢。

    回复他/她   2011-11-24 22:48:44
  • XFAN

    不管怎样 我已经把任务都暂且放在我的迅雷里去了~

    回复他/她   2011-11-24 23:00:47
  • BabySoul

    那学Dreamweaver有什么用呢？

    回复他/她   2011-11-24 23:21:32
    • dodo

      DW是编程工具，而楼主提供的是一门语言的语法学些。

      就像毛衣针子跟如何织毛衣一样的关系~

      2011-11-28 18:31:11
    • dodo

      DW是编程工具，而楼主提供的是一门语言的语法学习。

      就像毛衣针子跟如何织毛衣一样的关系~

      2011-11-28 18:31:28
  • 可C

    http://www.rayfile.com/zh-cn/files/57260b11-16fd-11e1-a827-0015c55db73d/海外用户用不了迅雷快传，上面已经朋友用迅雷快传分享了，大家可以试试那个应该快些，这是我自己用raysource做的地址，有点不太方便

    回复他/她   2011-11-25 09:00:29
  • 小哨

    对于鸟语表示无奈. 完全不懂. 求字幕,.

    回复他/她   2011-11-25 09:11:47
  • wjtq0528

    正在下载，不知道这英文能不能扛得住啊，感谢发布！

    回复他/她   2011-11-25 11:19:34
  • harder

    html CSS 知识上来说确实很简单！上手用心的话只用一天！！

    不过各种浏览器兼容性问题 会让你无比痛苦！在加上w3c标准！可能你搞得心力交瘁搞出一个能兼容所有浏览器的页面，但他完全不符合标准！而且结构繁杂，CSS冗杂~~~优化又是相当痛苦的工作~~~如果还有js~~~那就更复杂

    总而言之 易学难精~~~

    回复他/她   2011-11-25 12:08:44
  • 阿西

    http://115.com/file/dn3wu8kg#
    30_Days_to_Learn_HTML_&_CSS.rar
    好多人打包啊

    回复他/她   2011-11-25 12:25:03
  • 花落无声

    求字幕啊 E文不给力

    回复他/她   2011-11-25 21:39:59
  • Kaiyuan

    召唤字幕组大婶，得有个字幕给同学学HTML啊，英语压力很大。

    回复他/她   2011-11-26 03:45:39
  • 安史潮任

    为什么三个打包文件大小差别这么大。。迅雷那个链接没速度。。115速度很快。但文件是最小的，弱弱的问句完整吗

    回复他/她   2011-11-26 20:35:50
    • 阿西

      应该是完整的。30天的视频+开始视频+结束视频，一共32个，我用迅雷下的。

      2011-11-27 12:42:53
  • 乌托邦

    我也想说语言很有鸭梨，虽然明白他要表达的意思

    回复他/她   2011-11-26 21:46:07
  • 挣钱动力网络挣钱论坛

    我也想说语言很有鸭梨，虽然明白他要表达的意思

    回复他/她   2011-11-26 22:36:24
  • ukuale

    求中文字幕，最好是人人字幕出手

    回复他/她   2011-11-26 22:48:44
  • dai

    哪位童鞋传到优酷，土豆上就最好了

    回复他/她   2011-11-26 23:08:36
  • tbbeauty

    最好能有中文字幕，尽管没有也能看懂。

    回复他/她   2011-11-26 23:56:15
  • tt

    邮箱地址：cosuwj AT 163 DOT com

    回复他/她   2011-11-27 09:34:10
  • vamdt

    head first系列作为入门的却不错！

    回复他/她   2011-11-27 11:53:06
  • 下载盒子

    我买了本书看，还没看完的。

    回复他/她   2011-11-27 14:06:59
  • 20fx

    不错的…..

    回复他/她   2011-11-27 15:45:14
  • conanfanses

    我也觉得深入浅出的书非常棒

    回复他/她   2011-11-27 18:04:27
  • AA

    W3C的教程也不错。

    回复他/她   2011-11-27 23:02:16
  • Bing

    看了表示很有压力啊，如果有字幕就好了，哪位大牛翻译一下就完美了

    回复他/她   2011-11-28 10:28:11
  • 快活林

    直接用CMS省心

    回复他/她   2011-11-28 13:51:34
  • 牛初乳

    博客写了有几年了，但对CSS一直不理解啊。

    回复他/她   2011-11-28 14:46:30
  • 戈饭

    html我都没正经学，直接学CSS了。
    然后就PHP，html就自然通了。

    回复他/她   2011-11-28 16:54:24
  • DIYZU

    30天也就能入个门吧！想精通就需要些时日了，本人做网站也有几年了，纯手工敲HTML也几年了，不敢托大。但一点可以肯定：基础很重要。良好的基础学什么都快。现在许多开发工具都是拖控件，方便，快速，但是水平提升就慢了。

    回复他/她   2011-11-28 18:32:06
  • 余烬清风

    话说，作为一名没有接触过但是有兴趣的初学者。为啥选的两本书恰好是你提到的？看来我的眼光还是不错的

    回复他/她   2011-11-29 21:16:16
  • keven219

    哈哈 好，真需要这个呢

    回复他/她   2011-12-1 10:46:20
  • gameboy156

    该视频配合 head first 和CSS布局实录 准备本月入门，求英文字幕 中文字幕那是良心货啊！

    回复他/她   2011-12-2 02:18:52
  • 社交商务

    其实学HTML和CSS当初我看了一下书就会了

    回复他/她   2011-12-2 14:03:35
    • 橄榄枝

      想求教一下大虾具体怎么学的，还有就是用到哪些软件和学习资料？

      2012-01-16 14:26:32
  • hytala

    视频中的操作系统是MAC，自带了textedit可以直接编写HTML，但windows中好像找不到类似的功能这么多的软件哦，如果用windows学的话，是用“记事本”编写么？

    回复他/她   2011-12-4 11:22:04
    • o7oo

      人家是后来装的那个软件叫：sublime text2，你可以用dreamweaver，工具只是浮云，你不要啥都要学人家啊，难道人家mac，你也要去买个mac？要学会变通…

      2011-12-4 12:09:42
    • X-Force

      Sublime text2 也有 Windows 版本，相当棒，非常棒的编辑器，值得去尝试～

      2011-12-4 14:24:49
  • o7oo

    sublime现在暂时免费，以后会收费的。还有就是快捷键跟windows冲突，要自己改，所以最后我还是用dreamweaver来学习了。嘎嘎

    回复他/她   2011-12-4 21:29:40
  • ZXC

    [深入浅出HTML]Head_First_HTML与CSS、XHTML++（中文版） 下载

    115网盘 http://115.com/file/an4sjwtd

    云盘 http://filemarkets.com/file/zcmxw/49230aae/

    英文原版（很清晰）

    115网盘 http://115.com/file/an4sjqkx

    云盘 http://filemarkets.com/file/zcmxw/4c22aad0/

    中文版不太清晰，是扫描的图片，所以建议同时下载英文版的作对照

    回复他/她   2011-12-4 22:08:50
    • yamalsh

      你给的115链接需要提取码

      2011-12-23 13:27:03
  • 黑胖

    这套教程好像不错`可惜不懂英文 有人合资请人翻译么 人越多钱越少哇 QQ1306667688

    回复他/她   2011-12-5 02:27:37
  • 我要斗牛士

    非常酷！谢谢分享！

    回复他/她   2011-12-6 17:35:05
  • 美嘉美鞋坊

    不错 一直想学DIV+CSS 没有好的视频 来看看

    回复他/她   2011-12-8 09:58:01
  • 热卖排行

    这个得下载下来学习学习，一定会有用的。

    回复他/她   2011-12-22 15:36:11
  • 亡命之徒

    去找找那书

    回复他/她   2011-12-23 18:17:19
  • 小文

    顶了 楼主

    回复他/她   2012-01-19 16:21:34
  • 大头

    有没有人告诉我，
    视频都是英文，怎么办，
    偶的根本不懂英文啊
    求帮助

    回复他/她   2012-03-3 15:37:17
  • yywr

    好吧，表示英文不过关···

    回复他/她   2012-04-24 01:57:49
  • psy5lyer

    顶下，有时间学习学习！！

    回复他/她   2012-05-3 19:59:24
  • 熊一样de存在

    顶，有时间学习下~

    回复他/她   2012-09-9 16:40:45
  • baozipu

    傻了，英文的，最不来势的就是英文了，不过有时间还是得学习下

    回复他/她   2012-09-26 17:44:06
  • cyrus

    30天可熟练。大言不惭。你学30天出去看有公司要你吗？中国现在整个社会就是俩字“浮躁”！

    回复他/她   2012-11-20 02:16:38
    • 小面

      不知道是谁浮躁，楼主明确表示是基础知识，是入门用的，你一看到熟练（而且那个“熟练”还是楼主回复个人所说的）就想到公司，你这样的永远也不会“精通”。

      2012-12-26 11:26:37
  • 三

    想要

    回复他/她   2013-01-23 10:47:13
  • Jeff

    感谢“多年后叫西毒”、“可C” 和 “阿西” 等朋友帮忙

    回复他/她   2013-07-7 09:56:10
  • 自我反派.

    我在想，为啥这个没有微博评论?!如果这个也弄上，那方便的不是一点/半点！

    回复他/她   2013-10-10 18:14:39
  • djfm1036

    不错。多谢谢

    回复他/她   2014-04-14 13:44:14
  • LDH

    已经从亚马逊购入书籍，希望对我C语言入门有帮助。

    回复他/她   2014-07-12 19:45:58
  • 啊木木

    难道要回复？

    回复他/她   2015-04-3 15:16:30
  • 出现恶

    就看出你就开始

    回复他/她   2015-07-8 08:04:55
  • fgdgjf

    为什么我看不到连接口i额？

    回复他/她   2016-03-16 18:10:30
  • always

    为什么我看不到连接口i额？

    回复他/她   2016-04-5 19:04:18
  • Neo

    没看到啊

    回复他/她   2017-01-14 15:53:18
  • jjs

    在线观看网址没有看到啊

    回复他/她   2018-01-17 00:55:56
  • fff

    网址呢

    回复他/她   2018-03-5 19:06:06





评论内容 (*必填)：
设置你的头像
Ctrl + Enter 快速提交   

赞赏异次元

请通过支付宝、微信 APP 扫一扫，海外读者可「使用 PayPal 赞赏」

“ 感谢您对异次元网站的支持！ ”