！Web雲筆記--HTML基礎

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

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

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

 

 

Web學習筆記第一發：認識html：web語言

 

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

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

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

 

 

Html註釋方法之一：

塊元素和內聯元素

第一發完------

 

 

 

Web學習第二發：認識超文本

 

注意，html語句必定要是英文標點符號！！！！！拒絕國產變態符號，具體參見《中英文經常使用符號對照表》

 

安全第一：你可能看到web上有一些不嚴謹的html屬性沒有加雙引號，不過你可不能偷懶，若是不嚴謹可能會致使不少問題

 

文件系統能夠當作是一個樹根：和樹相反，樹根是朝下生長的，並且也無環（固然現實中的樹根常常相互嫁接產生環路）因此咱們從此將拿樹根而不是樹來比喻文件體統和一些子孫嵌套的系統。

 

Href：引用的地址 reference

相對地址與絕對地址

 

左斜槓（右斜槓也叫反斜槓）最經常使用：http、文件系統、右標籤等等，可是Windows特麼的用反斜槓來表示文件體統

 

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

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

 

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

 

Web頁面與操做系統無關（相互獨立）由於中間夾着瀏覽器，因此寫web頁面沒必要考慮OS的兼容性！！！！！！

 

注意：：網站文件名和文件夾名中不要使用空格！！！！！！！！！

 

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

 

 

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

 

 

Web學習第三發：擴展詞彙，一些標籤

 

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

 

 

 

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

 

兩種元素（標籤）：正常元素和void（空）元素，前者指成對出現的元素，後者是單着的，如

 

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

 

列表元素只能包含

 

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

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

就像程序語言中的轉義字符\，也須要一個轉義字符來表示本身

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

 

既能夠是內聯元素也能夠是塊元素！！！！

是inline元素

既不是內聯元素也不是塊元素。。。

 

 

 

 

 

 

第四發：進軍http

 

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

 

ICANN域名管理機構

 

www實際上是域中服務器的名字

Starbucks.com纔是域名

兩者合起來叫網站名：域名能夠用於多個網站

 

ftp圖形化軟件：好比百度網盤客戶端。。。

ftp命令行：cd、put、mkdir、dir、pwd、get。。。。同DOS、linux等操做系統

 

SFTP：secure FTP

 

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

 

url的組成：

第一部分：協議名，好比http、ftp

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

第三部分：域名

第四部分：絕對路徑

第五部分：（其餘內容）

 

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

 

絕對路徑就是出發點爲根目錄的路徑，以/開頭，/表明根

 

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

 

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

 

使用相對路徑的好處：一來節省墨水，二來當網站位置移動或者更名不用一一修改路徑

 

從本機讀取文件file:///有三條槓。。。由於中間網站名的位置爲空！！！

 

Web默認端口：80

 

中的title屬性：覆蓋所連接網頁的

中的 中的內容！！！！！

 

行業建議：不要把連接放在一塊兒，否則用戶很難發現！！！！

 

元素建立id屬性：跳轉到頁面特定位置（也能夠是本頁面）！！！！！！！！！！！！！！！

 

Id的惟一性：同一頁面值惟一；統一元素種類惟一！！

 

元素屬性的順序隨便：排名不分前後

 

能夠爲任何元素增長title屬性！！！！（用於提示）

 

Id必定要字母開頭？！後面能夠是字母、數字、減號、下劃線、冒號、點號，不能有空格！！！

 

的target屬性：

「_blank」在新窗口（標籤頁）打開

「_parent」:????

「新名字」：全部目標爲它的網頁都會在同一新窗口打開（覆蓋）

 

 

 

第五發：

 

瀏覽器獲取圖片滯後於html

瀏覽器也能夠設置爲不獲取圖片！

 

Web上經常使用格式：jpeg png gif

 

Jpeg：

連續色調如照片

256^3=1600多種顏色

有損壓縮

文件較小

 

Png：

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

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

無損壓縮優於gif

支持透明比gif更高級

比相應jpeg文件較大

 

Gif：

單色線條圖像

256中顏色

無損

支持透明

比相應jpeg大

支持動畫

 

 

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

 

一英尺=30.48cm

一英寸=2.54cm

 

瀏覽器的auto image resize功能

 

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

 

Href能夠直接連接到圖片文件！！！

 

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

針對小文本或者矢量logo

柵格化成位圖後放大會產生鋸齒

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

因此若是背景透明的話，就要將柔滑邊緣設置成對應理想的背景色

 

行業經驗：圖片寬度少於800px

 

第六發：html標準

 

！！！

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

 

W3c驗證工具

http://validator.w3.org

 

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

 

放到

中第一個位置

 

只有

和 能直接放在 中！！！！

 

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