互聯(lián)網(wǎng)基本原理和html入門(mén)第1天筆記最終版本

一、從“上網(wǎng)”說(shuō)開(kāi) 互聯(lián)網(wǎng)的工作原 1.2................................................................................................................................................如何驗(yàn)證互聯(lián)網(wǎng)的工作原 二、HTML簡(jiǎn) 三、和空間的.............................................................................................................................................3.1的..........................................................................................................................................3.2服務(wù) 3.3的解 四、文件的上 五、HTML深入學(xué) HTML的骨 HTML..........................................................................................................................................手冊(cè)的使 六、編寫(xiě)的工 Sublime的安裝和使 NotePad 七、常用（沒(méi)有廢棄 標(biāo)題..............................................................................................................................................img...............................................................................................................................................a....................................................................................................................................................八、作 一、從你思考過(guò)“上網(wǎng)”么現(xiàn)在先整體去看一下互聯(lián)網(wǎng)工作原理。里面有很多術(shù)語(yǔ)，一會(huì)兒講解當(dāng)用戶(hù)在瀏覽器中輸入一個(gè)按回車(chē)的時(shí)候，這時(shí)候用戶(hù)計(jì)算機(jī)（客戶(hù)機(jī)）就會(huì)解析用戶(hù)輸入的URL，然后通過(guò)Internet向DNS的服務(wù)器進(jìn)行查詢(xún)，這個(gè)DNS服務(wù)器將用戶(hù)輸入的對(duì)應(yīng)的IP地址發(fā)回給客戶(hù)機(jī)。然后客戶(hù)機(jī)會(huì)向這個(gè)IP地址發(fā)送一個(gè)HTTP請(qǐng)求，服務(wù)器得到這個(gè)HTTP請(qǐng)求后，會(huì)將所有的HTML、CSS、JS、文件等資源用HTTP協(xié)議傳遞給客戶(hù)機(jī)?？蛻?hù)機(jī)上的瀏覽器，1.2URL：uniformresourcelocator資源定界 在互聯(lián)網(wǎng)服務(wù)器上的所有文件（HTML、CSS、JS、、音樂(lè)、等）都有唯一的一個(gè)URL。只要知道資源的URL，就能夠?qū)Y源進(jìn)行。HTTP：hypertexttransferprotocol超文本傳HTTP是專(zhuān)門(mén)用來(lái)傳輸超文本文件的HTML：hypertextmarkuplanguage超文本任何一個(gè)網(wǎng)頁(yè)，不管有多花哨，不管效果有多絢麗。都是HTML。HTML是一個(gè)標(biāo)記語(yǔ)言，服務(wù)器：就是一臺(tái) 小時(shí)全天開(kāi)機(jī)的，運(yùn)行有服務(wù)器的計(jì)算服務(wù)器就是一臺(tái)普通計(jì)算機(jī)，只不過(guò)安裝了一些服務(wù)器（比如Apache客戶(hù)機(jī)：就是自己的計(jì)算 服務(wù)器：解析系統(tǒng)服務(wù)讓用戶(hù)去ip地址太麻煩，所以用去替代IP地址。和IP地址有11對(duì)應(yīng)關(guān)系，存放DNS服務(wù)器中用谷歌瀏覽器（Chrome）的一個(gè)功能，能夠看見(jiàn)首發(fā)的任何HTTP信息當(dāng)輸入一個(gè)的時(shí)候，有280個(gè)文件被傳輸?shù)降挠?jì)算機(jī)中了。存到哪兒了呢也就是說(shuō)，所有的你看見(jiàn)的元素，都是先傳輸?shù)奖镜赜?jì)算機(jī)，然后瀏覽器再渲染的上網(wǎng)，就是請(qǐng)求資源開(kāi)新浪網(wǎng)，我發(fā)現(xiàn)，頁(yè)面刷的一下就顯示好了，不用等半天了。、HTTP狀態(tài)碼：200表示成功請(qǐng)求；304表示沒(méi)有更改；404表示頁(yè)面不存在二、HTML簡(jiǎn)HTML(hypertextmarkuplanguage超文本標(biāo)記語(yǔ)言)超：HTML文件中有很多，這些也是文本，但是不顯示在最終的頁(yè)面上。所以“超能力HTML很聰明，知道哪些元素是，哪些元素是內(nèi)容；文本：HTML沒(méi)有格式，是純文本文件。標(biāo)記語(yǔ)言：它沒(méi)有邏輯，沒(méi)有與、或、非，不能計(jì)算加減乘除，不需要任何數(shù)學(xué)素可以通過(guò)下面的方法簡(jiǎn)單的制作一個(gè)HTML頁(yè)面HTML元素構(gòu)成了HTML文件，這些元素是由HTML所定義的。在3天課程中，學(xué)習(xí)告訴瀏覽器文字是什么樣子的尺寸，哪兒需要顯示一張等等。瀏覽器會(huì)識(shí)別出.html文件“認(rèn)識(shí)”將文件的擴(kuò)展名，改成html即可。如果顯示不出來(lái)文件的拓展名的話(huà)，就在文件夾選項(xiàng)中去設(shè)置右鍵打開(kāi)方式的html文件。 文件是純文本文件。純文本文件呢？可以從兩個(gè)角度去思考這個(gè)問(wèn)如果一個(gè)文件中，除了文本，其他什么東西都沒(méi)有沒(méi)有附加資源比如，比如音樂(lè)沒(méi)有格式。雖然的記事本將字號(hào)更改大了，但是將txt文件傳輸給你之后，你發(fā)現(xiàn)txt文件是不攜帶格式的，所有的字號(hào)、加粗、斜體換一臺(tái)電腦看，全沒(méi)但是比如word生產(chǎn)出來(lái)的文件，doc文件是攜帶格式的！也就是說(shuō)，我用電腦給文字加HTML文件是不攜帶格式的，是純文本文件是一些文字，就不能了，但是再次用記事本打開(kāi)這個(gè)文件后，刪除增加的文字，又能夠觀HTML用純文本來(lái)表示格式。非常大的智慧是鼠標(biāo)點(diǎn)擊出來(lái)的了。和Photoshop有很大的區(qū)別。HTML是純文本文件，就有以下特點(diǎn)三、和空間的3.1的白菜價(jià)。國(guó)內(nèi)兩家最大的提供公司：以新網(wǎng)為打開(kāi)新網(wǎng)首頁(yè)，成為會(huì)填表即接下來(lái)就可以選擇了，不要/r/的，因?yàn)樾枰獋浒更c(diǎn)擊加入購(gòu)物注意選擇年填寫(xiě)的信息，瞎寫(xiě)即可選擇各種途徑去即可。支付買(mǎi)完空間之后，一會(huì)兒回來(lái)進(jìn)行解析。3.2服務(wù)（一定要、的主機(jī)，否則會(huì)讓備案） 會(huì)php主將剛剛好的，寫(xiě)進(jìn)然后進(jìn)行付款即3.3的解首先，先確認(rèn)你的郵箱中，恒創(chuàng)主機(jī)已經(jīng)給你發(fā)了郵件了進(jìn)入管理功能后，選擇功能此時(shí)的，已經(jīng)能夠現(xiàn)在，要將自己做好的網(wǎng)頁(yè)，傳到服務(wù)器上才能被其他人看見(jiàn)上傳文件的工具是FlashFXP，進(jìn)入之后，按F8快捷鍵?；蛘甙聪聢D所示的方法進(jìn)行點(diǎn)擊查看恒創(chuàng)主機(jī)給你發(fā)的郵件，對(duì)照郵件，填寫(xiě)表買(mǎi)一個(gè)和空間非常的方便。有一個(gè)空間會(huì)極大的提高你自己學(xué)習(xí)做的。上午講解的內(nèi)容的遺漏●Filetransferprotocol文件傳輸協(xié)FTP協(xié)議要比HTTP速度快。那么為什么用戶(hù)的時(shí)候不使用FTP而是使用http呢？不是面向連接的，而是面向請(qǐng)求的。每請(qǐng)求一次，就產(chǎn)生一次連接，請(qǐng)求完畢，連接也關(guān)閉了●瀏覽器？收發(fā)HTTP請(qǐng)求。用戶(hù)輸入一個(gè)，能夠?qū)⑦@個(gè)變成HTTP請(qǐng)求，發(fā)送出去●index.html文件 的意所有頁(yè)面的文件名可以任意指定（最好是英文），有一個(gè)文件是比較特殊的文件。index.htmlindex.html文件是在用戶(hù)缺省請(qǐng)求的具體頁(yè)面的時(shí)候，默認(rèn)的 中叫做aa.html，所以就要用：也就是說(shuō)，現(xiàn)在知道了URL中的斜線(xiàn)的意思，就是文件夾 .cn/c/2013-10-/r/是什么呢？是另外一臺(tái)主機(jī)的別 中的c文件夾中的2013-10-18文件夾中的實(shí)際問(wèn)的是五、HTML深入學(xué)HTML其實(shí)非常簡(jiǎn)單，需要注意的是語(yǔ)義，比如現(xiàn)在需要一個(gè)標(biāo)題，那么就要用<h1>。HTML自己擁有很多諸如控制文字樣式、樣式的屬性，但是這些屬性已經(jīng)被CSS技術(shù)給替了HTML的骨今后今后進(jìn)行網(wǎng)頁(yè)的制作，都要從這個(gè)骨架中進(jìn)，省去了每次都書(shū)寫(xiě)同樣內(nèi)容的<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"">→文 即可，不要背 →寫(xiě)一些配置的項(xiàng)目，用戶(hù)<title>標(biāo)題<body>頁(yè)面的正文，用戶(hù)可見(jiàn)文檔定義是一定要寫(xiě)的，在制作的時(shí)候，就要用過(guò)度版本的HTML，就將這句話(huà)寫(xiě)在每個(gè)HTML文件中的第一句。（不用過(guò)多的研究是什么意思）一個(gè)簡(jiǎn)單的字符編碼流行兩種字符編碼：1）utf- utf-8字符全，全球所有國(guó)家的所有語(yǔ)言都在這個(gè)編碼庫(kù)中。文件尺寸太大，一個(gè)UTF8的漢字占個(gè)字節(jié)gb2312中文庫(kù)，在這個(gè)編碼庫(kù)中沒(méi)有日語(yǔ)、語(yǔ)等信息。文件尺寸小，一個(gè)gb2312的漢字2個(gè)字節(jié)就可以使用gb2312。<metahttp-equiv="content-type"content="text/html;charset=utf-比如新浪網(wǎng) 查看源代碼使用的就是gb2312字符編HTML要注意的事情所有的HTML都是成對(duì)出現(xiàn)的情況（少有的單標(biāo)記除外；起始比如<font>，結(jié)束比如</font>，它們都是英文狀態(tài)下的字符。英文狀態(tài)下，并且輸入法是在半角狀態(tài)所有的屬性都要寫(xiě)在HTML的起始中，初學(xué)者特別喜歡“創(chuàng)造<size=“7>文字</size> <font>文字</font →不正確的寫(xiě)法，屬性不能寫(xiě)在結(jié)束中<fontsize=”7”>文字</fontsize=”7”>→不正確的寫(xiě)法，結(jié)束中，不用寫(xiě)任何屬性HTML中各個(gè)有各個(gè)的使命，于是就有各自的屬的不能亂用。一個(gè)，必須要有這HTML精妙就精妙在的嵌套。將不同功能的進(jìn)行嵌套，那么就可以完成一些好看的效果在寫(xiě)頁(yè)面的時(shí)候，必須規(guī)范！“親自試一試”這個(gè)功能也可以快速尋找到一個(gè)，如下圖所示在font冊(cè)中，看見(jiàn)這句話(huà)XHTML是什么？extention拓展的，也就是更嚴(yán)格HTML版本。它限制了很HTML沒(méi)有限制的東西，比如必須使用小寫(xiě)字母；屬性必須加引號(hào)（HTML中不加引號(hào)也是對(duì)的。教學(xué)的時(shí)候，就是采用XHTML對(duì)大家嚴(yán)格要求。XHTML是一個(gè)規(guī)范，拓展名仍然是.html沒(méi)有任何區(qū)別。這個(gè)規(guī)范是給人定的，而不是給機(jī)的CSS將取代font，在現(xiàn)在工作中，不會(huì)再遇見(jiàn)任何的font。而都用css來(lái)控制字符六、編寫(xiě)的工HTML文件是純文本文件，任何純文本編輯器都能夠成為編寫(xiě)的工具。工具有好有壞，好的工具能夠讓提高工作效率。但是，做絕對(duì)不等于用DreamWeaver!!，做，最本質(zhì)的就是寫(xiě)HTML，記事本能寫(xiě)，EditPlus能寫(xiě)，DreamWeaver也能寫(xiě)。它們都是純文本編輯器，沒(méi)有本質(zhì)上的Sublime在安裝好之后，進(jìn)入，會(huì)提示的更新版本現(xiàn)在要進(jìn)行設(shè)置，取消這個(gè)檢查原來(lái)的設(shè)置文件改成今后寫(xiě)代碼，所有的代碼都和對(duì)齊線(xiàn)sublime擁有DreamWeaver沒(méi)有的兩個(gè)功能：sublime有輕微的智能感應(yīng)sublime中的字符編碼設(shè)置（一定要引起重視NotePad它沒(méi)有對(duì)齊線(xiàn)、沒(méi)有結(jié)束的尋找功能，沒(méi)有智能感應(yīng)。就有顏色EditPlus唯一可取的地方，是能夠直接新建html文件。而不用每次都從骨架文件中在項(xiàng)目實(shí)戰(zhàn)課上，還將繼續(xù)介紹DreamWeaver，WebStrom做不是用，就可束碼小問(wèn)小問(wèn)題：猜測(cè)哪種寫(xiě)法是正確的，能夠讓字母從左往右跑<marquee><left>文字文字<marqueedirection=”left”>文字文字<marqueeleft=”derection”>文字文字只有B項(xiàng)是HTML的行文?，F(xiàn)在仍然用的是跑馬燈，所以仍然是marquee，只不過(guò)增加了一些修飾，修飾是通過(guò)的屬性來(lái)完成的。的屬性是一個(gè)以k=”v”的形式在起始中進(jìn)行羅列的。所以選B。在今后工作中，marqueefont都不能使用。已經(jīng)被廢棄了，被CSS取代了七、常用（沒(méi)有標(biāo)Headings標(biāo)題<h1>一級(jí)標(biāo)題<h2>二級(jí)標(biāo)題（副標(biāo)題<h3>三級(jí)標(biāo)題（欄目標(biāo)題<h4>四級(jí)標(biāo)題<h5>五級(jí)標(biāo)題<h6>六級(jí)標(biāo)題h是有語(yǔ)義的，僅僅能夠給頁(yè)面中的真正的標(biāo)題來(lái)寫(xiě)一個(gè)h一個(gè)頁(yè)面中最多只能出現(xiàn)一次h1，最多只能出現(xiàn)一次h2h1表示主標(biāo)題，h2表示副標(biāo)題，就相高舉偉大旗——黨的18大開(kāi)幕需要注意的是<h1><fontcolor=”red”>標(biāo)題</font></h1><h1>播客<span>網(wǎng)頁(yè)平面學(xué)科</span></h1>不行h中，只能是純文字。要不然就別用它這是不對(duì)的<h1>所有老師介<h2>平面<h3>PS老師img在網(wǎng)頁(yè)中，只能用img。img是英文image()的縮寫(xiě)。它是一個(gè)自封閉。沒(méi)有結(jié)束<imgsrc=”文件路徑”不要寫(xiě)成<imgsrc=”文件路徑”></img>不能讀的格式當(dāng)只有一個(gè)width屬性或height屬性時(shí)，瀏覽器會(huì)自動(dòng)的將等比例縮小。而不會(huì)產(chǎn)生變形。但是當(dāng)兩值都寫(xiě)的時(shí)候，要變形就是以http://開(kāi)頭的路徑比如新浪網(wǎng)的 相對(duì)路徑比如現(xiàn)在html文件和jpg文比如現(xiàn)在html文件和jpg文件在同一個(gè)文件夾下那么這個(gè)的代碼就要這樣書(shū)寫(xiě)jpgjpg文件在下一層文件比如現(xiàn)在在aa文件夾中，那么這個(gè)的代碼就要這樣書(shū)寫(xiě)html.html|_jpg文件在上一層文jpg文件在上一層文件|_ 相對(duì)路徑在的時(shí)候，一定一定要注意，不要亂移動(dòng)html文件和的位置！想注意相路徑的使用從今天開(kāi)始，要樹(shù)立一個(gè)文件體系的概念！現(xiàn)在文件不能瞎放了。一個(gè)你移動(dòng)位置了，可能就讓一個(gè)HTML頁(yè)面中的無(wú)法顯示了；一個(gè)文件你移動(dòng)位置了，這個(gè)頁(yè)面中的全部都不能顯面試題：(/r