者：NSS

翻譯：楊金鴻

術(shù)語(yǔ)校對(duì)：韓海疇

全文校對(duì)：林亦霖

本文約3000字，建議閱讀7分鐘。

本文為帶大家了解R語(yǔ)言以及分段式的步驟教程！

人們學(xué)習(xí)R語(yǔ)言時(shí)普遍存在缺乏系統(tǒng)學(xué)習(xí)方法的問(wèn)題。學(xué)習(xí)者不知道從哪開(kāi)始，如何進(jìn)行，選擇什么學(xué)習(xí)資源。雖然網(wǎng)絡(luò)上有許多不錯(cuò)的免費(fèi)學(xué)習(xí)資源，然而它們多過(guò)了頭，反而會(huì)讓人挑花了眼。

為了構(gòu)建R語(yǔ)言學(xué)習(xí)方法，我們?cè)赩idhya和DataCamp中選一組綜合資源，幫您從頭學(xué)習(xí)R語(yǔ)言。這套學(xué)習(xí)方法對(duì)于數(shù)據(jù)科學(xué)或R語(yǔ)言的初學(xué)者會(huì)很有用;如果讀者是R語(yǔ)言的老用戶，則會(huì)由本文了解這門語(yǔ)言的部分最新成果。

R語(yǔ)言學(xué)習(xí)方法會(huì)幫助您快速、高效學(xué)習(xí)R語(yǔ)言。

前言

在開(kāi)始學(xué)習(xí)之前，第一個(gè)要回答的問(wèn)題是:為什么要用R語(yǔ)言？或者R語(yǔ)言為何如此有用?

R語(yǔ)言是一門快速發(fā)展的開(kāi)源軟件，是SAS、STATA和SPSS這類商業(yè)軟件的競(jìng)爭(zhēng)對(duì)手。就業(yè)市場(chǎng)對(duì)R語(yǔ)言的需求正在迅速上升，微軟等公司也同時(shí)承諾將致力讓R語(yǔ)言成為數(shù)據(jù)科學(xué)通用語(yǔ)言。

看看由Revolution Analytics制作的90秒視頻（https://www.youtube.com/watch?v=VlJnNSeO1uQ），您就知道R語(yǔ)言的用處。順便說(shuō)下，微軟剛剛收購(gòu)了Revolution Analytics。

步驟一：配置計(jì)算機(jī)環(huán)境

建立R語(yǔ)言學(xué)習(xí)環(huán)境最簡(jiǎn)單方法是通過(guò)綜合R語(yǔ)言歸檔網(wǎng)絡(luò)(CRAN)下載（https://cran.r-project.org/）到您的本地計(jì)算機(jī)上?？梢赃x擇Linux、Mac和Windows對(duì)應(yīng)二進(jìn)制文件下載。

您可能會(huì)考慮使用R語(yǔ)言自帶的控制臺(tái)，但我們建議您安裝R語(yǔ)言集成開(kāi)發(fā)環(huán)境(IDE)。RStudio（https://www.rstudio.com/）是最有名的IDE，它能讓R語(yǔ)言編碼更容易、更快，還能讓您輸入多行代碼、處理圖形、安裝和維護(hù)程序，有效引導(dǎo)您的編程環(huán)境。RStudio此外可以選用基于eclipse的Architect（http://www.openanalytics.eu/architect）。如果需要安裝圖形用戶界面（GUI），請(qǐng)選擇R-commander（http://www.rcommander.com/）或Deducer（http://www.deducer.org/pmwiki/index.php?n=Main.WindowsInstallation）。

課后作業(yè)

• 安裝R和RStudio。

• 安裝Rcmdr、rattle和Deducer程序包。以及推薦或依賴的程序包，包括GUI。

• 使用庫(kù)命令加載安裝程序，并打開(kāi)GUI。

步驟二：R語(yǔ)言基礎(chǔ)學(xué)習(xí)

您應(yīng)該首先了解語(yǔ)言、庫(kù)和數(shù)據(jù)結(jié)構(gòu)基礎(chǔ)知識(shí)。

如果您更傾向于在線交流方式學(xué)習(xí)R語(yǔ)法，DataCamp（https://www.datacamp.com/courses/free-introduction-to-r）提供的免費(fèi)在線R教程是很好的資源。還可以選擇后續(xù)課程:中級(jí)R編程（https://www.datacamp.com/courses/intermediate-r）。另一種學(xué)習(xí)方法是在線版本swirl（https://www.datacamp.com/swirl-r-tutorial），它能讓您在類似RStudio環(huán)境中學(xué)習(xí)R語(yǔ)言。

在互動(dòng)學(xué)習(xí)環(huán)境中，您可以選擇參加Coursera（https://www.coursera.org/specializations/jhu-data-science）或Edx（https://www.edx.org/course/introduction-r-programming-microsoft-dat204x-0）上mooc課程。

除了上述在線資源，您還可以考慮以下優(yōu)秀資源:

• CRAN免費(fèi)教學(xué)R語(yǔ)言（https://cran.r-project.org/doc/manuals/R-intro.pdf）。

• Jared Lander’s R for Everyone（http://www.jaredlander.com/r-for-everyone/）

• Quick-R（http://statmethods.net/）

專門學(xué)習(xí):閱讀、數(shù)據(jù)幀、表、概述、描述、加載和安裝包、使用繪圖命令可視化數(shù)據(jù)。

課后作業(yè)

• 使用DataCamp免費(fèi)在線R教程，熟悉基本的R語(yǔ)法。

• 創(chuàng)建Github（http://github.com/）賬號(hào)。

• 通過(guò)google幫助，解決安裝過(guò)程中出現(xiàn)的問(wèn)題。

• 安裝swirl包并學(xué)習(xí)R編程(見(jiàn)上文)。

步驟三:了解R社

強(qiáng)大社區(qū)的存在是R語(yǔ)言發(fā)展迅速、大獲成功的主要原因。社區(qū)中核心的是R語(yǔ)言的“包”生態(tài)系統(tǒng)。R語(yǔ)言程序包可以在CRAN、bioconductor、github和bitbucket中下載。在Rdocumentation（http://www.rdocumentation.org/）中，您可以輕松搜索來(lái)自CRAN、github和bioconductor中能滿足您當(dāng)前工作需要的程序包。與在R語(yǔ)言程序包生態(tài)系統(tǒng)同樣重要的是，您可以在R endeavours上輕松獲得幫助與反饋。首先，R內(nèi)置幫助系統(tǒng)，您可以通過(guò)命令來(lái)訪問(wèn)。同時(shí)，在Analytics Vidhya Discussions，Stack OverflowR語(yǔ)言是增長(zhǎng)最快語(yǔ)言。R-bloggers（http://www.r-bloggers.com/）匯集許多R語(yǔ)言愛(ài)好者寫的博文。

課后作業(yè)：

• 訪問(wèn)CranTask Views了解R語(yǔ)言生態(tài)系統(tǒng)。

• 在http://r-bloggers.com上注冊(cè)并訂閱每日新聞。

步驟四：數(shù)據(jù)導(dǎo)入和操作

導(dǎo)入和操作數(shù)據(jù)是數(shù)據(jù)科學(xué)工作流程中重要步驟。R語(yǔ)言允許使用特定包導(dǎo)入不同數(shù)據(jù)格式，從而使您工作更輕松,如下：

• readr:導(dǎo)入平面文件。

• Readxl package:將excel文件轉(zhuǎn)化為R語(yǔ)言。

• haven package包:讓您將SAS、STATA和SPSS數(shù)據(jù)文件導(dǎo)入R語(yǔ)言。

• Databases:連接通過(guò)像RMySQL和RpostgreSQL包，使用DBI訪問(wèn)和操作。

• rvest： 網(wǎng)頁(yè)數(shù)據(jù)抓取。

一旦數(shù)據(jù)在工作環(huán)境中可用，您就可以使用下面程序包操作:

• 整理數(shù)據(jù)的tidyr程序包。

• stringr包處理字符串操作。

• 對(duì)象數(shù)據(jù)幀，可以學(xué)習(xí)dplyr包輸入和輸出（https://www.datacamp.com/courses/dplyr-data-manipulation）。

• 需要執(zhí)行繁重?cái)?shù)據(jù)爭(zhēng)用任務(wù)?試試data.table程序包。

• 執(zhí)行時(shí)間序列分析?嘗試一下像zoo，xts和quantmod程序包。

課后作業(yè)

• 通過(guò)“導(dǎo)入數(shù)據(jù)進(jìn)入R語(yǔ)言”課程，或閱讀文章1、2、3、4。掌握導(dǎo)入數(shù)據(jù)軟件包。

• 通過(guò)RStudio觀看Data Wrangling with R 。（https://www.rstudio.com/resources/webinars/data-wrangling-with-r-and-rstudio/）

• 閱讀并練習(xí)如何使用dplyr、tidyr和data.table程序包。

步驟五：有效數(shù)據(jù)可視化

自己創(chuàng)建數(shù)據(jù)可視化作品是一件很自豪的事情。然而，數(shù)據(jù)可視化既是一項(xiàng)技能，也是一門藝術(shù)。許多學(xué)者閱讀Edward Tufte 的“可視化定量數(shù)據(jù)”原理，或者StephenFew的 “pitfalls on dashboard design”。也可以閱讀NathanYau在FlowingData 寫的博文，來(lái)獲得創(chuàng)建R語(yǔ)言可視化靈感。

1. 平面圖無(wú)處不在

R語(yǔ)言提供了多種創(chuàng)建圖形方法，使用原理圖創(chuàng)建圖形是標(biāo)準(zhǔn)的方法。然而，有一些好的工具(或包)使用更簡(jiǎn)單的方式來(lái)創(chuàng)建，查看圖形。

• 在R語(yǔ)言中學(xué)習(xí)基本圖形語(yǔ)法是數(shù)據(jù)可視化中一種實(shí)用方法。

• 在R語(yǔ)言中g(shù)gplot是數(shù)據(jù)可視化中最重要的包，并且很受歡迎，網(wǎng)上有很多它的學(xué)習(xí)資源，比如在線ggplot2教程，cheatsheet ，和以及一本由哈德利韋翰編寫的教學(xué)書。

• ggvis程序包允許您使用基本圖形語(yǔ)法創(chuàng)建交互式web圖形(參見(jiàn)教程)。

• 您知道Hans Rosling ted課程嗎?教您如何的用googleVis(一個(gè)帶有谷歌圖表接口)來(lái)重建圖表。

• 如果您遇到了繪制數(shù)據(jù)的問(wèn)題，這篇文章會(huì)對(duì)您有所幫助。在這個(gè)CRAN任務(wù)視圖中可以查看到更多的可視化資源。或者查看R語(yǔ)言數(shù)據(jù)可視化指南。

2. 地圖無(wú)處不在

您對(duì)分析空間可視化數(shù)據(jù)感興趣嗎？學(xué)習(xí)本教程：介紹R語(yǔ)言空間數(shù)據(jù)，您會(huì)輕松地使用這些包。

• 源自Google maps和ggmap開(kāi)放街道的靜態(tài)圖片，可用來(lái)創(chuàng)建可視化空間數(shù)據(jù)和模型。

• Ari Lamstein’s中的choroplethr程序包。

• tmap 程序包

3. HTML插件

HTML插件是R語(yǔ)言可視化產(chǎn)品中非常有前景的插件，您可以用簡(jiǎn)單的方式創(chuàng)建交互式web可視化(參見(jiàn)RStudio教程)，掌握這種可視化方法將會(huì)成為R語(yǔ)言學(xué)習(xí)中必備技能。其帶來(lái)的視覺(jué)效果會(huì)給您朋友和同事留下深刻印象。

• leaflet創(chuàng)建動(dòng)態(tài)圖片。

• 使用dygraphs生成時(shí)間序列數(shù)據(jù)圖表。

• 互動(dòng)表(datatable)。

• DiagrammeR創(chuàng)建圖和流程圖。

• MetricsGraphics創(chuàng)建散點(diǎn)圖、線圖和直方圖。

課后作業(yè)

• 理解基本圖形語(yǔ)法原理。

• 學(xué)習(xí)ggplot2教程。

• 使用RStudio環(huán)境學(xué)習(xí)html插件。

步驟六：數(shù)據(jù)挖掘、機(jī)器學(xué)習(xí)

對(duì)于新的統(tǒng)計(jì)數(shù)據(jù)學(xué)習(xí)方法，我們推薦下列資源:

• Andrew Conway’s課程：R語(yǔ)言統(tǒng)計(jì)數(shù)據(jù)簡(jiǎn)介。

• 杜克大學(xué)數(shù)據(jù)分析和統(tǒng)計(jì)推斷。

• R語(yǔ)言實(shí)用數(shù)據(jù)科學(xué)。

• 約翰霍普金斯大學(xué)數(shù)據(jù)科學(xué)專業(yè)課程。

• R語(yǔ)言數(shù)據(jù)科學(xué)使用指南。

如果您想提高機(jī)器學(xué)習(xí)能力，可以考慮從以下教程開(kāi)始學(xué)習(xí):

• 機(jī)器學(xué)習(xí)算法要點(diǎn)。

• 自行車共享大賽--一套R(shí)語(yǔ)言完整解決方案。

• Kaggle上的機(jī)器學(xué)習(xí)課程。

• 掌握機(jī)器學(xué)習(xí)。

• 介紹機(jī)器學(xué)習(xí)。

確保在相關(guān)的CRAN任務(wù)視圖中查看到R語(yǔ)言可用的機(jī)器學(xué)習(xí)資源。

課后作業(yè)

• 從統(tǒng)計(jì)學(xué)課程開(kāi)始入門。

• 學(xué)習(xí)Kaggle上免費(fèi)機(jī)器學(xué)習(xí)課程。

• 看Rattle中的一些R語(yǔ)言數(shù)據(jù)挖掘書。

• 可以從這本小冊(cè)子上學(xué)習(xí)時(shí)間序列——A Little Book for Time Series in R .

步驟七：報(bào)告結(jié)果

與數(shù)據(jù)科學(xué)愛(ài)好者交流成果，分享見(jiàn)解是一件很重要的事情。幸運(yùn)的是，R語(yǔ)言針對(duì)這個(gè)問(wèn)題有一些非常實(shí)用工具。

第一個(gè)工具是R Markdown，采用knitr和pandoc復(fù)制方式生成您的數(shù)據(jù)分析結(jié)果報(bào)告。使用R markdown工具，R語(yǔ)言最終生成文檔，替換R語(yǔ)言代碼。文檔可以是html、word、pfd、ioslides等格式。您可以通過(guò)本教程學(xué)到更多知識(shí)并使用cheatsheet作為參考資料。

第二個(gè)工具是ReporteRs，它是個(gè)創(chuàng)建Microsoft(Worddocx和Powerpoint pptx)和html R語(yǔ)言文檔程序包，并可以在Windows、Linux、Unix和Mac OS系統(tǒng)上運(yùn)行。像R Markdown工具一樣自動(dòng)生成R語(yǔ)言報(bào)告，點(diǎn)擊這里我們來(lái)看看如何操作。

第三個(gè)是Shiny，目前R語(yǔ)言中最令人興奮的工具。使R語(yǔ)言構(gòu)建交互式web應(yīng)用程序變得非常容易。您可以把分析報(bào)告轉(zhuǎn)換為交互式web應(yīng)用程序，您不需要了解HTML、CSS或Javascript相關(guān)知識(shí)。如果您想要學(xué)習(xí)Shiny ，請(qǐng)點(diǎn)擊RStudio learning portal。

課后作業(yè)

• 使用RMarkdown或ReporteRs創(chuàng)建第一個(gè)交互式報(bào)告。

• 嘗試構(gòu)建一個(gè)Shiny應(yīng)用。

練習(xí)

只有通過(guò)大量練習(xí)才能成為優(yōu)秀R語(yǔ)言程序員。因此，要定期解決數(shù)據(jù)科學(xué)中的問(wèn)題。我們的建議是趕緊開(kāi)始與Kaggle上的數(shù)據(jù)科學(xué)家交流。

在解決問(wèn)題中測(cè)試自己的R語(yǔ)言水平--練習(xí)中的問(wèn)題。

步驟八:時(shí)間序列分析

R語(yǔ)言有一個(gè)用于專屬任務(wù)視圖時(shí)間序列。如果你想在R語(yǔ)言中做一些時(shí)間序列分析，這將是您開(kāi)始的地方。您很快會(huì)發(fā)現(xiàn)工具的強(qiáng)大。

想要從在線資源中掌握時(shí)間序列分析是件不容易的事情。好的切入點(diǎn)是一本關(guān)于時(shí)間序列的書或者選擇《原理與實(shí)踐》這本書。在程序包方面，您需要熟悉Zoo與xts程序包。Zoo為您提供了常用的保存時(shí)間序列對(duì)象格式，而xts供了操作時(shí)間序列的數(shù)據(jù)集工具。

輔助資源: 時(shí)間序列綜合教程。

課后作業(yè)

• 選擇上述列出的時(shí)間系列教程，開(kāi)始您的分析。

• 使用quantmod或quandl程序軟件包下載財(cái)務(wù)數(shù)據(jù)，開(kāi)始您的時(shí)間序列分析。

• 使用諸如dygraphs的程序包創(chuàng)建您的可視化時(shí)間序列數(shù)據(jù)和分析。

文本挖掘一個(gè)重要工具

學(xué)習(xí)文本挖掘，您可以從edge課程中學(xué)習(xí)。雖然課程已經(jīng)結(jié)束，但是您仍然可以訪問(wèn)這些課程。

練習(xí)

• 文本挖掘競(jìng)賽--一套R(shí)語(yǔ)言的完整解決方案。

步驟九:成為R語(yǔ)言大師

現(xiàn)在您已經(jīng)掌握了大部分R語(yǔ)言數(shù)據(jù)分析，是時(shí)候給出一些高級(jí)課程資源了。您很可能已經(jīng)知道其中的一些內(nèi)容，但不妨看看這些教程。

• Hadley Wickham的高級(jí)R語(yǔ)言教程。

• 在Hadoop、MongoDB或NoSQL中使用R語(yǔ)言。

• 微軟的RevoScaleR 程序包

原文鏈接：

https://www.analyticsvidhya.com/learning-paths-data-science-business-analytics-business-intelligence-big-data/learning-path-r-data-science/

楊金鴻，北京護(hù)航科技有限公司員工，在業(yè)余時(shí)間喜歡翻譯一些技術(shù)文檔。喜歡閱讀有關(guān)數(shù)據(jù)挖掘、數(shù)據(jù)庫(kù)之類的書，學(xué)習(xí)java語(yǔ)言編程等，希望能在數(shù)據(jù)派平臺(tái)上熟識(shí)更多愛(ài)好相同的伙伴，今后能在數(shù)據(jù)科學(xué)的道路上走的更遠(yuǎn)，飛的更遠(yuǎn)。

TML 代碼約定

很多 Web 開(kāi)發(fā)人員對(duì) HTML 的代碼規(guī)范知之甚少。

在2000年至2010年，許多Web開(kāi)發(fā)人員從 HTML 轉(zhuǎn)換到 XHTML。

使用 XHTML 開(kāi)發(fā)人員逐漸養(yǎng)成了比較好的 HTML 編寫規(guī)范。

而針對(duì)于 HTML5 ，我們應(yīng)該形成比較好的代碼規(guī)范，以下提供了幾種規(guī)范的建議。

使用正確的文檔類型

文檔類型聲明位于HTML文檔的第一行：

<!DOCTYPE html>

如果你想跟其他標(biāo)簽一樣使用小寫，可以使用以下代碼：

<!doctype html>

使用小寫元素名

HTML5 元素名可以使用大寫和小寫字母。

推薦使用小寫字母：

• 混合了大小寫的風(fēng)格是非常糟糕的。

• 開(kāi)發(fā)人員通常使用小寫 (類似 XHTML)。

• 小寫風(fēng)格看起來(lái)更加清爽。

• 小寫字母容易編寫。

不推薦:

<SECTION>

<p>這是一個(gè)段落。</p>

</SECTION>

非常糟糕:

<Section>

<p>這是一個(gè)段落。</p>

</SECTION>

推薦:

<section>

<p>這是一個(gè)段落。</p>

</section>

關(guān)閉所有 HTML 元素

在 HTML5 中, 你不一定要關(guān)閉所有元素 (例如 <p> 元素)，但我們建議每個(gè)元素都要添加關(guān)閉標(biāo)簽。

不推薦:

<section>

<p>這是一個(gè)段落。

<p>這是一個(gè)段落。

</section>

推薦:

<section>

<p>這是一個(gè)段落。</p>

<p>這是一個(gè)段落。</p>

</section>

關(guān)閉空的 HTML 元素

在 HTML5 中, 空的 HTML 元素也不一定要關(guān)閉：

我們可以這么寫：

<meta charset="utf-8">

也可以這么寫：

<meta charset="utf-8" />

在 XHTML 和 XML 中斜線 (/) 是必須的。

如果你期望 XML 軟件使用你的頁(yè)面，使用這種風(fēng)格是非常好的。

使用小寫屬性名

HTML5 屬性名允許使用大寫和小寫字母。

我們推薦使用小寫字母屬性名:

• 同時(shí)使用大小寫是非常不好的習(xí)慣。

• 開(kāi)發(fā)人員通常使用小寫 (類似 XHTML)。

• 小寫風(fēng)格看起來(lái)更加清爽。

• 小寫字母容易編寫。

不推薦：

<div CLASS="menu">

推薦：

<div class="menu">

屬性值

HTML5 屬性值可以不用引號(hào)。

屬性值我們推薦使用引號(hào):

• 如果屬性值含有空格需要使用引號(hào)。

• 混合風(fēng)格不推薦的，建議統(tǒng)一風(fēng)格。

• 屬性值使用引號(hào)易于閱讀。

以下實(shí)例屬性值包含空格，沒(méi)有使用引號(hào)，所以不能起作用:

<table class=table striped>

以下使用了雙引號(hào)，是正確的：

<table class="table striped">

圖片屬性

圖片通常使用 alt 屬性。 在圖片不能顯示時(shí)，它能替代圖片顯示。

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

定義好圖片的尺寸，在加載時(shí)可以預(yù)留指定空間，減少閃爍。

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

空格和等號(hào)

等號(hào)前后可以使用空格。

<link rel = "stylesheet" href = "styles.css">

但我們推薦少用空格:

<link rel="stylesheet" href="styles.css">

避免一行代碼過(guò)長(zhǎng)

使用 HTML 編輯器，左右滾動(dòng)代碼是不方便的。

每行代碼盡量少于 80 個(gè)字符。

空行和縮進(jìn)

不要無(wú)緣無(wú)故添加空行。

為每個(gè)邏輯功能塊添加空行，這樣更易于閱讀。

縮進(jìn)使用兩個(gè)空格，不建議使用 TAB。

比較短的代碼間不要使用不必要的空行和縮進(jìn)。

不必要的空行和縮進(jìn):

<body>

<h1>菜鳥(niǎo)教程</h1>

<h2>HTML</h2>

<p>

菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。

菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。

菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想,

菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。

</p>

</body>

推薦:

<body>

<h1>菜鳥(niǎo)教程</h1>

<h2></h2>

<p>菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。

菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。

菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。

菜鳥(niǎo)教程，學(xué)的不僅是技術(shù)，更是夢(mèng)想。</p>

</body>

表格實(shí)例:

<table>

<tr>

<th>Name</th>

<th>Description</th>

</tr>

<tr>

<td>A</td>

<td>Description of A</td>

</tr>

<tr>

<td>B</td>

<td>Description of B</td>

</tr>

</table>

列表實(shí)例:

<ol>

<li>London</li>

<li>Paris</li>

<li>Tokyo</li>

</ol>

省略 <html> 和 <body>?

在標(biāo)準(zhǔn) HTML5 中， <html> 和 <body> 標(biāo)簽是可以省略的。

以下 HTML5 文檔是正確的:

實(shí)例:

<!DOCTYPE html>

<head>

<title>頁(yè)面標(biāo)題</title>

</head>

<h1>這是一個(gè)標(biāo)題</h1>

<p>這是一個(gè)段落。</p>

嘗試一下 ?

不推薦省略 <html> 和 <body> 標(biāo)簽。

<html> 元素是文檔的根元素，用于描述頁(yè)面的語(yǔ)言：

<!DOCTYPE html>

<html lang="zh">

聲明語(yǔ)言是為了方便屏幕閱讀器及搜索引擎。

省略 <html> 或 <body> 在 DOM 和 XML 軟件中會(huì)崩潰。

省略 <body> 在舊版瀏覽器 (IE9)會(huì)發(fā)生錯(cuò)誤。

省略 <head>?

在標(biāo)準(zhǔn) HTML5 中， <head>標(biāo)簽是可以省略的。

默認(rèn)情況下，瀏覽器會(huì)將 <body> 之前的內(nèi)容添加到一個(gè)默認(rèn)的 <head> 元素上。

實(shí)例

<!DOCTYPE html>

<html>

<title>頁(yè)面標(biāo)題</title>

<body>

<h1>這是一個(gè)標(biāo)題</h1>

<p>這是一個(gè)段落。</p>

</body>

</html>

嘗試一下 ?

元數(shù)據(jù)

HTML5 中 <title> 元素是必須的，標(biāo)題名描述了頁(yè)面的主題:

<title>菜鳥(niǎo)教程</title>

標(biāo)題和語(yǔ)言可以讓搜索引擎很快了解你頁(yè)面的主題:

<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<title>菜鳥(niǎo)教程</title>

</head>

HTML 注釋

注釋可以寫在 <!-- 和 --> 中:

<!-- 這是注釋 -->

比較長(zhǎng)的評(píng)論可以在 <!-- 和 --> 中分行寫：

<!--

這是一個(gè)較長(zhǎng)評(píng)論。 這是 一個(gè)較長(zhǎng)評(píng)論。這是一個(gè)較長(zhǎng)評(píng)論。

這是 一個(gè)較長(zhǎng)評(píng)論 這是一個(gè)較長(zhǎng)評(píng)論。 這是 一個(gè)較長(zhǎng)評(píng)論。

-->

長(zhǎng)評(píng)論第一個(gè)字符縮進(jìn)兩個(gè)空格，更易于閱讀。

樣式表

樣式表使用簡(jiǎn)潔的語(yǔ)法格式 ( type 屬性不是必須的):

<link rel="stylesheet" href="styles.css">

短的規(guī)則可以寫成一行:

p.into {font-family: Verdana; font-size: 16em;}

長(zhǎng)的規(guī)則可以寫成多行:

body {

background-color: lightgrey;

font-family: "Arial Black", Helvetica, sans-serif;

font-size: 16em;

color: black;

}

• 將左花括號(hào)與選擇器放在同一行。

• 左花括號(hào)與選擇器間添加以空格。

• 使用兩個(gè)空格來(lái)縮進(jìn)。

• 冒號(hào)與屬性值之間添加已空格。

• 逗號(hào)和符號(hào)之后使用一個(gè)空格。

• 每個(gè)屬性與值結(jié)尾都要使用符號(hào)。

• 只有屬性值包含空格時(shí)才使用引號(hào)。

• 右花括號(hào)放在新的一行。

• 每行最多 80 個(gè)字符。

在 HTML 中載入 JavaScript

使用簡(jiǎn)潔的語(yǔ)法來(lái)載入外部的腳本文件 ( type 屬性不是必須的 ):

<script src="myscript.js">

使用 JavaScript 訪問(wèn) HTML 元素

一個(gè)糟糕的 HTML 格式可能會(huì)導(dǎo)致 JavaScript 執(zhí)行錯(cuò)誤。

以下兩個(gè) JavaScript 語(yǔ)句會(huì)輸出不同結(jié)果:

實(shí)例

var obj = getElementById("Demo")

var obj = getElementById("demo")

HTML 中 JavaScript 盡量使用相同的命名規(guī)則。

訪問(wèn) JavaScript 代碼規(guī)范。

使用小寫文件名

大多 Web 服務(wù)器 (Apache, Unix) 對(duì)大小寫敏感： london.jpg 不能通過(guò) London.jpg 訪問(wèn)。

其他 Web 服務(wù)器 (Microsoft, IIS) 對(duì)大小寫不敏感： london.jpg 可以通過(guò) London.jpg 或 london.jpg 訪問(wèn)。

你必須保持統(tǒng)一的風(fēng)格，我們建議統(tǒng)一使用小寫的文件名。

文件擴(kuò)展名

HTML 文件后綴可以是 .html (或r .htm)。

CSS 文件后綴是 .css 。

JavaScript 文件后綴是 .js 。

.htm 和 .html 的區(qū)別

.htm 和 .html 的擴(kuò)展名文件本質(zhì)上是沒(méi)有區(qū)別的。瀏覽器和 Web 服務(wù)器都會(huì)把它們當(dāng)作 HTML 文件來(lái)處理。

區(qū)別在于：

.htm 應(yīng)用在早期 DOS 系統(tǒng)，系統(tǒng)現(xiàn)在或者只能有三個(gè)字符。

在 Unix 系統(tǒng)中后綴沒(méi)有特別限制，一般用 .html。

技術(shù)上區(qū)別

如果一個(gè) URL 沒(méi)有指定文件名 (如 http://www.runoob.com/css/), 服務(wù)器會(huì)返回默認(rèn)的文件名。通常默認(rèn)文件名為 index.html, index.htm, default.html, 和 default.htm。

如果服務(wù)器只配置了 "index.html" 作為默認(rèn)文件，你必須將文件命名為 "index.html", 而不是 "index.htm"。

但是，通常服務(wù)器可以設(shè)置多個(gè)默認(rèn)文件，你可以根據(jù)需要設(shè)置默認(rèn)文件嗎。

不管怎樣，HTML 完整的后綴是 ".html"。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！