HTML、XML、XHTML 有什么區(qū)別
- HTML 超文本標(biāo)記語(yǔ)言（HyperText Markup Language，簡(jiǎn)稱：HTML）是一種用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言。
- XML 可擴(kuò)展標(biāo)識(shí)語(yǔ)言(The Extensible Markup Language)的簡(jiǎn)寫，主要用于存儲(chǔ)數(shù)據(jù)和結(jié)構(gòu)。
- XHTML 可擴(kuò)展超文本標(biāo)記語(yǔ)言 (The Extensible HyperText Markup Language)的縮寫,基于XML，作用與HTML類似,目的就是實(shí)現(xiàn)HTML向XML的過(guò)渡。
怎樣理解 HTML 語(yǔ)義化
- 語(yǔ)義化HTML是一種編寫HTML的方式。
- 選擇合適的標(biāo)簽、使用合理的代碼結(jié)構(gòu)，便于開(kāi)發(fā)者閱讀，同時(shí)讓瀏覽器的爬蟲和機(jī)器很好地解析。
好處：
1. 頁(yè)面呈現(xiàn)出很好地內(nèi)容結(jié)構(gòu)、代碼結(jié)構(gòu)。
2. 用戶體驗(yàn)好。
3. 利于SEO優(yōu)化。
4. 方便其他設(shè)備解析來(lái)渲染網(wǎng)頁(yè)。
5. 便于團(tuán)隊(duì)開(kāi)發(fā)和維護(hù)，語(yǔ)義化更具可讀性。
怎樣理解內(nèi)容與樣式分離的原則
- 在WEB開(kāi)發(fā)中， 一個(gè)網(wǎng)頁(yè)分為三部分：Html——結(jié)構(gòu)（內(nèi)容），css——表現(xiàn)（樣式），javascrip——行為。內(nèi)容與樣式分離，就是讓內(nèi)容的歸 HTML, 樣式歸 CSS。同時(shí)，HTML 內(nèi)不允許出現(xiàn)屬性樣式，盡量不要出現(xiàn)行內(nèi)樣式。
- 編碼正確做法是HTML和CSS要分開(kāi)使用，不要混著用。重點(diǎn)放在HTML的結(jié)構(gòu)和語(yǔ)義化上，讓HTML能提現(xiàn)頁(yè)面結(jié)構(gòu)或者內(nèi)容,，然后進(jìn)行 css 樣式設(shè)置（即內(nèi)容與樣式分離） ，寫JS的時(shí)候，盡量不要用JS去直接操作樣式，而是通過(guò)給元素添加刪除class來(lái)控制樣式變化（即行為分離）。
- 分離原則的優(yōu)點(diǎn)
- 瀏覽器加載網(wǎng)頁(yè)頁(yè)面速度變快。分離原則下，大部分頁(yè)面代碼寫在了CSS當(dāng)中，頁(yè)
面體積容量變得更小。 - 網(wǎng)頁(yè)修改設(shè)計(jì)時(shí)，效率、省時(shí)。根據(jù)html標(biāo)簽內(nèi)ID或class的標(biāo)記，到CSS里找到相
應(yīng)的ID或class，可以快速替換指定位置的樣式，不會(huì)破壞頁(yè)面架構(gòu)和其他部分的樣
式。 - 典型的應(yīng)用就是網(wǎng)頁(yè)換膚，使用相同的 html 結(jié)構(gòu)，不同的 CSS 樣式。
- 更好地被搜索引擎收錄?；趦?nèi)容與樣式分離的原則，html的語(yǔ)義化就是首要考慮
的,網(wǎng)頁(yè)中語(yǔ)義化的標(biāo)簽代碼就會(huì)更加適合搜索引擎。
CSS樣式的分離，它可以根據(jù)不同的瀏覽器，達(dá)到顯示效果的統(tǒng)一。保證網(wǎng)頁(yè)架構(gòu)
不變形的前提下，放心在不同瀏覽器渲染顯示樣式。
- 瀏覽器加載網(wǎng)頁(yè)頁(yè)面速度變快。分離原則下，大部分頁(yè)面代碼寫在了CSS當(dāng)中，頁(yè)
有哪些常見(jiàn)的meta標(biāo)簽
語(yǔ)言采用中文
<meta http-equiv="Content-Language" content="zh-CN" />編碼格式：告訴給瀏覽器用什么方式來(lái)都這頁(yè)代碼
<meta charset="utf-8">如果支持Google Chrome Frame：GCF，則使用GCF渲染；如果系統(tǒng)安裝ie8或以上版本，則使用最高版本ie渲染； 否則，這個(gè)設(shè)定可以忽略。 目的使內(nèi)容在移動(dòng)端上比較合理展示。
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">控制網(wǎng)頁(yè)為全屏幕大小
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">目的是方便SEO優(yōu)化內(nèi)容關(guān)鍵字搜索
<meta name="keywords" content="">目的是方便SEO優(yōu)化內(nèi)容詳細(xì)描述搜索
<meta name="description" content="">
文檔聲明的作用?嚴(yán)格模式和混雜模式指什么?<!doctype html> 的作用?
- 文檔聲明的作用
文檔聲明目的是防止出現(xiàn)亂碼情況。 - 嚴(yán)格模式和混雜模式指什么
嚴(yán)格模式：又稱標(biāo)準(zhǔn)模式，是指瀏覽器按照 W3C 標(biāo)準(zhǔn)解析代碼。
混雜模式：又稱怪異模式或兼容模式，是指瀏覽器用自己的方式解析代碼。
區(qū)分 ：瀏覽器解析時(shí)到底使用嚴(yán)格模式還是混雜模式，與網(wǎng)頁(yè)中的 DTD 直接相關(guān)。 - <!DOCTYPE html>
<DOCTYPE>聲明叫做文件類型定義（DTD），聲明的作用為了告訴瀏覽器該文件的類
型。讓瀏覽器解析器知道應(yīng)該用哪個(gè)規(guī)范來(lái)解析文檔。
瀏覽器亂碼的原因是什么？如何解決?
html源代碼內(nèi)中文字內(nèi)容與html編碼不同造成。但無(wú)論是哪種情況造成亂碼在網(wǎng)頁(yè)開(kāi)始時(shí)候都需要設(shè)置網(wǎng)頁(yè)編碼。
- 解決：
<meta charset="utf-8">
常見(jiàn)的瀏覽器有哪些,什么內(nèi)核
瀏覽器
chrome瀏覽器、火狐瀏覽器（Mozilla Firefox）、IE瀏覽器、360極速瀏覽器、搜狗瀏覽器、獵豹極輕瀏覽器等。
內(nèi)核
- Trident(IE內(nèi)核)；
- Gecko(Firefox內(nèi)核)；
- Presto(Opera前內(nèi)核) (已廢棄)；
- Webkit(Safari內(nèi)核,Chrome內(nèi)核原型,開(kāi)源)。
列出常見(jiàn)的標(biāo)簽，并簡(jiǎn)單介紹這些標(biāo)簽用在什么場(chǎng)景
- h1~h6 標(biāo)題
<h1>代表頁(yè)面最大的標(biāo)題</h1>
<h2>二級(jí)標(biāo)題</h2>
<h3>更弱的標(biāo)題</h3>
<h4>...</h4>
<h5>...</h5>
<h6>最小標(biāo)題</h6> - p段落
<p>表示大段文字</p> - a鏈接，鏈到一個(gè)地址
<a href="http://www.google.com"" target="_blank" title="ABC">google.com</a>
<a href="#">空</a>
<a href="#about">定位ID標(biāo)簽about位置</a>
<a href="/getCourse">鏈接路徑地址</a> - img展示一張圖片
[圖片上傳失敗...(image-e775da-1571223387283)] - div語(yǔ)義為“一大塊”，用于給頁(yè)面劃分區(qū)塊，讓結(jié)構(gòu)更清晰
<div id="header">...</div>
<div id="content">...</div>
<div id="footer">...</div> - ul li
- ul: unsort list 無(wú)序列表
- 用于表示并列的內(nèi)容
- ul的直接子元素是li
- 可以嵌套
<ul class="nav">
<li><a href="#">首頁(yè)</a></li>
<li><a href="#">關(guān)于</a></li>
<li>
<a href="#">更多</a>
<ul>
<li>聯(lián)系</li>
<li>地址</li>
</ul>
</li>
</ul> - OL LI
- ol: order list 有序序列表
- 用于表示帶步驟或者編號(hào)的并列內(nèi)容
- ol的直接子元素只能是li 可以嵌套
<h2>把大象關(guān)到冰箱的步驟</h2>
<ol>
<li>把大象變小</li>
<li>打開(kāi)冰箱</li>
<li>把大象塞進(jìn)去</li>
</ol> - DL DT DD用于展示一系列 “標(biāo)題:內(nèi)容... ”的場(chǎng)景
<dl>
<dt>商品名稱:</dt>
<dd>青花瓷</dd>
<dt>特征:</dt>
<dd>白色</dd>
<dd>圓口</dd>
<dt>商品介紹</dt>
<dd>這是一個(gè)年代久遠(yuǎn)的瓷器，很貴，易碎</dd>
</dl> - button按鈕
<button>點(diǎn)我</button> - strong em
- em 需要強(qiáng)調(diào)一下
- strong 很重要、強(qiáng)調(diào)性更強(qiáng)
<p>優(yōu)惠 <strong>100</strong> 元</p>
<p>小谷 <em>2</em> 歲了</p> - iframe用于嵌入一個(gè)頁(yè)面 注意跨域操作問(wèn)題
<iframe src="http://www.google.com" name="myPage"></iframe>
<p><a href="http://www.baidu.com"" target="myPage">baidu.com</a></p> - table
用于展示表格，不要用來(lái)做布局 thead tbody tfoot可省略，瀏覽器會(huì)自動(dòng)添加 border-
collapse: collapse;用于合并邊框
<table>
<tr>
<th>姓名</th>
<th>年紀(jì)</th>
</tr>
<tr>
<td>小明</td>
<td>18</td>
</tr>
<tr>
<td>小花</td>
<td>20</td>
</tr>
</table>
注意點(diǎn)
- 標(biāo)簽屬性全小寫;
- 標(biāo)簽要閉合、自閉合標(biāo)簽可以省略 /;
- 標(biāo)題里不能有段落，段落里不能有標(biāo)題;
