前端面試—HTML面試題彙總

阿新 • • 發佈：2020-09-23

前端面試—HTML面試題彙總

部落格說明

文章所涉及的資料來自網際網路整理和個人總結，意在於個人學習和經驗彙總，如有什麼地方侵權，請聯絡本人刪除，謝謝！

1、語義化

為什麼要語義化?

a. 為了在沒有CSS的情況下，頁面也能呈現出很好地內容結構、程式碼結構:為了裸奔時好看；

b. 使用者體驗：例如title、alt用於解釋名詞或解釋圖片資訊的標籤儘量填寫有含義的詞語、label標籤的活用；

c. 有利於SEO：和搜尋引擎建立良好溝通，有助於爬蟲抓取更多的有效資訊：爬蟲依賴於標籤來確定上下文和各個關鍵字的權重；

d. 方便其他裝置解析（如螢幕閱讀器、盲人閱讀器、移動裝置）以有意義的方式來渲染網頁；

e. 便於團隊開發和維護，語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。

2. 寫HTML程式碼時，應注意什麼？

儘可能少的使用無語義的標籤div和span；
在語義不明顯時，既可以使用div或者p時，儘量用p, 因為p在預設情況下有上下間距，對相容特殊終端有利；
不要使用純樣式標籤，如：b、font、u等，改用css設定。
需要強調的文字，可以包含在strong或em標籤中，strong預設樣式是加粗（不要用b），em是斜體（不要用i）；
使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區分開，表頭用th，單元格用td；
表單域要用fieldset標籤包起來，並用legend標籤說明表單的用途
每個input標籤對應的說明文字都需要使用label標籤，並且通過為input設定id屬性，在lable標籤中設定for=someld來讓說明文字和相對應的input關聯起來。
補充一點：不僅寫html結構時，要用語義化標籤，給元素寫css類名時，也要遵循語義化原則，不要，隨便起個名字就用，那樣等以後，再重構時，非常難讀。最忌諱的是不會英文，用漢語拼音代替。別那麼LOW 。

HTML5新增了哪些語義化標籤？

1、header元素

header元素代表“網頁“和”section”的頁首。通常包含H1~H6元素或者hgroup元素。作為整個頁面或者內容塊的標題，也可以包裹一節的目錄部分，一個搜尋框，一個nav，或者任何相關logo。整個頁面沒有限制header元素的個數，可以擁有多個，可以為每個內容塊增加一個header元素

header使用注意：

可以是“網頁”或任意“section”的頭部部分；
沒有個數限制。
如果hgroup或h1-h6自己就能工作的很好，那就不要用header。

2、footer元素

footer元素代表“網頁”或“section”的頁尾，通常含有該頁面的一些基本資訊，例如：文件創作者的姓名、文件的版權資訊、使用條款的連結、聯絡資訊等等。。

footer使用注意：

可以是“網頁”或任意“section”的底部部分；
沒有個數限制，除了包裹的內容不一樣，其他跟header類似。

3、hgroup元素

hgroup元素代表“網頁”或“section”的標題，當元素有多個層級時，該元素可以將h1到h6元素放在其內，譬如文章的主標題和副標題的組合

hgroup使用注意：

如果只需要一個h1-h6標籤就不用hgroup
如果有連續多個h1-h6標籤就用hgroup
如果有連續多個標題和其他文章資料，h1-h6標籤就用hgroup包住，和其他文章元資料一起放入header標籤

4、nav元素

nav元素代表頁面的導航連結區域。用於定義頁面的主要導航部分。但是我在有些時候卻情不自禁的想用它，譬如：側邊欄上目錄，麵包屑導航，搜尋樣式，或者下一篇上一篇文章，但是事實上規範上說nav只能用在頁面主要導航部分上。頁尾區域中的連結列表，雖然指向不同網站的不同區域，譬如服務條款，版權頁等，這些footer元素就能夠用了。

nav使用注意：

用在整個頁面主要導航部分上，不合適就不要用nav元素；

5、aside元素

aside元素被包含在article元素中作為主要內容的附屬資訊部分，其中的內容可以是與當前文章有關的相關資料、標籤、名詞解釋等。（特殊的section）

在article元素之外使用作為頁面或站點全域性的附屬資訊部分。最典型的是側邊欄，其中的內容可以是日誌串連，其他組的導航，甚至廣告，這些內容相關的頁面。

aside使用總結：

aside在article內表示主要內容的附屬資訊，
在article之外則可做側邊欄，沒有article與之對應，最好不用。
如果是廣告，其他日誌連結或者其他分類導航也可以用

6、article元素

article元素最容易跟section和div容易混淆，其實article代表一個在文件，頁面或者網站中自成一體的內容，其目的是為了讓開發者獨立開發或重用。譬如論壇的帖子，部落格上的文章，一篇使用者的評論，一個互動的widget小工具。（特殊的section）

除了它的內容，article會有一個標題（通常會在header裡），會有一個footer頁尾。

article使用注意：

自身獨立的情況下：用article
是相關內容：用section
沒有語義的：用div

HTML5的十大新特性

(1)語義標籤

(2)增強型表單

(3)視訊和音訊

4)Canvas繪圖

(5)SVG繪圖

(6)地理定位 Geolocation

(7)拖放API

(8)Web Worker

(9)Web Storage

(10)WebSocket

input與textarea的區別

input是單行文字框，不會換行。通過size屬性指定顯示字元的長度，注意：當使用css限定了寬高，那麼size屬性就不再起作用。value屬性指定初始值，Maxlength屬性指定文字框可以輸入的最長長度。可以通過width和height設定寬高，但是也不會增加行數。

textarea 是多行文字輸入框，文字區中可容納無限數量的文字，無value屬性，其中的文字的預設字型是等寬字型（通常是 Courier），可以通過 cols 和 rows 屬性來規定 textarea 的尺寸，不過更好的辦法是使用 CSS 的 height 和 width 屬性。

用div模擬textarea

在div標籤裡面加入contenteditable="true"

<style>
  .textarea{
    min-height: 100px;
    border: 1px solid #a0b3d6; 
    width: 300px;
    font-size: 14px;
    max-height: 300px;
    overflow-y: auto;
  }
</style>
 
<body>
  <!--用div模擬textarea-->
  <div class="textarea" contenteditable="true">

  </div>
</body>

感謝

萬能的網路

以及勤勞的自己，個人部落格，GitHub

前端面試—HTML面試題彙總