前端面試—HTML面試題匯總
時間：2023-07-22 17:39:01 | 來源：網站運營
時間：2023-07-22 17:39:01 來源：網站運營
前端面試—HTML面試題匯總：
前端面試—HTML面試題匯總
博客說明文章所涉及的資料來自互聯網整理和個人總結，意在于個人學習和經驗匯總，如有什么地方侵權，請聯系本人刪除，謝謝！
1、語義化
為什么要語義化?
a. 為了在沒有CSS的情況下，頁面也能呈現出很好地內容結構、代碼結構:為了裸奔時好看；
b. 用戶體驗：例如title、alt用于解釋名詞或解釋圖片信息的標簽盡量填寫有含義的詞語、label標簽的活用；
c. 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重；
d. 方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以有意義的方式來渲染網頁；
e. 便于團隊開發(fā)和維護，語義化更具可讀性，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。
2. 寫HTML代碼時，應注意什么？
- 盡可能少的使用無語義的標簽div和span；
- 在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在默認情況下有上下間距，對兼容特殊終端有利；
- 不要使用純樣式標簽，如：b、font、u等，改用css設置。
- 需要強調的文本，可以包含在strong或em標簽中，strong默認樣式是加粗（不要用b），em是斜體（不要用i）；
- 使用表格時，標題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開，表頭用th，單元格用td；
- 表單域要用fieldset標簽包起來，并用legend標簽說明表單的用途
- 每個input標簽對應的說明文本都需要使用label標簽，并且通過為input設置id屬性，在lable標簽中設置for=someld來讓說明文本和相對應的input關聯起來。
- 補充一點：不僅寫html結構時，要用語義化標簽，給元素寫css類名時，也要遵循語義化原則，不要，隨便起個名字就用，那樣等以后，再重構時，非常難讀。最忌諱的是不會英文，用漢語拼音代替。別那么LOW 。
HTML5新增了哪些語義化標簽？
1、header元素header元素代表“網頁“和”section”的頁眉。通常包含H1~H6元素或者hgroup元素。作為整個頁面或者內容塊的標題，也可以包裹一節(jié)的目錄部分，一個搜索框，一個nav，或者任何相關logo。整個頁面沒有限制header元素的個數，可以擁有多個，可以為每個內容塊增加一個header元素
header使用注意：
- 可以是“網頁”或任意“section”的頭部部分；
- 沒有個數限制。
- 如果hgroup或h1-h6自己就能工作的很好，那就不要用header。
2、footer元素footer元素代表“網頁”或“section”的頁腳，通常含有該頁面的一些基本信息，例如：文檔創(chuàng)作者的姓名、文檔的版權信息、使用條款的鏈接、聯系信息等等。。
footer使用注意：
- 可以是“網頁”或任意“section”的底部部分；
- 沒有個數限制，除了包裹的內容不一樣，其他跟header類似。
3、hgroup元素hgroup元素代表“網頁”或“section”的標題，當元素有多個層級時，該元素可以將h1到h6元素放在其內，譬如文章的主標題和副標題的組合
hgroup使用注意：
- 如果只需要一個h1-h6標簽就不用hgroup
- 如果有連續(xù)多個h1-h6標簽就用hgroup
- 如果有連續(xù)多個標題和其他文章數據，h1-h6標簽就用hgroup包住，和其他文章元數據一起放入header標簽
4、nav元素nav元素代表頁面的導航鏈接區(qū)域。用于定義頁面的主要導航部分。但是我在有些時候卻情不自禁的想用它，譬如：側邊欄上目錄，面包屑導航，搜索樣式，或者下一篇上一篇文章，但是事實上規(guī)范上說nav只能用在頁面主要導航部分上。頁腳區(qū)域中的鏈接列表，雖然指向不同網站的不同區(qū)域，譬如服務條款，版權頁等，這些footer元素就能夠用了。
nav使用注意：
- 用在整個頁面主要導航部分上，不合適就不要用nav元素；
5、aside元素aside元素被包含在article元素中作為主要內容的附屬信息部分，其中的內容可以是與當前文章有關的相關資料、標簽、名詞解釋等。（特殊的section）
在article元素之外使用作為頁面或站點全局的附屬信息部分。最典型的是側邊欄，其中的內容可以是日志串連，其他組的導航，甚至廣告，這些內容相關的頁面。
aside使用總結：
- aside在article內表示主要內容的附屬信息，
- 在article之外則可做側邊欄，沒有article與之對應，最好不用。
- 如果是廣告，其他日志鏈接或者其他分類導航也可以用
6、article元素article元素最容易跟section和div容易混淆，其實article代表一個在文檔，頁面或者網站中自成一體的內容，其目的是為了讓開發(fā)者獨立開發(fā)或重用。譬如論壇的帖子，博客上的文章，一篇用戶的評論，一個互動的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的區(qū)別
input是單行文本框，不會換行。通過size屬性指定顯示字符的長度，注意：當使用css限定了寬高，那么size屬性就不再起作用。value屬性指定初始值，Maxlength屬性指定文本框可以輸入的最長長度?？梢酝ㄟ^width和height設置寬高，但是也不會增加行數。
textarea 是多行文本輸入框，文本區(qū)中可容納無限數量的文本，無value屬性，其中的文本的默認字體是等寬字體（通常是 Courier） ，可以通 過 cols 和 rows 屬性來規(guī)定 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
在線咨詢
