HTML學習筆記1

html就是一種文字文件型別，超文字標記語言。

html，htm，shtml的區別：

html與htm基本沒有任何本質的區別。shtml與html的區別就是shtml命名的網頁可以寫入ssi指令，當客戶端在訪問shtml網頁時，客戶端會對shtml進行讀取和解讀，分析其中的ssi指令並將其解發布來。

關於ssi的功能：

ssi是為web伺服器提供的一套命令，這些命令只要直接嵌入到html文件的注釋內容之中即可。如：

就是一條ssi指令，其作用是將"info.htm"的內容拷貝到當前的頁面中，當訪問者來瀏覽時，會看到其它html文件一樣顯示info.htm其中的內容。

假如我們a頁面是shtml的靜態網頁，而a頁面裡我們使用了include包含嵌入b靜態html頁面，如果你的伺服器空間支援shtml ssi這個時候我們，瀏覽器開啟a頁面時候，就會在a頁面顯示a原本內容以及b頁面內容，我們檢視網頁源**，不會發現b頁面引入痕跡，而是看到b頁面內容完全在a頁面裡。

2.html組成結構

大致3個部分：doctype, head,body;

doctype 分為3種：

public............strict.dtd>嚴格的，各瀏覽器的相容性特別好

public............transitional

.dtd>過渡的，介於嚴格與鬆散之間

public............framesetl

.dtd>框架的，相容性不好，不提倡

head是給瀏覽器看的，比如給搜尋引擎提供關鍵字什麼的；

body解析出來就是主要看的內容。

div 畫塊 css控制

是在body裡面畫塊

css控制是在head裡控制

1,css有幾種引入方式

使用html標籤的style屬性

將style屬性直接加在單個的html元素標籤上，控制html標籤的表現樣式。這種引入css的方式是分散靈活方便，但缺乏整體性和規劃性，不利於後期的修改和維護，當需要修改**的樣式時，乙個相同的修改可能涉及多個地方，維護成本高。使用style屬性的樣式效果最強，會覆蓋掉其它幾種引入方式的相同樣式效果。

1
<
div 
style
="color:red"
>
div>

將樣式**寫在頁面標籤之中

結構可以位於頁面標籤中的任何位置，也可以多次出現。通常是將整個結構寫在頁面的部分中。這種引入css方式的特點是每個頁面的css**可能具有統一性和規劃性，乙個頁面內部便於復用和維護，但多個頁面之間的css**復用仍然不夠。

1
<
style
>
2bdoy
3style
>

使用 link標籤，引入外部css檔案

將css**寫在乙個單獨的檔案中，用link標籤直接引入該檔案到頁面中。乙個頁面可以多次使用link標籤引入多個外部css檔案，注意這些css**的相互影響，通常是後引入的css檔案會覆蓋前面引入的css檔案的相同效果。這種引入css的方式是目前最為流行的，可以在站個**範圍內進行css**的規劃，方便復用和維護，但這樣將**高度集中，**量可能過大，維護不當的話又容易出現混亂。

1
<
link 
rel="stylesheet"
type
="text/css"
href
="style.css"
>

使用@import引入css檔案

使用@import引入css檔案有兩種方式，一種可以放在頁面中的中,用法如下：

@import url(index2.css);

另外也可以放在css檔案中使用，用法如下：

@import "sub.css";

使用用@import引入css可以很方便的引入外部檔案的css**，方便維護和規劃。但是每多引入乙個css檔案，就會對伺服器增加一次連線請求，當訪問量較大時，需在維護性和效能上進行權衡。

2,div除了可以宣告id來控制，還可以宣告什麼控制？

div除了用id賦予它乙個名稱外，

還可以用class來賦予它乙個名稱。

還可以不用賦予它乙個名字，直接用style來直接設定它的樣式。

唯一區別就是id是唯一的，只能用一次。反而class是可以反覆使用的，可以多個div同時時候class來定義樣式。

一般js中常用id，因為js是獲取div名字來進行判斷的，也是唯一判斷，如果用class會出錯，如果我們寫普通html，用class會好些。

float：float即為讓此div漂浮起來，漂浮起來後，後面的div如果不float，則此div會被float的div給覆蓋住。

在subline裡編寫的漢字在瀏覽器中變成亂碼，則需要在head中加入一句**：

清除覆蓋：在普通的div上面如果有漂浮清除漂浮元素的方法就是在普通的元素的css中加一句clear left；不允許右浮就clear right，兩個都不允許就clear both；

父div 子div

1：如果不指定父div的高度，父div高度為0.

2：如果指定父div的高度，並且大於子div，高度為父div的高度;如果小於子元素的高度，會浮出父div的高度。

盒模型：

1:把div當成乙個盒子來看；

2:盒子與盒子之間的距離：外邊距 （margin）

3.盒子本身的邊框 ：border

4.盒子與盒子內物品的距離：內邊距（pading）

HTML學習筆記1

html 學習筆記1

html學習筆記 1

HTML學習筆記1

HTML學習筆記1

html 學習筆記1

html學習筆記 1

HTML學習筆記1

相關推薦