HTML基本概念

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

定義

  • HTML，超文本標記語言，是語法較為松散的、不嚴格的Web語言；
  • XML，可擴展標記語言，主要用于存儲數(shù)據(jù)和結(jié)構(gòu)參考；
    設(shè)計宗旨是傳輸數(shù)據(jù)，而非顯示數(shù)據(jù)。
    需自行定義標簽。
  • XHTML，可擴展超文本標記語言，基于XML，作用與HTML類似，但語法更嚴格，包含了所有與XML語法結(jié)合的HTML 4.01元素（參考w3school）。

XML與HTML主要差異：HTML 旨在顯示信息，而 XML 旨在傳輸信息。

XHTML與HTML 類似，但語法更嚴格，如下：

  • XHTML 元素必須被正確地嵌套。
  • XHTML 元素必須被關(guān)閉。
  • 標簽名必須用小寫字母。
  • XHTML 文檔必須擁有根元素
<html>
<head> ... </head>
<body> ... </body>
</html>

怎樣理解 HTML 語義化 怎樣理解內(nèi)容與樣式分離的原則

HTML語義化

  • WHAT：根據(jù)內(nèi)容的的結(jié)構(gòu)化含義，選用合適的標簽。

  • WHY

  • 有利于SEO:搜索引擎的爬蟲是讀不懂無語義的span和div的，因此語義化標簽?zāi)苁古老x抓取更多的有效信息。

  • 有助于爬蟲抓取更多的有效信息（爬蟲是依賴于標簽來確定上下文和各個關(guān)鍵字的權(quán)重）

  • 語義化的HTML在沒有CSS的情況下也能呈現(xiàn)較好的內(nèi)容結(jié)構(gòu)與代碼結(jié)構(gòu)

  • 方便其他設(shè)備的解析(如屏幕閱讀器、盲人閱讀器、移動設(shè)備)

  • 便于團隊開發(fā)和維護

內(nèi)容與樣式分離原則
HTML負責(zé)內(nèi)容與結(jié)構(gòu)，CSS負責(zé)樣式，JS負責(zé)行為，各司其職。即HTML內(nèi)不出現(xiàn)行內(nèi)樣式，JS也不去直接操作樣式（可通過給元素添加刪除class來控制樣式變化）。

有哪些常見的meta標簽

  • http-equiv（模擬HTTP的響應(yīng)消息頭）

    <meta http-equiv="Content-Type" content="text/html;charset=gb_2312-80">
<meta http-equiv="Content-Language" content="zh-CN">
<meta http-equiv="Refresh" content="n;url=http://yourlink">
<meta http-equiv="Expires" content="Mon,12 May 2001 00:20:00 GMT">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="set-cookie" content="Mon,12 May 2001 00:20:00 GMT">
<meta http-equiv="windows-Target" content="_top">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  • name & content（網(wǎng)頁的描述信息）

<meta name="author" content="">
<meta name="description" content="">
<meta name="keywords" content="">

文檔聲明的作用?嚴格模式和混雜模式指什么? < !doctype html> 的作用?

文檔聲明位于文檔中的最前面的位置，用于告知瀏覽器文檔使用哪種 HTML 或XHTML 規(guī)范。

常見的DOCTYPE聲明：

  • HTML 5 <!DOCTYPE html>

  • HTML 4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

  • XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

嚴格模式和混雜模式區(qū)別

  • 嚴格模式：包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。
  • 混雜模式：包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。

<!DOCTYPE html>用于告知瀏覽器用HTML5的語法來解析文檔。

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

代碼在編輯器中保存時使用的編碼方式，與瀏覽器在解析時使用的解碼方式不一致。
html 的 <head>里添加<meta charset="編碼方式">保持與編輯器中設(shè)置的編碼方式一致即可解決。
（常見的字符編碼方式資料參考）

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

  • IE
    IE 使用 Trident ，閉源，只有微軟的 IE 在使用，只能用于Windows平臺。存在與W3C標準脫節(jié)、大量Bug未修復(fù)的問題。
  • Firefox
    Firefox 使用 Gecko ，就是以前的 Netscape 使用的 Mozilla 引擎，Netscape 倒了以后，成立了Mozilla基金會，將這個引擎完全重寫，開源。此外Gecko也是一個跨平臺內(nèi)核，可以在Windows、BSD、Linux和Mac OS X中使用。
  • Safari
    Safari 使用的是蘋果公司根據(jù) KHTML 修改來的 WebKit），閉源。 WebKit本身主要是由兩個引擎構(gòu)成的，一個正是渲染引擎“WebCore”，另一個則是javascript解釋引擎“JSCore”，它們均是從KDE的渲染引擎KHTML及javascript解釋引擎KJS衍生而來。
  • Chrome
    谷歌Chrome/Chromium瀏覽器從08年創(chuàng)始至今一直使用蘋果公司的WebKit作為瀏覽器內(nèi)核原型，是WebKit的一個分支，我們可以稱之為Chromium引擎。在13年發(fā)布的Chrome 28.0.1469.0版本開始，Chrome放棄Chromium引擎轉(zhuǎn)而使用最新的Blink引擎（基于WebKit2——蘋果公司于2010年推出的新的WebKit引擎），Blink對比上一代的引擎精簡了代碼、改善了DOM框架，也提升了安全性。

列出常見的標簽，并簡單介紹這些標簽用在什么場景

  • 換行
<br/>
  • 橫線
<hr/>
  • 文本突出
<mark>Text</mark>
<strong>Text</strong>
<em>Text</em>>
  • 標題1~6
<h1>h1</h1>
  • 段落
<p>This is a paragragh.</p>
  • 塊
<div>Text</div>
  • 圖片（自閉合標簽在HTML 5標準中可不加“/”，XHTML必須加）
![](xxx.jpg)
  • 有序列表
 <ol>
       <li>Coffee</li>
       <li>Tea</li>
       <li>Milk</li>
 </ol>
  • 無序列表
 <ul>
       <li>Coffee</li>
       <li>Tea</li>
       <li>Milk</li>
 </ul>

  • 標題：內(nèi)容

    <dl>
  <dt>商品名稱:</dt>
  <dd>青花瓷</dd>
  <dt>特征:</dt>
  <dd>白色</dd>
  <dd>圓口</dd>
  <dt>商品介紹</dt>
  <dd>這是一個年代久遠的瓷器，很貴，易碎</dd>
</dl>

  • 超鏈接

<a target="_blank" >百度</a>
<a href="mailto:xxx@qq.com">聯(lián)系我們</a>
<a href="#">聯(lián)系我們</a>
  • 按鈕
<button>按鈕</button>

  • table

    <table cellpadding="4" cellspacing="10" border="1" width="100%">
    <thead>
        <caption>Kaisla's Table</caption>
        <colgroup>
        <col span="2" align="left">
        <col align="right">
      </colgroup>
        <th>A</th>
        <th>B</th>
        <th>C</th>
    </thead>
    <tbody>
        <tr>
            <td align="right">00</td>
            <td valign="bottom">01</td>
            <td>02</td>
        </tr>
        <tr>
            <td>10</td>
            <td>11</td>
            <td>12</td>
        </tr>
    </tbody>
    <tfoot>
        <td>20</td>
        <td>21</td>
        <td>22</td>
    </tfoot>
</table>
最后編輯于 ：
?著作權(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)容

  • HTML、XML、XHTML 有什么區(qū)別 1.HTML 是用來描述網(wǎng)頁的一種語言，指的是超文本標記語言 (Hype...
    饑人谷_牛牛閱讀 833評論 0贊 2
  • HTML、XML、XHTML有什么區(qū)別？ XMLXML是The Extensible Markup Languag...
    zx9426閱讀 527評論 0贊 1
  • 1.meta標簽 元素可提供有關(guān)頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述...
    姚小帥閱讀 398評論 0贊 1
  • 1.HTML、XML、XHTML的區(qū)別 HTML:超文本標記語言(Hyper Text Markup Langua...
    IT男的成長記錄閱讀 333評論 0贊 1
  • HTML、XML、XHTML 有什么區(qū)別 HTML全名為**超文本標記語言**（Hyper Text Markup...
    別讓我一個人醉_1fa7閱讀 572評論 0贊 1

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