五月學習筆記

時間  2019-11-13
標籤 五月 5月 學習 筆記 简体版
原文   原文鏈接

1.css

ECMAScript是一種由Ecma國際（前身爲歐洲計算機制造商協會）經過ECMA-262標準化的腳本程序設計語言。html

這種語言在萬維網上應用普遍，它每每被稱爲JavaScript或JScript，但實際上後二者是ECMA-262標準的實現和擴展。web

ECMA-262是一種標準，它是ECMAScript腳本語言的規範及標準。瀏覽器

ECMAScript是腳本程序設計語言。安全

Javscript，JScript，ActionScript等腳本語言都是基於ECMAScript標準實現的。服務器

2.框架

W3C DOM 標準被分爲 3 個不一樣的部分：jsp

  • 核心 DOM - 針對任何結構化文檔的標準模型
  • XML DOM - 針對 XML 文檔的標準模型
  • HTML DOM - 針對 HTML 文檔的標準模型

下面只關心HTML DOM。post

D：Document，文檔，指的是用HTML編寫出來的文檔。測試

O：Object，對象，對象有方法、屬性。

M：Model，瀏覽器提供了網頁文檔的模型，即節點樹或稱家譜樹。家譜樹主要表示各節點之間的關係（父、子、兄弟）。

     根據 W3C 的 HTML DOM 標準，HTML 文檔中的全部內容都是節點：

  • 整個文檔是一個文檔節點
  • 每一個 HTML 元素是元素節點
  • HTML 元素內的文本是文本節點
  • 每一個 HTML 屬性是屬性節點
  • 註釋是註釋節點

DOM表明着加載到瀏覽器窗口的當前網頁，DOM把網頁表示爲一棵樹，DOM 是被視爲節點樹的 HTML。

 

3.emacs

http://v.youku.com/v_show/id_XNjgyMDc1NjYw.html

http://v.youku.com/v_show/id_XNjgyMDc2OTM2.html

http://v.youku.com/v_show/id_XNjgyMDc4MzUy.html

C+X C+F  打開文件 若是直接寫一個不存在的文件，那就是新建

C+F 光標向前  C+B光標向後

C+E 光標到行尾 C+A光標到行首

C+P 光標上移一行 C+N 光標下移一行

C+X C+S 保存

C+D 刪除光標覆蓋的字

C+z 掛起

C+x C+c 永久離開Emacs 

C+x u撤銷更新      

C+S+E 選擇光標之後的這行的字

鼠標拖動選中的區域同時對其複製 然後點擊鼠標中間粘貼 或C+Y粘貼

C+W 剪切

C+Y 粘貼

C+K 刪除本行光標後的word

 

C+X 2 水平分窗口 C+X 3 豎直平分窗口

C+X O 光標移至分出的下一個窗口

C+X 0（零） 關閉分出的這個窗口           

 

4.

文檔類型的做用

文檔類型即<!DOCTYPE>，是指示 web 瀏覽器關於頁面使用哪一個 HTML 版本進行編寫的指令，在 HTML 4.01 中，<!DOCTYPE> 聲明引用 DTD，DTD 規定了標記語言的規則，這樣瀏覽器才能正確地呈現內容。

HTML5 不基於 SGML，因此不須要引用 DTD。

在 HTML 4.01 中有三種 <!DOCTYPE> 聲明。在 HTML5 中只有一種：<!DOCTYPE html>

HTML 4.01 Strict

該 DTD 包含全部 HTML 元素和屬性，但不包括展現性的和棄用的元素（好比 font）。不容許框架集（Framesets）。

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

HTML 4.01 Transitional

該 DTD 包含全部 HTML 元素和屬性，包括展現性的和棄用的元素（好比 font）。不容許框架集（Framesets）。

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

HTML 4.01 Frameset

該 DTD 等同於 HTML 4.01 Transitional，但容許框架集內容。

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

XHTML 1.0 提供了三種DTD聲明可供選擇：

過渡的(Transitional):要求很是寬鬆的DTD，它容許你繼續使用HTML4.01的標識(可是要符合xhtml的寫法)。完整代碼以下： 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

嚴格的(Strict):要求嚴格的DTD，你不能使用任何表現層的標識和屬性，例如<br>。完整代碼以下： 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

框架的(Frameset):專門針對框架頁面設計使用的DTD，若是你的頁面中包含有框架，須要採用這種DTD。完整代碼以下： 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

簡言之，文檔類型規定瀏覽器根據HTML的哪一個版原本解析，<!DOCTYPE> 聲明引用 DTD（文檔類型定義），DTD 規定了標記語言的規則，定義你頁面的表示，瀏覽器根據你的DTD來解析你的頁面，這樣瀏覽器才能正確地呈現內容。

 

http://www.w3school.com.cn/tags/tag_doctype.asp

 

5.HTML語義化

HTML賦予了每一個標籤以不一樣的語義，語義化是指用合理HTML標記以及其特有的屬性去編寫組織文檔。

好處：

　　1)去掉或樣式丟失的時候能讓頁面呈現清晰的結構。

　　2)對於搜索引擎或者爬蟲軟件來講，則有助於它們創建索引，並可能給予一個較高的權值。爬蟲很大程度上會忽略用於表現的標記,而只注重語義標記.

　　3)便於團隊開發和維護

　　4)PDA、手機等設備可能沒法像普通電腦的瀏覽器同樣來渲染網頁（一般是由於這些設備對CSS的支持較弱）.

使用語義標記能夠確保這些設備以一種有意義的方式來渲染網頁.理想狀況下,觀看設備的任務是符合設備自己的條件來渲染網頁.

 

6.行內元素和塊級元素的區別

塊元素的特性：1. 從上到下排列，侵行佔位 2. width 屬性默認 auto 3. width 和 height 決定元素容積 4. padding border margin 決定元素體積 5. overflow 決定內容超出容積後的處理方式 6. margin 的 left 和 right 能夠設定爲 auto 表明元素<div></div>

　　內聯元素的特性：

　　1)從左到右排列，超過它們最近的塊狀祖先寬度時，換到新的一行 

　　2)

　　對於行內替換元素

　　width、 height、 margin的四個方向、 padding的四個方向都正常顯示，遵循標準的css盒模型。 例如：img　　

　　對於行內非替換元素

　　width、 height不起做用，用line-height來控制高度。

　　padding左右起做用，上下不會影響行高，可是對於有背景色和內邊距的行內非替換元素，背景能夠向元素上下延伸，可是行高沒有改變。所以視覺效果就是與前面的行重疊。(《css權威指南》 P249)

　　margin左右做用起做用，上下不起做用，緣由在於：行內非替換元素的外邊距不會改變一個元素的行高（《css權威指南》 P227）。

7.

CSS 定位機制

CSS 有三種基本的定位機制：普通流、浮動和絕對定位。

塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。

行內框在一行中水平佈置。可使用水平內邊距、邊框和外邊距調整它們的間距。可是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行造成的水平框稱爲行框（Line Box），行框的高度老是足以容納它包含的全部行內框。不過，設置行高能夠增長這個框的高度。

CSS position 屬性

經過使用 position 屬性，咱們能夠選擇 4 種不一樣類型的定位，這會影響元素框生成的方式。

position 屬性值的含義：

static
元素框正常生成。塊級元素生成一個矩形框，做爲文檔流的一部分，行內元素則會建立一個或多個行框，置於其父元素中。
relative
元素框偏移某個距離。元素仍保持其未定位前的形狀，它本來所佔的空間仍保留。根據 top，right，bottom，left這些偏移量。
absolute
元素框從文檔流徹底刪除， 相對於 static 定位之外的第一個祖先元素進行定位。元素脫離原來的正常文檔流，元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。根據 top，right，bottom，left這些偏移量。
fixed
元素框的表現相似於將 position 設置爲 absolute，不過其包含塊是視窗自己。

提示：相對定位實際上被看做普通流定位模型的一部分，由於元素的位置相對於它在普通流中的位置。

CSS浮動

浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。

不包含在普通元素的隊列之中，可是包含在浮動定位元素的隊列中。

W3CSchool總結的很好http://www.w3school.com.cn/css/css_positioning_floating.asp

清楚浮動的方法：

1)用在父元素

.clear-box {
overflow: auto;
zoom: 1;
}

 

2)加在父元素所包含的帶有浮動子元素的後面

<div style="clear:both"></div>

 

8.標籤<ul>與<ol>的區別

 ul是無序列表，所謂的無序列表只要舉個例子，你們就會明白了。
     ●這是第一個列表
     ●這是第二個列表
     ●這是第三個列表
     ●這是第四個列表
   ol是有序列表，一樣舉個例子。

  一、這是第一個列表
  二、這是第二個列表
  三、這是第三個列表
  四、這是第四個列表

這就是ul與ol的區別。
ul與ol前的符號是能夠修改的。只須要修改它們的type值。
ul的type屬性有：disc—實心圓(默認）、circle—空心圓、square—實心方塊
ol的type屬性有：1—數字（默認）、a—小寫字母、A—大寫字母、i—小寫希臘字母、I—大寫希臘字母。
經過CSS也能夠在將它們前的符號改成圖片，這樣列表顯示就會更美觀了。
 
9.!important
區別不一樣瀏覽器，CSS hack寫法：
區別IE6與FF：
background :orange;* background : blue ;
區別IE6與IE7：
background : green !important ; background : blue ;
區別IE7與FF：
background :orange;* background : green ;
區別FF，IE7，IE6：
background :orange;* background : green ; _background : blue ;
background :orange;* background : green !important ;* background : blue ;
注：IE都能識別*;標準瀏覽器(如FF)不能識別*；
IE6能識別*；不能識別 !important;
IE7能識別*，能識別!important;
FF不能識別*，但能識別!important;
 
 
10. width:auto;和width:100%;區別

1) width:100% 並不包含margin-left  margin-right的屬性值，直接取其父容器的寬度加上含margin-left /margin-right的值。

    若是設置了margin那新的width值是容器的寬度加上margin的值。

  （細心觀察）就會發現加了  margin相對應的邊就會多出設置的空白。並且會多出橫向滾動條由於寬度已經超出了屏幕的範圍。(這條相對於父容器是body)。

2) width:auto包含margin-left/margin-right的屬性值。

    其值包含margin-left /margin-right的值。width:auto老是佔據整行！！！

    這其中margin的值已經包含其中了（也就是一整行）若是要設置margin的值那就用一整行而後減去margin的值就獲得瞭如今的寬度了。

    減去的這個值就是相應邊得空白。顯著的特徵是這個沒有橫向滾動條出現也就是寬度沒有增長。

測試如下代碼：

<div style="width:100%;margin:0 100px;border:1px solid red;">aaaaaaa</div>

<div style="width:auto;margin:0 100px;border:1px solid red;">aaaaaaa</div>

 

11.http協議get和post的區別

（1）get是從服務器上獲取數據，post是向服務器傳送數據。

（1）   在客戶端，Get方式在經過URL提交數據，數據在URL中能夠看到；POST方式，數據放置在HTML HEADER內提交。

（2） 對於get方式，服務器端用Request.QueryString獲取變量的值，對於post方式，服務器端用Request.Form獲取提交的數據。

（2）   GET方式提交的數據最多只能有1024字節，而POST則沒有此限制。

（3）   安全性問題。正如在（1）中提到，使用 Get 的時候，參數會顯示在地址欄上，而 Post 不會。因此，若是這些數據是中文數據並且是非敏感數據，那麼使用 get；若是用戶輸入的數據不是中文字符並且包含敏感數據，那麼仍是使用 post爲好。

使用GET方法時，請求參數和對應的值附加在URL後面，利用一個問號（「?」）表明URL的結尾與請求參數的開始，傳遞參數長度受限制。例如，/index.jsp?id=100&op=bind。

 

POST方法將請求參數封裝在HTTP請求數據中，以名稱/值的形式出現，能夠傳輸大量數據，可用來傳送文件。

 

12.僞類與僞元素的區別

CSS 僞類用於向某些選擇器添加特殊的效果。

僞類有：:first-child ，:link:，vistited，:hover:，:active，:focus，:lang，:right，:left，:first

錨僞類

在支持 CSS 的瀏覽器中，連接的不一樣狀態均可以不一樣的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和鼠標懸停狀態。

 {color: #FF0000}		/* 未訪問的連接 */
 {color: #00FF00}	/* 已訪問的連接 */
 {color: #FF00FF}	/* 鼠標移動到連接上 */
 {color: #0000FF}	/* 選定的連接 */a:linka:visiteda:hovera:active

提示：在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 以後，纔是有效的。

提示：在 CSS 定義中，a:active 必須被置於 a:hover 以後，纔是有效的。

提示：僞類名稱對大小寫不敏感。

僞元素是創造關於文檔語言可以指定的文檔樹以外的抽象。例如文檔語言不能提供訪問元素內容第一字或者第一行的機制。僞元素容許設計師引用它們，不然這是難以辦到的。僞元素還提供樣式設計師給在源文檔中不存在的內容分配樣式（例如：:before和:after可以訪問產生的內容）。

僞元素有： :first-line，:first-letter，:before，:after
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程