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

?

本文轉(zhuǎn)載于:猿2048?https://www.mk2048.com/blog/blog.php?id=0ika1kj&title=html+css基礎(chǔ)知識(shí)

總結(jié)

以上是生活随笔為你收集整理的html css基础知识的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。