1. HTML概述

1.1 什么是HTML

HTML稱為超文本標記語言，是一種標識性的語言，它包括一系列標簽．通過這些標簽可以將網路上的檔案格式統一，使分散的Internet資源連接為一個邏輯整體，HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、影片、聲音、表格、鏈接等，
超文本是一種組織資訊的方式，它通過超級鏈接方法將文本中的文字、圖表與其他資訊媒體相關聯，這些相互關聯的資訊媒體可能在同一文本中，也可能是其他檔案，或是地理位置相距遙遠的某臺計算機上的檔案，這種組織資訊方式將分布在不同位置的資訊資源用隨機方式進行連接，為人們查找，檢索資訊提供方便，

1.2 HTML能干什么

HTML用于撰寫網頁，平時上網通過瀏覽器我們看到的大部分頁面都是由html撰寫的，在瀏覽器訪問網頁時，可以通過“右鍵/查看網頁源代碼”看到具體的html代碼，

網頁內容包含：HTML代碼、CSS代碼、JavaScript代碼等內容，

HTML代碼：用于展示需要顯示的資料，

CSS代碼：使顯示的資料更加好看，

JavaScript代碼：使整個頁面顯示的資料具有影片效果，

網頁根據內容是否改變分為：靜態頁面、動態頁面，

靜態頁面：撰寫之后在瀏覽器不再改變的網頁，HTML就是用于撰寫靜態網頁的，

動態頁面：會根據不同的情況展示不同的內容，例如：登錄成功后頁面顯示用戶名，

1.3 HTML語言特點

HTML檔案不需要編譯，直接使用瀏覽器閱讀即可

HTML檔案的擴展名是*.html或*.htm

HTML結構都是由標簽組成

標簽名預先定義好的，我們只需要了解其功能即可，

標簽名不區分大小寫

通常情況下標簽由開始標簽和結束標簽組成，例如：<a></a>

如果沒有結束標簽，建議以/結尾，例如：<img/>

HTML結構包括兩部分：頭head和體body

2. HTML結構

對于一個網頁來說，我們在HTML中主要來學習一些常用的標簽，通過學習這些標簽，我們能把90%的網站都可以慢慢搭建，

前端知識我們使用軟體HBuilder來編程，首先打開sublime，新建index.html，輸入html回車：

<html>
    <head>
        <title></title>
    </head>
    <body>
        
    </body>
</html>

生成一大堆的內容，是不是看的很懵逼，那么接下來我們來剖析這段代碼，

2.1 html標簽

每一個頁面中的結構，都會有一個最外層的標簽，它表示檔案內容的開始，

html標簽包含兩部分：頭部宣告(<head>)和內容部分(<body>)，

如果把網頁比作洋蔥，一層包一層，那<html>標簽就是洋蔥最外層的皮， <html> 元素是一張網頁的根標簽，所以其他所有元素都是是此元素的后代，

2.2 head標簽

把一個網頁比作一個人的話，那么head標簽就是這個人的基本資訊，雖然這個沒法直接觀察到，但這些內容確實存在，并且是在網頁中必不可少的，head用于表示網頁的中的一個基礎的資訊(元資訊)

2.3 body標簽

把一個網頁比作一個人的話，那么body標簽就是這個人的身體，膚色，痔瘡，它里面的內容是看得見摸得著的，對于人的性格，意淫的想法，性取向等body是管不著的，那么body標簽包含頁面中所有的可見元素，比如網頁中的文本的展示內容，漂亮meinv ，動聽的音樂，炫酷的電影等都屬于body所管，

好了，相信大家對html檔案結構有了一定的認知，那么我們接下來，就一一的學習head和body中的相關標簽，

3. HTML規范和注釋

3.1 HTML規范

HTML不區分大小寫，也就是說<head>和<HEAD>都可以，

HTML頁面的后綴名是html或者htm(win32時代，系統只能識別3位擴展名時使用的，現在一般都使用.html，

HTML的結構：

宣告部分：主要作用是用來告訴瀏覽器這個頁面使用的是哪個標準，是HTML5標準，

head部分：將頁面的一些額外資訊告訴服務器，不會顯示在頁面上，

body部分：我們所寫的代碼必須放在此標簽內，

3.2 撰寫HTML的規范

所有標簽都要正確的嵌套，不能交叉嵌套，

交叉嵌套：

<html><head></html><head>

正確寫法：

<html><head><head></html>

所有的標簽盡量都小寫，當然也可以大寫，因為html中不區分大小寫，但是小寫相對比大寫來說，它更易于閱讀，

所有的標簽要閉合：

雙閉合比如<html></html>

單閉合比如<meta />

3.3 HTML注釋

在頁面中，凡是被注釋掉的代碼，瀏覽器都不會去決議，

html中的注釋：

<!--這是我關鍵性的內容-->

注釋的作用：

給自己看，隨著頁面的內容越多，高效的注釋能讓我們的代碼更易閱讀，并且關鍵性的代碼我們可以用注釋標注出來，

給別人看，比如自己寫的html代碼，有的地方代碼需要說明一下，同時要轉給別人看和解讀分析的，這個時候就有必要使用html注釋，

正確使用注釋：

<!--<!--這是我關鍵性的內容-->-->

不能一個html注釋中，再放一個html注釋，不然瀏覽器會如下決議，

注釋快捷鍵：windows上 Ctrl + /

4. head中相關的標簽

head標簽中的相關標簽，是看不見摸不著的，僅僅是對應用于網頁的一些基礎資訊(元資訊)，

4.1 常用的meta標簽屬性

meta標簽共有兩個屬性，它們分別是http-equiv屬性和name屬性，不同的屬性又有不同的引數值，這些不同的引數值就實作了不同的網頁功能，

4.1.1 http-equiv屬性

它用來向瀏覽器傳達一些有用的資訊，幫助瀏覽器正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個引數的變數值，

在html4.01版本中，我們使用下面配置來規定HTML 檔案的字符編碼，

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

但在html5版本中，我們使用更簡化的方式來規定HTML 檔案的字符編碼，

<meta charset="UTF-8">

4.1.2 name屬性

主要用于頁面的關鍵字和描述，是寫給搜索引擎看的，關鍵字可以有多個用 ‘,’號隔開，與之對應的屬性值為content，content中的內容主要是便于搜索引擎機器人查找資訊和分類資訊用的，

這些關鍵詞，就是告訴搜索引擎，這個網頁是干嘛的，能夠提高搜索命中率，讓別人能夠找到你，搜索到，

只要設定Description頁面描述，那么百度搜索結果，就能夠顯示這些陳述句，這個技術叫做SEO（search engine optimization，搜索引擎優化），

4.2 title標簽

主要用來告訴用戶和搜索引擎這個網頁的主要內容是什么，搜索引擎可以通過網頁標題，迅速的判斷出當前網頁的主題，

<title>愛編程的小灰灰</title>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/102348.html

標籤：Html/Css

上一篇：JavaScript陣列

下一篇：Web前端基礎(2):HTML(二)

Web前端基礎(1):HTML(一)