網頁設計技術之HTML的基本結構說明
轉載自：https://baijiahao.baidu.com/s?id=1611389749985993229&wfr=spider&for=pc
網頁設計技術追溯到上世紀起步階段時，設計師們是通過HTML語言對網頁進行標記來完成網頁的製作的。例如，要在某一行要放一段文字，就做一個文字的標記，某一列要放一張圖片，就做一個圖片標記等。那時用的編輯工具是記事本一類的應用程式，在裡面寫好了各個標記和內容，然後將記事本檔案儲存為以.html為副檔名的檔案，就製作完成了一個網頁。
原始的製作網頁的方法
隨著技術的不斷髮展，出現了Dreamweaver這型別的網頁編輯器，可以實現所見即所得的網頁效果。但是當我們開啟DW工作介面，仍然會發現有一個視窗是屬於HTML程式碼的：
DW的程式碼編輯介面
而實際操作中，也確實有很多效果需要藉助程式碼的力量來實現。所以今天就給大家介紹一下HTML頁面的基本結構，為日後書寫、修改程式碼打一個基礎。
HTML（Hypertext Markup Language），中文意思為超文字標記語言。其中，Hypertext指的是頁面中各種內容，包括文字、圖片、音訊、視訊、超連結等；Markup即標記；Language即語言。
HTML中的標記大部分是成對出現，例如“<div></div>”，也有個別是以單標記形式出現，例如“<br />”。下圖所示程式碼為一個HTML頁面的基本結構：
HTML的基本結構
1、<!doctype html>文件型別宣告
doctype是document type的縮寫，用來告訴瀏覽器使用什麼樣的HTML或XHTML規範來解析網頁。它存在於頁面的第一行，不區分大小寫。在HTML4中，這部分內容會寫成：
HTML5以前的doctype
其中DTD規定了使用通用標籤語言的網頁語法。在HTML4中，必須指定DTD。但是到了HTML5（本文使用的版本為HTML5），遵循“存在即合理”的原則，對規則的要求比較寬鬆，因此這部分內容可直接簡寫為：
HTML5中的doctype
2、<html></html>
<html></html>標籤是HTML頁面中所有標籤的頂層標籤，一個頁面有且只有一對該標籤，頁面中的所有標籤和內容都必須放在<html></html>標籤對之間。
3、<head></head>頭部資訊
<head></head>標籤用於標識HTML的頭部區域，<head>和</head>之間的內容都屬於頭部區域中的內容，主要包括一些網頁相關的資訊，如網頁標題、字符集、網頁描述等資訊，還可以包括script程式碼等。這些資訊內容不會直接顯示在頁面上，卻在開啟網頁時首先被載入，將載入執行後的結果作用於網頁上。
<meta>標籤用來定義文件的元資料，使用“名稱=值”的形式。一般使用它來描述當前頁面的特性，例如文件字符集，即上圖中的charset="utf-8"。其中“utf-8”是指一種字符集名稱，被稱為“萬國碼”，是一個世界語言的翻譯官，有了它，我們可以在HTML頁面上寫中文、英文、韓文等語言內容。“utf-8”為預設的字符集，這讓頁面在世界上的幾乎所有地區都能正常顯示。（在HTML4中，這部分內容會寫成<meta http-equiv=“content-type” content=“text/html”; charset=“uft-8”>）。
<title></title>用來指定網頁文件的標題，例如：<title>歡迎來到我的網站</title>。在預覽頁面時，標題會顯示在網頁的標題欄，以及工作列中（如下圖書）。<title></title>的作用，一是設定網頁標題，二是用於用搜索引擎檢索。因此，標題設定是否合理是很重要的。
4、<body></body>頁面主體部分
<body></body>是放置頁面內容的地方，所有需要在瀏覽器視窗中顯示的內容都需要放置在<body></body>標籤對之間。例如：
5、標籤中的屬性
對應上圖，標籤中如果有屬性的話，其格式為:
標籤的格式
6、標籤的巢狀關係：標籤須成對巢狀，不能交叉巢狀，如下圖：
標籤的巢狀關係
以上是HTML的基本結構及說明，如有文章中沒有說清楚的地方，歡迎大家留言交流^_^