【前端面試】HTML5+CSS3初級面試2

2024-04-27 15:15:51

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

1、請用代碼寫出<video>標(biāo)簽的使用方法。

方法一：<video src="test.mp4">video標(biāo)簽</video>。

方法二：<video><source src="test.avi">video標(biāo)簽</video>。

因?yàn)楝F(xiàn)階段不同的瀏覽器支持的視頻格式是不同的，當(dāng)我們有多種格式的視頻樣式時，我們會用第二種方法來做兼容調(diào)試。

2、HTML5有哪些不同類型的存儲。

HTML5支持本地存儲，速度快而且安全，在之前版本中是通過Cookie實(shí)現(xiàn)的。

有兩種不同的對象可用來存儲數(shù)據(jù)。

第一種：localStorage，適用于長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失。

第二種：sessionStorage，存儲的數(shù)據(jù)在瀏覽器關(guān)閉之后自動刪除。

3、寫出Web1.0和Web2.0常用的HTML標(biāo)簽。

Web1.0常用的HTML標(biāo)簽：<u>、<b>、<i>、<table>、<p>、</br>、<nobr>、<hr>

Web2.0常用的HTML標(biāo)簽：<article>、<header>、<nav>、<section>、<meter>、<PRogress>、<datalist>

4、HTML元素的分類及其特點(diǎn)。

1）HTML元素分為塊級元素和行內(nèi)元素

塊級元素：dl、div、form、 h1-h6、 p 、ul等

行內(nèi)元素：a、 br、 input 、span、 select等

2）塊級元素和行內(nèi)元素的特點(diǎn)

塊級元素：總是在新行上開始；高度、行高以及外邊距和內(nèi)邊距可以控制；寬度默認(rèn)是容器的100%；可以容納內(nèi)聯(lián)元素和其他塊級元素。

行內(nèi)元素：和其他元素在同一行上；高和外邊距不可改變；寬度就是它的文字和圖片的寬度，不可改變；內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素。

5、CSS代碼的7個優(yōu)化規(guī)則。

1）使用簡寫；

2）避免使用hack；

3）使用留白；

4）移除多余的結(jié)構(gòu)和重設(shè)；

5）讓CSS保證日后的維護(hù)；

6）記錄工作（標(biāo)記向?qū)Ш?樣式表向?qū)В?/p>

7）壓縮使用。

6、寫出中英文強(qiáng)制換行的代碼以及文字超長顯示的代碼。

1）Word-break:break-all；只對英文起作用，以字母作為換行依據(jù)。

2）word-wrap:break-word; 只對英文起作用，以單詞作為換行依據(jù)。

3）white-space:pre-wrap；只對中文起作用，強(qiáng)制換行。

4）white-space:nowrap；強(qiáng)制不換行，都起作用。

5）white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis；

三個語句必須都要寫，不換行，超出部分隱藏且以省略號形式出現(xiàn)。

7、畫出CSS的盒模型。

盒模型是CSS中的重要概念，它是所有布局控制的基礎(chǔ)，在CSS標(biāo)準(zhǔn)中，一個盒模型包括四個區(qū)，分別是內(nèi)框、內(nèi)邊距、邊框、外邊距。在指定一個元素的大小時，就是根據(jù)盒模型中各個部分的大小來決定的。CSS的盒模型如下所示：

8、寬度自適應(yīng)三欄的布局方式有哪些。

寬度自適應(yīng)三欄的布局方式，在這里介紹兩種：

1）絕對定位法

左右兩欄采用絕對定位，分別固定在頁面的左右兩側(cè)，中間的主體欄用左右margin值撐開距離，于是實(shí)現(xiàn)了三欄自適應(yīng)布局。

2）自身浮動法

此方法代碼最簡單，應(yīng)用了標(biāo)簽浮動跟隨的特性。左欄左浮動，右欄右浮動，主體直接放后面，就實(shí)現(xiàn)了自適應(yīng)。

9、用js實(shí)現(xiàn)圖片文件上傳，而且可以改變其樣式

在開發(fā)中，文件上傳必不可少，<input type="file" /> 是常用的上傳標(biāo)簽，但是它長得又丑、瀏覽的字樣不能換，我們一般會用讓，<input type="file" />隱藏，點(diǎn)其他的標(biāo)簽（圖片等）來時實(shí)現(xiàn)選擇文件上傳功能。

代碼如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>js實(shí)現(xiàn)input file文件上傳</title>    <style>        .box{            position: relative;            width:119px;            height:37px;            background-color: #53AD3F;            line-height: 37px;            text-align: center;            color: #fff;            cursor: pointer;            overflow: hidden;            z-index: 1;        }        .box input{            position: absolute;            width: 119px;            height: 40px;            line-height:40px;            font-size:23px;            opacity:0;            filter: "alpha(opacity:0)";            filter: alpha(opacity:0);            left:-5px;            top:-2px;            cursor: pointer;            z-index: 2;        }    </style></head><body><form id="form1" method="post" enctype="multipart/form-data">    <div>        <div class="box">            <input type="file" name="f" id="f"/>            選擇圖片        </div>    </div></form></body></html>效果：
注意：
      1）用一個不透明度為0的 <input type="file" />蓋在要用戶可見的標(biāo)簽（或圖片等）上，讓用戶點(diǎn)擊。       2）用 width height line-height font-size 來控制<input type="file" />右側(cè)瀏覽按鈕的大小。       3）用 left top （right 、 bottum）來控制<input type="file" />右側(cè)瀏覽按鈕的位置，可以設(shè)置為負(fù)值。       4）用z-index來設(shè)置它們的層覆蓋關(guān)系。       5）form 必須有enctype="multipart/form-data"標(biāo)記才能上傳文件。
 
前端面試系列文章：
1、【前端面試】HTML5+CSS3初級面試1
2、【前端面試】HTML5+CSS3初級面試2