整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
們發(fā)現(xiàn)了一個(gè)問題，就是代碼，可能沒有我們想象的那么難。 這節(jié)課我們來藤里解一個(gè)名詞——HTML。
HTML是個(gè)縮寫，全稱是：HyperText Markup Language。說到這里， 可能有人會說，哇噻，好長一串單詞，不行，我困了，我要去睡覺了。先別 急著走；咱們把這串單詞拆吧拆吧；看看你認(rèn)識多少。
?Hyper:不認(rèn)識
?Text:你敢說不認(rèn)識？
?Mark:每天用馬克筆，另11和我說不知道是這個(gè)Mark
?Up:不認(rèn)識……嗎？
?Language:就算是英文再不好，這個(gè)單詞也得認(rèn)識吧，玩游戲的時(shí)候都
是找這個(gè)單詞切換成中文的所以乍一看挺長，但別害伯，把它打碎了，說不定你還認(rèn)識一半以上 呢！感覺自己十分厲害的樣子！
那么說一下，他的中文名字，或者說翻譯過來的樣子——超文本標(biāo)記語 言。不過這個(gè)名稱也很少被人提及，現(xiàn)在的人都喜歡用縮寫，縮寫成了 HTML還不夠，又縮成了 H5……你馬上會說，原來這個(gè)名字和上面一樣， 也是了解一下就行了。嘿嘿，并不是，這個(gè)名字很重要，認(rèn)真理解這個(gè)名 字，你便可以很快的掌握HTML 了。
首先，文本，就是純文字唄，代碼可不全是字么（其實(shí)我們偶爾也輸 入表情喵：，皮這一下表示很開森?。那什么是超文本呢，就是 在文本的基礎(chǔ)上進(jìn)行增強(qiáng)和擴(kuò)展。那如何進(jìn)行増強(qiáng)呢？答案就是標(biāo)記。原 本，我們在文本里寫什么就是什么，現(xiàn)在，我們用文本中的一些內(nèi)容去標(biāo)記 另一些內(nèi)容。就比如上一章里我們說到的：
其中的<strong>和</strong>并不會被顯示出來，而是用來標(biāo)記 超級7□敵這四個(gè)子，表不要被關(guān)出。
至于語言，我們知道，無論是漢語，還是英語，都屬于語言，是我們?nèi)?類間用來相互溝通的工具。而我們編程用到的語言呢，是我們?nèi)祟惡碗娔X之 間溝通的工具。不過，這可比學(xué)一門外語簡單多了，畢竟，需要用到的單詞 沒有幾個(gè)，語法也十分簡單，關(guān)鍵問題，只是邏輻清晰的把你的想法描述出 來。
好了，那么我們回頭再來念一遍這個(gè)名字：超文本標(biāo)記語言，是不是覺 得不是那么的陌生了呢？
html概述
HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標(biāo)記語言，超文本指的是超鏈接，標(biāo)記指的是標(biāo)簽，是一種用來制作網(wǎng)頁的語言，這種語言由一個(gè)個(gè)的標(biāo)簽組成，用這種語言制作的文件保存的是一個(gè)文本文件，文件的擴(kuò)展名為html或者h(yuǎn)tm，一個(gè)html文件就是一個(gè)網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁，顯示的網(wǎng)頁可以從一個(gè)網(wǎng)頁鏈接跳轉(zhuǎn)到另外一個(gè)網(wǎng)頁。
html基本結(jié)構(gòu)
一個(gè)html的基本結(jié)構(gòu)如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>網(wǎng)頁標(biāo)題</title> </head> <body> 網(wǎng)頁顯示內(nèi)容 </body> </html>
第一行是文檔聲明，第二行“”標(biāo)簽和最后一行“”定義html文檔的整體，“”標(biāo)簽中的‘lang=“en”’定義網(wǎng)頁的語言為英文，定義成中文是’lang=“zh-CN”’,不定義也沒什么影響，它一般作為分析統(tǒng)計(jì)用。 “”標(biāo)簽和“”標(biāo)簽是它的第一層子元素，“”標(biāo)簽里面負(fù)責(zé)對網(wǎng)頁進(jìn)行一些設(shè)置以及定義標(biāo)題，設(shè)置包括定義網(wǎng)頁的編碼格式，外鏈css樣式文件和javascript文件等，設(shè)置的內(nèi)容不會顯示在網(wǎng)頁上，標(biāo)題的內(nèi)容會顯示在標(biāo)題欄，“”內(nèi)編寫網(wǎng)頁上顯示的內(nèi)容。
HTML文檔類型
目前常用的兩種文檔類型是xhtml 1.0和html5
xhtml 1.0
xhtml 1.0 是html5之前的一個(gè)常用的版本，目前許多網(wǎng)站仍然使用此版本。
此版本文檔用sublime text創(chuàng)建方法： 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創(chuàng)建方法： html:5 + tab 或者 ! + tab
文檔示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> html5文檔類型 </title> </head> <body> </body> </html>
兩種文檔的區(qū)別
1、文檔聲明和編碼聲明
2、html5新增了標(biāo)簽元素以及元素屬性
html注釋：
html文檔代碼中可以插入注釋，注釋是對代碼的說明和解釋，注釋的內(nèi)容不會顯示在頁面上，html代碼中插入注釋的方法是：
<!-- 這是一段注釋 -->
通過
、
、
、
、
,標(biāo)簽可以在網(wǎng)頁上定義6種級別的標(biāo)題。6種級別的標(biāo)題表示文檔的6級目錄層級關(guān)系，比如說：
，再其次是
，以此類推。搜索引擎會使用標(biāo)題將網(wǎng)頁的結(jié)構(gòu)和內(nèi)容編制索引，所以網(wǎng)頁上使用標(biāo)題是很重要的。
<h1>這是一級標(biāo)題</h1> <h2>這是二級標(biāo)題</h2> <h3>這是三級標(biāo)題</h3>
html段落標(biāo)簽
標(biāo)簽定義一個(gè)文本段落，一個(gè)段落含有默認(rèn)的上下間距，段落之間會用這種默認(rèn)間距隔開，代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>段落</title> </head> <body> <p>HTML是 HyperText Mark-up Language 的首字母簡寫，意思是超文本標(biāo)記語言，超 文本指的是超鏈接，標(biāo)記指的是標(biāo)簽，是一種用來制作網(wǎng)頁的語言，這種語言由一個(gè)個(gè)的 標(biāo)簽組成，用這種語言制作的文件保存的是一個(gè)文本文件，文件的擴(kuò)展名為html或者h(yuǎn)tm。 </p> <p>一個(gè)html文件就是一個(gè)網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用文本的方 式編輯它，如果用瀏覽器打開，瀏覽器會按照標(biāo)簽描述內(nèi)容將文件渲染成網(wǎng)頁，顯示的網(wǎng) 頁可以從一個(gè)網(wǎng)頁鏈接跳轉(zhuǎn)到另外一個(gè)網(wǎng)頁。</p> </body> </html>
html換行標(biāo)簽
代碼中成段的文字，直接在代碼中回車換行，在渲染成網(wǎng)頁時(shí)候不認(rèn)這種換行，如果真想換行，可以在代碼的段落中插入
來強(qiáng)制換行，代碼如下：
<p> 一個(gè)html文件就是一個(gè)網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用<br /> 文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標(biāo)簽描述內(nèi)容將文件<br /> 渲染成網(wǎng)頁，顯示的網(wǎng)頁可以從一個(gè)網(wǎng)頁鏈接跳轉(zhuǎn)到另外一個(gè)網(wǎng)頁。 </p>
html字符實(shí)體
代碼中成段的文字，如果文字間想空多個(gè)空格，在代碼中空多個(gè)空格，在渲染成網(wǎng)頁時(shí)只會顯示一個(gè)空格，如果想顯示多個(gè)空格，可以使用空格的字符實(shí)體,代碼如下：
<!-- 在段落前想縮進(jìn)兩個(gè)文字的空格，使用空格的字符實(shí)體： --> <p> 一個(gè)html文件就是一個(gè)網(wǎng)頁，html文件用編輯器打開顯示的是文本，可以用<br /> 文本的方式編輯它，如果用瀏覽器打開，瀏覽器會按照標(biāo)簽描述內(nèi)容將文件<br /> 渲染成網(wǎng)頁，顯示的網(wǎng)頁可以從一個(gè)網(wǎng)頁鏈接跳轉(zhuǎn)到另外一個(gè)網(wǎng)頁。</p>
在網(wǎng)頁上顯示 “<” 和 “>” 會誤認(rèn)為是標(biāo)簽，想在網(wǎng)頁上顯示“<”和“>”可以使用它們的字符實(shí)體，比如：
<!-- “<” 和 “>” 的字符實(shí)體為 < 和 > --> <p> 3 < 5 <br> 10 > 5 </p>
html塊標(biāo)簽
1、
標(biāo)簽 塊元素，表示一塊內(nèi)容，沒有具體的語義。
2、 標(biāo)簽 行內(nèi)元素，表示一行中的一小段內(nèi)容，沒有具體的語義。
含樣式和語義的標(biāo)簽
1、 標(biāo)簽 行內(nèi)元素，表示語氣中的強(qiáng)調(diào)詞
2、 標(biāo)簽 行內(nèi)元素，表示專業(yè)詞匯
3、 標(biāo)簽 行內(nèi)元素，表示文檔中的關(guān)鍵字或者產(chǎn)品名
4、 標(biāo)簽 行內(nèi)元素，表示非常重要的內(nèi)容
語義化的標(biāo)簽
語義化的標(biāo)簽，就是在布局的時(shí)候多使用有語義的標(biāo)簽，搜索引擎在爬網(wǎng)的時(shí)候能認(rèn)識這些標(biāo)簽，理解文檔的結(jié)構(gòu)，方便網(wǎng)站的收錄。比如：h1標(biāo)簽是表示標(biāo)題，p標(biāo)簽是表示段落，ul、li標(biāo)簽是表示列表，a標(biāo)簽表示鏈接，dl、dt、dd表示定義列表等，語義化的標(biāo)簽不多。
html圖像標(biāo)簽
標(biāo)簽可以在網(wǎng)頁上插入一張圖片，它是獨(dú)立使用的標(biāo)簽，它的常用屬性有：
src屬性 定義圖片的引用地址
alt屬性 定義圖片加載失敗時(shí)顯示的文字，搜索引擎會使用這個(gè)文字收錄圖片、盲人讀屏軟件會讀取這個(gè)文字讓盲人識別圖片，所以此屬性非常重要。
<img src="images/pic.jpg" alt="產(chǎn)品圖片" />
絕對路徑和相對路徑
像網(wǎng)頁上插入圖片這種外部文件，需要定義文件的引用地址，引用外部文件還包括引用外部樣式表，javascript等等，引用地址分為絕對地址和相對地址。
絕對地址：相對于磁盤的位置去定位文件的地址
相對地址：相對于引用文件本身去定位被引用的文件地址
絕對地址在整體文件遷移時(shí)會因?yàn)榇疟P和頂層目錄的改變而找不到文件，相對路徑就沒有這個(gè)問題。相對路徑的定義技巧：
“ ./ ” 表示當(dāng)前文件所在目錄下，比如：“./pic.jpg” 表示當(dāng)前目錄下的pic.jpg的圖片，這個(gè)使用時(shí)可以省略。
“ …/ ” 表示當(dāng)前文件所在目錄下的上一級目錄，比如：“…/images/pic.jpg” 表示當(dāng)前目錄下的上一級目錄下的images文件夾中的pic.jpg的圖片。
標(biāo)簽可以在網(wǎng)頁上定義一個(gè)鏈接地址，它的常用屬性有：
href屬性 定義跳轉(zhuǎn)的地址
title屬性 定義鼠標(biāo)懸停時(shí)彈出的提示文字框
target屬性 定義鏈接窗口打開的位置
target="_self" 缺省值，新頁面替換原來的頁面，在原來位置打開
target="_blank" 新頁面會在新開的一個(gè)瀏覽器窗口打開
、 HTML語言
HTML 指的是超文本標(biāo)記語言 (Hyper Text Markup Language)，它不是一種編程語言，而是一種使用一套標(biāo)記標(biāo)簽（markup tag）來標(biāo)記元素作用的標(biāo)記語言，標(biāo)記語言使用標(biāo)記標(biāo)簽來描述網(wǎng)頁的內(nèi)容。標(biāo)記標(biāo)簽不會出現(xiàn)在頁面中，只有標(biāo)簽中的內(nèi)容才會顯示在頁面上。
二、 HTML標(biāo)簽和HTML元素
HTML 標(biāo)記標(biāo)簽通常被稱為 HTML 標(biāo)簽 (HTML tag)，是由一對尖括號括起來的關(guān)鍵詞，稱為標(biāo)簽名，如 <html>、<a>、<h1>。標(biāo)簽不區(qū)分大小寫，但是推薦使用小寫，(X)HTML 版本中強(qiáng)制使用小寫，這樣更加嚴(yán)謹(jǐn)。
標(biāo)簽的標(biāo)記分為起始標(biāo)簽和結(jié)束標(biāo)簽。HTML 元素指的是從開始標(biāo)簽（start tag）到結(jié)束標(biāo)簽（end tag）的所有內(nèi)容。
起始標(biāo)簽用于標(biāo)記對應(yīng)HTML元素的開始位置，結(jié)束標(biāo)簽用于標(biāo)記HTML元素的結(jié)束位置。
標(biāo)簽分為單標(biāo)簽和雙標(biāo)簽，都需要起始標(biāo)簽和結(jié)束標(biāo)簽，不同的是單標(biāo)簽起始、結(jié)束標(biāo)簽都寫在一個(gè)尖括號里而雙標(biāo)簽則分別寫在兩個(gè)尖括號里。單標(biāo)簽又稱為空標(biāo)簽，雙標(biāo)簽又稱為閉合標(biāo)簽。單標(biāo)簽的結(jié)束標(biāo)簽就是在標(biāo)簽的右尖括號前面一個(gè)反斜杠，如<br />就是一個(gè)單標(biāo)簽，雙標(biāo)簽的結(jié)束標(biāo)簽就是在左尖括號后比開始標(biāo)簽多了一個(gè)反斜杠，如<html>和</html>就是一對開始標(biāo)簽和結(jié)束標(biāo)簽。
三、 HTML元素的分類
不同的HTML標(biāo)簽對應(yīng)的HTML元素可以根據(jù)位置特征等分為兩類:
四、 標(biāo)簽嵌套
雙標(biāo)簽的開始標(biāo)簽和結(jié)束標(biāo)簽之間可以嵌套其他標(biāo)簽，不過需要遵循以下規(guī)則：
1、兩個(gè)標(biāo)簽嵌套時(shí)必須確保開始標(biāo)簽和結(jié)束標(biāo)簽的層級是一致的，即開始標(biāo)簽在外層的結(jié)束標(biāo)簽必須在外層；
2、建議書寫HTML文本時(shí)嵌套標(biāo)簽的內(nèi)層標(biāo)簽相對外層標(biāo)簽進(jìn)行縮進(jìn)以體現(xiàn)嵌套關(guān)系；
3、塊元素標(biāo)簽可以包含行元素標(biāo)簽，但行元素標(biāo)簽不能包含塊元素標(biāo)簽，它們只能包含其它的行元素標(biāo)簽；
4、a標(biāo)簽想要用hover必須把它的路徑寫全；
5、偽類(hover/link/visited/active)只能加給a標(biāo)簽，在支持 CSS 的瀏覽器中，偽類表示鏈接的不同狀態(tài)，這些狀態(tài)包括：活動狀態(tài)，已被訪問狀態(tài)，未被訪問狀態(tài)，和鼠標(biāo)懸停狀態(tài)：
1)link用在為訪問的連接上；
2)visited用在已經(jīng)訪問過的連接上；
3)hover用于鼠標(biāo)光標(biāo)置于其上的連接；
4)active用于獲得焦點(diǎn)(比如，被點(diǎn)擊)的連接上。
6、塊元素標(biāo)簽之間：
1)h1、h2、h3、h4、h5、h6、p、dt標(biāo)簽內(nèi)不能再嵌套塊標(biāo)簽；
2)li元素可以嵌入ul, ol, div；
3)div內(nèi)可以再嵌套其他塊元素；
4)塊元素嵌套其他標(biāo)簽時(shí)，同一層級必須都是塊元素，或必須都是行元素，不能一部分是塊元素，一部分是行元素。如<div><span></span><p></p></div>這種模式是錯(cuò)誤的，因?yàn)閟pan是行元素，p是塊元素，所以這個(gè)是錯(cuò)誤的嵌套。
雖然標(biāo)簽可以嵌套，但為了提高瀏覽器的渲染效率，應(yīng)該盡量少使用標(biāo)簽嵌套。
五、 標(biāo)簽的屬性
HTML 標(biāo)簽可以擁有屬性,屬性為HTML元素提供的更多的附加信息, 屬性只能在開始標(biāo)簽中使用,總是以名稱/值對的形式出現(xiàn)，屬性與屬性之間需要用空格隔開，屬性使用小寫。常用的屬性有class(樣式類)、id（屬性名）、style（顯示風(fēng)格）、title（標(biāo)題）、align（對齊方式）、bgcolor（背景色）、color（顏色）。
如：
。
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
