前端面試題彙總

時間 2020-01-25

標籤端面試題彙總简体版

原文原文鏈接

一、<!DOCTYPE>標籤的定義與用法。html

<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標籤以前。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。瀏覽器

註釋：<!DOCTYPE> 標籤沒有結束標籤！ide

二、塊級元素和行內元素都有哪些?字體

塊級元素:url

div-最多見的塊級元素spa

dl-和dt dd搭配使用的塊級元素firefox

form-交互表單設計

h1-h5各級標題3d

hr-水平分割線orm

ol-排序表單

p-段落

table-表格

ol-排序列表

內聯元素:

a-錨點

b-粗體（不推薦）

br-換行

em-強調

font-字體設定（不推薦）

i-斜體

img-圖片

input-輸入框

lable-表格標籤

select-項目選擇

small-小字體文本

span-定義文本內區塊

strike-中劃線

strong-粗體強調

sub-上標

sup-下標

textarea-多行文本輸入

tt-電傳文本

u-下劃線

q-短引用

三、有這麼一段HTML，請挑毛病：

<P>  哥寫的不是HTML，是寂寞。<br><br>  我說：<br>不要迷戀哥，哥只是一個傳說

考點1：html和 xhtml的區別
這行代碼在html 4.01 strict下是徹底正確的，在xhtml 1.0 strict下是錯誤一堆的。因此明顯是一個考點。在xhtml下全部標籤是閉合的，p,br須要閉合, 標籤不容許大寫，P要小寫。同時nbsp和br必須包含在容器裏。html下這些都不是錯。p在html裏是可選閉合標籤，是能夠不用閉合的。

這個考點告訴你xhtml是多麼苛刻。這是基本考點，答對，你能拿到60分。

考點2：考樣式分離
用nbsp控制縮進是不合理的。應該用CSS幹這事。因此應該刪掉nbsp

考點3：合理使用標籤
br是強制折行標籤，p是段落。原題用連續的br製造兩個段落的效果，效果是達到了，但顯然用的不合理，段落間距後期沒法再控制。正確的作法是用兩個p表現兩個段落。「我說」後面是正常的文字折行用br是合理的。

上面全答對，你就能拿到100分。

對原題改進的結果：
html:
<p>哥寫的不是HTML，是寂寞。<p>我說：<br> 不要迷戀哥，哥只是一個傳說

xhtml:
<p>哥寫的不是HTML，是寂寞。</p><p>我說：<br /> 不要迷戀哥，哥只是一個傳說</p>

加分：合理的用語義化標籤
在前面的基礎上合理的用語義化標籤，對內容進行必要的標記，是加分的。但過分的使用標籤，就多此一舉了。如「我說」的話，能夠用q標籤標註。

<p>哥寫的不是HTML，是寂寞。
<p>我說：<br> <q>不要迷戀哥，哥只是一個傳說</q>

我以爲這就夠了，若是再進一步，「我」用cite標註，「HTML」用abbr或acronym標註（至於再討論abbr和acronym的區別就太較真了），也OK。再複雜就不必了。

<p> 哥寫的不是<abbr title=」Hyper Text Markup Language」>HTML</abbr>，是寂寞。
<p><cite> 我</cite>說：<br> <q>不要迷戀哥，哥只是一個傳說</q>

CSS

一、介紹所知道的CSS hack技巧

CSS Hack大體有3種表現形式，CSS類內部Hack、選擇器Hack以及HTML頭部引用(if IE)Hack，CSS Hack主要針對 IE瀏覽器。

類內部 Hack：好比 IE6能識別下劃線"_"和星號" * "，IE7能識別星號" * "，但不能識別下劃線"_"，而firefox兩個都不能認識。等等

選擇器Hack：好比 IE6能識別*html .class{}，IE7能識別*+html .class{}或者*:first-child+html .class{}。

二、介紹CSS盒模型

先說說咱們在網頁設計中常聽的屬性名：內容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具有這些屬性。

這些屬性咱們能夠把它轉移到咱們平常生活中的盒子（箱子）上來理解，平常生活中所見的盒子也就是能裝東西的一種箱子，也具備這些屬性，因此叫它盒子模式。

每一個HTML標記均可看做一個盒子；

每一個盒子都有：邊界、邊框、填充、內容四個屬性；

每一個屬性都包括四個部分：上、右、下、左；這四部分可同時設置，也可分別設置；

三、CSS層疊是什麼?

層疊指的是樣式的優先級，當產生衝突時以優先級高的爲準。
1. 開發者樣式>讀者樣式>瀏覽器樣式（除非使用!important標記）
2. id選擇符>（僞）類選擇符>元素選擇符
3. 權重相同時取後面定義的樣式

如下是一段經典的html，三個類名分別爲模塊、標題和正文。
<div class="mod">
<div class="hd"></div>
<div class="bd"></div>
</div>
大部分html頁面均可以由這種結構嵌套或者累加而成。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。