HTML論述
HTML的簡介
超文本標(biāo)記語言（英語：HyperText Markup Language榴嗅，簡稱：HTML）被用于作為網(wǎng)頁創(chuàng)建的標(biāo)準(zhǔn)語言熙暴。和CSS和JavaScript被用來作為是前端創(chuàng)建的三大基礎(chǔ)語言镐捧。是作為前端工作人員的必修語言江咳。
1. 歷史介紹
HTML的發(fā)明是一種偶然叮喳，并且發(fā)明者并非是專業(yè)的程序員工作睁宰，1980年，物理學(xué)家
蒂姆·伯納斯-李在歐洲核子研究中心（CERN）在承包工程期間嘱么，為了方便工程人員的共享使用文檔狮含，所以提出了所以提出了創(chuàng)建原型系統(tǒng)ENQUIRE.最終在1990年的時候通過規(guī)定HTML寫出了瀏覽器和服務(wù)器。
2. HTML曼振、XML几迄、XHTML 有什么區(qū)別
三者全稱和具體名稱
- HTML：HyperText Markup Language / 超文本標(biāo)記語言
- XML: Extensible Markup Language / 可擴展標(biāo)記語言
- XHTML: Extensible Hypertext Markup Language / 可擴展超文本標(biāo)記語
什么是HTML
HTML 是用來描述和定義網(wǎng)頁內(nèi)容的標(biāo)記語言，是構(gòu)成網(wǎng)頁的最基本的東西冰评。
所謂超文本映胁，就是說它除了能標(biāo)記文本，還能標(biāo)記其他的內(nèi)容甲雅，比如：圖片解孙，鏈接坑填，音頻，視頻等弛姜。
它的作用就是一個規(guī)范脐瑰，告訴所有瀏覽器都統(tǒng)一標(biāo)準(zhǔn)，比如我給這段文字加個 <p> 標(biāo)簽廷臼，那就是告訴瀏覽器：這是一個段落苍在。我加個 <img> 標(biāo)簽：這是一張圖片，別弄錯了荠商。瀏覽器看到后寂恬，就會正確解析，產(chǎn)生相應(yīng)的行為莱没。
然后說一下 XML
它的表現(xiàn)形式就是給一個文檔加一堆標(biāo)簽初肉，說明每段文字是干什么的，有什么意義郊愧。這樣做的目的是方便存儲朴译、傳輸、分享數(shù)據(jù)属铁，人和機器都可以很方便的閱讀眠寿。XML 和 HTML 有一個明顯的區(qū)別就是：HTML 的標(biāo)簽都是預(yù)定義的，你不可以自己隨便增加焦蘑，比如你不能自造一個標(biāo)簽叫 <nihao>, 但是 XML 可以盯拱，你可以自己“發(fā)明”標(biāo)簽————這也是“可擴展的”一個含義。
什么是XHTML
XHTML 就是以 XML 的語法形式來寫 HTML.
XHTML 出現(xiàn)的原因是：HTML 是一種語法形式比較松散的標(biāo)記語言例嘱，語法要求也不嚴格狡逢。比如大小可以混用，屬性值隨便你加不加引號拼卵，單引號還是雙引號也隨便你奢浑，標(biāo)簽也可以不閉合。HTML 標(biāo)準(zhǔn)的制定者 W3C 一看這樣下去不行腋腮，所謂無規(guī)矩不成方圓雀彼，所以就把 XML 的語法形式往 HTML 上一套，出現(xiàn)了 XHTML即寡，所以你也可以把 XHTML 理解為 HTML 的嚴格語法形式徊哑，除此之外，其它方面基本一樣聪富。
比如 XHTML 有一些強制的要求莺丑，如下：
- 必須包含一個文件頭聲明
<!DOCTYPE> - 所有元素名必須小寫
- 所有空元素必須關(guān)閉
- 所有屬性名必須小寫
- 所有屬性值必須加引號
- 所有布爾值屬性必須加上屬性值。.
3. 怎么理解HTML的語義化
什么是語義化
李爵士 Tim Berners-Lee（萬維網(wǎng)發(fā)明者）最早提出了語義網(wǎng)（Semantic Web）的概念墩蔓，而語義網(wǎng)的核心是通過給萬維網(wǎng)上的文檔（如HTML）添加能夠被計算機所理解的元數(shù)據(jù)（Meta data）梢莽，從而使整個互聯(lián)網(wǎng)成為一個通用的信息交換媒介萧豆。
簡單講就是根據(jù)內(nèi)容的結(jié)構(gòu)化（內(nèi)容語義化），選擇合適的標(biāo)簽（代碼語義化）便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析蟹漓。
隨著互聯(lián)網(wǎng)的發(fā)展炕横，WEB也承載越來越多的信息（圖片源内，聲音葡粒，視頻等），人們開始用機器來處理網(wǎng)絡(luò)信息膜钓，就此誕生了搜索引擎嗽交。如次龐大及復(fù)雜的信息如何讓搜索引擎處理和挖掘，所以讓機器能夠更好地讀懂WEB上內(nèi)容就變得越來越重要
所以我們得到的最重要的結(jié)論：
語義網(wǎng)的基礎(chǔ)必然是語義化的結(jié)構(gòu)網(wǎng)頁颂斜。
下面介紹語義化的好處：
- 頁面的結(jié)構(gòu)會更加的清晰 對于頁面的可讀性和可修改性會進一步增強
- 支持更多的設(shè)備 我們可以通過設(shè)備的各種情況 進行怎刪改查 最大限度的增加設(shè)備可實用性
- 有利于SEO 可以通過跟瀏覽器的良好溝通 有利于爬蟲抓取到更多的信息 對于界面的SEO優(yōu)化提升速度有著不可忽視的作用
- 便于團隊維護 因為使用了可視化 我們可以使用模塊化進行編程 這樣的話我們就可以進行模塊化任務(wù)整合 更有利于任務(wù)的分配和寫作
4. 有哪些常見的meta標(biāo)簽
常見的meta標(biāo)簽根據(jù)查詢MDN和相關(guān)資料主要有以下這些
- 編碼格式
<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"> - 網(wǎng)頁關(guān)鍵字夫壁，利于搜索
<meta name="keywords" content="河蟹、命主沃疮、付強"> - 搜索引擎優(yōu)化
<meta name="description" content="社會主義24字核心價值觀"> - 指定字符集
<meta http-equiv="Content-Type" content="text/html";charset=utf-8"> - 定時讓網(wǎng)頁在指定的時間n內(nèi)跳轉(zhuǎn)
<meta http-equiv="refresh" content="n;url="> - 可以用于設(shè)定網(wǎng)頁的到期時間盒让，一旦過期則必須到服務(wù)器上重新調(diào)用。需要注意的是必須使用GMT時間格式
<meta http-equiv="expires" content="Mon,12 May 2001 00:20:00 GMT"> - 禁用緩存
<meta http-equiv="pragma" content="no-cache"> - cookie設(shè)定司蔬，如果網(wǎng)頁過期邑茄，存盤的cookie將被刪除。需要注意的也是必須使用GMT時間格式
<meta http-equiv="set-cookie" content="Mon,12 May 2001 00:20:00 GMT">
5. 文檔聲明的作用?嚴格模式和混雜模式指什么?<!doctype html> 的作用?
文檔聲明的作用
文檔聲明是為了告訴瀏覽器俊啼，你的 HTML 文檔是用的什么版本的 HTML 來寫的肺缕，這樣瀏覽器才能按照你聲明的版本來正確的解析你的 HTML 文檔。
嚴格模式和混雜模式指什么
嚴格模式（推薦）現(xiàn)在也稱為標(biāo)準(zhǔn)模式授帕，在該模式下同木，瀏覽器會嚴格按照 HTML 和 CSS 標(biāo)準(zhǔn)來解析、渲染你的文檔跛十。
混雜模式（不推薦）的由來是一個歷史問題彤路。在互聯(lián)網(wǎng)早期，網(wǎng)頁一般寫成兩個版本：一個寫給網(wǎng)景公司的 Navigator瀏覽器芥映，一個寫給微軟公司的IE瀏覽器洲尊。當(dāng)W3C制定了 Web 標(biāo)準(zhǔn)后，這兩個瀏覽器不能馬上開始按標(biāo)準(zhǔn)來解析渲染頁面屏轰，因為這樣會破壞當(dāng)時大部分頁面的顯示效果颊郎。所以各瀏覽器就引入了混雜模式，在該模式下霎苗，瀏覽器會模擬Navigator 4和IE5的非標(biāo)準(zhǔn)行為來解析渲染頁面姆吭，這樣做就是為了兼容在W3C標(biāo)準(zhǔn)出現(xiàn)之前就存在的那些“不標(biāo)準(zhǔn)”的頁面。
<!doctype html> 的作用
<!doctype html> 的作用就是讓瀏覽器進入標(biāo)準(zhǔn)模式唁盏，使用最新的 HTML5標(biāo)準(zhǔn)來解析渲染頁面内狸；如果不寫检眯，瀏覽器就會進入混雜模式，而這是我們要避免的昆淡。
6. 瀏覽器亂碼的原因是什么锰瘸？如何解決?
根據(jù)資料的查詢我們可以得出亂碼產(chǎn)生的原因主要有以下兩個部分
- 亂碼產(chǎn)生的根本原因是你保存的編碼格式和瀏覽器解析時的解碼格式不匹配導(dǎo)致的。
- 亂碼一般是英文以外的字符才會出現(xiàn)
主要的解決的方式是
首先昂灵，在文件保存的時候你自己要清楚是用哪種編碼方式保存的避凝。如果你的文件是保存為utf-8格式，那么一定要在html 的 <head>里添加<meta charset="utf-8">眨补，目的就是讓瀏覽器直接使用utf-8去解碼管削。同理狀態(tài)下如果你的文件保存為gbk格式，一定在文件里添加<meta charset="gbk">撑螺。
7. 常見的瀏覽器內(nèi)核有哪些
| 常見的瀏覽器 | 對應(yīng)使用的內(nèi)核是 |
|---|---|
| IE | Trident |
| Mozilla Firefox | Gecko |
| Opera | Presto |
| Safari | Webkit |
| 搜狗瀏覽器 | 使用高速（webkit）和兼容（Trident）雙瀏覽模式 |
| QQ瀏覽器 | 使用極速（Webkit）和普通（Trident）雙瀏覽模式 |
8.列出常見的標(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 te xts</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>用于強調(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)簽，代表一個列表項 -
<link>用于鏈接外部CSS文件 -
<mark>用于高亮顯示某些文本 -
<meta>用于下達一些元數(shù)據(jù)指令居砖，或者對頁面進行說明 -
<nav>用于包裹住一個導(dǎo)航條的內(nèi)容 -
<ol>用于制作一個有序列表 -
<p>用于顯示一個段落 -
<q>用于一小段引用文字 -
<script>用于一段JavaScript腳本代碼虹脯，或者引入一個外部JavaScript腳本文件 -
<section>用于包裹一部分有邏輯關(guān)第的頁面內(nèi)容 -
<select>用于制作一個下拉列表選框 -
<span>用于包裹住一小段文字，作為一個容器 -
<strong>用于著重強調(diào)重要的文本內(nèi)容 -
<style>用于給頁面元素加上樣式 -
<sub>用于下標(biāo)文本 -
<sup>用于上標(biāo)文本 -
<table>用于制作一個表格 -
<tbody>用于表格里的主體部分 -
<td>用于表格里的某一個單元格 -
<textarea>用于制作一大塊文本輸入框 -
<tfoot>用于表格里的底部 -
<th>用于表格里的表頭的單元格 -
<thead>用于表格里的表頭 -
<time>用于頁面內(nèi)容中的時間 -
<title>用于顯示整個頁面的標(biāo)題（顯示在瀏覽器的tab上） -
<tr>用于標(biāo)記表格里的一行 -
<ul>用于制作一個無序列表
9. 怎樣理解內(nèi)容與樣式分離的原則奏候？
- 網(wǎng)頁分離
一個網(wǎng)頁分為三個部分：Html——結(jié)構(gòu)循集，css——樣式，javascrip——行為蔗草。內(nèi)容也就是html咒彤，樣式也就是css。所以內(nèi)容和樣式的分離咒精，就是指在網(wǎng)頁編碼的過程中镶柱，要將html和css兩大部分分開。
- 如何實現(xiàn)
一般來說是寫HTML的時候先不管樣式模叙，重點放在HTML的結(jié)構(gòu)和語義化上歇拆，讓HTML能提現(xiàn)頁面結(jié)構(gòu)或者內(nèi)容,，然后進行 css 樣式設(shè)置，減少 HTML 與 CSS 契合度（即內(nèi)容與樣式分離） 故觅，寫JS的時候厂庇，盡量不要用JS去直接操作樣式，而是通過給元素添加刪除class來控制樣式變化（即行為分離）输吏。
- 分離的優(yōu)點
- 瀏覽器加載網(wǎng)頁頁面速度變快权旷。分離原則下，大部分頁面代碼寫在了CSS當(dāng)中贯溅，頁面體積容量變得更小拄氯。
- 網(wǎng)頁修改設(shè)計時，效率盗迟、省時坤邪。根據(jù)html標(biāo)簽內(nèi)ID或class的標(biāo)記熙含，到CSS里找到相應(yīng)的ID或class罚缕，可以快速替換指定位置的樣式，不會破壞頁面架構(gòu)和其他部分的樣式怎静。
典型的應(yīng)用就是網(wǎng)頁換膚邮弹，使用相同的 html 結(jié)構(gòu)，不同的 css 樣式蚓聘。- 更好地被搜索引擎收錄腌乡。基于內(nèi)容與樣式分離的原則夜牡，html的語義化就是首要考慮的,網(wǎng)頁中語義化的標(biāo)簽代碼就會更加適合搜索引擎与纽。
- css樣式的分離，它可以根據(jù)不同的瀏覽器塘装，達到顯示效果的統(tǒng)一急迂。保證網(wǎng)頁架構(gòu)不變形的前提下，放心在不同瀏覽器渲染顯示樣式蹦肴。
