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

?

本文轉載于:猿2048?https://www.mk2048.com/blog/blog.php?id=0ika1kj&title=html+css基礎知識

總結

以上是生活随笔為你收集整理的html css基础知识的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。