HTML 知識總結(jié)

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

什么是HTML

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

  • HTML 指的是超文本標(biāo)記語言（hyper text Markup Language）
  • HTML 不是一門編程語言， 而是一中標(biāo)記語言（markup language）
  • 標(biāo)記語言是一套標(biāo)記標(biāo)簽 （markup tag）
  • HTML 使用標(biāo)記標(biāo)簽 來描述網(wǎng)頁

總結(jié)：HTML 是一個超文本標(biāo)記語言，并不是編程語言，他有一套標(biāo)記標(biāo)簽，可以使用這些標(biāo)記標(biāo)簽來描述網(wǎng)頁

什么是XML

XML 被設(shè)計(jì)用來傳輸和存儲數(shù)據(jù)

  • XML是可擴(kuò)展標(biāo)記語言（Extensible Markup Language）
  • Xml 是一種標(biāo)記語言，很類似HTML
  • XML 的設(shè)計(jì)宗旨是傳輸數(shù)據(jù)， 而非顯示數(shù)據(jù)
  • XML 標(biāo)簽沒有被預(yù)定義。 你需要自定義標(biāo)簽
  • XML 被設(shè)計(jì)為具有 自我描述性
  • XML 是W3C 的推薦標(biāo)準(zhǔn)
    解釋：
    自定義標(biāo)簽： XML 就是純文本，標(biāo)簽是根據(jù)自己的數(shù)據(jù)內(nèi)容可以自定義。不像 HTML 標(biāo)簽 有個預(yù)定義的意思 比如 h1~h6 代表標(biāo)題等等
    ** 自我描述性** XML標(biāo)簽往往對標(biāo)簽內(nèi)的數(shù)據(jù)有所解釋
<note> 
<to>George</to> // 去George那
<from>John</from> // 來自 John
<heading>Reminder</heading>// 信息頭 
<body>Don't forget the meeting!</body>// 信息體
</note>

總結(jié)：
XML 是一個可擴(kuò)張標(biāo)記語言，類似HTML；設(shè)計(jì)宗旨是傳輸數(shù)據(jù)，它沒有預(yù)定義標(biāo)簽，全部都要自定義標(biāo)簽，自定義的標(biāo)簽應(yīng)當(dāng)定義為對自己數(shù)據(jù)具有自我描述性，XML也只是個純文本，想解析XML信息還需自己編輯軟件或程序解析。XML是為了數(shù)據(jù)更加明確。能夠讀懂 XML 的應(yīng)用程序可以有針對性地處理 XML 的標(biāo)簽。標(biāo)簽的功能性意義依賴于應(yīng)用程序的特性。XML 是獨(dú)立于軟件和硬件的信息傳輸工具

什么是 XHTML

XHTML (extensible HyperText Markup language) 可擴(kuò)展超文本標(biāo)記語言
XHTML 是一種 html 4.0 基礎(chǔ)上優(yōu)化和改進(jìn)的新語言，目的是基于XML應(yīng)用，XHTML是一種增強(qiáng)了的HTML， 他的可擴(kuò)展性和靈活性將適應(yīng)未來網(wǎng)絡(luò)應(yīng)用更多的需求

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

怎樣理解 HTML 語義化

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

  • 為了在沒有CSS的情況下，頁面也能呈現(xiàn)出很好地內(nèi)容結(jié)構(gòu)、代碼結(jié)構(gòu):為了裸奔時(shí)好看
  • 用戶體驗(yàn)：例如title, alt 用于解釋名詞或解釋圖片信息，
  • HTML 是一門計(jì)算機(jī)程序語言,和c,c++,java,go,php,lua,python等一樣.
    寫HTML的人要以寫程序的角度去寫,去評判,
    語義化的含義就是用正確的標(biāo)簽做正確的事情.
    你要寫的是程序, 不僅僅是視覺顯示.
  • 更好看懂 更好維護(hù) 記單詞一樣 有邏輯關(guān)系的單詞 可以記一串 零散的看都不想看
    參考鏈接
    關(guān)于語義化 HTML 以及前端架構(gòu)的一點(diǎn)思考
    如何理解 web 語義化

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

1.內(nèi)容
內(nèi)容就是頁面實(shí)際要傳達(dá)的真正信息，包括數(shù)據(jù)、文檔或者圖片等。這里強(qiáng)調(diào)”真正“，指的是純粹的數(shù)據(jù)信息本身，導(dǎo)航菜單，裝飾性圖片都不算的
2.結(jié)構(gòu)（Structure）
真正信息想讓展現(xiàn)給大家，一定其看懂。沒結(jié)構(gòu)的話會混亂不堪，難以閱讀和理解，所以需要格式化，結(jié)構(gòu)化。
比如分成標(biāo)題 作者 章 節(jié) 段落 和列表等等（語義化使用html標(biāo)簽，使得傳達(dá)的信息結(jié)構(gòu)化）結(jié)構(gòu)使內(nèi)容更加具有邏輯性，易用性
3.表現(xiàn)
結(jié)構(gòu)化可以讓人看得懂，但是我們還應(yīng)當(dāng)讓人看得舒服
雖然定義了結(jié)構(gòu)，但是字體大小，正文的顏色 字體樣式 所處位置 背景什么都沒有修飾，所有來改變內(nèi)容（結(jié)構(gòu)化后真正的數(shù)據(jù)信息）外觀的東西，我們稱為 表現(xiàn)
4.總之
內(nèi)容是模特， 結(jié)構(gòu)表明頭 和 四肢等各個部位，表現(xiàn)則是服裝，化妝品，將模特更光彩照人
** 5. 行為（Behacior）**
即對內(nèi)容的交互及操作效果
這些是現(xiàn)代網(wǎng)頁必須存在的東西，表現(xiàn)層 和 結(jié)構(gòu)層 內(nèi)容層 行為都可以寫在一起，一些簡單的頁面沒關(guān)系，如果發(fā)布大量頁面 問題就來了

  1. 如何改版 背景改成黑的 文字改成白的 一個頁面一個頁面改 有css表 的話 直接改樣式表 樣式就批量改了
  2. 數(shù)據(jù)的利用 結(jié)構(gòu)清晰化，將內(nèi)容、結(jié)構(gòu)與表現(xiàn)相分離。使用模板為類似的內(nèi)容搭個結(jié)構(gòu)，將請求回來的數(shù)據(jù)嵌入或隱藏（根據(jù)業(yè)務(wù)）這樣也可以達(dá)到批量修改結(jié)構(gòu) 去除模板的一個解構(gòu) 渲染出來的頁面就會都會修改，等等 解構(gòu)化更有利于瀏覽器搜索

常見的meta標(biāo)簽

<meta charset="utf-8">：編碼方式 大部分都是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)鍵字，利于搜索 優(yōu)化SEO
<meta name="description" content="最有愛的前端學(xué)習(xí)社區(qū)">
搜索引擎優(yōu)化 
<meta name="keywords" content=""> //向搜索引擎說明你的網(wǎng)頁的關(guān)鍵詞  
<meta name="description" content=""> //告訴搜索引擎你的站點(diǎn)的主要內(nèi)容  
<meta name="author" content="你的姓名"> //告訴搜索引擎你的站點(diǎn)的制作的作者  
<meta http-equiv="Content-Type" content="text/html";charset=utf-8"> //指定字符集  
<meta http-equiv="refresh" content="n;url="> //定時(shí)讓網(wǎng)頁在指定的時(shí)間n內(nèi)跳轉(zhuǎn)  
<meta http-equiv="expires" content="Mon,12 May 2001 00:20:00 GMT"> //可以用于
設(shè)定網(wǎng)
頁的到期時(shí)間，
一旦過期則必須到服務(wù)器上重新調(diào)用。需要注意的是必須使用GMT時(shí)間格式  
<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時(shí)間格式

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

** 文檔聲明 **
為了瀏覽器按照你給的版本進(jìn)行解析你的HTML文檔
嚴(yán)格模式 ， 混雜模式
嚴(yán)格模式：瀏覽器按照HTML 和 CSS標(biāo)準(zhǔn)來解析，渲染你的文檔
混雜模式：瀏覽器會模擬網(wǎng)景瀏覽器 和 ie5 的非標(biāo)準(zhǔn)行為來解析渲染頁面 ，這樣做為了兼容W3C標(biāo)準(zhǔn)沒出來之前的頁面 ，（我猜這些頁面早見鬼去了吧）
<!doctype html> 的作用
html5 文檔聲明 讓瀏覽器進(jìn)入 W3C HTML5標(biāo)準(zhǔn)模式解析渲染頁面，不寫進(jìn)入混雜模式，準(zhǔn)備踩坑吧

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

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

  1. 文件存儲格式 與 這個meta標(biāo)簽指定格式不同 導(dǎo)致亂碼
    解決： 存儲格式 與 meta指定格式一樣
  2. 不合理的字符串截取造成個別字符亂碼，
    解決 規(guī)范截取字符串函數(shù)
  3. 數(shù)據(jù)庫編碼與meta設(shè)定不一致
    解決 保持一致
  4. ajax傳遞中文編碼導(dǎo)致的
    解決將傳遞的參數(shù)轉(zhuǎn)碼成utf-8模式
  5. 網(wǎng)站中毒導(dǎo)致
    解決“網(wǎng)站安全”相關(guān)處理

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

    chrome safari opera 現(xiàn)在都是使用WebKit內(nèi)核
    Firefox 內(nèi)核 Gecko
    IE 內(nèi)核 Trident
    獵豹安全瀏覽器：1.0-4.2版本為Trident+Webkit，4.3版本為        Trident+Blink；
    360安全瀏覽器 ：1.0-5.0為Trident，6.0為Trident+Webkit，7.0為Trident+Blink；
    360極速瀏覽器：7.5之前為Trident+Webkit,7.5為Trident+Blink；
    傲游瀏覽器 ：傲游1.x、2.x為IE內(nèi)核，3.x為IE與Webkit雙核；
    搜狗高速瀏覽器：1.x為Trident，2.0及以后版本為Trident+Webkit；
    QQ瀏覽器開始使用Webkit和Trident雙內(nèi)核
    微信內(nèi)置瀏覽器 騰訊自己X5內(nèi)核

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

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

* <a> 用于超鏈接。<a href="">some text</a>
* <article> 用于一篇文章。<article>a self-contained article</article>
* <aside> 用于頁面的側(cè)邊欄。<aside>some content</aside>
* <blockquote> 用于大段的引用內(nèi)容。<blockquote>some big texts</blockquote>
* <body> 頁面上顯示的所有內(nèi)容都被包含在<body></body>里
* <br> 用于顯示一個換行
* <button> 用于顯示一個按鈕
* <code> 用于一包裹一段代碼內(nèi)容
* <dd> 用于一個dl列表的某個dt名詞的描述
* <del> 用于刪除一些不需要的文字
* <div> 用于包裹住一些其他的標(biāo)簽，制造一個容器
* <dl> 用于制作一個名詞和對應(yīng)解釋的列表
* <dt> 用于一個dl列表的某個dt名詞
* <em> 用于強(qiáng)調(diào)一些文本內(nèi)容
* <figcaption> 用于一張圖表的說明文字
* <figure> 用于一張圖表
* <footer> 用于包裹頁面的底部內(nèi)容
* <form> 用于制作一個表單
* <h1>-<h6> 用于標(biāo)記標(biāo)題，從h1到h6重要性依次遞減
* <head> 用于包裹頁面的元數(shù)據(jù)，如<meta>, <link>, <title>等
* <header> 用于包裹頁面的頭部內(nèi)容
* <hr> 用于制造出一條分隔線
* <html> 整個 HTML 文檔的根元素，包裹住其他所有的元素
* <iframe> 用于嵌入另一個小頁面到一個頁面中
* <img> 用于顯示一張圖片
* <input> 用于顯示一個表格輸入控件
* <label> 用于給一個表格輸入控件打上一個標(biāo)簽，說明輸入控件的作用
* <li> 用于<ul>和<ol>標(biāo)簽，代表一個列表項(xiàng)
* <link> 用于鏈接外部CSS文件
* <mark> 用于高亮顯示某些文本
* <meta> 用于下達(dá)一些元數(shù)據(jù)指令，或者對頁面進(jìn)行說明
* <nav> 用于包裹住一個導(dǎo)航條的內(nèi)容
* <ol> 用于制作一個有序列表
* <p> 用于顯示一個段落
* <q> 用于一小段引用文字
* <script> 用于一段JavaScript腳本代碼，或者引入一個外部JavaScript腳本文件
* <section> 用于包裹一部分有邏輯關(guān)第的頁面內(nèi)容
* <select> 用于制作一個下拉列表選框
* <span> 用于包裹住一小段文字，作為一個容器
* <strong> 用于著重強(qiáng)調(diào)重要的文本內(nèi)容
* <style> 用于給頁面元素加上樣式
* <sub> 用于下標(biāo)文本
* <sup> 用于上標(biāo)文本
* <table> 用于制作一個表格
* <tbody> 用于表格里的主體部分
* <td> 用于表格里的某一個單元格
* <textarea> 用于制作一大塊文本輸入框
* <tfoot> 用于表格里的底部
* <th> 用于表格里的表頭的單元格
* <thead> 用于表格里的表頭
* <time> 用于頁面內(nèi)容中的時(shí)間
* <title> 用于顯示整個頁面的標(biāo)題（顯示在瀏覽器的tab上）
* <tr> 用于標(biāo)記表格里的一行
* <ul> 用于制作一個無序列表

以上
*** 謝謝觀賞，點(diǎn)贊 ***

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

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

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