前端HTML篇-02HTML基本結構

標

HTML基本結構是怎么樣？
HTML基本結構有哪兩層標簽組成？
Head標簽的作用和body標簽的作用?

HTML基本結構

html基本結構

哪兩層(標簽)組成的？

Head標簽

Body標簽

作用是什么？

Head標簽

是作用于網頁的頭部，他描述了html文件的各種屬性和信息，包括網頁的標題，網頁的字符編碼，是否啟用緩存等等。它的內容不會在正文中顯示出來。

定義網頁的標題

Head標簽還可以引用腳本、指示瀏覽器在哪里找到樣式表、提供元信息等等。（拓展）

body 標簽

定義文檔的主體，包含網頁的所有內容（比如文本、超鏈接、圖像、表格和列表等等），即是在網頁上顯示的內容都寫在這里。

TML主體標記

代碼分為三部分編寫

<html>              是網頁文件的最外層標記
	<head>          之間的文本是頭信息
		不會顯示在瀏覽器中，包括基本的描述，整個網頁的公共屬性
	</head>
	<body>      是網頁文件的主體部分
		正文 ：文字、圖片、鏈接、表單等
	</body>	
</html>

HTML文檔頭部標記

<title> </title> 只能有一個

<base /> 只能有一個

<meat> 可以有多個

title

定義網頁標題，顯示在瀏覽器的標題欄中
公司名稱+公司產品
有利于搜索引擎（也是在搜索引擎中顯示的標題）

base

基底網址標記
用于設定瀏覽器中文件的絕對路徑
網頁中的文件只需要寫下文件的相路徑即可，這個路徑就是base中指定下的路徑

link

設置外部文件的鏈接標記
用于確定本頁面和其它文檔之間的關系

meta兩種用法

Name 用于在網頁中加入一些關于網頁的描述信息，網頁的關鍵字，網頁描述信息

http-equiv:屬性用于在HTML文檔中模擬HTTP協議的響應消息頭，例如，告訴瀏覽器是滯緩存頁面，使用什么樣的字符集顯示網頁內容

Meta標簽的name屬性

不是自己定義的值：

Keywords : 網頁的關鍵字

Description：網頁的描述

Robots ： index noindex follow nofollow all none

Author

copright

Meta標簽的http-equiv屬性設置

Content-Type

Refresh

Expires

Windows-Target

Pragma

Page-Enter和Page-Exit

主本標記<body>

在它中放置網頁中所有內容

Text
Bgcolor
Background
Link
Alink
Vlink
Topmargin
Leftmargin

只要是可以用樣式控制的就不用HTML本身屬性

Id name class style 通用屬性，所有的元素都可以使用

DTD

文檔類型定義

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Html
Public
Version
URL

上一節說到，我們可以快速的生成HTML的結構，如下圖所示：

雖然能快捷生成，但是我們必須了解HTML的結構組成：

<!DOCTYPE html>

這是第一行代碼，[DOC意思是document]，TYPE為類型，html為文件，這個是和瀏覽器說明，這是一個html的一個文件類型。

<!DOCTYPE html>
<html></html>

接下來我們將創建HTML標簽，HTML所有的標簽都應在此標簽之中。

<!DOCTYPE html>
<html>
<head></head>
</html>

接著就像描述一個人一樣，先把頭給描述出來，頭部元素在瀏覽器窗口是不可見的，所以這里會有一些標題，一些頁面信息，以及鏈接CSS等其他東西

<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

頭出來了，就來創造我們的身體，身體元素是在瀏覽器頁面上可見的，所以我們在頁面的上能看見的元素都應該添加至身體元素里面。
剛剛說了，我們的HTML的標題需要包含在頭部元素，這時候我們來為頁面添加一個標題

<!DOCTYPE html>
<html>
<head>
    <title>HTML是最基本的網頁語言</title>       
</head>
<body></body>
</html>

現在我們在身體元素里面添加一些瀏覽器頁面可見的元素，例如一級標題

<!DOCTYPE html>
<html>
<head>
    <title>HTML是最基本的網頁語言</title>       
</head>
<body>
    <h1>HTML是最基本的網頁語言</h1>
</body>
</html>

現在我們保存代碼，然后雙擊該html文件即可在瀏覽器打開查看效果。

在線咨詢

上一篇：如何在瀏覽器中啟用 WebGL 以使用 HTML5 3D 查看器
下一篇：Web前端：HTML的10大重要用途

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商