前端面試—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 contenteditable="true">
</div>
</body>
感謝
萬能的網路
以及勤勞的自己，個人博客，GitHub
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/113514.html
標籤：Java
上一篇：Java方法