HTML常見問題

HTML語義化

1. 解釋：用正確的標籤做正確的事。讓文檔脫離CSS樣式，舉例h1標題，而非CSS樣式加粗。
2. 作用：

• 對人，增強可讀性，便於開發人員理解網頁內容和樣式，便於開發。
• 對機器，利於SEO和網絡爬蟲爬取信息，利於特殊設備（讀屏軟件）
• 對於開發者，減少CSS樣式代碼，頁面渲染加載更快。

3. 常見語義化標籤

• <header>,<nav>,<aside>,<article>,<section>,<footer>
• 語氣加重用<strong>而非<b>或者<em>而非<i>

4. section

• 網頁內容進行分塊
• 與div不同，div是頁面容器。
• section必須要有標題和內容。

移動端<meta viewport>

<meta name="viewport" content="width=device-width,initail-scale=1.0,maxinum-scale=1.0,mininim-scale=1.0,user-scalable=no">

width=device-width,屏幕寬度
initail-scale,初始比例
maxinum-scale最大比例
mininim-scale最小比例
user-scalable是否允許用戶縮放

塊級元素、行內元素、空元素

CSS規定，元素的display屬性決定元素時塊級元素或行內元素。塊級元素爲block，行內元素爲inline，本身沒有內容的爲空元素

• 塊級元素：換行、可自行設置寬高、若不設置則繼承自父級元素。
  常見塊級元素div,p,li,ul,ol
• 行內元素：不換行、自適應寬高
  常見行內元素span,b,img,input
• 行內塊級元素：不換行還可自行設置高度
• 空元素：元素本身無意義
  常見空元素input,img,br,hr

文檔標記類型

1. <!DOCTYPE>
   文檔標記類型，用於聲明正確的HTML版本，便於瀏覽器解析執行
2. 標準模式和兼容模式

• 標準模式
  瀏覽器最高標準執行
• 兼容模式
  瀏覽器向後兼容，模擬老式瀏覽器的行爲，防止網頁錯誤

3. 爲什麼HTML5爲<!DOCTYPE>
   HTML5不引用DTD，但也需要規範文檔

SEO的方法

搜索引擎優化（Search Engine Optimization）

1. 合理的title,description,keywords，權重值主鍵減小
2. 語義化HTML，符合W3C標準，重要的HTML放在前面
3. 重要內容不使用Js輸出
4. 不使用iframe
5. 網站提速

iframe

1. HTML5新增，內聯框架
2. 缺點

• 不利於SEO爬取
• 阻塞主頁面的onload事件，onload事件需要等iframe加載完後觸發，可動態設置src來解決
• 與主頁面共享連接池，影響性能

3. 替代
   Ajax

區分標籤

1. title,h1
   均是標題樣式
   title單純的標題
   h1有層次分明的標題
2. b,strong
b加粗顯示
   strong語氣強調
3. i,em
i斜體樣式
   em語氣強調
4. input和textarea

• input是單行空元素，textarea多行閉合元素
• input可自定義類型，textarea只能文本

html和htm

1. 沒有本質區別，用於不同環境

• html在Linux系統下
• htm兼容早期DOS系統（8+3）

DTD

文檔定義類型（Document Type Definition）
約束通用標記語言