關(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)記是指計算機所能理解的信息符號，但與HTML里已經(jīng)規(guī)定好的標(biāo)準(zhǔn)標(biāo)記不同的是弃酌，XML可以由使用者自行定義這些標(biāo)記氨菇，這就是XML所謂的可擴展之處儡炼，同時在語法上較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)格和可擴展的特性。
怎樣理解HTML語義化
是指根據(jù)具體的內(nèi)容蜒蕾，選擇合適的標(biāo)簽進(jìn)行代碼的編寫及汉，便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時讓瀏覽器的爬蟲和機器更好地解析沮趣。
比如：對于文章的段落我們應(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)簽可以精簡代碼砂心。
- 便于團隊的開發(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)頁上衷戈，但是能夠被機器解析。<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越來越獨立開來锐锣，然后慢慢地內(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)元素
