html知識點

  1. html,xml,xhtml之間的區別
  • HTML,超文本標記語言,是語法較為松散的、不嚴格的Web語言;
  • XML,可擴展標記語言,主要用于存儲數據和結構參考
  • XHTML,可擴展超文本標記語言,基于XML,作用與HTML類似,但語法更嚴格參考w3school
  1. 怎樣理解 HTML 語義化

所謂 web 語義化,語義化的含義就是用正確的標簽做正確的事情,html語義化就是讓頁面的內容結構化,便于對瀏覽器、搜索引擎解析;在沒有樣式CCS情況下也以一種文檔格式顯示,并且是容易閱讀的。搜索引擎的爬蟲依賴于標記來確定上下文和各個關鍵字的權重,利于 SEO。使閱讀源代碼的人對網站更容易將網站分塊,便于閱讀維護理解。廣義上來說,不僅要使機器(搜索引擎等)易于理解,也要使人易于理解。在團隊協作開發中,對人的易于理解顯得尤為重要了,一個莫名其妙的 class 會讓后續的開發或者維護者一頭霧水,增加了協作成本。

一些語義化實用建議

  • 根據文檔上下文結構合理的選用最適合表達當前語義的標簽;

  • 盡可能少的使用無語義的標簽div和span;

  • 不要使用純樣式標簽,如:b、font、u等,一切表現改用css設置;

  • h標簽的使用應該根據重要性逐級遞減,沒有斷層。并且一個頁面只能有一個h1;

  • 提高關鍵詞密度,如圖片替換alt,鏈接說明title;

  • 正確使用內容容器,如段落p,列表ul, ol, li, dl, dt, dd

  • 需要強調的文本,可以包含在strong或者em標簽中(瀏覽器預設樣式,能用CSS指定就不用他們),strong默認樣式是加粗(不要用b),em是斜體(不用i);

  • 使用表格時,標題要用caption,表頭用thead,主體部分用tbody包圍,尾部用tfoot包圍。表頭和一般單元格要區分開,表頭用th,單元格用td;

  • 表單域要用fieldset標簽包起來,并用legend標簽說明表單的用途;

  • 每個input標簽對應的說明文本都需要使用label標簽,并且通過為input設置id屬性,在lable標簽中設置for=someld來讓說明文本和相對應的input關聯起來。

  1. 怎樣理解內容與樣式分離的原則
  • 一個網頁分為三個部分:Html——結構,css——表現,javascrip——行為。內容也就是html,樣式也就是css。所以內容和樣式的分離,就是指在網頁編碼的過程中,要將html和css兩大部分分開。
  • 寫 HTML 的時候先不管樣式, 重點放在HTML的結構和語義化上,讓 HTML 能體現頁面結構或者內容。之后再去寫樣式。
    寫 JS 的時候,盡量不要用 JS 去直接操作樣式,而是通過給元素添加刪除class來控制樣式變化
    HTML 內不允許出現屬性樣式,盡量不要出現行內樣式
分離原則的優點
  • 瀏覽器加載網頁頁面速度變快。分離原則下,大部分頁面代碼寫在了CSS當中,頁面體積容量變得更小。
  • 網頁修改設計時,效率、省時。根據html標簽內ID或class的標記,到CSS里找到相應的ID或class,可以快速替換指定位置的樣式,不會破壞頁面架構和其他部分的樣式。典型的應用就是網頁換膚,使用相同的 html 結構,不同的 css 樣式。
  • 更好地被搜索引擎收錄?;趦热菖c樣式分離的原則,html的語義化就是首要考慮的,網頁中語義化的標簽代碼就會更加適合搜索引擎。css樣式的分離,它可以根據不同的瀏覽器,達到顯示效果的統一。保證網頁架構不變形的前提下,放心在不同瀏覽器渲染顯示樣式。
  1. 有哪些常見的meta標簽
    定義針對搜索引擎的關鍵詞:
    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />
    定義對頁面的描述:
    <meta name="description" content="免費的 web 技術教程。" />
    定義頁面的最新版本:
    <meta name="revised" content="David, 2008/8/8/" />
    每 5 秒刷新一次頁面:
    <meta http-equiv="refresh" content="5" />
  2. 文檔聲明的作用?嚴格模式和混雜模式指什么?<!doctype html> 的作用?

文檔聲明是為了告訴瀏覽器,你的 HTML 文檔是用的什么版本的 HTML 來寫的,這樣瀏覽器才能按照你聲明的版本來正確的解析你的 HTML 文檔。嚴格模式(推薦)現在也稱為標準模式,在該模式下,瀏覽器會嚴格按照 HTML 和 CSS 標準來解析、渲染你的文檔。

混雜模式(不推薦)的由來是一個歷史問題。在互聯網早期,網頁一般寫成兩個版本:一個寫給網景公司的 Navigator瀏覽器,一個寫給微軟公司的IE瀏覽器。當W3C制定了 Web 標準后,這兩個瀏覽器不能馬上開始按標準來解析渲染頁面,因為這樣會破壞當時大部分頁面的顯示效果。所以各瀏覽器就引入了混雜模式,在該模式下,瀏覽器會模擬Navigator 4和IE5的非標準行為來解析渲染頁面,這樣做就是為了兼容在W3C標準出現之前就存在的那些“不標準”的頁面。

<!doctype html> 的作用就是讓瀏覽器進入標準模式,使用最新的 HTML5標準來解析渲染頁面;如果不寫,瀏覽器就會進入混雜模式,而這是我們要避免的。

  1. 瀏覽器亂碼的原因是什么?如何解決

亂碼產生的根本原因是你保存的編碼格式和瀏覽器解析時的解碼格式不匹配導致的。 亂碼一般是英文以外的字符才會出現。
為啥純粹的英文不會出現亂碼問題,即使編碼方式和解碼方式不一致?那是因為前面講過了 utf-8、gbk對英文都是采用1個字節的編碼方式,并且使用了相同的碼字。

  1. 常見的瀏覽器有哪些,什么內核
  • IE瀏覽器 內核Trident
  • Chrome 內核 webkit
  • safari 內核 webkit
  • Firefox 內核 Gecko
  • opera 內核 Blink
  1. 列出常見的標簽,并簡單介紹這些標簽用在什么場景
  • h1~h6 用作標題,h1最大 h6最小
  • p 段落,表示大段文字
  • a 鏈接,鏈接到一個地址
  • img 用來展示圖片,自閉合標簽
  • div 用來給頁面劃分區塊,使結構更清晰
  • ul 無序列表
  • ol 有序列表
  • strong 很重要的強調
  • em 強調一下
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容