HTML基礎_01

標籤：介紹   ddl   log   5.0   標籤   bottom   cti   top   運用   

 鑒於一個朋友說想學習前端知識，自己也回頭翻了翻自己從小白一路走過來的這些記憶（雖然現在也很菜），決定整理一下一些東西供大家一起學習討論。

一、 WEB標準的概念及組成

　　首先，WEB標準不是某一個標準，而是一系列標準的集合。 這些標準大部分由全球資訊網聯盟（外語縮寫：W3C）起草和發布，也有一些是其他標準組織制訂的標準， 比如ECMA（European Computer Manufacturers Association）的ECMAScript標準。

　　網頁主要由三部分組成： 結構（Structure） 表現（Presentation） 行為（Behavior） 對應的標準也分三方面： 結構化標準語言主要包括XHTML和XML 表現標準語言主要包括CSS 行為標準主要包括物件模型（如W3C DOM）、ECMAScript等。

二、HTML及相關概念的介紹

　　

　　　　HTML 指的是超文字標記語言 (HTML) (Hyper Text Markup Language) XHTML指可擴充超文字標記語言 (HTML)（標識語言） (EXtensible HyperText Markup Language) HTML5指的是HTML的第五次重大修改（第5個版本）   (HTML5 是 W3C 與 WHATWG 合作的結果) WHATWG網頁超文本應用技術工作小組是一個以推動網路HTML 5 標準為目的而成立的組織。在2004年，由Opera、Mozilla基金會和蘋果這些瀏覽器廠商組成。

　　　　此外學習HTML，瞭解一些相對應的曆史也是很有必要的：

　　　　XHTML1.0 2000年1月26日發布，是W3C的推薦標準，後於2002年8月1日重新發布。 XHTML 指可擴充超文字標籤語言。 XHTML 是 HTML 與 XML（擴充標記語言）的結合物。 XHTML 包含了所有與 XML 文法結合的 HTML 4.01 元素。

　　　　XHTML1.1 2001年5月31日發布。XHTML1.0是XML風格的HTML4.01。XHTML1.1主要是初步進行了模組化。

　　　　XHTML2.0 XHTML 2是一種通用的標記語言。但不及HTML5的衝擊。XHTML 2的開發工作將於2009年底停止，而資源將用於推動HTML 5的進展。

　　　　HTML5.0 HTML5 是對 HTML 標準的第五次修訂，其主要的目標是將互連網語義化，以便更好地被人類和機器閱讀，並同時提供更好地支援各種媒體的嵌入。

三、HTML的基本結構

　　　　簡單來說，HTML是由標籤和屬性構成的。一起用於標識各個快速組件，一個HTML文檔包含兩部分內容：對這個檔案簡單描述區(head)和文檔本身(body)的內容區。

　　　　　　這就是一個最基本的HTML結構。（head部分為頭部部分，一般包括一些引入的資源檔和一些標籤如title標籤：控制網頁標題，meta標籤：控制裝置相關屬性和網頁的相關屬性等等。body為主題部分，即為顯示網頁中的內容，可以使映像也可以是文本。）

 

四、HTML的常用標記（標籤）

　　　　1.文本標題：

　　　　

　　　　此標籤一般用於書寫標題。如<h1>JavaScriptDom編程藝術</h1>  h1-h6都為加粗黑體的字型，字型大小上呈遞減排列，具體效果可以自己去敲一下然後在瀏覽器裡開啟試一下。

　　　　2.字型以及字元實體

　　　　

　　　　

　　　　

　　　　

　　　　

　　　　字元實體就是存在與標籤和標籤之間起特殊作用的一些字元。常見的有： &nbsp; 不換行空格 &gt; 右角括弧 &lt; 左角括弧 &copy; 備案中表徵圖。（舉個例子吧：&lt<span>我們都是好孩子</span>&gt。。直接在網頁上的結果就是）

　　　　3.列表的應用

　　　　

　　　　HTML中有三種列表，分別是： 無序列表（ul）    有序列表（ol）    自訂欄表（dl）

　　　

 

　　　　

　　　　

　　　　

　　　　

　　　　4.超連結（即為a標籤，可以實現跳轉的標籤。）

　　　　

　　　　文法： <a href="目標檔案路徑及全稱/串連地址" alt="替換文本" title="提示文本">連結文本/圖片</a>    

　　　　　　　<a href="#"></a>空連結

　　　　

 

 　　　　5.超連結和映像（即為img標籤，映像標籤。）

　　　　

 

　　　由於涉及到了靜態資源的引入，片資源，即img標籤，則就會涉及到一個屬性  src => 路徑，故而引入一個相對路徑的概念。

　　　規則如下：　　

　　　　 1)噹噹前檔案與目標檔案在同一目錄下，直接書寫目標檔案檔案名稱+副檔名；

　　　　 2)噹噹前檔案與目標檔案所處的檔案夾在同一目錄下，寫法如下： 檔案夾名/目標檔案全稱+副檔名；

　　　　 3)噹噹前檔案所處的檔案夾和目標檔案所處的檔案夾在同一目錄下，寫法如下： ../目標檔案所處檔案夾名/目標檔案檔案名稱+副檔名；

　　　項目結構：對應寫法=》

 

 　　　　6.表格和表單標記

　　　　

　　　　

　　　　*資料表格的相關屬性

　　　　1）width="表格的寬度"

　　　　2）height="表格的高度"

　　　　3）border="表格的邊框"

　　　　4）bordercolor="邊框色"

　　　　5）cellspacing="儲存格與儲存格之間的間距"

　　　　6）cellpadding="儲存格與內容之間的空隙"

　　　　7）align="表格對齊" 取值：left、right、center、 valign="垂直對齊" top\bottom\middle\

　　　　8）合併儲存格屬性： 合并列： colspan=“所要合并的儲存格的列數" 合并行： rowspan=“所要合併儲存格的行數”

　　　　

　　　　表單：幾種常用的表單，以input標籤為主（各種類型的input 類型由type屬性定義標識）

　　　　

　　　　

　　　　1.文字框 <input type="text" value="預設值"/>  

　　　　2.密碼框<input type="password" />  

　　　　3.提交按鈕 <input type="submit" value="按鈕內容" />  

　　　　4.重設按鈕 <input type="reset" value="按鈕內容" />

　　　　5.單選框/選項按鈕 <input type="radio" name="ral" /> <input type="radio" name="ral" checked="checked" />(預設選中；)  

　　　　6.複選框 <input type="checkbox" name="like" /> <input type="checkbox" name="like" disabled="disabled" /> (disabled="disabled" :禁用) (checked="checked" :預設選中)

　　　　7.按鈕 <input   name="‘"   type="button" value=“按鈕內容” /> （他和submit的區別是 ，submit是提交按鈕 起到提交資訊的作用，button只起到跳轉的作用，不進行提交。）

 

　　　　8.下拉式功能表

　　　　

　　　　9.多行文字框（文本域）

　　　　

　　　　：

　　　　

　　　　8.常用的標籤：

　　　　div，span，p，以及一些HTML5專屬的新標籤 語義化標籤 header section nav footer，圖形映像標籤 canvas svg等等。

　　　　標籤的學習和理解，只是同看看和學是遠遠不夠的，只有通過日常不斷的使用和練習，才能逐漸掌握並領會到每個標籤的獨到之處，（因為一些標籤在某些特定情境下會有部分小坑。踩多了就習慣了，在這裡就不一一列舉了）

　　　　有個概念稍微引入一下，後面的css複習中會更詳盡的去闡述這個概念，就是區塊層級元素和行內元素。

　　　　1）區塊層級元素會獨佔一行，其寬度自動填滿其父元素寬度       　 行內元素不會獨佔一行，相鄰的行內元素會排列在同一行裡，知道一行排不下，才會換行，其寬度隨元素的內容而變化。　　　　2） 區塊層級元素可以設定 width, height屬性，行內元素設定width,  height無效        　　 【注意：區塊層級元素即使設定了寬度，仍然是獨佔一行的】   　　　3) 區塊層級元素可以設定margin 和 padding.  行內元素的水平方向的padding-left,padding-right,margin-left,margin-right 都產生邊距效果，但是豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都不會產生邊距效果。 （水平方向有效，豎直方向無效）　　　　span i 等標籤都是常見的行內元素  div為常見的塊元素 　　　　 五、 總結 　　　　其實HTML的精髓就在與根據不同的商務邏輯需求去編寫最合理的結構從而去適應之後在布局（css）+邏輯（js）上的內容。越全面地掌握標籤的知識和內容當然也會越容易越快速的理解和靈活用運用HTML。個人認為學習HTML就是一個字“練”，多練多敲，其實沒有什麼有難度的東西，找一個合適自己的IDE按照上面的例子一個一個去敲出來，然後在瀏覽器上去切身實際地看一下效果，每一個屬性也都敲一遍，去體會找出個中不同之處，在這個過程中去熟悉和瞭解，學好HTML自然就是水到渠成了。（給自學的童鞋們推薦幾個比較不錯的IDE吧，如果自己在家自敲自練自學，推薦使用Hbuilder，功能強大，頁面簡潔，特別接地氣的一個IDE，剛入職新人推薦Sublime和vs Code 兩者的相同有點就是“快”，無與倫比的快，再加上越來越全面的外掛程式機制的完善使得它們在輕量級IDE出於一個非常火熱的地位，推薦使用。）

 

 

 

 

 

　　　　

　　　　

 

HTML基礎_01