HTML知識點小結(jié)

一、什么是HTML？

HTML是用來描述網(wǎng)頁的一種語言

  • HTML指的是超文本標記語言（Hyper Text Markup Language）
  • HTML不是一種編程語言，而是一種標記語言（markup language）
  • 標記語言是一套標記標簽（markup tag）
  • HTML使用標記標簽來描述網(wǎng)頁

重點：HTML是一種標記語言（超文本標記語言）而非編程語言

二、HTML、XML、XHTML之間的區(qū)別

  • HTML：超文本標記語言，語法松散、不嚴格的標記語言
  • XML：可擴展標記語言，主要用于存儲數(shù)據(jù)和結(jié)構(gòu)
  • XHTML：可擴展超文本標記語言，基于XML，作用與HTML類似，語法更嚴謹更純凈的HTML版本

HTML與XHTML最主要的不同：

  • XHTML 元素必須被正確地嵌套
  • XHTML 元素必須被關(guān)閉
  • 標簽名必須使用小寫字母
  • XHTML 文檔必須擁有根元素

三、HTML語義化

1. 什么是語義化

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

2. 為什么要語義化？

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

  • 清晰的頁面結(jié)構(gòu)
    語義化的HTML在沒有CSS的情況下也能呈現(xiàn)較好的內(nèi)容結(jié)構(gòu)和代碼結(jié)構(gòu)，增強頁面的可讀性

  • 便于團隊開發(fā)和維護
    在團隊中大家遵循同一個標準，使用規(guī)范的代碼，方便開發(fā)和維護，提高開發(fā)效率

  • 方便其他設(shè)備的解析

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

  • HTML——結(jié)構(gòu)
    寫HTML的時候先不管樣式，重點放在HTML的結(jié)構(gòu)和語義化上，讓HTML能體現(xiàn)頁面結(jié)構(gòu)和內(nèi)容
  • CSS——表現(xiàn)
    寫完HTML的結(jié)構(gòu)和內(nèi)容后，再進行CSS樣式的編寫，減少HTML與CSS契合度（即內(nèi)容與樣式分離）
  • JavaScrip——行為
    寫JS的時候，盡量不要用JS去直接操作樣式，而是通過給元素添加刪除class來控制樣式變化（即行為分離）

樣式與結(jié)構(gòu)分離的優(yōu)點：

  • 瀏覽器加載網(wǎng)頁頁面速度變快。分離原則下，頁面樣式的代碼寫在了CSS當中，頁面體積容量變得更小
  • 修改網(wǎng)頁樣式時，更有效率、更省時間。根據(jù)html標簽內(nèi)ID或class的標記，到CSS里找到相應(yīng)的ID或class，可以快速替換指定位置的樣式，不會破壞頁面架構(gòu)和其他部分的樣式
  • 可以確保網(wǎng)頁都能平穩(wěn)退化。具備CSS支持的瀏覽器固然可以把網(wǎng)頁呈現(xiàn)的美輪美奐，不支持或禁用了CSS功能的瀏覽器同樣可以把網(wǎng)頁的內(nèi)容按照正確的內(nèi)容結(jié)構(gòu)顯示出來

五、有哪些常見的meta標簽

1. meta標簽定義和用法

  • <meta>元素可提供有關(guān)頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關(guān)鍵詞
  • <meta>標簽位于文檔的頭部，不包含任何內(nèi)容；<meta>標簽的屬性定義了與文檔相關(guān)聯(lián)的名稱/值對

2. 常見meta標簽用法

<meta charset="utf-8">
編碼方式
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
雙核瀏覽器
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
用于移動端的展示合理
<meta name="keywords" content="前端 饑人谷">
網(wǎng)頁關(guān)鍵字，利于搜索
<meta name="description" content="最有愛的前端學習社區(qū)">
搜索引擎優(yōu)化
<meta name="keywords" content=""> 
向搜索引擎說明你的網(wǎng)頁的關(guān)鍵詞  
<meta name="description" content=""> 
告訴搜索引擎你的站點的主要內(nèi)容  
<meta name="author" content="你的姓名"> 
告訴搜索引擎你的站點的制作的作者  
<meta http-equiv="Content-Type" content="text/html";charset=utf-8"> 
指定字符集  
<meta http-equiv="refresh" content="n;url="> 
定時讓網(wǎng)頁在指定的時間n內(nèi)跳轉(zhuǎn)  
<meta http-equiv="pragma" content="no-cache"> 
禁用緩存  
<meta http-equiv="set-cookie" content="Mon,12 May 2001 00:20:00 GMT"> 
cookie設(shè)定，如果網(wǎng)頁過期，存盤的cookie將被刪除。需要注意的也是必須使用GMT時間格式

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

1. Doctype作用是什么？

  • <!DOCTYPE>聲明叫做文件類型定義（DTD）,聲明的作用是為了告訴瀏覽器該文件的類型。讓瀏覽器解析器知道應(yīng)該用哪個規(guī)范來解析文檔。
  • <!DOCTYPE>聲明必須在HTML文檔的第一行，這并不是一個HTML標簽。

2. 嚴格模式與混雜模式如何區(qū)分？它們有何意義？

嚴格模式：又稱標準模式，是指瀏覽器按照W3C標準解析代碼
混雜模式：又稱怪異模式或兼容模式，是指瀏覽器用自己的方式解析代碼
如何區(qū)分：瀏覽器解析時到底使用嚴格模式還是混雜模式，與網(wǎng)頁中的DTD直接相關(guān)

  • 如果文檔包含嚴格的 DOCTYPE ，那么它一般以嚴格模式呈現(xiàn)。**（嚴格 DTD ——嚴格模式） **
  • 包含過渡 DTD 和 URI 的 DOCTYPE ，也以嚴格模式呈現(xiàn)，但有過渡 DTD 而沒有 URI （統(tǒng)一資源標識符，就是聲明最后的地址）會導致頁面以混雜模式呈現(xiàn)。**（有 URI 的過渡 DTD ——嚴格模式；沒有 URI 的過渡 DTD ——混雜模式） **
  • DOCTYPE 不存在或形式不正確會導致文檔以混雜模式呈現(xiàn)。（DTD不存在或者格式不正確——混雜模式）
  • HTML5 沒有 DTD ，因此也就沒有嚴格模式與混雜模式的區(qū)別，HTML5 有相對寬松的語法，實現(xiàn)時，已經(jīng)盡可能大的實現(xiàn)了向后兼容。（ HTML5 沒有嚴格和混雜之分）

意義：嚴格模式與混雜模式存在的意義與其來源密切相關(guān)，如果說只存在嚴格模式，那么許多舊網(wǎng)站必然受到影響，如果只存在混雜模式，那么會回到當時瀏覽器大戰(zhàn)時的混亂，每個瀏覽器都有自己的解析模式。

七、瀏覽器亂碼的原因是什么？

1. 通用編碼方式

  • ASCII，全稱美國標準信息交換代碼（American Standard Code for Information Interchange）的縮寫, 針對英語設(shè)計
  • UTF-8（8-bit Unicode Transformation Format）是一種針對Unicode的可變長度字符編碼，又稱萬國碼?？捎糜陲@示中文簡體繁體及其它語言（如英文，日文，韓文）
  • GBK，中國制定的一套漢字編碼規(guī)則，用2個字節(jié)來表示一個漢字，總共可以覆蓋2萬多個文字
  • ISOLatin-1，由于ASCII字符集不包括德、法語中的特殊拉丁字符，因此歐洲人發(fā)明了ISO 8859-1Latin 1，簡稱為ISOLatin-1。它對ASCII做了個擴充，涵蓋拉丁字母表中特殊語言字符

2. 瀏覽器亂碼的原因

亂碼產(chǎn)生的根本原因是所保存的編碼格式和瀏覽器解析時的解碼格式不匹配導致的

注：純粹的英文即時編碼方式和解碼方式不一致也不會出現(xiàn)亂碼問題，那是因為UTF-8、GBK對英文都是采用1個字節(jié)的編碼方式，并且使用了相同的碼子

3. 如何解決瀏覽器亂碼

  • 首先，在文件保存的時候要清楚是用哪種編碼方式保存的。
  • 如果你的文件是保存為UTF-8格式，那么一定要在html 的 <head>里添加<meta charset="utf-8">（這句話的意思是告訴瀏覽器在打開這個頁面的時候不要去猜了，直接用utf-8去解碼）
  • 同理，如果你的文件保存為gbk格式，一定在文件里添加<meta charset="gbk">即可

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

瀏覽器 內(nèi)核
IE		 Trident
Firefox		 Gecko
Chrome		 Webkit
Safari		 Webkit
Opera		 Presto

九、HTML常用標簽

標簽名字 標簽作用 備注
<h1-h6> 標題標簽 <h1>標題</h1>
<p> 段落標簽，文本內(nèi)容 <p>段落</p>
<a> 定義一個超鏈接 <a >百度</a>
<img> 定義圖像 ![](tupian.jpg)
<div> 定義文檔中的分區(qū) <div>文檔中分區(qū)</div>
<button> 定義按鈕 <button>點我</button
<iframe> 用于嵌入一個頁面 <iframe src="https://jirengu.com/" name="myPage"></iframe>
<ol> <li> 定義有序列表
<ul> <li> 定義無序列表
<dl> <dt> <dd> 自定義列表
<table> <tr> <th> 定義表格
最后編輯于 ：
?著作權(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標簽，對HTML中常見到的一些問題進行小結(jié)。 HTML、XML、XHTML 有什么區(qū)別？ HTM...
    湯初景閱讀 214評論 0贊 2
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽?zāi)J的外補...
    _Yfling閱讀 14,160評論 1贊 92
  • HTML、XML、XHTML 有什么區(qū)別 1.HTML 是用來描述網(wǎng)頁的一種語言，指的是超文本標記語言 (Hype...
    饑人谷_牛牛閱讀 828評論 0贊 2
  • 源自SeeYouBug博客 地址為：http://www.cnblogs.com/SeeYouBug 一、HTML...
    欲淚成雪閱讀 1,306評論 0贊 15
  • HTML、XML、XHTML有什么區(qū)別？ XMLXML是The Extensible Markup Languag...
    zx9426閱讀 523評論 0贊 1

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