HTML 基本結構

admin發表於2018-08-04
HTML

網頁無論多複雜，後臺是使用何種語言。

最終呈現在瀏覽者眼前的內容實質上都是由瀏覽器解析HTML程式碼後繪製出來的。

HTML程式碼由幾大結構組成，不同的結構具有不同的功能。

本文只從巨集觀簡略介紹一下各大部分的功能，具體內容需要參閱本版塊其他文章。

首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<div>螞蟻部落</div>
</body>
</html>

一個HTML文件由四個基本部分組成：

（1）.一個文件宣告：<!DOCTYPE HTML>。

（2）.一個html標籤對：<html></html>。

（3）.一個head標籤對：<head></head>。

（4）.一個body標籤對：<body></body>。

一.文件宣告:

文件宣告非常重要，每一個頁面都是必須的，除非有特殊的考量。

DOCTYPE宣告不屬於html標籤，它是一條指令，用於告知瀏覽器，當前html文件使用何種規範書寫。

HTML4.01中的doctype需要對DTD進行引用，因為HTML4.01基於SGML。

HTML5不基於SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行為。

更多內容可以查閱HTML <!DOCTYPE>一章節。

當前我們推薦使用HTML5的文件宣告方式：

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>

二.<HTML>標籤:

它是所有HTML元素的根元素，除去<!DOCTYPE HTML>，頁面的其他內容都會包裹於此元素之內。

上面的程式碼例項也演示了這一點。

三<head>標籤:

此標籤內部會提供一些與瀏覽器解析或者搜尋引擎抓取等相關的資訊。

這些資訊不會直接暴露給瀏覽者，除<title>元素規定的標題（它規定了網頁的標題）:

a:3:{s:3:\"pic\";s:43:\"portal/201808/29/234244tz29kebizi9zd9ed.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

<head>標籤包裹其他重要標籤，可以參閱本版塊其他相關文章。

四.<body>標籤:

它規定了網頁的主體部分，我們所能看到頁面內容都位於此標籤之內。

body所容納的都是與展現相關的，程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">  
table{border-collapse:collapse;} 
td{
  background:#F2F2F2;
  border:solid 1px #CCCCCC;
  width:100px;
  height:22px;
} 
</style>  
</head>  
<body>  
<table  id="thetable"> 
  <tr> 
    <td>螞蟻部落一</td> 
    <td>螞蟻部落二</td> 
    <td>螞蟻部落三</td> 
    <td>螞蟻部落四</td> 
  </tr> 
  <tr> 
    <td>螞蟻部落一</td> 
    <td>螞蟻部落二</td> 
    <td>螞蟻部落三</td> 
    <td>螞蟻部落四</td> 
  </tr> 
  <tr> 
    <td>螞蟻部落一</td> 
    <td>螞蟻部落二</td> 
    <td>螞蟻部落三</td> 
    <td>螞蟻部落四</td> 
  </tr> 
</table> 
</body>  
</html>

上面程式碼中，body內容是一個細線表格效果的展示，當然還可以容納其他內容這裡僅僅是一個展示。

相關文章