搜尋
首頁web前端H5教程零基础如何迅速学习HTML(或HTML5)?

由于从事新媒体推广工作,现在在移动端流行“高大上”的HTML5。作为代码零基础的我,该如何迅速学习HTML(或HTML5)?不要求学会做游戏应用这些,只想学会做简单的滑动页面、跳转即可。
或者可以提供一些快速有效的入门书籍或者视频、技巧也可以,谢过各位大神~

回复内容:

从题主的问题来看,

“由于从事新媒体推广工作,现在在移动端流行“高大上”的HTML5。作为代码零基础的我,该如何迅速学习HTML(或HTML5)?”

所以下面分两种情况来分析:


1.如果题主零基础的情况下想去学代码的话,就得把HTML5、CSS3、JavaScript三个一口气都学了,这样就不需要各种求供应商和技术了。

这种情况下建议题主在网上学习+课本学习同步进行

网上学习强推网易云课堂上浙大的翁恺老师的计算机课程。

其一,翁恺老师本身就是高校里面的人气教师,讲课简明生动,很适合初学者入门【之前学过一些计算机课程,因为太过晦涩,对程序语言甚至有点心理阴影,所以初学者学的课程还是要谨慎选择】。

其二,翁恺老师在网上授课已经有蛮多经验了,也不会出现什么讲课中途遮住了PPT,代码看不清等等诡异的问题。。。

其三,网易云课堂上的三门课程都已经整理完毕,方便学习,平台也比较稳定。而且这些课程完全免费,每门课都有几万人在学【卖不了吃亏也买不了上当=、=

HTML5入门:HTML5入门 - 网易云课堂

CSS3:CSS3 - 网易云课堂

JavaScript:JavaScript - 网易云课堂

书的话,还是推荐一些经典的吧:

《Head first HTML&CSS》:入门级必备,难度合适

《JavaScript DOM编程艺术》:同样入门级教材

《HTML5权威指南》:内容全面,进阶阶段可看

《JavaScript高级程序设计》:JS圣经,殿堂级教材

建议交错搭配学习,加深理解,不过这样学习来比较费时间就对了

2、如果只需要能制作出简单的H5页面,就可以绕过代码这关,善用各类H5制作平台,应该都能轻松上手。

Maka:MAKA.im | 简单、强大的HTML5创作工具

印象中是最早开始做H5页面的平台之一,目前只有web端没有移动端,但网页上各类模板齐全,动态效果和交互也做得不错,只要自己填充内容就好,简单易上手。

初页:初页 - 优质H5手机页、微信海报

和maka不同,专门做移动端的,也有一些预设的模板,支持添加文字、图片、音乐等,方便在手机上直接制作,胜在速度。

秀制作:秀米 XIUMI

来自微信公众号排版常用的工具秀米出品,可以和秀米配合使用,目前也只有web端。

Epub360意派:Epub360意派-专业级H5微场景设计平台

模板不多,但自由度较高,适合有设计感的设计师来操刀制作,发挥交互功能,不过只能免费制作10个,而且作品还自带logo,有ipad版和web版。

书就不必了,先从www.w3schools.com入门,之后各种杂七杂八的问题百度足矣。 去幕课网看视频 学习代码和学习英文不一样, 你需要花费10%的时间去 “学”, 再花90%的时间去 “习” ,特别是前端相关技术,你连续做15-30个小案例,基本就能做基础的开发啦, 个人推荐你使用 “学和习” 整合解决方案: 课程库 极客标签 其实你这个问题在网上有很多答案。我建议你先Google或者百度它。
World Wide Web Consortium (W3C) 是我最推荐去的地方。HTML5在HTML5
实在需要点书的话我觉得你可以看一下这个问题:有哪些关于前端开发技术(HTML、CSS 和 JavaScript 等)的值得推荐的书籍? - 书籍推荐
把这里面的前几个答案看完你或许会有新的收获。
但是我觉得单单HTML或者HTML5的知识不够应付一些实际情况。HTML+CSS+JS最好一块儿学。
英语不好且没有编程基础的话,我和前面的各位一样推荐:w3school 在线教程 codecademy.com
w3schools.com 先说一个免费的网站,慕课网有完整的教程。
每个例子都去实践。把HTML+CSS+JavaScript部分基本学完。例子也学完。
但是感觉还是不能开发什么东西。然后百度前端技术学院!可能不是开放时间。不过没关系。里面内容可以去实践。
一个一个人物敲过去。应该就有还不错的水平了。继续学习吧。 建议题主直接从视频教程看起
先看html+css 然后html5+css3
推荐:html5 教程 非常适合初学者学习
有时间的话,题主最好再学下js、jq、ajax等
希望对题主有帮助 推荐个网站:Vxplo,可以在线制作你想要的互动效果,还有教程。 lynda.com提供了很多不错的课程。
HTML Essential Training很适合入门,另外还有一些HTML5的前沿技术API的专题,建议从基础开始,循序渐进。
课程是视频形式,且作者会根据需要更新自己嗯课程,但又不像普通的公开课视频,一个课程的每个视频都不会超过10分钟,不会出现像公开课看久了枯燥的状况。
关于下载的问题,一般在kickass.to可以搜索到
陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
掌握microdata:HTML5的分步指南掌握microdata:HTML5的分步指南May 14, 2025 am 12:07 AM

Microdatainhtml5enhancesseoanduserexperienceByByBybyBystructuredDatatoSearchEngines.1)useIteMscope,itemType,anditempropattributestomarkupcontentlikeSoreRoductSssSssSoRorevents.2)

HTML5表格中有什麼新功能?探索新輸入類型HTML5表格中有什麼新功能?探索新輸入類型May 13, 2025 pm 03:45 PM

html5introducesnewinputtypesthatenhanceSerexperience,簡化開發和iMproveAccessibility.1)自動validatesemailformat.2)優化優化,優化OmportizeSmizesemizesemizesemizesemizesemizeSmobobileWithAnumericKeyPad.3)和Simimplifydateandtimeputientupits,並重新替代了Forcustemolcustemolcustene。

理解H5:含義和意義理解H5:含義和意義May 11, 2025 am 12:19 AM

H5是HTML5,是HTML的第五個版本。 HTML5提升了網頁的表現力和交互性,引入了語義化標籤、多媒體支持、離線存儲和Canvas繪圖等新特性,推動了Web技術的發展。

H5:可訪問性和網絡標準合規性H5:可訪問性和網絡標準合規性May 10, 2025 am 12:21 AM

無障礙訪問和網絡標準遵循對網站至關重要。 1)無障礙訪問確保所有用戶都能平等訪問網站,2)網絡標準遵循提高網站的可訪問性和一致性,3)實現無障礙訪問需使用語義化HTML、鍵盤導航、顏色對比度和替代文本,4)遵循這些原則不僅是道德和法律要求,還能擴大用戶群體。

HTML中的H5標籤是什麼?HTML中的H5標籤是什麼?May 09, 2025 am 12:11 AM

HTML中的H5標籤是第五級標題,用於標記較小的標題或子標題。 1)H5標籤幫助細化內容層次,提升可讀性和SEO。 2)結合CSS可定製樣式,增強視覺效果。 3)合理使用H5標籤,避免濫用,確保內容結構邏輯性。

H5代碼:Web結構的初學者指南H5代碼:Web結構的初學者指南May 08, 2025 am 12:15 AM

HTML5構建網站的方法包括:1.使用語義化標籤定義網頁結構,如、、等;2.嵌入多媒體內容,使用和標籤;3.應用表單驗證和本地存儲等高級功能。通過這些步驟,你可以創建一個結構清晰、功能豐富的現代網頁。

H5代碼結構:組織內容以實現可讀性H5代碼結構:組織內容以實現可讀性May 07, 2025 am 12:06 AM

通過合理的H5代碼結構可以讓頁面在眾多內容中脫穎而出。 1)使用語義化標籤如、、等組織內容,使結構清晰。 2)通過CSS佈局如Flexbox或Grid控制頁面在不同設備上的呈現效果。 3)實現響應式設計,確保頁面在不同屏幕尺寸上自適應。

H5與較舊的HTML版本:比較H5與較舊的HTML版本:比較May 06, 2025 am 12:09 AM

HTML5(H5)與舊版本HTML的主要區別包括:1)H5引入了語義化標籤,2)支持多媒體內容,3)提供離線存儲功能。 H5通過新標籤和API增強了網頁的功能和表現力,如和標籤,提高了用戶體驗和SEO效果,但需注意兼容性問題。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

SecLists

SecLists

SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。