HTML學習心得(1)
HTML學習心得（1）
認識HTML
在這我做一些簡單的HTML的總結核一些常見的，簡單的標籤或屬性編輯的例子。
什麼是超文字語言
超文字語言，從字面來理解，它就是超級文字。它不像C，C++，java這一類程式語言，它沒有過多的複雜的執行環境，拋棄了龐大的後臺資源支援和有關於整合功能，UI美化，獨特執行環境等一系列的會使語言本身變得龐大的因素。與其說它是一門語言，我覺得它倒更像一個功能更加完善的markdown型別的標記語法。異常簡潔的檔案內容和更小的佔用載入，以及簡單的語法帶來的解析難度極低，我覺得這是它能成為當下網頁的載體的很重要的一部分原因 。
什麼是HTML
HTML，就是我們所說的網頁，網頁的檔案格式就是.html格式。在我們眼裡，它既可以是一種超文字語言，同時，它也是一個實實在在能開啟的網頁。不需要額外的編譯或者處理，寫好，開啟，就是一個網頁。這種神奇的現象，其實就是源自它的最大特點：簡單。
其次我們要介紹的就是HTML的一個最重要的組成部分–標籤。其作用類似於其他語言的關鍵字，是撐起一個HTML檔案的全部。沒有標籤，就沒有網頁。
快捷簡單的編寫和生效方式
既然有了這篇有關於HTML的總結，我想不得不說一下它的編寫和生效。HTML的編寫我認為更多的是一種排列和規劃，而不是演算法和語法。單純的寫一個HTML檔案並不難， 我認為它真正有難度地方在於頁面的UI設計，框架的佈局搭建，以及CSS和JS的後期填充。做一個網頁很簡單，但做一個好看好用的網頁難。超文字標記語言的寫法還是很簡單的，使用元素標籤把你要寫的東西包裹在裡面就可以了，不需要其它的特定語法要求。而生效方式只需要把你寫的東西儲存，用瀏覽器開啟就可以看到了。
HTML的編譯環境
- 電腦
- 版本正常的瀏覽器
- 記事本
- 本人使用的較為方便的軟體：Sublime text
HTML結構
什麼是HTML的結構
HTML的結構，主要分為5個部分DOCTYPE，html，head，title，body。一個HTML檔案就是由這五個部分來作為底部橋樑進行搭建。
doctype
DOCTYPE，其作用主要在於對自身的檔案格式進行宣告，就是讓瀏覽器知道這是一個HTML的檔案，以HTML的454格式來翻譯顯示它。其一般格式為<!DOCTYPE html>
html
在html標籤包裹下的內容就是整個html檔案的所有內容，也可以理解為一整張網頁，都在html的包裹下。其一般格式為:
<html>
····
</html>
head
就像它的名字一樣，head的作用就是在檔案的前面將一些外部檔案，格式引入，或者對檔案的格式，風格等做出一些規劃標準的地方，它在我看來可以類似於C語言的#include ，但head要比它功能更多一點。其一般格式為：
<head>
····
</head>
title
為什麼把title作為head的子項呢，因為title的位置是在head標籤包裹下的，如其名，title的作用就是為這個網頁起一個名字或者說是標題，需要注意的是這個標題是在瀏覽器上顯示的網頁的名字，和本身的檔名沒什麼關係。即修改的名字。
其一般格式為：
<title>
····
</title>
body
body標籤下包裹的，就是整個網頁的主體部分，也就是能顯示在網頁中的基本上所有元素的存放點了。也可以理解為一個網頁的身體，主體。其一般格式為：
<body>
····
</body>
例項
<!DOCTYPE html>
<html>
<head>
<title>
···
</title>
</head>
<body>
···
</body>
</html>
HTML基礎元素標籤
什麼是標籤
標籤作為html裡最基本也是最要的組成部分，在前面我們也提到了標籤。
標籤就是一種html裡的關鍵字 ,它標識宣告使用了某些特殊作用或者特殊組成的部件，以達成規劃，分割，填充，美化頁面的目的。一是標籤的一些特點：
- 通常成對出現
- 格式一般為
<····> </····> - 一對標籤包裹的內容即為該部件下的內容
- 標籤可以巢狀
結構標籤
HTML框架
HTML框架的最基本方面已經在上文的結構上有所提及了，但要注意的是。HTML的框架並不是只有五大結構這麼簡單，對於需要中文作為顯示文字的網頁，在<head></head>標籤中加入<meta charset="utf-8">才能使網頁顯示中文。而作為一個標準的網頁，對於<body> </body>中區域的劃分的區，<div></div>域劃分是必不可少的。所以，一個健康的網頁，我認為最基本的HTML構架應該是類似下面這樣的：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
···
</title>
<style>
···
</style>
</head>
<body>
<div>
</div>
<div>
</div>
····
</body>
</html>
即除了主題的基本五大結構以外，應在主題中至少有一個以上的<div> </div>組成，對頁面進行分割編輯，且在<head> </head>部分要存在對網頁的文字形式及風格，引用等部件的宣告。
HTML預處理檔案標籤
HTML的預處理檔案，其實只是我自己對這部分的理解，用C的概念進行一個類似的闡述。
在HTML裡有類似與處理效果的標籤有：
<link/><style></style><script></script><meta>
下面我們來詳細介紹這些標籤在<head> </head>中時起到了什麼樣的作用：
<link/>
此標籤為一個單標籤，即不是成對出現的標籤對。其在<head></head>中的作用是定義文件與外部資源的關係。也就是將HTML檔案外的類似於CSS檔案，JS檔案等外部檔案連線進該網頁中，標籤中所帶的屬性值可見下表：
屬性 值 描述 charset char_encoding HTML5 中不支援. hrrf URL 規定被連結文件的位置。 hreflang language_code 規定被連結文件中文字的語言。 media media_query 規定被連結文件將被顯示在什麼裝置上。 rel alternate.author.help.icon licence .next pingback .prefetch prev .search .sidebar .stylesheet .tag 規定當前文件與被連結文件之間的關係。 rev reversed .relationship HTML5 中不支援。 sizes heightxwidth any 規定被連結資源的尺寸。僅適用於 rel=”icon”。 target _blank ._self ._top ._parent .frame_name HTML5 中不支援。 type MIME_type 規定被連結文件的 MIME 型別。
我們用一個最常規的引用CSS檔案例子來看：
<link rel="stylesheet" type="text/css" href="mystyle.css" />
rel*屬性下的stylesheet表示我們使用的是一個改變網頁佈局風格型別的填充檔案,type屬性下的text/css表示引入的是一個CSS檔案，href屬性下的mystyle.css指明瞭它的檔案地址。
<style> </style>在這裡我們只解釋它在
<head</head>中的作用，有關於它作為部件內部的控制元件風格屬性我們在後面再解釋。<style></style>在<head></head>中出現時主要有兩個作用：為檔案規定外鏈樣式表的型別
- 在
<style></style>中可以寫入HTML檔案的全域性屬性或者class，id的屬性9。
必需的屬性
屬性 值 描述 type text/css 規定樣式表的 MIME 型別。 可選的屬性
屬性 值 描述 media screen .tty .tv .projection .handheld. print .braille .aural .all 為樣式表規定不同的媒介型別。
我們同樣來舉例說明：
<style type="text/css">
</style>
在一個<link/>元素標籤對外部CSS格式檔案進行引入後，我們在<style>中就要使用“type”屬性對這個樣式表的型別進行規定，而且在<style> </style>中也可以加入例如上例中顯示的規定佈局樣式的屬性內容 。
<script></script>在
<head> </head>中的<script></script>標籤也起到一部分類似於<style> </style>的作用–即對外部的JS格式檔案或JQ資料庫進行引入和型別規定，但與CSS檔案不同的是JS檔案的外部連結也是用<script></script>完成的，並不是<link/>進行連結。
必選的屬性
屬性 值 描述 type MIME-type 指示指令碼的 MIME 型別。 可選的屬性
屬性 值 描述 async async 規定非同步執行指令碼（僅適用於外部指令碼）。 charset charset 規定在外部指令碼檔案中使用的字元編碼。 defer defer 規定是否對指令碼執行進行延遲，直到頁面載入為止。 language script 不贊成使用。規定指令碼語言。請使用 type 屬性代替它。 src URL 規定外部指令碼檔案的 URL。 xml:space preserve 規定是否保留程式碼中的空白。
同樣我們用一個簡單的例子來看：
<script type="text/javascript" src="js_for_test.js" ></script>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
<script>
···
</script>
第一個例子中我們指定一個javascript型別的檔案，並在src屬性中指定這個本地檔案的地址。
第二個例子中我們並沒有使用type，因為我們在src中提供的是一個JQ的資料庫，也就是將一個網上的資料庫匯入HTML檔案中。
第三個例子其實就是類似於<style> </style>的全域性屬性設定，但它對應的是javascript的程式碼塊。
<meta>與
<link/>相似的，<meta>也是一個單標籤。與<style> </style>和<script></script>不同，<link/>與<meta>是隻能存在於<head> </head>中的元素標籤。<meta>元素可提供有關頁面的元資訊，比如針對搜尋引擎和更新頻度的描述和關鍵詞和網頁的位元組編碼方式等。對於元資訊我的理解就是一些隱性的網頁配置，在後臺帶動網頁執行的一些配置亦或是支援網頁正常顯示正常運轉的資原始檔。
必需的屬性
屬性 值 描述 content some_text 定義與 http-equiv 或 name 屬性相關的元資訊 可選的屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| http-equiv | content-typeexpiresrefreshset-cookie | 把 content 屬性關聯到 HTTP 頭部。 |
| name | authordescriptionkeywordsgeneratorrevisedothers | 把 content 屬性關聯到一個名稱。 |
| scheme | some_text | 定義用於翻譯 content 屬性值的格式。 |
同樣我們舉簡單例子來看：
<meta charset="utf-8">
<meta name="keywords" content="HTML,ASP,PHP,SQL">
第一個例子是我們要顯示中文網頁時必要加入的UTF-8位元組編碼，就是在標籤中對它進行宣告呼叫。
第二個例子是引用別處的例子12,其作用是使用name屬性來幫助搜尋引擎完成索引工作。
END