HTML相關(guān)知識

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

  • HTML，超文本標(biāo)記語言，是語法較為松散的、不嚴(yán)格的Web語言；
  • XML，可擴展標(biāo)記語言，主要用于存儲數(shù)據(jù)和結(jié)構(gòu)參考；
  • XHTML，可擴展超文本標(biāo)記語言，基于XML，作用與HTML類似，但語法更嚴(yán)格參考。
  • 其中XHTML 與 HTML 之間的差異
    • 最主要的不同：
    1. XHTML 元素必須被正確地嵌套。
    2. XHTML 元素必須被關(guān)閉。
    3. 標(biāo)簽名必須用小寫字母。
    4. XHTML 文檔必須擁有根元素。
  • 參考 XHTML 與 HTML 之間的差異

2.怎樣理解 HTML 語義化?

語義化HTML是一種編寫HTML的方式,選擇合適的標(biāo)簽
使用合理的代碼結(jié)構(gòu)，便于開發(fā)者閱讀，同時讓瀏覽器的爬蟲和機器很好地解析。

3. 怎樣理解內(nèi)容與樣式分離的原則?

寫 HTML 的時候先不管樣式, 重點放在HTML的結(jié)構(gòu)和語義化上，讓 HTML 能體現(xiàn)頁面結(jié)構(gòu)或者內(nèi)容,之后再去寫樣式。
寫 JS 的時候，盡量不要用 JS 去直接操作樣式，而是通過給元素添加刪除class來控制樣式變化
HTML 內(nèi)不允許出現(xiàn)屬性樣式，盡量不要出現(xiàn)行內(nèi)樣式

  • 為什么要語義化？
  • 有利于SEO(SEO是由英文Search Engine Optimization縮寫而來， 中文意譯為“搜索引擎優(yōu)化);
  • 有助于爬蟲抓取更多的有效信息，爬蟲是依賴于標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重;
  • 語義化的HTML在沒有CSS的情況下也能呈現(xiàn)較好的內(nèi)容結(jié)構(gòu)與代碼結(jié)構(gòu),方便其他設(shè)備的解析,便于團隊開發(fā)和維護

4. 有哪些常見的meta標(biāo)簽?

<meta> 標(biāo)簽永遠(yuǎn)位于 head 元素內(nèi)部

meta常見屬性

來自http://www.runoob.com/

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

文檔聲明作用
總是給您的 HTML 文檔添加 <!DOCTYPE> 聲明，確保瀏覽器能夠預(yù)先知道文檔類型。

嚴(yán)格模式和混雜模式指什么

  • JavaScript 嚴(yán)格模式（strict mode）即在嚴(yán)格的條件下運行。
    使用 "use strict" 指令
    "use strict" 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。
    它不是一條語句，但是是一個字面量表達式，在 JavaScript 舊版本中會被忽略。
    "use strict" 的目的是指定代碼在嚴(yán)格條件下執(zhí)行。
    嚴(yán)格模式下你不能使用未聲明的變量。
    嚴(yán)格模式聲明
    嚴(yán)格模式通過在腳本或函數(shù)的頭部添加 "use strict"; 表達式來聲明。
  • 為什么使用嚴(yán)格模式:
    消除Javascript語法的一些不合理、不嚴(yán)謹(jǐn)之處，減少一些怪異行為;
    消除代碼運行的一些不安全之處，保證代碼運行的安全；

提高編譯器效率，增加運行速度；
為未來新版本的Javascript做好鋪墊。
例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
</head>
<body>
<p>在函數(shù)內(nèi)使用 "use strict" 只在函數(shù)內(nèi)報錯。
</p>
<p>瀏覽器按下 F12 開啟調(diào)試模式，查看報錯信息。</p>
<script>
x = 3.14;       // 不報錯 
myFunction();
function myFunction() {
   "use strict";
    y = 3.14;   // 報錯 (y 未定義)
}

混雜模式:在混雜模式中，頁面以一種比較寬松的向后兼容的方式顯示?；祀s模式通常模擬老式瀏覽器的行為以防止老站點無法工作
-->嚴(yán)格模式參考鏈接

<!doctype html> 的作用
<!DOCTYPE> 聲明位于文檔中的最前面的位置，處于 <html> 標(biāo)簽之前。
<!DOCTYPE> 聲明不是一個 HTML 標(biāo)簽；它是用來告知 Web 瀏覽器頁面使用了哪種 HTML 版本。

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

原因:

  1. 亂碼產(chǎn)生的根本原因是你保存的編碼格式和瀏覽器解析時的解碼格式不匹配導(dǎo)致的。
  2. 亂碼一般是英文以外的字符才會出現(xiàn)。
    為啥純粹的英文不會出現(xiàn)亂碼問題，即使編碼方式和解碼方式不一致？那是因為前面講過了 utf-8、gbk對英文都是采用1個字節(jié)的編碼方式，并且使用了相同的碼字。

解決:
1.在文件保存的時候你自己要清楚是用哪種編碼方式保存的。如果你的文件是保存為utf-8格式，那么一定要在html 的 <head>里添加<meta charset="utf-8">，這句話的意思是告訴瀏覽器在打開這個頁面的時候不要去猜了，直接用utf-8去解碼。
2.同理，如果你的文件保存為gbk格式，一定在文件里添加<meta charset="gbk">。
以上參考鏈接

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

世界上主流的瀏覽器有五種，Google Chrome、Safari、Firefox, IE、Opera、

內(nèi)核作用
瀏覽器最重要或者說核心的部分是“Rendering Engine”，可大概譯為“渲染引擎”，不過我們一般習(xí)慣將之稱為“瀏覽器內(nèi)核”。負(fù)責(zé)對網(wǎng)頁語法的解釋（如標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用HTML、JavaScript）并渲染（顯示）網(wǎng)頁。 所以，通常所謂的瀏覽器內(nèi)核也就是瀏覽器所采用的渲染引擎，渲染引擎決定了瀏覽器如何顯示網(wǎng)頁的內(nèi)容以及頁面的格式信息。不同的瀏覽器內(nèi)核對網(wǎng)頁編寫語法的解釋也有不同，因此同一網(wǎng)頁在不同的內(nèi)核的瀏覽器里的渲染（顯示）效果也可能不同，這也是網(wǎng)頁編寫者需要在不同內(nèi)核的瀏覽器中測試網(wǎng)頁顯示效果的原因。

內(nèi)核分類：
Trident：
IE內(nèi)核

>Gecko：
Gecko(Firefox內(nèi)核)：Mozilla FireFox(火狐瀏覽器) 采用了該內(nèi)核。

>Webkit：
Webkit(Safari內(nèi)核,Chrome內(nèi)核原型,開源):它是蘋果公司自己的內(nèi)核，也是蘋果的Safari瀏覽器使用的內(nèi)核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎。WebKit內(nèi)核常見的瀏覽器：傲游瀏覽器3、Apple Safari (Win/Mac/iPhone/iPad)、Android 默認(rèn)瀏覽器。在腳本理解方面，Chrome使用自己研發(fā)的V8引擎。

>Blink：
Blink是一個由Google和Opera Software開發(fā)的瀏覽器排版引擎，Opera表示將會跟隨谷歌采用其Blink瀏覽器核心，同時參與了Blink的開發(fā).

>JavaScript引擎
JavaScript引擎是一個專門處理JavaScript腳本的虛擬機，一般會附帶在網(wǎng)頁瀏覽器之中。
>Mozilla：
SpiderMonkey，第一款JavaScript引擎。

>Google：
V8引擎，是Chrome瀏覽器的一部分。

>微軟：
Chakra (JScript引擎)，中文譯名為查克拉，用于Internet Explorer 9的32位版本。

>Opera：
Carakan，由Opera軟件公司編寫，自O(shè)pera10.50版本開始使用。

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

HTML文本修飾標(biāo)記

<b></b>：加粗bold。如：<b>HTML文件</b>
<i></i>：斜體italic。如：<i>HTML文本</i>
<u></u>：下劃線underline。如：<u>HTML文本</u>
<s></s>：刪除線strike。如：<s>刪除線</s>
<sup></sup>上標(biāo)。
<sub></sub>下標(biāo)。

<font></font>字體標(biāo)記
屬性：Size：文本大小，取值1-7。1小，7大。
     Color：顏色值。
     Face：字體，楷體、黑體、宋體...

HTML排版標(biāo)記

1.<p></p>表示一個段落。
常用屬性：align：水平對齊方式，取值：left(左)、 center(居中)、 right(右)
舉例：<p align="center">水平對齊方式居中對齊</p>
2.換行標(biāo)記<br>
3.水平線標(biāo)記(單邊標(biāo)記)：<hr>
size：水平線的粗細(xì)，單位一般為px。
color：水平線的顏色。
width：水平線的寬度。
noshade：去掉水平線的陰影(在HTML中，noshade是沒有值的屬性)。如：<hr noshade>
4.<pre>預(yù)排版標(biāo)記
功能：將保留所有的空白字符(空格、換行符)，換句話說：就是原封不動輸出。
語法：<pre>內(nèi)容</pre>
5.標(biāo)題標(biāo)記：<h1>……<h6>
功能：定義各種標(biāo)題。
屬性：align水平對齊方式，取值：left、center、right。
語法：<h1  align = “l(fā)eft | center | right”></h1>

<div>和<span>標(biāo)記

<span>是沒有任何意義的標(biāo)記，但是，又是使用最多的標(biāo)記。<span>要與CSS配合使用。<span>是行內(nèi)元素。

>（1）塊元素
塊元素，一般是單獨占一行，不管內(nèi)容多少，總是占一行。
塊元素有哪些？<div>、<p>、<h1>、<h2>、<pre>等
>（2）行內(nèi)元素
行內(nèi)元素，不會單獨占一行。
行內(nèi)元素的寬度，主要是根據(jù)內(nèi)容決定。
多個行內(nèi)元素，會排在同一行。
行內(nèi)元素有哪些？<span> <font>、<b>、<i>、<u>、<sub>、<sup>等
結(jié)論：在標(biāo)記嵌套時，一般是塊元素中嵌套行內(nèi)元素。

:版權(quán)歸個人所有,轉(zhuǎn)載注明出處

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

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

  • HTML、XML、XHTML的區(qū)別 HTML是一種超文本標(biāo)記語言，語法較為松散，不規(guī)范。 XML是一種可擴展標(biāo)記語...
    饑人谷_Leon閱讀 411評論 0贊 1
  • 1. HTML, XML, XHTML 有什么區(qū)別？ HTML (HyperText Markup Langua...
    饑人谷_邵征鵬閱讀 415評論 0贊 0
  • 1、HTML、XML、XHTML 有什么區(qū)別 HTML(HyperText Markup Language)：超文...
    tangmengyun閱讀 255評論 0贊 1
  • HTML、XML、XHTML 有什么區(qū)別 HTML是一種超文本標(biāo)記語言，語法松散，不嚴(yán)格的web語言。 XML是可...
    機智的大口袋閱讀 295評論 0贊 1
  • “耿辛，這邊?！蔽乙贿M時代火鍋店，就看到劉叔笑著招呼我。我深呼吸了兩次，慢慢走了過去。 劉叔選的是角落里的一張桌子...
    默陌朋閱讀 539評論 0贊 1

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