HTML知識點(diǎn)1

1. HTML、XML、XHTML 有什么區(qū)別

HTML被設(shè)計用來顯示數(shù)據(jù)，焦點(diǎn)是數(shù)據(jù)的外觀
XML被設(shè)計用來描述數(shù)據(jù)，焦點(diǎn)是數(shù)據(jù)的內(nèi)容，并且標(biāo)簽沒有自定義，全部需要自己定義
XHTML是居于可擴(kuò)展標(biāo)記語言的標(biāo)記語言，也是HTML的一個子集，格式比HTML更加嚴(yán)謹(jǐn)

2. 怎樣理解HTML的語義化

語義化是指根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化），選擇合適的標(biāo)簽（代碼語義化），便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時，讓瀏覽器的爬蟲和機(jī)器很好的解析。

語義化的目的是

  • 為了在沒有CSS的情況下，頁面也能呈現(xiàn)出很好地內(nèi)容結(jié)構(gòu)、代碼結(jié)構(gòu)（為了裸奔時好看）
  • 提升用戶體驗：例如title、alt用于解釋名詞或解釋圖片信息、label標(biāo)簽的活用
  • 有利于SEO「Search Engine Optimization」：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重
  • 方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動設(shè)備）以有意義的方式來渲染網(wǎng)頁；
  • 便于團(tuán)隊開發(fā)和維護(hù)，語義化更具可讀性，是下一步網(wǎng)頁設(shè)計的重要動向，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊都遵循這個標(biāo)準(zhǔn)，可以減少差異化。

如何語義化

  • 盡可能少的使用無語義的標(biāo)簽div和span；
  • 在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在默認(rèn)情況下有上下間距，對兼容特殊終端有利；
  • 不要使用純樣式標(biāo)簽，如：b、font、u等，改用css設(shè)置。
  • 需要強(qiáng)調(diào)的文本，可以包含在strong或者em標(biāo)簽中（瀏覽器預(yù)設(shè)樣式，能用CSS指定就不用他們），strong默認(rèn)樣式是加粗（不要用b），em是斜體（不用i）；
  • 使用表格時，標(biāo)題要用caption，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開，表頭用th，單元格用td；
  • 表單域要用fieldset標(biāo)簽包起來，并用legend標(biāo)簽說明表單的用途；
  • 每個input標(biāo)簽對應(yīng)的說明文本都需要使用label標(biāo)簽，并且通過為input設(shè)置id屬性，在lable標(biāo)簽中設(shè)置for=someld來讓說明文本和相對應(yīng)的input關(guān)聯(lián)起來。

擴(kuò)展閱讀
HTML 5的革新——語義化標(biāo)簽(一)
HTML 5的革新——語義化標(biāo)簽(二)

3. 怎樣理解內(nèi)容與樣式分離的原則

指的的HTML上只應(yīng)該設(shè)置內(nèi)容與結(jié)構(gòu)，不使設(shè)置具體樣式

這樣的做的好處是

  • 利用CSS中的重用、組合、繼承等特性減少樣式的代碼量，樣式結(jié)構(gòu)上非常清晰；
  • 頁面視覺有變動只需要修改相應(yīng)的CSS文件，不用或者基本上不用改動html文檔中的標(biāo)簽結(jié)構(gòu)；
  • 方便JavaScript腳本編寫，比如用js控制標(biāo)簽的className來方便的、動態(tài)的改變元素的樣式，而不是直接修改其具體樣式
  • 適合產(chǎn)品級、模塊化的開發(fā)
  • 提高可讀性，方便后續(xù)維護(hù)、修改和替換

樣式應(yīng)該單獨(dú)在CSS中設(shè)置，在html中引用
使用JavaScript的地方，同樣應(yīng)當(dāng)如此

4. 有哪些常見的meta標(biāo)簽

meta的官方定義:
meta標(biāo)簽提供關(guān)于HTML文檔的元數(shù)據(jù)。元數(shù)據(jù)不會顯示在頁面上，但是對于機(jī)器是可讀的。它可用于瀏覽器（如何顯示內(nèi)容或重新加載頁面），搜索引擎（關(guān)鍵詞），或其他 web 服務(wù)。

  • <meta charset="utf-8">
    申明編碼，避免網(wǎng)頁內(nèi)的漢字變成亂碼

  • <meta name="Keyword" content="關(guān)鍵字">
    描述網(wǎng)頁關(guān)鍵字，用于搜索引擎搜索

  • <meta name="Description" content="網(wǎng)頁內(nèi)容">
    不超過150字，且能準(zhǔn)確描述網(wǎng)頁內(nèi)容的標(biāo)簽

  • <meta name="robots" content="index,flow">
    robot terms是使用一組用","分開的值

  1. all：文件將被檢索，且頁面上的鏈接可以被查詢
  2. none：文件將不被檢索，且頁面上的鏈接不可以被查詢
  3. index：文件將被檢索
  4. follow：頁面上的鏈接可以被查詢
  5. noindex：文件將不被檢索
  6. nofollow：頁面上的鏈接不可以被查詢

  • <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    根據(jù)不同設(shè)備，以及窗口大小調(diào)整內(nèi)容

  • <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    選擇瀏覽器內(nèi)核，優(yōu)先選擇chrome內(nèi)核，如果不支持，則優(yōu)先選擇edge版的IE內(nèi)核

5. 文檔聲明的作用?嚴(yán)格模式和混雜模式指什么?<!doctype html> 的作用?

  • web中有許多的文檔類型，就算是html，也有不同的版本，所以需要文檔開頭說明文檔類型，讓瀏覽器能正確顯示文檔
    <!doctype html> 處于<html>標(biāo)簽之前，告知瀏覽器以何種形式渲染文檔

  • 嚴(yán)格排版模式會使瀏覽器用支持的最高web標(biāo)準(zhǔn)來解析頁面，是一種嚴(yán)格要求的DTD(Document Type Definition)不允許使用任何表現(xiàn)層的標(biāo)識和屬性

  • 混雜模式是一種向后兼容的解析方法，通常模擬老式瀏覽器的行為，以防止老站點(diǎn)無法工作

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

  • 造成瀏覽器亂碼的主要是由于，html源代碼中的文字內(nèi)容與html編碼不同造成的
  • 加入<meta charset>編碼標(biāo)簽規(guī)定好編碼可以避免此種原因造成的亂碼

7.常見的瀏覽器有哪些，什么內(nèi)核

Trident內(nèi)核 ： IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內(nèi)核   ： Netscape6及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey等
Presto內(nèi)核  ： Opera7及以上。 [Opera內(nèi)核原為：Presto，現(xiàn)為：Blink;]
Webkit內(nèi)核  ： Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

8.列出常見的標(biāo)簽，并簡單介紹這些標(biāo)簽用在什么場景

<html>    開始標(biāo)簽
  <head>    網(wǎng)頁上的控制信息
      <title>  頁面標(biāo)題  </title>
  </head>

  <body>    包括所有 頁面顯示的內(nèi)容
       <h1~6></h1~6>    頁面標(biāo)題，1~6重要程度依次遞減

      <p></p>    段落，前后若有其他，執(zhí)行前后換行，并空開一行，保證自身是一個整體

      <div></div>    層標(biāo)簽（默認(rèn)占一行）

      <span></span>    層標(biāo)簽（默認(rèn)用多大空間占多大空間）

      <ol>    有序列表
        <li>內(nèi)容</li>
        <li>內(nèi)容</li>
      </ol>

      <ul>    無序列表
        <li>內(nèi)容</li>
        <li>內(nèi)容</li>
      </ul>

      ![](圖片地址)    圖片標(biāo)簽，圖片無法加載時會顯示alt中文字

      <a  target="_blank" title="xxx">xxx.com</a>    超鏈接

      <dl>    用于展示一系列 “標(biāo)題:內(nèi)容... ”的場景
        <dt>商品名稱:</dt>
        <dd>青花瓷</dd>
        <dt>特征:</dt>
        <dd>白色</dd>
        <dd>圓口</dd>
        <dt>商品介紹</dt>
        <dd>這是一個年代久遠(yuǎn)的瓷器，很貴，易碎</dd>
      </dl>

      <button>點(diǎn)我</button>    按鈕

      <iframe src="http://jirengu.com" name="myPage"></iframe>    嵌入頁面

  </body>
</html>    結(jié)束標(biāo)簽
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,121評論 1贊 92
  • Web標(biāo)準(zhǔn)不是某一個標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁主要由三個部分組成：結(jié)構(gòu)、表現(xiàn)和行為。 結(jié)構(gòu)標(biāo)準(zhǔn)語言主要包括H...
    毛毛獨(dú)角獸閱讀 288評論 0贊 0
  • 源自SeeYouBug博客 地址為：http://www.cnblogs.com/SeeYouBug 一、HTML...
    欲淚成雪閱讀 1,304評論 0贊 15
  • 問答題1 /72瀏覽器頁面有哪三層構(gòu)成，分別是什么，作用是什么?參考答案構(gòu)成：結(jié)構(gòu)層、表示層、行為層分別是：HTM...
    _Yfling閱讀 1,300評論 0贊 23
  • 曾經(jīng)聽說過一個很著名的實驗，將一只青蛙扔在一鍋沸水中，青蛙會一躍而起，馬上跳出逃生。而將青蛙扔在一鍋冷水中，逐漸加...
    芝士尾巴閱讀 347評論 0贊 3

友情鏈接更多精彩內(nèi)容