html&&css小總結，希望對你有用

Galary_GY發表於2016-05-05
HTMLCSS

1. DTD文件模型

<!DOCTYPE> 宣告位於文件中的最前面的位置，處於 <html> 標籤之前。此標籤可告知瀏覽器文件使用哪種 HTML 規範（版本）。

 

html4中有三種型別：嚴格Strict、過渡Transitional、框架Frameset

html5中只有一種<!DOCTYPE html>

 

2. 寫出行內元素與塊及元素每個5個，並描述其區別

行內：a 、b、span、i、em、input、label

塊：address、div、p、dl、ul、h1~h6

特殊的行內 img 即可和其它元素一行，也可設定寬和高

 

區別：

塊總是佔滿一行，可設定寬高，上下左右的內邊距外邊距都可以設定，寬度與瀏覽器寬度一樣，可容納內聯元素與其它塊元素

行總是和其它行元素佔一行，不可設定寬高，只能設定左右的內邊距和外邊距，寬度以內容為準，只能容納文字和其它行元素。

 

3. 盒子模型有幾種？分別使用每種盒子寫出例子並描述

盒子模型有兩種，分別是 怪異盒子模型和標準 W3C 盒子模型。

內容區：content     填充：padding     邊框：border   空白：margin

 

4. CSS引入方式

內聯style=""

內部<style></style>

外部<link href="">

匯入@import url("樣式表")   不提倡使用，會阻塞載入

它們的優先順序

內聯>內部>外部>匯入   

 

5. CSS選擇器種類，CSS選擇器優先順序

元素選擇器 p  a  span  div

ID選擇器  #ID名

CLASS選擇器  .CLASS名

萬用字元選擇器  *

優先順序  ID > CLASS > 元素 > 萬用字元

 

6. 分別寫出IE6、7、8 BUG的解決方法

利用css hack來解決

_：選擇IE6及以下。連線線（中劃線）（-）亦可使用，為了避免與某些帶中劃線的屬性混淆，所以使用下劃線（_）更為合適。

*：選擇IE7及以下。諸如：（+）與（#）之類的均可使用，不過業界對（*）的認知度更高

\9：選擇IE6+

\0：選擇IE8+和Opera15以下的瀏覽器

 

7. img標籤上title與alt屬性的區別是什麼?

alt是你的圖片因為某種原因不能載入時顯示的文字

title是你滑鼠懸停在上面時顯示的文字

 

8. 解釋css sprites，如何使用

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片檔案中，再利用CSS的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字精確的定位出背景圖片的位置。

 

 

9. 描述padding和margin的區別

    在CSS中margin是指從自身邊框到另一個容器邊框之間的距離，就是容器外距離。在CSS中padding是指自身邊框到自身內部另一個容器邊框之間的距離，就是容器內距離。

 

10. CSS定位的屬性值極其使用場景

1）absolute 
生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
2）fixed 
生成絕對定位的元素，相對於瀏覽器視窗進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
3）relative 
生成相對定位的元素，相對於其正常位置進行定位。
因此，"left:20" 會向元素的 LEFT 位置新增 20 畫素。
4）static 
預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。 
5)inherit 
規定應該從父元素繼承 position 屬性的值。

 

11. 描述display的使用

 block 象塊型別元素一樣顯示。 

  none 預設值。象行內元素型別一樣顯示。 

inline-block 象行內元素一樣顯示，但其內容象塊型別元素一樣顯示。  

 list-item 象塊型別元素一樣顯示，並新增樣式列表標記。

 

12. 描述opacity屬性的使用

opacity 屬性設定元素的不透明級別。預設值為1；

Value：規定不透明度。從 0.0 （完全透明）到 1.0（完全不透明）。

inherit：應該從父元素繼承 opacity 屬性的值。

13. 列表有幾種？利用列表寫出水平導航欄

列表有三種：ul、ol、dl

<style>
    ul li{ list-style: none; display:inline-block;}
</style>
<ul>
    <li><a href="#">首頁</a></li>
    <li><a href="#">首頁</a></li>
    <li><a href="#">首頁</a></li>
</ul>

 

14. 一個盒子如何在大盒子中進行居中操作

   規定其寬度，margin:0 auto;

 

15. 一個3列以上的佈局效果

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

 

16. 寫出2D屬性

平移：translate

縮放：scale

傾斜:rotate

斜切扭曲:skew

 

17. 一個過渡效果

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

.h1{

width: 200px;

height: 200px;

margin: 50px auto;

background-color: black;

}

.h1:hover{

background-color: red;

transition: background-color 2s ease ;

}

</style>

</head>

<body>

<div class="h1">

</div>

</body>

</html>

18. 使用動畫完成一個簡單的動畫效果

<style>

.h img {

width: 200px;

height: 200px;

    }

     @keyframes quanquan {

            0%{

                transform: scale(1);

                -moz-transform: scale(1);

            }

            40%{

                transform: scale(0.8);

                -moz-transform: scale(0.8);

            }

            100%{

                transform: scale(1);

                -moz-transform: scale(1);

            }

        }

        .h img{

         animation: quanquan 0.75s ease infinite ;

        }

</style>

<body>

<div><img src="img/xin.jpg" alt="" /></div>

</body>

 

 

19. 使用媒體查詢完成一個響應式佈局

<style type="text/css">

.x{

width: 200px;

height: 200px;

margin: 0 auto;

background-color: blueviolet;

}

@media screen and (min-width:500px) and (max-width:1000px){

.x{

background-color:red;

}

}

@media screen and (max-width:500px) {

.x{

background-color: gold;

}

}

</style>

</head>

<body>

<div class="x">

<div class="x1"></div>

</div>

</body>

</html>


20.HTML5新標籤

1.header 頁面頭部

2.footer 頁尾

3.article 定義頁面獨立的內容區域

4.aside 定義頁面的側邊欄內容

5.details  用於描述文件的詳細資訊，未點選時收起

6.summary  details的標題

7.figure 規定獨立的流內容

8.figcaption  figure的標題

9.mark 定義帶有記號的文字

10.nav 導航連結


21. 網頁製作會用到的圖片格式有哪些

png 背景是透明的，有png24和png8兩種模式，png24顏色更豐富

psd   使用photoshop製作的分層的圖片格式，不能直接用於網頁。需要“切圖”後方可使用。

jpg    比較常見的圖片格式

bmp   windows中標準的影像檔案格式

svg    向量圖型

Gif    GIF - 最佳動畫 GIF（圖形交換格式）是一種“無損”格式，儲存時，沒有任何資訊丟失。這種格式是一種流行在網頁上使用，螢幕上的影像的大小是相對較小，相比其他型別的影像壓縮。


22. 如何理解HTML結構的語義化

1.搜尋引擎花更少的時間收集資訊

語義化指的是搜尋引擎在花費更少時間情況下能夠研究和收集資訊，讓網頁能夠被搜尋引擎理解。

2.更直觀

語義標籤是讓大家直觀的認識標籤，div和header你更容易從語義化標籤看出當前模組是什麼內容

3.容易被搜尋引擎抓取

語義化的好處，最主要的是對搜尋引擎友好，有了良好的結構和語義你的網頁更容易被搜尋引擎抓取。

4.解耦

語義web技術有助於結構、表現與行為的分離

 

23. px和em的區別

px畫素（Pixel），相對長度單位。畫素px是相對於顯示器螢幕解析度而言的。

◆em是相對長度單位，相對於當前物件內文字的字型尺寸。如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。

因此用px來定義字型，就無法用瀏覽器字型放大的功能


24. css有個content屬性有什麼作用 

用來和:after及:before偽元素一起使用，在物件前或後顯示內容。

作用：  用於清除浮動

相關文章