代碼有多難？啥是HTML?

們發現了一個問題，就是代碼，可能沒有我們想象的那么難。這節課我們來藤里解一個名詞——HTML。

HTML是個縮寫，全稱是：HyperText Markup Language。說到這里，可能有人會說，哇噻，好長一串單詞，不行，我困了，我要去睡覺了。先別急著走；咱們把這串單詞拆吧拆吧；看看你認識多少。

?Hyper:不認識

?Text:你敢說不認識？

?Mark:每天用馬克筆，另11和我說不知道是這個Mark

?Up:不認識……嗎？

?Language:就算是英文再不好，這個單詞也得認識吧，玩游戲的時候都

是找這個單詞切換成中文的所以乍一看挺長，但別害伯，把它打碎了，說不定你還認識一半以上呢！感覺自己十分厲害的樣子！

那么說一下，他的中文名字，或者說翻譯過來的樣子——超文本標記語言。不過這個名稱也很少被人提及，現在的人都喜歡用縮寫，縮寫成了 HTML還不夠，又縮成了 H5……你馬上會說，原來這個名字和上面一樣，也是了解一下就行了。嘿嘿，并不是，這個名字很重要，認真理解這個名字，你便可以很快的掌握HTML 了。

首先，文本，就是純文字唄，代碼可不全是字么（其實我們偶爾也輸入表情喵：，皮這一下表示很開森?。那什么是超文本呢，就是在文本的基礎上進行增強和擴展。那如何進行増強呢？答案就是標記。原本，我們在文本里寫什么就是什么，現在，我們用文本中的一些內容去標記另一些內容。就比如上一章里我們說到的：

其中的<strong>和</strong>并不會被顯示出來，而是用來標記超級7□敵這四個子，表不要被關出。

至于語言，我們知道，無論是漢語，還是英語，都屬于語言，是我們人類間用來相互溝通的工具。而我們編程用到的語言呢，是我們人類和電腦之間溝通的工具。不過，這可比學一門外語簡單多了，畢竟，需要用到的單詞沒有幾個，語法也十分簡單，關鍵問題，只是邏輻清晰的把你的想法描述出來。

好了，那么我們回頭再來念一遍這個名字：超文本標記語言，是不是覺得不是那么的陌生了呢？

tml概述和基本結構

html概述

HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超文本指的是超鏈接，標記指的是標簽，是一種用來制作網頁的語言，這種語言由一個個的標簽組成，用這種語言制作的文件保存的是一個文本文件，文件的擴展名為html或者htm，一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。

html基本結構

一個html的基本結構如下：

<!DOCTYPE html>
<html lang="en">
 <head> 
 <meta charset="UTF-8">
 <title>網頁標題</title>
 </head>
 <body>
 網頁顯示內容
 </body>
</html>

第一行是文檔聲明，第二行“”標簽和最后一行“”定義html文檔的整體，“”標簽中的‘lang=“en”’定義網頁的語言為英文，定義成中文是’lang=“zh-CN”’,不定義也沒什么影響，它一般作為分析統計用。 “”標簽和“”標簽是它的第一層子元素，“”標簽里面負責對網頁進行一些設置以及定義標題，設置包括定義網頁的編碼格式，外鏈css樣式文件和javascript文件等，設置的內容不會顯示在網頁上，標題的內容會顯示在標題欄，“”內編寫網頁上顯示的內容。

HTML文檔類型

目前常用的兩種文檔類型是xhtml 1.0和html5

xhtml 1.0

xhtml 1.0 是html5之前的一個常用的版本，目前許多網站仍然使用此版本。

此版本文檔用sublime text創建方法： html:xt + tab

文檔示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title> xhtml 1.0 文檔類型 </title>
</head>
<body>
</body>
</html>

html5

pc端可以使用xhtml 1.0，也可以使用html5，html5是向下兼容的

此版本文檔用sublime text創建方法： html:5 + tab 或者 ! + tab

文檔示例：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> html5文檔類型 </title>
</head>
<body>
</body>
</html>

兩種文檔的區別

1、文檔聲明和編碼聲明

2、html5新增了標簽元素以及元素屬性

html注釋：

html文檔代碼中可以插入注釋，注釋是對代碼的說明和解釋，注釋的內容不會顯示在頁面上，html代碼中插入注釋的方法是：

<!-- 這是一段注釋 -->

html標題標簽

通過

、

,標簽可以在網頁上定義6種級別的標題。6種級別的標題表示文檔的6級目錄層級關系，比如說：

用作主標題，其后是

，再其次是

，以此類推。搜索引擎會使用標題將網頁的結構和內容編制索引，所以網頁上使用標題是很重要的。

<h1>這是一級標題</h1>
<h2>這是二級標題</h2>
<h3>這是三級標題</h3>

html段落標簽、換行標簽與字符實體

html段落標簽

標簽定義一個文本段落，一個段落含有默認的上下間距，段落之間會用這種默認間距隔開，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>段落</title>
</head>
<body>
 <p>HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標記語言，超
 文本指的是超鏈接，標記指的是標簽，是一種用來制作網頁的語言，這種語言由一個個的
 標簽組成，用這種語言制作的文件保存的是一個文本文件，文件的擴展名為html或者htm。
 </p>
 <p>一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用文本的方
 式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件渲染成網頁，顯示的網
 頁可以從一個網頁鏈接跳轉到另外一個網頁。</p>
</body>
</html>

html換行標簽

代碼中成段的文字，直接在代碼中回車換行，在渲染成網頁時候不認這種換行，如果真想換行，可以在代碼的段落中插入

來強制換行，代碼如下：

<p>
一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用<br />
文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件<br />
渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。
</p>

html字符實體

代碼中成段的文字，如果文字間想空多個空格，在代碼中空多個空格，在渲染成網頁時只會顯示一個空格，如果想顯示多個空格，可以使用空格的字符實體,代碼如下：

<!-- 在段落前想縮進兩個文字的空格，使用空格的字符實體： -->
<p>
 一個html文件就是一個網頁，html文件用編輯器打開顯示的是文本，可以用<br />
文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標簽描述內容將文件<br />
渲染成網頁，顯示的網頁可以從一個網頁鏈接跳轉到另外一個網頁。</p>

在網頁上顯示 “<” 和 “>” 會誤認為是標簽，想在網頁上顯示“<”和“>”可以使用它們的字符實體，比如：

<!-- “<” 和 “>” 的字符實體為 < 和 > -->
<p>
 3 < 5 <br>
 10 > 5
</p>

html塊標簽、含樣式的標簽

html塊標簽

1、

標簽塊元素，表示一塊內容，沒有具體的語義。

2、標簽行內元素，表示一行中的一小段內容，沒有具體的語義。

含樣式和語義的標簽

1、 標簽行內元素，表示語氣中的強調詞

2、標簽行內元素，表示專業詞匯

3、 標簽行內元素，表示文檔中的關鍵字或者產品名

4、標簽行內元素，表示非常重要的內容

語義化的標簽

語義化的標簽，就是在布局的時候多使用有語義的標簽，搜索引擎在爬網的時候能認識這些標簽，理解文檔的結構，方便網站的收錄。比如：h1標簽是表示標題，p標簽是表示段落，ul、li標簽是表示列表，a標簽表示鏈接，dl、dt、dd表示定義列表等，語義化的標簽不多。

html圖像標簽、絕對路徑和相對路徑

html圖像標簽

標簽可以在網頁上插入一張圖片，它是獨立使用的標簽，它的常用屬性有：

src屬性定義圖片的引用地址

alt屬性定義圖片加載失敗時顯示的文字，搜索引擎會使用這個文字收錄圖片、盲人讀屏軟件會讀取這個文字讓盲人識別圖片，所以此屬性非常重要。

<img src="images/pic.jpg" alt="產品圖片" />

絕對路徑和相對路徑

像網頁上插入圖片這種外部文件，需要定義文件的引用地址，引用外部文件還包括引用外部樣式表，javascript等等，引用地址分為絕對地址和相對地址。

絕對地址：相對于磁盤的位置去定位文件的地址

相對地址：相對于引用文件本身去定位被引用的文件地址

絕對地址在整體文件遷移時會因為磁盤和頂層目錄的改變而找不到文件，相對路徑就沒有這個問題。相對路徑的定義技巧：

“ ./ ” 表示當前文件所在目錄下，比如：“./pic.jpg” 表示當前目錄下的pic.jpg的圖片，這個使用時可以省略。

“ …/ ” 表示當前文件所在目錄下的上一級目錄，比如：“…/images/pic.jpg” 表示當前目錄下的上一級目錄下的images文件夾中的pic.jpg的圖片。

html鏈接標簽

標簽可以在網頁上定義一個鏈接地址，它的常用屬性有：

href屬性定義跳轉的地址

title屬性定義鼠標懸停時彈出的提示文字框

target屬性定義鏈接窗口打開的位置

target="_self" 缺省值，新頁面替換原來的頁面，在原來位置打開

target="_blank" 新頁面會在新開的一個瀏覽器窗口打開

、 HTML語言
HTML 指的是超文本標記語言 (Hyper Text Markup Language)，它不是一種編程語言，而是一種使用一套標記標簽（markup tag）來標記元素作用的標記語言，標記語言使用標記標簽來描述網頁的內容。標記標簽不會出現在頁面中，只有標簽中的內容才會顯示在頁面上。

二、 HTML標簽和HTML元素
HTML 標記標簽通常被稱為 HTML 標簽 (HTML tag)，是由一對尖括號括起來的關鍵詞，稱為標簽名，如 <html>、<a>、<h1>。標簽不區分大小寫，但是推薦使用小寫，(X)HTML 版本中強制使用小寫，這樣更加嚴謹。
標簽的標記分為起始標簽和結束標簽。HTML 元素指的是從開始標簽（start tag）到結束標簽（end tag）的所有內容。
起始標簽用于標記對應HTML元素的開始位置，結束標簽用于標記HTML元素的結束位置。
標簽分為單標簽和雙標簽，都需要起始標簽和結束標簽，不同的是單標簽起始、結束標簽都寫在一個尖括號里而雙標簽則分別寫在兩個尖括號里。單標簽又稱為空標簽，雙標簽又稱為閉合標簽。單標簽的結束標簽就是在標簽的右尖括號前面一個反斜杠，如<br />就是一個單標簽，雙標簽的結束標簽就是在左尖括號后比開始標簽多了一個反斜杠，如<html>和</html>就是一對開始標簽和結束標簽。

三、 HTML元素的分類
不同的HTML標簽對應的HTML元素可以根據位置特征等分為兩類:

塊元素(block)
塊元素主要用來搭建網站架構、頁面布局、承載內容，常見塊元素對應的標簽有： address、blockquote、center、dd、dl、dt、div、dir、fieldset、form、h1-h6、hr、isindex、li、menu、noframes、noscript、ol、table、p、pre、table、u、ul，即這些標簽對應的HTML元素為塊元素。塊元素可設置寬高以及內外邊距、在新行上開始，塊級元素如果不設置寬度和高度，則寬度默認為父級元素（容器）的寬度。高度則根據內容大小自動填充。
行元素(inline)
行元素用于加強內容顯示、控制細節，例如：加粗、斜體等等，常見行元素對應的標簽有： a、abbr、acronym、b、bdo、big、br、cite、code、dfn、em、font、i、img、input、kbd、label、q、s、samp、select、small、span、strike、strong、sub、sup、textarea、tt、u、var …等，行元素和其他元素都在一行上，高、行高及頂和底邊距不可改變，寬度就是它的文字或圖片的寬度，不可改變，可以設置左右內、外邊距，行元素與其他行元素可共處一行

四、標簽嵌套
雙標簽的開始標簽和結束標簽之間可以嵌套其他標簽，不過需要遵循以下規則：
1、兩個標簽嵌套時必須確保開始標簽和結束標簽的層級是一致的，即開始標簽在外層的結束標簽必須在外層；
2、建議書寫HTML文本時嵌套標簽的內層標簽相對外層標簽進行縮進以體現嵌套關系；
3、塊元素標簽可以包含行元素標簽，但行元素標簽不能包含塊元素標簽，它們只能包含其它的行元素標簽；
4、a標簽想要用hover必須把它的路徑寫全；
5、偽類(hover/link/visited/active)只能加給a標簽，在支持 CSS 的瀏覽器中，偽類表示鏈接的不同狀態，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和鼠標懸停狀態：
1)link用在為訪問的連接上；
2)visited用在已經訪問過的連接上；
3)hover用于鼠標光標置于其上的連接；
4)active用于獲得焦點(比如，被點擊)的連接上。
6、塊元素標簽之間：
1)h1、h2、h3、h4、h5、h6、p、dt標簽內不能再嵌套塊標簽；
2)li元素可以嵌入ul, ol, div；
3)div內可以再嵌套其他塊元素；
4)塊元素嵌套其他標簽時，同一層級必須都是塊元素，或必須都是行元素，不能一部分是塊元素，一部分是行元素。如<div><span></span><p></p></div>這種模式是錯誤的，因為span是行元素，p是塊元素，所以這個是錯誤的嵌套。

雖然標簽可以嵌套，但為了提高瀏覽器的渲染效率，應該盡量少使用標簽嵌套。

五、標簽的屬性
HTML 標簽可以擁有屬性,屬性為HTML元素提供的更多的附加信息, 屬性只能在開始標簽中使用,總是以名稱/值對的形式出現，屬性與屬性之間需要用空格隔開，屬性使用小寫。常用的屬性有class(樣式類)、id（屬性名）、style（顯示風格）、title（標題）、align（對齊方式）、bgcolor（背景色）、color（顏色）。
如：

。

在線咨詢

上一篇：JavaScript代碼嵌入HTML的方法、及兩者的在執行流程上的細微區別
下一篇：eBay如何單屬性Listing刊登產品

您的項目需求

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

整合營銷服務商