關(guān)于HTML
超文本標(biāo)記語言（HyperText Markup Language，簡稱HTML），是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言，常與CSS、Javascript一起被眾多網(wǎng)站用于設(shè)計令人賞心悅目的網(wǎng)頁、網(wǎng)頁應(yīng)用程序以及移動應(yīng)用程序的用戶界面。網(wǎng)頁瀏覽器可以讀取HTML文件，并將其渲染成可視化網(wǎng)頁。HTML描述了一個網(wǎng)站的結(jié)構(gòu)化語義隨著線索的呈現(xiàn)，使之成為一種標(biāo)記語言而非編程語言。--引自維基百科-HTML
個人通俗理解：HTML告訴瀏覽器去展示什么內(nèi)容，CSS則規(guī)定了怎么去展示這些內(nèi)容，如果除了展示之外還有其他什么需要吩咐瀏覽器去做的話，那就是JS的事了。
HTML、XML和XHTML的區(qū)別
- XML（Extensible Markup Language，簡稱XML），與HTML一樣也是一種標(biāo)記語言，標(biāo)記是指計算機(jī)所能理解的信息符號，但與HTML里已經(jīng)規(guī)定好的標(biāo)準(zhǔn)標(biāo)記不同的是，XML可以由使用者自行定義這些標(biāo)記，這就是XML所謂的可擴(kuò)展之處，同時在語法上較HTML更為嚴(yán)格；此外與HTML的表現(xiàn)數(shù)據(jù)的用途不同的是，XML是設(shè)計用來傳送及攜帶數(shù)據(jù)信息，所以XML聚焦于攜帶數(shù)據(jù)信息和說明數(shù)據(jù)是什么。
- XHTML（Extensible HyperText Markup Language，簡稱XHTML），表現(xiàn)方式與HTML類似，但同時基于XML，所以也有XML語法嚴(yán)格和可擴(kuò)展的特性。
怎樣理解HTML語義化
是指根據(jù)具體的內(nèi)容，選擇合適的標(biāo)簽進(jìn)行代碼的編寫，便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時讓瀏覽器的爬蟲和機(jī)器更好地解析。
比如：對于文章的段落我們應(yīng)該用<p>而非<div>，還有HTML5建議的用<footer>代替<div id="footer">就是語義化的表現(xiàn)。-
語義化帶來的好處：
- 有利于SEO，搜索引擎的爬蟲是不懂非語義化的
<div>、<span>的標(biāo)簽的，因此語義化標(biāo)簽?zāi)茏屗阉饕娴呐老x抓取更多的有效信息。 - 類似于JS的平穩(wěn)退化，當(dāng)CSS的樣式文件讀取失敗時，語義化的HTML也能展現(xiàn)很好的內(nèi)容結(jié)構(gòu)。
- 代碼簡潔，復(fù)用性更高。使用合適的標(biāo)簽可以精簡代碼。
- 便于團(tuán)隊的開發(fā)和維護(hù)。
- 有利于SEO，搜索引擎的爬蟲是不懂非語義化的
怎樣做到語義化
1.掌握常用的的標(biāo)簽，透徹理解標(biāo)簽的含義和用法；
2.每次實踐時都以是否語義化的標(biāo)準(zhǔn)來要求自己；
3.有時間多review一下一些大公司、優(yōu)秀開源項目的代碼，學(xué)習(xí)他們的內(nèi)容和樣式是怎么寫的。
怎樣理解內(nèi)容與樣式分離原則
- 內(nèi)容由HTML負(fù)責(zé)，樣式則由CSS負(fù)責(zé)，各自分工，能讓網(wǎng)頁的結(jié)構(gòu)更加層次分明，更有利于開發(fā)和維護(hù)。
- 寫一個頁面的時候先不要去管樣式，重點應(yīng)該放在HTML的結(jié)構(gòu)和語義化上 ，讓HTML能夠體現(xiàn)頁面的結(jié)構(gòu)和內(nèi)容，將這一步做好后再去考慮樣式。
- 寫JS的時候，盡量不要去直接操作樣式，而應(yīng)該通過為元素增刪某個class來控制樣式的變化。
- HTML內(nèi)盡量避免出現(xiàn)屬性樣式，避免出現(xiàn)行內(nèi)樣式。
有哪些常見的meta標(biāo)簽
- meta標(biāo)簽的簡介：
The
<meta>tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
根據(jù)翻譯，<meta>標(biāo)簽提供了關(guān)于HTML文件的元數(shù)據(jù)，這些元數(shù)據(jù)不會顯示在網(wǎng)頁上，但是能夠被機(jī)器解析。<meta>元素通常用來指定頁面描述、關(guān)鍵字、文檔作者、最后修改以及其他一些元數(shù)據(jù)。
- 常用的meta標(biāo)簽：
<meta charset="utf-8">
<meta name="keywords" content="饑人谷 前端">
<meta name="description" content="最有愛的前端社區(qū)">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
上述meta標(biāo)簽內(nèi)容參考自《HTML meta標(biāo)簽的總結(jié)與使用介紹》
文檔聲明的作用，嚴(yán)格模式和混雜模式，<!DOCTYPE html>的作用
- 文檔聲明的作用：用來指示瀏覽器用哪個版本的HTML進(jìn)行編寫。
- 嚴(yán)格模式和混雜模式：混雜模式是一種比較寬松的向后兼容的模式。混雜模式通常模擬老式瀏覽器的行為，以防止老站點無法工作，當(dāng)不指定
<!DCOTYPE>聲明或聲明無效時會觸發(fā)混雜模式；嚴(yán)格模式下瀏覽器以其支持的最高標(biāo)準(zhǔn)呈現(xiàn)頁面，當(dāng)指定了正確的<!DCOTYPE>聲明時就會觸發(fā)嚴(yán)格模式。 -
<!DOCTYPE html>的作用：HTML5沒有DTD，因此不需要對DTD進(jìn)行引用，但還是需要doctype來規(guī)定瀏覽器的行為，故<!DOCTYPE html>的作用就是告知瀏覽器文檔是以HTML5這個版本來進(jìn)行編寫的，瀏覽器也應(yīng)該用這種方式來解析渲染頁面。
瀏覽器亂碼的原因以及解決
- 原因： 亂碼產(chǎn)生的根本原因是文檔保存的編碼格式和瀏覽器解析時的解碼格式不匹配導(dǎo)致的。
- 解決： 使二者匹配，瀏覽器去匹配文檔保準(zhǔn)編碼格式或文檔編碼保存格式去匹配瀏覽器的解碼格式。
常見的瀏覽器及其內(nèi)核
- IE：Trident/Edge
- Safari: Webkit
- Chrome: Chromium/Blink，這兩個內(nèi)核都是Webkit的一個分支，Chromium無法脫離Webkit的影響，所以這也是Blink誕生的原因之一。
- Opera: Presto/Blink
- Firefox: Gecko
- 關(guān)于瀏覽器內(nèi)核：內(nèi)核最早是Rendering Engine和JS Engine的統(tǒng)稱，這兩種Engine也沒有區(qū)分很明確，但后來JS Engine越來越獨(dú)立開來，然后慢慢地內(nèi)核就傾向于只值Rendering Engine。
常見的標(biāo)簽及其應(yīng)用場景
-
<html>: 文檔的根元素 -
<head>: 文檔的頭部分，一般包含標(biāo)題、元數(shù)據(jù)樣式表等 -
<body>: 文檔的主體元素，在瀏覽器上顯示的部分都在包含在<body>標(biāo)簽里 -
<p>: 文章的段落 -
<h1>: 標(biāo)題 -
<img>: 用于圖片元素 -
<a>: 用于超鏈接元素 -
<table>: 用來繪制表格 -
<ol>,<ul>,<dl>: 分別應(yīng)用于有序、無序和自定義列表 -
<form>: 應(yīng)用于表單 -
<div>: 應(yīng)用于一般無特殊意義的塊級元素 -
<span>: 應(yīng)用與一般無特殊意義的內(nèi)聯(lián)元素
