Web自學筆記第一階段筆記綜合匯總

參考資料：《Head First HTML&CSS》（中文第二版）(美國)弗里昂ISBN：9787508356464 中國電力出版社

全部階段：HTML基礎àCSSà高級HTMLàJavaScriptàPHP腳本àWeb滲透

?

?

Web學習筆記第一發(fā)：認識html：web語言

?

強調，emphasize 大多數(shù)瀏覽器會把文本斜體，不重要不用記了

Html文件里若干的空格和回車都被算作一個空格！！！想人為輸入空格還得寫實體，回車的話用

瀏覽器會忽略html文檔中 的制表符 回車和大量空格

?

?

Html注釋方法之一：

塊元素和內聯(lián)元素

第一發(fā)完------

?

?

?

Web學習第二發(fā)：認識超文本

?

注意，html語句一定要是英文標點符號！！！！！拒絕國產(chǎn)變態(tài)符號，具體參見《中英文常用符號對照表》

?

安全第一：你可能看到web上有一些不嚴謹?shù)?/span>html屬性沒有加雙引號，不過你可不能偷懶，如果不嚴謹可能會導致很多問題

?

文件系統(tǒng)可以看成是一個樹根：和樹相反，樹根是朝下生長的，而且也無環(huán)（當然現(xiàn)實中的樹根經(jīng)常相互嫁接產(chǎn)生環(huán)路）所以我們今后將拿樹根而不是樹來比喻文件體統(tǒng)和一些子孫嵌套的系統(tǒng)。

?

Href：引用的地址 reference

相對地址與絕對地址

?

左斜杠（右斜杠也叫反斜杠）最常用：http、文件系統(tǒng)、右標簽等等，但是Windows特么的用反斜杠來表示文件體統(tǒng)

?

兩個點..代表上層文件夾，一個點.代表所在的文件夾

題外話：linux中打開本目錄下的文件可以寫：./filename，即訪問此文件夾下的某個文件

?

../../../..。。。上層上層上層。。。。

?

Web頁面與操作系統(tǒng)無關（相互獨立）因為中間夾著瀏覽器，所以寫web頁面不必考慮OS的兼容性！！！！！！

?

注意：：網(wǎng)站文件名和文件夾名中不要使用空格！！！！！！！！！

?

行業(yè)建議：最好在構建網(wǎng)站初期組織網(wǎng)站文件，這樣就不用再網(wǎng)站升級時修改一大堆路徑 了。

?

?

相對路徑就是：web文檔所在文件夾(目錄）為起點，去往尋找連接指向的文件。

?

?

Web學習第三發(fā)：擴展詞匯，一些標簽

?

Html語言線性掃描的時候只有三個特殊字符：小于號<</span>大于號>和與符號&。因為是從左到右線性掃描的，小于號大于號成對出現(xiàn)，與符號和分號；也成對出現(xiàn)，所以除了尖括號內的內容以及實體字符，其余的字符都視為文本字符串！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

?

?

?

引用元素（quote）可能是搜索引擎的目標之一

?

兩種元素（標簽）：正常元素和void（空）元素，前者指成對出現(xiàn)的元素，后者是單著的，如

?

有序列表元素的好處：自動編號，否則想改變順序或者增刪新列表項就要人為重寫序號，太麻煩

?

列表元素只能包含

?

實體：<</span>；是<(less than)? >是>(greater than)? &是&自己（ampersand=and）

http://www.unicode.org/charts/獲得詳細的特殊字符實體表示法、

就像程序語言中的轉義字符\，也需要一個轉義字符來表示自己

Html中的實體字符的目的：用有限的ascii字符來表示海量的unicode字符！！

?

既可以是內聯(lián)元素也可以是塊元素！！！！

是inline元素

既不是內聯(lián)元素也不是塊元素。。。

?

?

?

?

?

?

第四發(fā)：進軍http

?

找一家托管公司（租一臺服務器）/購買一臺服務器（購買域名）/搭建localhost（僅供測試）

?

ICANN域名管理機構

?

www其實是域中服務器的名字

Starbucks.com才是域名

二者合起來叫網(wǎng)站名：域名可以用于多個網(wǎng)站

?

ftp圖形化軟件：比如百度網(wǎng)盤客戶端。。。

ftp命令行：cd、put、mkdir、dir、pwd、get。。。。同DOS、linux等操作系統(tǒng)

?

SFTP：secure FTP

?

強烈推薦Dreamweaver！！！！！！！！！

?

url的組成：

第一部分：協(xié)議名，比如http、ftp

第二部分：服務器名：比如www

第三部分：域名

第四部分：絕對路徑

第五部分：（其他內容）

?

科普：什么是協(xié)議，只有在多臺智能設備之間才叫協(xié)議，如交換機路由器、pc與服務器

?

絕對路徑就是出發(fā)點為根目錄的路徑，以/開頭，/代表根

?

單機一個相對路徑鏈接時，瀏覽器會生成一個絕對路徑發(fā)出去（url）

?

默認html文件是index.html或defaut.html

?

使用相對路徑的好處：一來節(jié)省墨水，二來當網(wǎng)站位置移動或者改名不用一一修改路徑

?

從本機讀取文件file:///有三條杠。。。因為中間網(wǎng)站名的位置為空！！！

?

Web默認端口：80

?

中的title屬性：覆蓋所鏈接網(wǎng)頁的

中的中的內容！！！！！

?

行業(yè)建議：不要把鏈接放在一起，不然用戶很難發(fā)現(xiàn)！！！！

?

元素創(chuàng)建id屬性：跳轉到頁面特定位置（也可以是本頁面）！！！！！！！！！！！！！！！

?

Id的唯一性：同一頁面值唯一；統(tǒng)一元素種類唯一！！

?

元素屬性的順序隨便：排名不分先后

?

可以為任何元素增加title屬性！！！！（用于提示）

?

Id一定要字母開頭？！后面可以是字母、數(shù)字、減號、下劃線、冒號、點號，不能有空格！！！

?

的target屬性：

“_blank”在新窗口（標簽頁）打開

“_parent”:????

“新名字”：所有目標為它的網(wǎng)頁都會在同一新窗口打開（覆蓋）

?

?

?

第五發(fā)：

?

瀏覽器獲取圖片滯后于html

瀏覽器也可以設置為不獲取圖片！

?

Web上常用格式：jpeg png gif

?

Jpeg：

連續(xù)色調如照片

256^3=1600多種顏色

有損壓縮

文件較小

?

Png：

單色圖像線條圖像如logo和小文本

上百萬種顏色png-8 png-16 png-32

無損壓縮優(yōu)于gif

支持透明比gif更高級

比相應jpeg文件較大

?

Gif：

單色線條圖像

256中顏色

無損

支持透明

比相應jpeg大

支持動畫

?

?

Alt屬性：圖片顯示不出來時顯示的文本

?

一英尺=30.48cm

一英寸=2.54cm

?

瀏覽器的auto image resize功能

?

強烈推薦Photoshop ，有專門為web圖片服務的存儲選項

?

Href可以直接鏈接到圖片文件！！！

?

邊緣柔化：！！！！！！！！！！！！

針對小文本或者矢量logo

柵格化成位圖后放大會產(chǎn)生鋸齒

抗鋸齒就是在周邊覆上一層相對于背景的漸變色

所以如果背景透明的話，就要將柔滑邊緣設置成對應理想的背景色

?

行業(yè)經(jīng)驗：圖片寬度少于800px

?

第六發(fā)：html標準

?

！！！

標準html(5)不用再考慮版本號，html變成一個活的標準，版本的概念被淡化，繼續(xù)根據(jù)需要發(fā)展和變化，向下兼容：向html添加新內容，支持原來的內容

?

W3c驗證工具

http://validator.w3.org

?

題外話：什么是編碼：編碼是程序語言和底層二進制之間的橋梁

?

放到

中第一個位置

?

只有

和能直接放在中！！！！

?

----------------------------------完-------------------------------------------

總結

以上是生活随笔為你收集整理的！Web云笔记--HTML基础的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。