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

2024-04-27 15:15:51

字體：大中小

來源：轉載

供稿：網友

1、請用代碼寫出<video>標簽的使用方法。

方法一：<video src="test.mp4">video標簽</video>。

方法二：<video><source src="test.avi">video標簽</video>。

因為現階段不同的瀏覽器支持的視頻格式是不同的，當我們有多種格式的視頻樣式時，我們會用第二種方法來做兼容調試。

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

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

有兩種不同的對象可用來存儲數據。

第一種：localStorage，適用于長期存儲數據，瀏覽器關閉后數據不丟失。

第二種：sessionStorage，存儲的數據在瀏覽器關閉之后自動刪除。

3、寫出Web1.0和Web2.0常用的HTML標簽。

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

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

4、HTML元素的分類及其特點。

1）HTML元素分為塊級元素和行內元素

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

行內元素：a、 br、 input 、span、 select等

2）塊級元素和行內元素的特點

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

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

5、CSS代碼的7個優化規則。

1）使用簡寫；

2）避免使用hack；

3）使用留白；

4）移除多余的結構和重設；

5）讓CSS保證日后的維護；

6）記錄工作（標記向導和樣式表向導）；

7）壓縮使用。

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

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

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

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

4）white-space:nowrap；強制不換行，都起作用。

5）white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis；

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

7、畫出CSS的盒模型。

盒模型是CSS中的重要概念，它是所有布局控制的基礎，在CSS標準中，一個盒模型包括四個區，分別是內框、內邊距、邊框、外邊距。在指定一個元素的大小時，就是根據盒模型中各個部分的大小來決定的。CSS的盒模型如下所示：

8、寬度自適應三欄的布局方式有哪些。

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

1）絕對定位法

左右兩欄采用絕對定位，分別固定在頁面的左右兩側，中間的主體欄用左右margin值撐開距離，于是實現了三欄自適應布局。

2）自身浮動法

此方法代碼最簡單，應用了標簽浮動跟隨的特性。左欄左浮動，右欄右浮動，主體直接放后面，就實現了自適應。

9、用js實現圖片文件上傳，而且可以改變其樣式

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

代碼如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>js實現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" />蓋在要用戶可見的標簽（或圖片等）上，讓用戶點擊。       2）用 width height line-height font-size 來控制<input type="file" />右側瀏覽按鈕的大小。       3）用 left top （right 、 bottum）來控制<input type="file" />右側瀏覽按鈕的位置，可以設置為負值。       4）用z-index來設置它們的層覆蓋關系。       5）form 必須有enctype="multipart/form-data"標記才能上傳文件。
 
前端面試系列文章：
1、【前端面試】HTML5+CSS3初級面試1
2、【前端面試】HTML5+CSS3初級面試2