最全面的HTML基礎(chǔ)教學(xué)

1、網(wǎng)頁(yè)制作培訓(xùn)教程設(shè)計(jì)部： 地瓜教學(xué)大綱一、什么是“上網(wǎng)”？1.1 認(rèn)識(shí)臨時(shí)文件夾1.2 上網(wǎng)的原理1.3認(rèn)識(shí)Chrome瀏覽器的“網(wǎng)絡(luò)面板”二、超文本標(biāo)記語(yǔ)言HTML2.1 HTML整體感知2.2 認(rèn)識(shí)h系列標(biāo)簽和p標(biāo)簽2.3 網(wǎng)頁(yè)編輯工具2.4 HTML頁(yè)面骨架3.5 認(rèn)識(shí)HTML的特點(diǎn)三、超級(jí)鏈接和文件路徑3.1 href屬性3.2 title屬性3.3 target屬性3.4 路徑四、圖片五、標(biāo)準(zhǔn)文檔流5.1 塊級(jí)元素和行內(nèi)元素5.2 圖片和文字都屬于文字流5.3 標(biāo)簽有正確的嵌套合理性網(wǎng)頁(yè)制作教程網(wǎng)頁(yè)制作教程1.1 認(rèn)識(shí)臨時(shí)文件夾一、什么是“上網(wǎng)”？C:UsersAdministrat

2、orAppDataLocalMicrosoftWindowsTemporary Internet Files（每個(gè)人的路徑都不一樣，但是每個(gè)人都有）這個(gè)文件夾的名字，就叫做“臨時(shí)互聯(lián)網(wǎng)文件夾”網(wǎng)頁(yè)制作培訓(xùn)教程系統(tǒng)為我們打開(kāi)了一個(gè)文件夾：臨時(shí)文件夾就是我們?yōu)g覽頁(yè)面的時(shí)候，在本地中的一個(gè)暫存的一些文件 我們輸入一個(gè)網(wǎng)址，加載一個(gè)網(wǎng)頁(yè)的時(shí)候，會(huì)有一堆文件跑到我們的臨時(shí)文件夾中。網(wǎng)頁(yè)制作培訓(xùn)教程1.2 上網(wǎng)的原理上網(wǎng)就是請(qǐng)求數(shù)據(jù)。并且請(qǐng)求的不是一個(gè)數(shù)據(jù)，而是頁(yè)面上的所有圖片、css、js、flash等相關(guān)資源。網(wǎng)頁(yè)制作培訓(xùn)教程當(dāng)你在瀏覽器的地址欄中輸入一個(gè)地址的時(shí)候，比如，這時(shí)候你的計(jì)算機(jī)就會(huì)向新浪網(wǎng)

3、的服務(wù)器發(fā)送一條HTTP請(qǐng)求，“我要請(qǐng)求你的一個(gè)網(wǎng)頁(yè)”，新浪網(wǎng)的服務(wù)器就會(huì)利用HTTP協(xié)議，將這個(gè)網(wǎng)頁(yè)對(duì)應(yīng)的HTML文件以及這個(gè)文件中所有的CSS、JS、圖片文件等相關(guān)資源都一并傳輸?shù)侥愕挠?jì)算機(jī)中的臨時(shí)文件夾中。瀏覽器，會(huì)在本地渲染這些文件，在屏幕上顯示網(wǎng)頁(yè)。 HTTP（稍微了解即可）： Hypertext Transfer Protocal，超文本傳輸協(xié)議。第一，沒(méi) 有連接，一次請(qǐng)求，一次傳輸，不存在持久連接。第二，是可靠的，網(wǎng)頁(yè)上有一個(gè)字符“1”，用戶(hù)一定能看見(jiàn)這個(gè)“1”，不會(huì)再傳輸過(guò)程中發(fā)生突變“2”。Chrome瀏覽器中文名“谷歌瀏覽器”，和Firefox火狐瀏覽器并稱(chēng)“高級(jí)瀏覽器”。

4、高級(jí)瀏覽器的兼容性非常好，能顯示幾乎全部的絢麗效果。Chrome瀏覽器自己提供了一個(gè)“審查元素”功能。網(wǎng)頁(yè)制作培訓(xùn)教程1.3認(rèn)識(shí)Chrome瀏覽器的“網(wǎng)絡(luò)面板”網(wǎng)頁(yè)制作培訓(xùn)教程狀態(tài)碼：304表示沒(méi)有更改，不再請(qǐng)求這個(gè)文件，所以網(wǎng)頁(yè)第二次加載的時(shí)候，由于圖片、js、css、flash已經(jīng)在我們的臨時(shí)文件夾中，所以瀏覽器不會(huì)再次請(qǐng)求這個(gè)文件，而返回304狀態(tài)碼，所以網(wǎng)頁(yè)加載速度快了。強(qiáng)制刷新：shift+F5。網(wǎng)頁(yè)制作培訓(xùn)教程上圖就是一個(gè)304的示例。做的所有的東西，HTML、CSS、JavaScript等等都將跑到客戶(hù)的計(jì)算機(jī)的臨時(shí)文件夾中。所以，我們學(xué)的知識(shí)，都是開(kāi)源的。就是可以去查看源代碼的

5、。網(wǎng)頁(yè)制作培訓(xùn)教程HTML語(yǔ)言概述：Html是一種超文本標(biāo)記語(yǔ)言，作為一種網(wǎng)頁(yè)編輯語(yǔ)言，易學(xué)易懂！2.1 HTML整體感知HTML全稱(chēng) HyperText Markup Language。(超文本標(biāo)記語(yǔ)言)HTML的制定者是W3C組織，World Wide Web Consortium ， 國(guó)際萬(wàn)維網(wǎng)聯(lián)盟。最新版本是HTML5，我們學(xué)習(xí)的是HTML4.01。文件的拓展名是.html或者.htm是一樣的。好比如index.html等價(jià)于index.htm我們新建一個(gè)txt文檔，將拓展名改成html;二、超文本標(biāo)記語(yǔ)言HTML網(wǎng)頁(yè)制作培訓(xùn)教程例子：這是一個(gè)新建的html文件頁(yè)面，里面放了一個(gè)有關(guān)政

6、府工作的報(bào)告，現(xiàn)在此文件（頁(yè)面）還沒(méi)施加任何標(biāo)簽；網(wǎng)頁(yè)制作培訓(xùn)教程語(yǔ)義：文本的意義。HTML超文本標(biāo)記語(yǔ)言： 超：超能力。瀏覽器能夠自動(dòng)識(shí)別HTML中的標(biāo)簽和文本； 文本：HTML文件從txt文件改名過(guò)來(lái)的。HTML格式的文件是純文本文件。什么是純文本文件？所有能用記事本打開(kāi)，并且內(nèi)容不是亂碼的文件，都是純文本文件。 標(biāo)記：我們?yōu)榱私o文本添加一些“語(yǔ)義”，用到了HTML標(biāo)記，不過(guò)我們中國(guó)人稱(chēng)呼“標(biāo)簽HTML就是通過(guò)這樣的一個(gè)個(gè)標(biāo)簽，給文本賦予語(yǔ)義的：1.2014年兩會(huì)政府工作報(bào)告全文就是一個(gè)“起始標(biāo)簽”，就是“結(jié)束標(biāo)簽”。合成“標(biāo)簽對(duì)兒”。 語(yǔ)言：我們學(xué)的是language，不是javascr

7、ipt，說(shuō)明HTML不是編程。HTML毫無(wú)邏輯可言，沒(méi)有數(shù)學(xué)，沒(méi)有與或非，沒(méi)有循環(huán)、判斷。在學(xué)習(xí)HTML的第一天，一定要記住這句話：HTML中除了語(yǔ)義，什么都沒(méi)有！網(wǎng)頁(yè)制作培訓(xùn)教程現(xiàn)在頁(yè)面添加了相關(guān)的標(biāo)簽元素網(wǎng)頁(yè)制作培訓(xùn)教程網(wǎng)頁(yè)制作培訓(xùn)教程所有的標(biāo)簽對(duì)兒，都是為了給文本施加語(yǔ)義的。 h是英語(yǔ)headline標(biāo)題的意思。主標(biāo)題，W3C規(guī)定，任何一個(gè)頁(yè)面最多有一個(gè)h1。副標(biāo)題，W3C規(guī)定，任何一個(gè)頁(yè)面最多有一個(gè)h2。 分節(jié)標(biāo)題 分節(jié)標(biāo)題 分節(jié)標(biāo)題 分節(jié)標(biāo)題 p是英語(yǔ)paragraph段落的意思。之間的文本就是一個(gè)段落。p標(biāo)簽中只能放文字和圖片。 學(xué)習(xí)一個(gè)標(biāo)簽，div是英語(yǔ)division分割、區(qū)段

8、的意思。2.2 認(rèn)識(shí)h系列標(biāo)簽和p標(biāo)簽網(wǎng)頁(yè)制作培訓(xùn)教程 認(rèn)識(shí)標(biāo)簽的正確封閉的重要性。HTML中標(biāo)簽可以嵌套。網(wǎng)頁(yè)制作培訓(xùn)教程2.3 網(wǎng)頁(yè)編輯工具任何純文本編輯器都是可以制作網(wǎng)頁(yè)的，都是可以書(shū)寫(xiě)HTML文件的。記事本、Dreamweaver 、Sublime Dreamweaver：最著名的網(wǎng)頁(yè)編輯器，是Adobe的產(chǎn)品 Sublime：是前端開(kāi)發(fā)神器。2.4 HTML頁(yè)面骨架Sublime 中，Ctrl+N新建一個(gè)文件，然后輸入： 然后按ctrl+E鍵或者是直接按Tab鍵；要注意的是html:xt的雙引號(hào)，:這個(gè)符號(hào)必須是英文格式；網(wǎng)頁(yè)制作培訓(xùn)教程1. 文檔聲明頭，不需要記憶，但是要知道這是什

9、么2. 所有的頁(yè)面內(nèi)容都在標(biāo)簽對(duì)兒中3. 所有的網(wǎng)頁(yè)的相關(guān)配置，出現(xiàn)在標(biāo)簽對(duì)兒中。head標(biāo)簽對(duì)兒中的內(nèi)容，都是一些配置，不是網(wǎng)頁(yè)的內(nèi)容4. 設(shè)置字符集5.Document 頁(yè)面的標(biāo)題6.7. 頁(yè)面的主體8.9.10. 第1行： 文檔聲明頭，是W3C組織的要求的，所有HTML頁(yè)面，第一行代碼必須是文檔聲明頭。在文檔聲明頭中，聲明了html文檔執(zhí)行的標(biāo)準(zhǔn)是什么？XHTML1.0 。 第2行： xmlns=/1999/xhtml xml:lang=en 這個(gè)是命名空間，不需要記憶，但是需要會(huì)用Sublime生成。 第4行：charset字符集，char是英語(yǔ)char

10、actor字符的意思，set是集的意思。HTML4.01 和 XHTML1.0 是一回事：X表示extensitial，拓展的，嚴(yán)格的。XHTML是更為嚴(yán)格的HTML。 不需要記憶。直接從Sublime中生成即可。網(wǎng)頁(yè)制作培訓(xùn)教程title就是網(wǎng)頁(yè)的標(biāo)題 網(wǎng)頁(yè)制作培訓(xùn)教程一個(gè)HTML文檔的規(guī)范格式：.5.設(shè)置標(biāo)題6.7.8. 認(rèn)識(shí)HTML的特點(diǎn)比較兩個(gè)代碼，HTML對(duì)換行不敏感，標(biāo)簽是反映語(yǔ)義的唯一因素，不會(huì)因?yàn)閾Q行、空格、縮進(jìn)而改變語(yǔ)義。1.2.我是主標(biāo)題啊我是副標(biāo)題啊3.1.2.我是主標(biāo)題啊3.我是副標(biāo)題啊4.頁(yè)面效果一樣網(wǎng)頁(yè)制作培訓(xùn)教程空白折疊現(xiàn)象： 只出

11、現(xiàn)了一個(gè)空格標(biāo)簽的父子關(guān)系：1.2.我是主標(biāo)題啊3.我是副標(biāo)題啊4.5.我是個(gè)段落6.我又是一個(gè)段落7.body是h1、h2、p的父標(biāo)簽； h1、h2、p是body的子標(biāo)簽當(dāng)頁(yè)面做完之后，可以將html中所有標(biāo)簽寫(xiě)在一行上，能顯著減少頁(yè)面體積。 在HTML標(biāo)簽對(duì)兒中的文本，如果有大量空格、換行、縮進(jìn)，都只會(huì)被渲染成為一個(gè)空格。網(wǎng)頁(yè)制作培訓(xùn)教程 以下兩種寫(xiě)法完全等價(jià)，沒(méi)有任何的不同：1 12 2 3 31 1 他們都描述了一種父子關(guān)系。 但是第2種寫(xiě)法，不方便我們判斷父子關(guān)系，所以我們要求必須正確縮進(jìn)！三、超級(jí)鏈接和文件路徑 a是用于anchor錨的意思，這個(gè)標(biāo)簽的語(yǔ)義就是超級(jí)鏈接。3.1 hr

12、ef屬性 制作跳轉(zhuǎn)的目標(biāo)1 1 a 去頁(yè)面去頁(yè)面22href是英語(yǔ)hypertext reference超文本引用的縮寫(xiě)。特別容易拼寫(xiě)錯(cuò)誤：herf網(wǎng)頁(yè)制作培訓(xùn)教程HTML標(biāo)簽可以有屬性（描述這個(gè)標(biāo)簽的），屬性起始標(biāo)簽的內(nèi)部，用以下語(yǔ)法：1 哈哈術(shù)語(yǔ)上，屬性名稱(chēng)為k（key），值是v（value）。 k=”v”3.2 title屬性title屬性是懸停提示文本 target=”_blank”是一個(gè)固定寫(xiě)法，表示在新的標(biāo)簽頁(yè)中打開(kāi)鏈接網(wǎng)頁(yè)制作培訓(xùn)教程3.3 target屬性規(guī)定是否在新的標(biāo)簽頁(yè)中打開(kāi)鏈接。如果加上target=”_blank”，表示在新的標(biāo)簽頁(yè)中打開(kāi)鏈接。blank表示空白。不加

13、就是在本標(biāo)簽頁(yè)中打開(kāi)連接。1 去頁(yè)面2標(biāo)簽中的屬性更換位置，沒(méi)有任何問(wèn)題：1 去頁(yè)面2網(wǎng)頁(yè)制作培訓(xùn)教程要跳轉(zhuǎn)到的頁(yè)面，和本頁(yè)面不在一個(gè)文件夾中： 要跳轉(zhuǎn)到的頁(yè)面，在更深的文件夾中，書(shū)寫(xiě)文件夾名：1.href=aaa/頁(yè)面2.html 要跳轉(zhuǎn)的頁(yè)面，在更淺的文件夾中，書(shū)寫(xiě)./表示一層1.href=./05 超級(jí)鏈接.html 路徑的綜合應(yīng)用：非常重要！現(xiàn)在06 超級(jí)鏈接.html頁(yè)面中有一個(gè)a，想指向頁(yè)面2.html這種路徑我們稱(chēng)呼“相對(duì)路徑”。相對(duì)我自己，找到要去的頁(yè)面的路。絕對(duì)路徑，就是以http:/開(kāi)頭的路徑3.4 路徑網(wǎng)頁(yè)制作培訓(xùn)教程四、圖片 img是英語(yǔ)image圖片的意思。 圖片不用

14、文本，圖片不需要為某些文字增加語(yǔ)義。所以不需要寫(xiě)標(biāo)簽對(duì)兒，是一個(gè)自封閉標(biāo)簽。寫(xiě)成錯(cuò)誤！src是英語(yǔ)source資源的意思。src屬性的值就是要插入的圖片的路徑，相對(duì)路徑、絕對(duì)路徑皆可 img src=images/0.jpg alt=這是一個(gè)獅子，可是你看不見(jiàn)！當(dāng)用戶(hù)無(wú)法加載這個(gè)圖片的時(shí)候，比如路徑?jīng)]寫(xiě)對(duì)、網(wǎng)速慢，就會(huì)顯示這幾個(gè)字。 alt是英語(yǔ)alternative替代品的縮寫(xiě)網(wǎng)頁(yè)制作培訓(xùn)教程5.1 塊級(jí)元素和行內(nèi)元素網(wǎng)頁(yè)如同word一樣，網(wǎng)頁(yè)在渲染的時(shí)候，也是一行一行進(jìn)行渲染的。有些標(biāo)簽獨(dú)占一行，有些可以并排顯示。獨(dú)占一行的標(biāo)簽 塊級(jí)元素。（這是我們目前接觸）并排顯示的標(biāo)簽 行內(nèi)元素。 標(biāo)準(zhǔn)文檔流就是指的這個(gè)特性。如果想讓兩個(gè)a各占一行，實(shí)際上就相當(dāng)于給他們段落的語(yǔ)義。用p標(biāo)簽包裹每個(gè)a。 去頁(yè)面2 我是另一個(gè)a五、標(biāo)準(zhǔn)文檔流網(wǎng)頁(yè)制作培訓(xùn)教程5.2 圖片和文字都屬于文字流img（不管這個(gè)圖片有多大）和文字在瀏覽器看來(lái)都是一類(lèi)元素?？瞻渍郫B： 和另一個(gè)的關(guān)系，就如同文字和文字的關(guān)系網(wǎng)頁(yè)制作培訓(xùn)教程5.3 標(biāo)簽有正確的嵌套合理性標(biāo)準(zhǔn)文檔流規(guī)定了一些標(biāo)簽為容器級(jí)標(biāo)簽，一些標(biāo)簽為文本級(jí)標(biāo)簽。p、a、img、span、b、i、s標(biāo)簽都是文本級(jí)標(biāo)簽。其余都是容器