HTML
前言
但願此篇文章可以幫助到大家，這些都是基於我平常學習中的總結，也許有些不嚴謹，望指出，若你擁有編輯的功能，則在你所認爲錯誤的地方劃掉而非刪除，而後使用紅色筆進行編輯對的，新的內容。
此文章基於XHTML1.0和HTML5標準，其實說是標準，只是咱們所需遵照的最低標準罷了。
轉載標註來源，做者：Chongsaid
工具
不建議新手使用任何自動完成功能的編輯器做爲新初使用，由於最終你會產生依賴性，離開工具就沒法創做出所須要的網頁效果了。
我在百度雲盤分享了一款工具，針對於新手使用的，代碼高亮顯示
工欲善其事，必先利其器，先下載你的工具來開始驗證在此文章所討論的知識點以及部分總結。
連接: https://pan.baidu.com/s/1dFMWP5v 密碼: xbad
其實，工具只是幫助咱們達到目的而已，你也可使用記事本進行開發。
實用的學習參考網站在某種意義上來講，其實也算是一種工具。
W3CSchool ：http://www.w3school.com.cn/index.html
這篇文章有不少資源將引用W3CSchool的教程，而且該網站的學習資源也很優秀。
開始
你已經下載工具了嗎？
那麼開始吧。
HTML是互聯網組成的必不可少的一種標記性語言，咱們所瀏覽的網頁大都基於HTML所提供。任何人均可以學習HTML技術，這其實屬於前端的技術範疇。
HTML稱爲 超文本標記語言 ，具體能夠上網進行搜索。
打開工具，或者在桌面上新建一個文件，將其命名爲 index.html
*.html 其後輟名指的是HTML文件，可使用任何瀏覽器打開此文件，這些瀏覽器會發揮文件的最大做用，而不是簡簡單單的文本文檔。
那麼，如何編寫HTML文件呢？
打開任一網站，點按鍵盤上的 F12 鍵，就能夠看到其網站的源代碼，觀看代碼並學習其實也是成長的一部分。
HTML5主要分爲三部分（包括XHTML）
聲明部分、 頭部（head）、主體（body），其中，容器（html）包裹着頭部和主體。
XHTML有些版本區分大小寫，而且XHTML可能會在將來的某一個時候被HTML5所替代，因此本文章主要精力放在HTML5的知識點上。
實踐：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>網頁標題</title>
</head>
<body>
</body>
</html>
咱們來逐步分析上面的實踐代碼。
<!DOCTYPE html> 此行是網頁聲明，用於告訴瀏覽器該如何解析此文檔時所使用的HTML或XHTML規範，一般HTML5的聲明格式通常如此。而XHTML的聲明格式很繁雜，它有三種聲明格式，我只寫鬆散（Loose）聲明，其他使用搜索引擎進行完善。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
其他部分在以前已經講過，但head標籤以內的那些是什麼呢？
<meta>標籤用於描述網頁的摘要信息，包括文檔內容類型，編碼信息，搜索關鍵字，網站功能等，採用鍵值對的方式描述信息。
<meta charset="utf-8" />這行代碼指示瀏覽器該以怎樣的編碼來解析文檔，有時候出現中文亂碼是由於解析文檔所用的格式錯誤了。
此標籤具體參閱：
百度百科：https://baike.baidu.com/item/meta/4265710?fr=aladdin
W3CSCHOOL：http://www.w3school.com.cn/tags/tag_meta.asp
<title>標籤訂義文檔的標題，瀏覽器會以特殊的方式展現它，將其置於標籤頁上，收藏夾，書籤等。
主體：主要的展現平臺
<body>標籤的做用正是展現信息的平臺。
各式各樣的標籤都能在其中大放異彩，標題標籤，段落標籤，圖片標籤，盒子標籤.......
每個標籤都須要成對出現，固然也有意外，由於它們天生如此。在後面介紹。
在此以前，咱們先學習如何給文檔進行註釋，以此，咱們在之後看到這些代碼的時候，也可以知道當時咱們的想法是怎樣的。
註釋標籤
<!-- 註釋內容 -->
瀏覽器不會解析註釋內容，由於對瀏覽器沒有用處，相反，註釋能給帶給開發者幫助。
下面開始介紹各式標籤，全部的網頁都基於此搭建而成，一個完整的網站會存在樣式表，它們可以美化網站，固然，樣式表會在之後介紹。
標題標籤
<h1>一級標題</h1>
共六級，數值越大則標題大小越小，一個網頁標準的作法是隻出現一次一級標籤，它們是整個網頁所需展現的重要摘要。
此標籤很少作介紹，進行嘗試，於<body>標籤內。而非網頁的頭部標題，是不同的。
段落標籤
<p>總結起初寫於2017年9月12號，是學習的經驗，知識分享，固然其中也不乏有錯，但願看這篇文章的道友可以多多指點，修改錯誤的內容。</p>
段落標籤用於載入一段文字，或是一篇文章，<p>標籤會在先後建立一些空白以突出內容，可使用樣式表美化它，固然，幾乎全部的標籤均可以使用樣式表進行美化。
值得注意的是，在源代碼中，若是有換行符，瀏覽器會採用空格來替代它們，所以須要換行的話，須要在源代碼的文章進行更改，採用換行標籤來替代源代碼中的換行。
進行嘗試，於<body>標籤內。
字體樣式標籤
在前面咱們學習了兩種標籤，分別是 標題標籤和段落標籤 ，若是你沒看到，能夠看看以前的介紹以及內容。
字體樣式標籤能夠對字體產生影響，從而達到突出字體，讓其更爲明顯，能夠很直觀的看到。
主要的，且使用次數較多的樣式標籤以下：
<em> <strong> <dfn> <code> <samp> <kbd> <cite>
實際上，這些標籤都用於區份內容，以達到顯要的，強調開發者所要表達的事物，好比某些關鍵字，引用的文章內容，或是重要的信息。
做爲簡短的介紹，我在知名HTML教學網站上看到了這些標籤的簡介，所以，在此很少作標籤介紹。
以上字體樣式標籤的簡介網址：http://www.w3school.com.cn/tags/tag_phrase_elements.asp
特殊符號
有些符號做爲HTML的語法符號，在網頁實際中並不可見，所以，只能使用特定的轉義符來顯示它們。
在這裏，我將寫一些經常使用的轉義符以達到讀者能夠理解其做用。
空格（ ） 大於號（>） 小於號（<）
引號（"） 版權符號（©）
網頁支持的轉義符網址：http://www.w3school.com.cn/tags/html_ref_symbols.html
換行與水平線標籤
一個標籤可使用樣式表進行美化與設置，有時候當沒有引用樣式表的時候，可使用這些實用性標籤進行美化，這裏就先介紹換行與水平線標籤。
你發現了沒有呢？標題標籤單獨佔用了一行，而有些標籤則一個緊挨着一個。
其實，標籤分爲兩類，分別爲：塊級標籤和行內標籤（在CSS中，稱之爲塊級元素以及行內元素）。
塊級標籤對於目前咱們所學習的這些，並無能力改變它們......但咱們可以改變行內標籤。
<br />標籤，該標籤可使行內標籤進行換行，若是在行內標籤先後各輸入此標籤，則該行內標籤將成爲僞塊級標籤，在用戶看來，它單獨的佔據了一行。
換行標籤僅僅只是簡單的開始新的一行，所以此標籤是一個空標籤，並沒有需成對出現。
有時候咱們須要區分上下文內容，但若使用換行標籤會顯得有些突出，過於猛烈了。所以，可使用分隔線來區分它們。
<hr />標籤，該標籤能夠在上下文中，產生一條水平線，以此來分隔、區份內容，例如標題和文章內容。其含義其實是單詞的縮寫：水平分隔線（horizontal rule）；
實踐
如今你掌握的知識其實已經能給製做一些很簡單的網頁，且擁有可瀏覽性。
開始進行實踐，來製做你的第二個網頁。
網頁源碼：
實際上也能夠在<p>標籤內嵌套換行標籤達到換行的目的，但也能夠在在所需換行的時候，建立一個新的<p>標籤以展現內容。
第二個實踐項目很簡單吧？其實，前端並不是咱們所想象的那樣複雜，只是咱們在灌輸式教育前丟失了小時的創意......
入門
如今可以單首創建出一個簡單的頁面，頁面能夠包含各樣文本，而且對其進行排列，使用水平線和換行達到像文章同樣的效果。
僅僅只是文本文檔而已，沒有超連接，圖片等，也只有單一的閱讀功能，而且，可能不會適配移動設備。
開始學習一些實用性標籤，擁有這些，才能稱之爲一個網站。
圖像標籤
連接一張圖片到網頁上，能夠對網頁進行一些簡要性的說明，或是網站Logo，也能夠是某些演示圖片，這些都並不是是文字可用於描述的，視覺每每比說的有用。
那麼如何連接一張圖片呢？採用圖像標籤便可，其用法很簡單，經常使用屬性只有五個，我建議所有進行使用，由於能夠很好的約束圖片，而且也遵照規範。
爲何要在標籤內定義寬高而不是使用CSS呢？
緣由是，這關於瀏覽器的渲染機制，若是定義在標籤內，將獲得更好的速度，由於瀏覽器的渲染順序以下：
標籤內的屬性 --> CSS樣式 --> 圖片原有大小。
<img src="圖像地址" alt="替代文本" title="鼠標懸浮提示文本" width="圖片寬度" hight="圖片高度" />
注意：在XHTML中，圖像標籤（img）必須被正確的結束，在HTML中，它是一個單標籤，無需結束。
XHTML示例：
<img 屬性="值" ......></img>
若是你不想使用五個屬性，能夠根據須要進行刪減，但必要的兩個屬性：src、alt不能被刪除。
進行實踐。
注：圖像地址能夠是本機的絕對路徑或是相對路徑，例如：D:/圖片.png，固然根據規範，圖片的命名建議使用英文。
圖片寬度或是高度採用的單位最好爲像素，示例： width="500px" height="500px"
一樣，圖像地址可引用網絡中的圖片，例如：https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3615363367,394874282&fm=27&gp=0.jpg
W3CSchool參考：
http://www.w3school.com.cn/tags/tag_img.asp
超連接標籤
超連接指的是，當鼠標單擊該標籤時，會跳轉到指定的界面，或是跳轉到某個錨點（具體參照HTML總結 「錨連接（未寫）」）。
超連接標籤也稱之爲 a 標籤，它經常使用屬性只有兩種：href（被連接處）、target（目標窗口）
<a href="被連接的文檔或是文件" target="目標窗口" >文本或圖像</a>
其中，target屬性值以下：
_blank ：瀏覽器總在新打開、未命名的窗口載入目標文檔
_self ：默認值，除非與<base>標籤中的target屬性一塊兒進行使用，不然毫無心義。
_parent：此目標使文檔載入父框架而非在當前窗口載入新的文檔
_top ：在窗口主體中載入被連接文檔
franename：在指定框架載入目標文檔
其他標籤的使用後續將會不斷完善。
在此以前，能夠到此文永久更新地址進行查看：