1    
     這是自己學習html時候做的一些記錄，供大家參考
     <!--
  2             塊和內聯
  3             塊元素:獨占一行的元素
  4             div p h ul
  5             div沒有任何語義，就是一個純粹的快元素
  6                 就是為了方便布局
  7                 
  8             span是內聯元素（行內元素）：只會占用自身大小的元素，不會占用一行
  9                     常見的內聯元素：a img iframe span
 10                 span沒有任何意義，可以設置樣式
 11             塊元素主要用來實現頁面布局，內聯元素主要選中文本設置樣式
 12                  一般情況下只是用塊元素去包含內聯元素，內聯元素不去包含塊元素
 13                 a元素可以包含任何元素，除去本身
 14                 p元素中不能放任何塊元素
 15         -->
 16         <!--
 17             類選擇器，id，class，id不能重復，class可以重復
 18                    class能賦多個值，使用空格隔開
 19                    class用.
 20                    id用#
 21                    
 22             選擇器分組
 23                 - 通過選擇器可以同時選中多個元素
 24                 - 語法：選擇器1，選擇器2，。。。
 25             通配選擇器：*{}
 26                 選中頁面中所有元素
 27              
 28             復合選擇器：
 29                 - 作用: 
 30                     同時滿足多個條件
 31                     選擇器1選擇器2.。 選擇器中間沒有間隔
 32                     
 33             偽類選擇器必須順序使用如下，但他們的優先級是一樣的
 34             偽類選擇器：:link,:visited, :hover，:active, :focus, ::selection, 
 35             偽元素(用來設置元素中的一些特殊位置)：:first-letter， :first-line
 36             :before, :after  
 37                        before和after一般結合content使用，通過content添加內容
 38                                  例如：
 39                             p{
 40                                 content:"sdfsfdd";
 41                             }     
 42     
 43     
 44                   
 45                     
 46         -->
 47         <!--  ==========  -->
 48         <!--  = 屬性選擇器 =  -->
 49         <!--  ==========  -->
 50         <!--
 51             
 52             title屬性，這個屬性可以用于任何標簽，指定提示文字
 53             例如<p title=" 這是一個title提示">十分士大夫的</p>
 54             
 55             屬性選擇器，選取擁有特定屬性的標簽。
 56             語法： [屬性名]， [屬性名=屬性值]，
 57             [屬性名^=屬性值](選取以屬性值開頭的屬性元素)，
 58             [屬性名$=屬性值](選取以指定內容結尾的屬性標簽)，
 59             [屬性名=屬性值](選取包含指定內容的屬性標簽)，
 60             例如p[title]{}，p[title=屬性值]
 61             
 62             
 63             子元素選擇器： ：first-child(選中第一個元素，并且自身是子元素)，:last-child
 64                          :nth-child(子元素的位置)，選定子元素任意位置。even表示偶數位的子元素，odd表示奇數位的子元素[IE8以下的瀏覽器是不支持的]
 65                          :first-of-type,:last-of-type[同一類中的第一個]
 66                                  父 > 子類型 IE6不支持　　
 67                          
 68             兄弟選擇器：
 69                       p  后一個兄弟元素{}
 70                       p ~后面所有類型的兄弟元素
 71                       
 72         
 73                 否定偽類：可以從已經選中的元素中剔除某些元素
 74                 p:not(選擇器){}
 75                 樣式的繼承，后代會繼承祖先的樣式,但是并不是所有的樣式都會被子繼承，例如，背景是不會被繼承的
 76                 
 77                 
 78            
 79            
 80                 使用不同的選擇器，選中同一個元素，設置相同的樣式時、
 81                 這時候樣式之間產生了沖突 
 82                 優先級：內聯樣式>id>class>元素選擇器>通配
 83                如果優先級相同，會選擇靠后的一個
 84                可以在樣式的最后，添加一個！important，將會獲得最高優先級。但在開發中盡量避免使用
 85         -->
 86 
 87         <!--
 88                       這兩個都表示強調的內容
 89             em 強調著重點，表示語氣上的強調，em在瀏覽器中默認使用斜體顯示
 90             strong 表示強調，比em更強列，默認使用粗體顯示
 91         -->
 92 
 93         <!--
 94             i標簽沒有任何語義，沒有著重的意義
 95             b只是丹村的加粗
 96         -->
 97 
 98         <!--
 99             small標簽的內容文字較小
100                  可以用于版權聲明，合同
101         -->
102 
103         <!--
104             cite用于加書名號的內容，表示參考的內容    
105         -->
106 
107         <!--
108             
109             q標簽表示一個引用，會自動加上引號
110             
111             blockquote 表示長引用，表示一個塊元素
112             
113             sub,sup，下標和上標
114             
115             pre標簽是一個預格式標簽，保留格式空格，不會刪除空格顯示
116             
117         -->
118 
119         <!--
120             
121             列表有三種：
122                 1.有序列表 ol li
123                 2.無序列表 ul li
124                 3.定義列表 dl 包含dt(被定義的內容) dd（對定義內容的描述）
125             
126         -->
127 
128         <!--  ==========  -->
129         <!--  = 長度單位 =  -->
130         <!--  ==========  -->
131         <!--
132             長度單位
133             px 像素
134             百分比%  占父元素的比例
135             em 和百分比相似
136                根據當前的字體大小來計算的
137               1em = 1font-size 當字體大小發生變化時，em也會變化
138               設置字體相關的樣式時，會使用
139             
140         -->
141 
142         <!--  ==========  -->
143         <!--  = 字體樣式 =  -->
144         <!--  ==========  -->
145         <!--
146             
147             line-height 表示行高 可以繼承
148             px時
149             、行間距 = 行高 - 字體大小
150                       定義一個百分數，相對于字體大小來說
151                       直接指定行高，傳入數值，行高會設置字體大小的倍數
152                       
153              使用font定義字體時，如果不在font中指定，都會采用默認值，所以要么在font后定義單獨樣式，要么不指定
154              font-family
155              font-variant
156              font-size
157              font-weight
158              font-style
159              color
160              line-height
161         -->
162 
163         <!--
164             
165             關于文本的一些常用的樣式
166             
167             text-transform(文字變形): 可以繼承
168                  值：none（默認）, capitalize(首字母大寫)，uppercase(全部大寫)，lowercase(小寫)，inherent
169             text-decoration(定義文本的修飾)：不可繼承
170                可選值：none（不加任何修飾）
171                      underline（加下劃線
172                      、      overline 加上劃線
173                      line-through 為文本添加刪除線
174                      
175                      超鏈接會默認添加下劃線，可以設置text-decoration 為none去除下劃線
176             letter-spacing（字符之間的間距）【中英文都有效】
177             word-spacing 單詞之間的距離【中文改變空格的大小，英文是詞與詞之間】
178             text-align：文本的對齊 left right center justify（兩端對齊）
179             
180             text-indent：首行縮進  em單位表示一個單詞 如果是負值，字體就會隱藏
181         -->
182 
183         <!--
184             盒子
185             width和height來設置盒子內容區的寬度和高度
186             設置邊框必須設置三個樣式，缺一不可 但是他們都有默認值 ：border-weight（上 右 下 左， 上  左右  下， 上下  左右），border-color（上 右 下 左， 上  左右  下， 上下  左右），border-style
187             可以設定border設置三個樣式，沒有順序要求例如 border:10px red solid  border-right:none
188             
189             margin（外邊距） padding(內邊距)
190             margin可以設置為auto（能設置多大，就設置多大） 一般只是設定水平方向的，left和right同時設置為auto，會一邊一半，經常會使用這樣來使盒子居中
191             垂直方向設置auto，外邊距默認為0，不起作用
192             垂直外邊距的折疊
193                 在網頁中垂直方向的相鄰外邊距會重疊
194                   外邊距重疊指的是兄弟元素相鄰外邊距會取最大值
195                   如果父子元素的垂直外邊距相鄰了，則子元素的外邊距會設置給父元素
196                   解決方案：把父子元素的外邊距給隔離，可以設置頂部border或者設置padding內邊距
197             
198             
199             瀏覽器設置了默認樣式（為很多元素設置了padding和margin），為了在沒有樣式時，也有一個好的顯示效果
200             所以我們需要將瀏覽器默認設置的樣式去掉，由于通配選擇器是最低優先級，所以在通配選擇器中設置margin和padding為0 
201             *{
202               margin：0；
203               padding：0；
204               }
205         -->
206         
207         <!--  ==========  -->
208         <!--  = 內聯元素和塊元素 =  -->
209         <!--  ==========  -->
210         <!--
211             
212             內聯元素和塊元素的區別
213             內聯元素
214                  內容塊
215                     不能設置width和height，沒有用
216                 內邊距    
217                     可以設置padding，水平垂直都可以，但是垂直方向不會影響布局。
218                 邊框
219                 可以設置邊框，但是垂直方向不會影響布局
220                 外邊距
221                 水平方向的外邊距不會重疊，而是求和
222                不支持垂直方向的外邊距
223             
224             
225             display:會改變元素的類型  inline-block block none（不顯示且不占空間）
226             visibility：是否顯示，visible hidden（隱藏但是占用空間）
227             overflow：對溢出的部分進行處理【注：在父元素中進行設置】
228                      visible 默認值，在父元素以外的位置顯示
229                      hidden 溢出的內容會被修剪，不會顯示
230                      scroll 產生滾動條，使用滾動條查看溢出的內容
231                             - 無論內容是否溢出，都會顯示滾動條
232                      auto：根據需要，來決定是否需要添加滾動條
233         -->
234 
235        <!--  ==========  -->
236        <!--  = 文檔流和浮動 =  -->
237        <!--  ==========  -->
238         <!--
239             一旦脫離文檔流，元素不在區分塊元素和內聯元素，只是互補。如果是塊元素，則會在快元素的基礎上擁有內聯元素的特性，反之，亦然
240             
241             一旦脫離文檔流，可以去往任何位置。擁有所有特性，可以這么說 就是高層次的inline-block（內聯和塊元素的結合）
242             
243             文檔流
244             
245             
246                  文檔流處在網頁的底部，他表示的是一個頁面中的位置
247                  我們所創建的元素默認都在文檔流里面
248                  
249             元素在文檔流中的特點
250                 塊元素：
251                     1.在文檔流中獨占一行
252                內聯元素：
253                      1。只占用自身的大小，從左到右排列
254                      
255                      
256             把塊元素水平排列，把塊元素從文檔流中剔除出來，可以用float實行
257 
258             元素與元素之間一般情況下都是換行顯示，所以中間會有個空格，可使用float消除空格。
259             float：只要元素浮動，下面的元素會頂上去被浮動的元素覆蓋。只有下面的元素也設置浮動，才會浮動到同一水平位置上
260                   none
261                   left 從文檔流中脫離出來，向頁面左側浮動
262                   right從文檔流中脫離出來，向頁面右側側浮動
263                   
264             一旦浮動，都會脫離文檔流，可以設置寬高，和塊元素一樣
265                          一旦脫離文檔流，會相當于從當前布局脫離出去，就當不存在一樣，剩余的布局從新界定      
266                    1.高度塌陷問題，父元素不設定高度，子元素浮動之后，父元素會塌陷，沒有高度。可以將父元素的高度寫死，避免這種問題出現，但是一旦寫死，父元素將不能自適應布局（不推薦使用）
267         -->
268 
269         <!--  ==========  -->
270         <!--  = 解決浮動問題產生的高度塌陷 =  -->
271         <!--  ==========  -->
272 
273         <!--
274             、
275             根據w3c標準，在頁面中元素都包含一個隱含的屬性，BFC（blcok formatting context）
276              默認是關閉的
277              開啟BFC主要解決浮動的問題
278              當開啟BFC時候，元素將會由如下特性
279              　　　　１.父元素的垂直外邊距不會和子元素重疊
280              　　　　２.開啟BFC的元素不會被浮動元素所覆蓋
281              　　　　３.開啟BFC的元素可以包含浮動的子元素
282              如何開啟BFC
283              　　　　１.設置元素浮動（不建議使用　，會導致布局混亂，父元素寬度丟失）
284              　　　　２.設置inline－block（父元素寬度丟失，不推薦使用）
285              　　　　３.設置絕對定位（一樣的效果和第一個）
286              　　　　４.將元素的overflow設置為非visible的值，一般使用auto和hidden
287              　　　　推薦使用第四種方式
288             但在IE６及以下版本不支持BFC，所以使用這種方式不能兼容IE6
289             但是有另一個屬性叫 Has Layout
290             該屬性的作用，和BFC類似，在IE6中可以開啟這個屬性來設置塌陷問題
291             開啟方式很多，我們直接使用一種副作用最小的
292                直接將元素的zoom設置為1就行（zoom表示放大的意思，后邊跟著一個數值，就是將我么的元素放大幾倍。 zoom只在IE中支持）
293                
294             如果希望清除其他浮動元素對當前元素的影響，對當前元素應用clear屬性
295                 可選值：
296                     none
297                     left 清除左邊浮動元素對當前元素的影響
298                     right
299                     both 清除對當前元素影響最大的
300                     
301                     
302                     
303             解決塌陷方案一：
304                  1.1在父子中使用 overflow ，zoom消除外邊距重疊影響
305                  1.2在兄弟中使用clear清除浮動影響
306             解決塌陷方案二、：、
307                 2.1在父子中，在浮動元素下方添加一個div 在這個div中使用clear
308                  2.2在兄弟中直接使用clear
309             w3c推薦使用
310             解決塌陷問題方案三：
311                3.1通過after偽類選中父元素的后面，添加一個空元素
312                div:after{
313                    content:"";
314                    display:block;
315                    clear:both;
316                }
317                在IE6中不兼容，需要使用
318                div{
319                    zoom:1;
320                }
321                3.2在兄弟中直接使用clear
322                最推薦的一種方式
323                    同時解決父元素外邊距和子元素相鄰 ，高度塌陷問題
324                           使用空的table標簽可以做到這一點
325                              div:after,div:before{
326                                  content:"";
327                                  display:table;
328                                  clear:both;
329                              }
330               
331         　　在IE６里面，塊元素和內聯元素都是看作塊元素，這個要注意
332         --> 
333         <!--  ==========  -->
334         <!--  = 關于定位 =  -->
335         <!--  ==========  -->
336         <!--
337             定位
338                定位指的是將指定的元素放到任意的位置
339                position
340                   可選值：
341                   static
342                   relative
343                   absolute
344                   fixed
345                   
346                   
347                  relative:
348                          1. 相對自身位置（在文檔流中的原來位置）進行定位，通過left ，right，top , bottom來設置、
349                          2. 相對定位不會脫離文檔流，原來的位置仍然占用
350                          3. 相對定位會使元素提升一個層級，如果發生重疊，會覆蓋別的元素
351                          4. 相對定位不會改變元素的性質，塊元素還是塊元素，內聯元素還是內聯元素
352                  
353                 absolute設置絕對定位
354                         1. 會使元素脫離文檔流
355                         2. 開啟絕對定位，不設置偏移量，位置不發生變化
356                         3.絕對定位是相當于離他最近的開啟定位的祖先元素定位的（一般情況下，開啟了子元素的絕對定位，父元素會開啟相對定位）
357                                           如果所有祖先元素沒有開啟定位，就會相對于瀏覽器進行定位
358                         4.絕對定位會提升一個層級
359                         5. 絕對定位會改變元素的性質
360                                                內聯元素變成塊元素
361                                               塊元素的高度和寬度默認都被內容撐開
362                 fixed定位（絕對定位的一種）
363                         1. 元素會脫離文檔流
364                         不同的是：
365                                      固定定位永遠都是根據瀏覽器窗口進行定位的
366                                      固定定位不會隨滾動條滾動
367                     IE6不支持這個固定定位
368                     
369                 關于層級：
370                 如果元素都提升了等級，在布局上誰在下面，就會蓋住上面的元素
371                 通過z-index屬性可以用來設置元素的層級：為z-index指定一個值，數值越高，越優先顯示
372                 對于沒有開啟定位的元素，z-index沒有用
373                父元素的層級再高，也不會遮擋子元素
374         -->             
375    
376         <!--  ==========  -->
377         <!--  = 透明 =  -->
378         <!--  ==========  -->
379         <!--
380             
381             opacity用于設置透明度
382             
383             在IE8及以下
384             需要使用filter：alpha（opacity=）； 在IE tester中不行是個bug
385             
386         -->
387         
388         <!--  ==========  -->
389         <!--  = 背景圖片 =  -->
390         <!--  ==========  -->
391         <!--
392             所有的背景可以用background一個屬性來設置，屬性之間沒有順序
393             background-img來設置背景圖片
394                語法：background-img:url()
395                - 背景元素大于當前大小，會顯示左上角
396                - 背景元素小于當前大小，則會默認平鋪（用圖片不斷填充）
397                - 背景顏色一定實在背景圖片的后邊
398             
399             
400             background-repeat 設置背景圖片的重復方式
401               可選值：
402                   repeat 雙向重復
403                   no-repeat 不重復,有多大就顯示多大
404                   repeat-x  橫著重復，豎著不重復
405                   repeat-y  豎著不重復，橫著重復
406             
407             
408             background-position 設定圖片的顯示位置
409                 可選值： top left center bottmo right
410                 也可以使用偏移量 一個水平 一個垂直 。 可以指定正值和負值
411             
412             
413             background-attachment用來設置背景圖片是否隨頁面一起滾動
414                scroll 默認值 滾動
415                fixed 固定在某一位置 不隨頁面滾動 背景圖片永遠相對于瀏覽器窗口進行布置，這個屬性值一般只會設置個body元素，其他的基本不用
416         -->
417         
418         
419         <!--  ==========  -->
420         <!--  = 表格 =  -->
421         <!--  ==========  -->
422         <!--
423             
424             table表格  colspan 橫向合并單元格
425                       rowspan 列合并
426                       border-spacing 表格和單元格之間的距離
427                       border-collapse 設置表格邊框合并 如果設置了這個邊框合并，border-spacing不起作用
428                       th 表頭
429             提供了三個子標簽來設置長標簽 thead tbody tfoot 表示不同的主題，這三個是固定位置顯示，可以不順序寫
430             如果沒有寫tbody，會自動把tr放到tbody中
431         -->
432        
433         
434         
435         <!--  ==========  -->
436         <!--  = 表單 =  -->
437         <!--  ==========  -->
438         <!--
439             使用fieldset來為表單項進行分組，使用legend來指定組名
440             <fieldset>
441                 <legend>
442                     
443                 </legend>
444             </fieldset>
445             
446             input類型   【輸入框是通過name來提價數據到服務器端的，name是必不可少的】
447             注意：
448                 1.像不需要用戶去填的但是用戶去選擇的，必須寫上value值，提交到服務器
449                 2.如果在單選或者多選希望選中默認值，可以使用checked=“checked”來設置選中
450                 3.在select中的option中添加selected=”selected“
451                 4.input 的placeholder提示文字，IE8及以下不支持，需要用js代碼設置
452                 5.在IE6中，input的背景圖片會滾動，在IE6中單獨使用attachment=fixed，其他瀏覽器不用這么設置
453                 
454                      text
455                      password
456                      radio 單選按鈕 ，name必須相同實現單選
457                      checkbox 多選框  name必須相同 value必須指定
458                      select 
459                                     下拉列表  使用option來設置列表項，在select中添加一個multiple可以設置多選。  name屬性需要指定給select， value指定給option
460                                      在select中可以使用optgroup對選項進行分組，label設置組名
461                     textarea 多行文本框
462                     button
463                     submit
464                     reset
465             button類型
466                 submit
467                 reset
468                 button
469             label標簽 選中提示名 需要一個for屬性，指定一個表單項的id
470                 例如 <label for="myId">username</label> 
471                   <input id="myId" type="text" name="username" />
472             
473         -->
474         
475         <!--  ==========  -->
476         <!--  = 框架集 =  -->
477         <!--  ==========  -->
478         <!--
479             
480             框架集和內聯框架的作用相似，都是作用于一個頁面中引入其他的外部的頁面
481             框架集可以引入多個頁面，而內聯框架只能引入一個
482             
483             使用一個frameset來創建一個框架集 frameset和body不能同時使用
484             屬性：
485                 rows 指定框架集中的所有的框架，一行一行的排列 
486                 cols 列排列
487                 這連個屬性必須選擇一個，指定框架占的比例
488                 框架集中也可以嵌套框架集
489                  他里賣的內容是不會被搜索引擎檢索的，整個頁面只能引用別的頁面
490                  引入一個頁面，就會發送一個請求，用戶體驗較差
491                  如果非要使用建議使用frameset 不建議使用iframe 
492             <frameset>
493                 <frame src="url"/>
494             </frameset>
495             
496         -->
497         
498         <!--  ==========  -->
499         <!--  = 實現有選擇性的執行css和js代碼 =  -->
500         <!--  ==========  -->
501         <!--
502             使用這個代碼，可以選擇性的在IE中執行，IE10及以上版本不支持這個代碼
503             條件hack
504             <!--[if IE]>
505             
506              <![endif]-->
507             <!--可以這樣設置
508                if lt IE 8  表示小于IE8版本的都會執行
509                if ！ IE 8 不是IE8的都會執行
510                if IE 8 等于
511                if ht IE 8大于
512                
513                [if IE 6]>
514                 
515                    在body最后寫js代碼
516                  解決IE6不支持png24，修復圖片-->
517                
518         <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
519         <script type="text/javascript">
520             DD_belatedPNG.fix("要修復的元素選擇器，另一個選擇器");
521         </script>
522             -->
523           
524              
525              
526              
527              
528              
529              
530              
531              
532         <!--屬性hack
533             在屬性前面添加符號，可以在IE版本中有選擇性的執行
534                _ 下劃線 只有在IE6及版本以下才執行
535                * 星號 只在IE7及以下執行
536         在選擇器前加 *html 只有IE６才能識別
537         -->
538                
539          <!--  ==========  -->
540         <!--  = 實戰經驗 =  -->
541         <!--  ==========  -->
542         <!--
543             一
544             設置按鈕效果，使用背景圖片設置按鈕，設置背景的位置時，表示按鈕的狀態
545                圖片整合技術（css-sprite），把多張圖片整合成一張圖片，然后設置圖片的位置，顯示其中的不同圖片
546               優點：
547                  1. 瀏覽器只需要發送一次請求，加載多個圖片。
548                        提高用戶體驗
549                  2. 圖片整合為一張圖片，提高了請求的速度， 減小了圖片大小
550                  
551             IE6中隊png24支持度不高
552               如果使用的圖片格式是png24，會導致透明效果消失
553               解決方案，
554               1.可以把png24改為png8
555               2.使用js代碼來解決該問題
556                   <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
557                   <script type="text/javascript">
558                   DD_belatedPNG.fix("要修復的元素選擇器，另一個選擇器");
559                   </script>
560             二，
561             每個瀏覽器設置空格的效果不大一樣，這個需要注意
562             三，
563             設置pointer-events：none，可以讓本元素喪失掉焦點。下級元素不會被遮擋事件處理
564         -->
565