HTML相關(guān)知識點

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

HTML (HyperText Markup Language), 直譯過來即 超文本| 標(biāo)記| 語言。
  • Hyper Text “超文本”，就是指頁面內(nèi)可以包含圖片、鏈接、音樂、程序等 非文字元素。
  • Markup “標(biāo)記” ，就是指用特定的標(biāo)記符號要標(biāo)記要顯示的內(nèi)容的各個部分，如標(biāo)題。
  • 超文本標(biāo)記語言，是標(biāo)準(zhǔn)通用語言下的一種應(yīng)用，也是一種規(guī)范、標(biāo)準(zhǔn)，被設(shè)計出來用來顯示數(shù)據(jù)。
    是語法松散的，不嚴(yán)格的web語言
  • HTML文本就是我們通常所說的網(wǎng)頁，擴展名可以是html或者h(yuǎn)tm。
XML(Extensible Markup Language), 直譯過來即 可擴展| 標(biāo)記| 語言。
  • XML是標(biāo)準(zhǔn)通用標(biāo)記語言的子集，是一種用于標(biāo)記電子文件使其 具有結(jié)構(gòu)性的標(biāo)記語言，它被設(shè)計用來傳輸和存儲數(shù)據(jù)，是對超文本標(biāo)記語言的補充。
  • 它能夠更精確地聲明內(nèi)容，方便跨越多種平臺的更有意義的搜索結(jié)果。它提供了一種描述結(jié)構(gòu)數(shù)據(jù)的格式，簡化了網(wǎng)絡(luò)中數(shù)據(jù)交換和表示，使得代碼、數(shù)據(jù)和表示分離，并作為數(shù)據(jù)交換的標(biāo)準(zhǔn)格式，因此它常被稱為智能數(shù)據(jù)文檔，文件擴展名為xml。
XHTML(Extensible HyperText Markup Language), 直譯過來即 可擴展| 超文本| 標(biāo)記| 語言。
  • XHTML 是基于可擴展標(biāo)記語言(XML)，作用與HTML類似，但語法更嚴(yán)格。
  • XHTML就是一個扮演著類似HTML的角色的可擴展標(biāo)記語言（XML），所以XHTML結(jié)合了XML數(shù)據(jù)轉(zhuǎn)化特性及大多數(shù)HTML 的簡單特性。
總結(jié)

HTML、XML和XHTML都是標(biāo)準(zhǔn)通用標(biāo)記語言的一個子集。HTML被設(shè)計用來顯示數(shù)據(jù)，其焦點是數(shù)據(jù)的外觀；XML被設(shè)計用來傳輸和存儲數(shù)據(jù)，其焦點是數(shù)據(jù)的內(nèi)容；XHTML是更嚴(yán)格更純凈的 HTML 版本，是作為一種 XML 應(yīng)用被重新定義的 HTML，設(shè)計的目的是為了取代HTML以適應(yīng)未來網(wǎng)絡(luò)更多的需求。它們都可以用來開發(fā)網(wǎng)頁，但就目前來看，網(wǎng)頁開發(fā)中HTML還是占絕對的主流

2. 怎么理解HTML語義化

裸奔的時候也能理解網(wǎng)頁的內(nèi)容，就算是盲人也可以通過讀屏器理解網(wǎng)頁的內(nèi)容。
  • 什么是HTML語義化？

    根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容的語義化），選擇合適的標(biāo)簽（代碼語義化）便于開發(fā)者閱讀，同時讓游覽器的爬蟲和機器很好的解析。用正確的標(biāo)簽做正確的事情。

  • 為什么要HTML語義化？

    為了在沒有CSS的情況下，頁面也能呈現(xiàn)出很好地內(nèi)容結(jié)構(gòu)、代碼結(jié)構(gòu):為了裸奔時好看；

    用戶體驗：例如title、alt用于解釋名詞或解釋圖片信息、label標(biāo)簽的活用；

    有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重；

    方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動設(shè)備）以意義的方式來渲染網(wǎng)頁，就算是盲人也可以
    通過讀屏器理解網(wǎng)頁的內(nèi)容；

    便于團隊開發(fā)和維護，語義化更具可讀性，遵循W3C標(biāo)準(zhǔn)，可以減少差異化。

  • HTML語義化很重要，寫代碼的時候要注意什么？

    盡可能少的使用無語義的標(biāo)簽div和span；

    在語義不明顯時，既可以使用div或者p時，盡量用p, 因為p在默認(rèn)情況下有上下間距，對兼容特殊終端有利；

    不要使用純樣式標(biāo)簽，如：b、font、u等，改用css設(shè)置；

    需要強調(diào)的文本，可以包含在strong或者em標(biāo)簽中（瀏覽器預(yù)設(shè)樣式，能用CSS指定就不用他們），strong默認(rèn)樣式是加粗（不要用b），em是斜體（不用i）；

    使用表格時，表頭用thead，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開，表頭用th，單元格用td；

    每個input標(biāo)簽對應(yīng)的說明文本都需要使用label標(biāo)簽，并且通過為input設(shè)置id屬性，在lable標(biāo)簽中設(shè)置for=someld來讓說明文本和相對應(yīng)的input關(guān)聯(lián)起來。

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

  • 理解了HTML語義化，所以我們要內(nèi)容與樣式分離，整套文檔就變得清晰易讀、易維護！不管頁面多么復(fù)雜，頁面就是HTML， JS， CSS。

  • 寫HTML的時候先不管樣式，終點放在結(jié)構(gòu)和語義化上，讓HTML能體現(xiàn)頁面結(jié)構(gòu)或者內(nèi)容。之后再去寫樣式。盡可能少的使用無語義的標(biāo)簽，如div和span。

  • 寫JavaScript的時候，盡量不要用JS去直接操作樣式，而是通過給元素添加刪除class來控制樣式變化。

  • HTML內(nèi)不允許出現(xiàn)屬性樣式，盡量不要出現(xiàn)行內(nèi)樣式。

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

什么是meta標(biāo)簽？通常所說的META標(biāo)簽，是在HTML網(wǎng)頁源代碼中一個重要的html標(biāo)簽。META標(biāo)簽用來描述一個HTML網(wǎng)頁文檔的屬性，例如作者、日期和時間、網(wǎng)頁描述、關(guān)鍵詞、頁面刷新，編碼格式等。

常見的meta標(biāo)簽

  • <meta charset="utf-8">， 聲明編碼格式。

  • <meta http-equiv="X-UA-Compatible" content="IE=dege, chrome=1">，優(yōu)先使用IE最新版本和Chrome(雙核）。注解：http-equiv，超文本傳輸協(xié)議標(biāo)題信息。

  • <meta name="keywords" content="your tags">， 頁面關(guān)鍵詞（搜索引擎優(yōu)化）。

  • <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0>，移動設(shè)備。

  • <meta name="description" content="your description">， 頁面描述內(nèi)容（搜索引擎優(yōu)化）。

  • <meta name="robots" content="index,follow">， 搜索引擎索引方式。
    1. all：文件將被檢索，且頁面上的鏈接可以被查詢；
    2. none：文件將不被檢索，且頁面上的鏈接不可以被查詢；
    3. index：文件將被檢索；
    4. follow：頁面上的鏈接可以被查詢；
    5. noindex：文件將不被檢索；
    6. nofollow：頁面上的鏈接不可以被查詢。

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

  • <!DOCTYPE>就是告訴游覽器用什么標(biāo)準(zhǔn)來解析渲染頁面。

  • 嚴(yán)格模式，頁面添加了<!DOCTYPE>，那么就等同于開啟了標(biāo)準(zhǔn)模式，那么瀏覽器就得老老實實的按照W3C的標(biāo)準(zhǔn)解析渲染頁面，這樣一來，你的頁面在所有的瀏覽器里顯示的就都是一個樣子了。
    混雜模式，頁面不添加<!DOCTYPE>, 就是瀏覽器按照自己的方式解析渲染頁面，那么，在不同的瀏覽器就會顯示不同的樣子。

  • <！DOCTYPE html>就是告訴游覽器，用html5標(biāo)準(zhǔn)解析渲染頁面。

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

產(chǎn)生亂碼的原因一般是文檔沒有聲明自身的編碼格式，導(dǎo)致瀏覽器錯誤地使用了與文檔不同的解碼方式，從而導(dǎo)致內(nèi)容無法正常顯示一定要清楚文件保存時的編碼方式并在文件內(nèi)聲明。

如何解決游覽器亂碼。1， 在<meta charset="編碼格式">中聲明編碼格式。2， 在所用游覽器中設(shè)置編碼格式。

<meta charset="編碼格式">
常見的編碼格式有：ASCII、ISO-8859-1、GB2312、GBK、UTF-8、UTF-16。
接觸較多常用的編碼格式 UTF-8， 用在網(wǎng)頁上可以統(tǒng)一頁面顯示中文簡體繁體及其它語言。

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

  • Trident， IE 游覽器內(nèi)核。
  • Gecko，Mozilla Firefox火狐游覽器內(nèi)核。
  • Webkit，蘋果的safari和Google游覽器的內(nèi)核。
  • Presto, Opera游覽器內(nèi)核。

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

  • 文本樣式相關(guān)標(biāo)簽
    <h1> </h1>, <h2> </h2>, <h3> </h3>, <h4> </h4>, <h5> </h5>, <h6> </h6>, 標(biāo)題。
    <p> </p>, 段落。
    <strong> </strong>, <em> </em>，強調(diào)。

  • 分區(qū)元素
    <div> </div>, 給頁面劃分區(qū)塊，讓結(jié)構(gòu)更清晰。
    <span> </span>.

  • 在頁面中顯示圖片
    <img>

  • 鏈接元素
    <a href=" "> </a>，鏈接。

  • 列表元素
    ul（unordered list）無序列表，直接子元素為 li, 可以嵌套，顯示并列的內(nèi)容。
    ol(ordered list ) 有序列表, 直接子元素為 li, 可以嵌套，顯示帶步驟或編號的并列內(nèi)容。
    dl (definition list)定義列表 ， 子元素為dt, dd, 展示一系列“標(biāo)題：內(nèi)容”的場景。

  • 表單元素
    <form>, </form> 和 <input >配合使用。

  • 表格
    <table> </table>用來展示表格，不要用來做布局，thead、tbody，tfoot可省略。

  • 按鈕元素
    <button> </button>, <input type=“button”>按鈕；
    <input type=“submit”>確認(rèn) ；
    <input type=“reset”>重置；
    <input type=“image” src=""> 圖片按鈕。

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

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

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