1-4.HTML的部分概念

公共參考文獻(xiàn)
1.w3schools.com
2.前端工程師手冊

一、HTML、XML、XHTML的區(qū)別

1.HTML

HTML（Hyper Text Markup Language）表示超文本標(biāo)記語言（超文本是用超鏈接的方法，將各種不同空間的信息連接在一起）。HTML允許嵌入圖像與對象，并且可以用于創(chuàng)建交互式表單，它利用標(biāo)簽來結(jié)構(gòu)化網(wǎng)頁內(nèi)容，也可在一定程度上描述文檔的外觀和語義。如圖示：

HTML文檔示例

2.XML

XML（eXtensible Markup Language）表示可擴(kuò)展標(biāo)記語言，被設(shè)計(jì)用來存儲和傳輸數(shù)據(jù)。XML不僅可用于網(wǎng)頁，也可用于眾多其他領(lǐng)域。如下圖示為我工作中遇過到的XML文件，此處用于存儲機(jī)器人各軸的極限角度和初始角度。


XML文檔示例

3.XHTML

XHTML（eXtensible HyperText Markup Language）表示可擴(kuò)展超文本標(biāo)記語言，與HTML類似，但更加嚴(yán)格更加純凈。XHTML要求文檔必須具有良好的結(jié)構(gòu)，比如標(biāo)簽必須閉合、小寫，所有的參數(shù)值，包括數(shù)字，必須用雙引號括起來，省略參數(shù)也不允許等。

4.三者區(qū)別

HTML語法要求較為松散，不嚴(yán)格，這對于Web未來的發(fā)展極為不利。對于機(jī)器來說，語言的語法越松散，處理起來就越困難，對于傳統(tǒng)的電腦來說，還有能力兼容松散語法，但對于許多其他設(shè)備，比如手機(jī)，難度就比較大。

XHTML就是基于嚴(yán)謹(jǐn)?shù)腦ML格式，來再設(shè)計(jì)的HTML。

XML和HTML、XML一樣都是標(biāo)記語言，語法嚴(yán)格，標(biāo)簽需要自定義但其并不用于頁面展示。

二、HTML語義化

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

通過遵守這樣一個(gè)規(guī)則，使HTML的結(jié)構(gòu)更加清晰，對于程序員讀懂代碼、團(tuán)隊(duì)協(xié)作、搜索引擎優(yōu)化，視力障礙人士使用的讀屏器都有著非常積極的作用。

三、內(nèi)容與樣式分離

1.寫 HTML 的時(shí)候先不管樣式, 重點(diǎn)放在HTML的結(jié)構(gòu)和語義化上，讓 HTML 能體現(xiàn)頁面結(jié)構(gòu)或者內(nèi)容。之后再去寫樣式。
2.HTML 內(nèi)不允許出現(xiàn)屬性樣式，盡量不要出現(xiàn)行內(nèi)樣式。

在CSS出現(xiàn)前，網(wǎng)頁的內(nèi)容和樣式都由HTML定義，這樣不僅導(dǎo)致了HTML結(jié)構(gòu)復(fù)雜，樣式屬性眾多，很多標(biāo)簽沒有任何語義，只是表示特殊的樣式。這樣的雜糅是非常不利于HTML文檔的閱讀和修改。

在新式的頁面中HTML只表示結(jié)構(gòu)和內(nèi)容，樣式部分交給CSS控制，做到了內(nèi)容和表現(xiàn)分離，方便維護(hù)。

四、常見的meta標(biāo)簽

參考文獻(xiàn)
1.常用meta整理
2.關(guān)于<meta name="keywords" content=" ">
3.移動前端開發(fā)之viewport的深入理解
4.MDN <meta>

1.meta標(biāo)簽介紹

<meta> 元素可提供有關(guān)頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關(guān)鍵詞。<meta> 標(biāo)簽永遠(yuǎn)位于 head 元素內(nèi)部。元數(shù)據(jù)不會顯示在頁面上，但是對于機(jī)器是可讀的。

1.content：定義與http-equiv或name屬性相關(guān)的元信息。
2.http-equiv：這個(gè)枚舉屬性定義了能改變服務(wù)器和用戶引擎行為的編譯。這個(gè)編譯值使用content 來定義。
3.name：把 content 屬性關(guān)聯(lián)到一個(gè)名稱，名稱通?？梢宰杂啥x，同時(shí)也出現(xiàn)了很多為大家熟知通用的名稱，如keywords、author、viewport等。

2.常用語句

1.charset屬性

聲明當(dāng)前文檔所使用的字符編碼，文檔保存時(shí)的字符編碼要與之一致，否則可能導(dǎo)致頁面亂碼。
<meta charset = 'utf-8' />

2.不同的http-equiv屬性

  • 這個(gè)聲明允許開發(fā)者選定特定的IE版本來模擬解析網(wǎng)頁以此解決網(wǎng)頁的兼容性問題。X-UA-Compatible是從IE8起新增的專用標(biāo)記，到IE11時(shí)被棄用，此處的"IE=edge"即為使用最新的引擎渲染網(wǎng)頁。加入chrome=1是可以在IE6~9的用戶安裝了Google Chrome Frame時(shí)使用它來渲染頁面，不過在2014年便被棄用。
    在使用時(shí)要保證這句話至于head除title和其他meta元素以外元素的前面，否則不起作用。
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

  • 禁止瀏覽器從本地計(jì)算機(jī)的緩存中訪問頁面內(nèi)容。這樣設(shè)定，訪問者將無法脫機(jī)瀏覽
    <meta http-equiv="Pragma" content="no-cache">

  • 定時(shí)讓網(wǎng)頁在指定的時(shí)間n內(nèi)，跳轉(zhuǎn)到你的頁面
    <meta http-equiv="Refresh" content="n;url=http://yourlink">

3.不同的name屬性

  • 用于移動設(shè)備展示
    • width=device-width：viewport的寬度等于設(shè)備的寬度；
    • initial-scale=1.0：頁面的初始縮放值；
    • maximum-scale=1.0：允許用戶的最大縮放值；
    • user-scalable=0：是否允許用戶進(jìn)行縮放。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

  • robots用來告訴搜索機(jī)器人哪些頁面需要索引，哪些頁面不需要索引。content用逗號分隔。content的參數(shù)有all、none、index、noindex、follow、nofollow。默認(rèn)是all。

<meta name="robots" content="index,follow" />

  • keywords為搜索引擎提供的關(guān)鍵字列表，用逗號分隔字符串。

<meta name="keywords" content="science, education,culture" />

  • description用來告訴搜索引擎你的網(wǎng)站主要內(nèi)容。

<meta name="description" content="150 words" />

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

參考文獻(xiàn)
1.HTML head 頭標(biāo)簽
2.HTML <!DOCTYPE> 標(biāo)簽 - w3cschool

DOCTYPE(Document Type)，該聲明位于文檔中最前面的位置，處于 html 標(biāo)簽之前，此標(biāo)簽告知瀏覽器文檔使用哪種 HTML 或者 XHTML 規(guī)范。

1.常用聲明

HTML5：簡潔，向前向后兼容，推薦使用。
<!doctype html>

HTML 4.01 strict：該 DTD 包含所有 HTML 元素和屬性，但不包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional：該 DTD 包含所有 HTML 元素和屬性，包括展示性的和棄用的元素（比如 font）。不允許框架集（Framesets）。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset：該 DTD 等同于 HTML 4.01 Transitional，但允許框架集內(nèi)容。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

六、瀏覽器亂碼的原因及解決方法

參考文獻(xiàn)
1.聊一聊編碼與亂碼
2.HTML5 UTF-8 中文亂碼

1.原因

html文檔聲明的字符編碼，如<meta charset = 'utf-8' />與文檔保存時(shí)使用的字符編碼不一致，這樣瀏覽器打開頁面時(shí)使用文檔聲明的utf-8解碼會出現(xiàn)亂碼?；蛘呶臋n沒有聲明字符編碼，瀏覽器使用默認(rèn)編碼來解碼也可能不匹配。亂碼一般出現(xiàn)在英文以外的字符。

2.解決方法

html文檔中聲明字符編碼，并在保存時(shí)選擇相應(yīng)的字符編碼。

七、常見瀏覽器及其內(nèi)核

參考文獻(xiàn)
1.List of web browsers - wikipedia
2.瀏覽器內(nèi)核 - Leo_wlCnBlogs
3.各主流瀏覽器內(nèi)核介紹 - VaJoy

瀏覽器 內(nèi)核
Chrome Blink(fork of Webkit)
Internet Explorer Trident
Firefox Gecko
Microsoft Edge EdgeHTML
Safari Webkit
Opera Blink
搜狗/QQ/360極速&安全 Blink和Trident/EdgeHTML

注：以上皆為最新版本采用內(nèi)核

八、常見標(biāo)簽及應(yīng)用場景

標(biāo)簽 應(yīng)用場景
h1 ~ h6 標(biāo)題
p 段落
a 行內(nèi)元素、鏈接
img 圖片
div 塊，通常用于布局
ul li 用于無序列表、ul直接子元素是li、可嵌套
ol li 用于有序列表、ul直接子元素是li、可嵌套
table 表格
tr 表格行
th 表頭元素
td 表格單元元素
dl dt dd dl表示定義列表，dt為列表中的項(xiàng)目，dd為dt的描述
button 按鈕
strong 著重強(qiáng)調(diào)文本
em 加強(qiáng)語氣，感情
span 行內(nèi)元素，用來格式化樣式
iframe 創(chuàng)建包含另一個(gè)文檔的內(nèi)聯(lián)框架
form 用于創(chuàng)建HTML表單，包含input、label、textarea等元素
input 用于搜集用戶輸入的信息，如創(chuàng)建button、checkbox、file、<br />hidden、password、radio等
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

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

  • HTML、XML、XHTML 有什么區(qū)別 1.HTML 是用來描述網(wǎng)頁的一種語言，指的是超文本標(biāo)記語言 (Hype...
    饑人谷_牛牛閱讀 828評論 0贊 2
  • 格式后期處理。 Jeremy Keith在 Fronteers 2010 上的主題演講 今天我想跟大家談一談HTM...
    LordZhou閱讀 1,217評論 0贊 17
  • 一:在制作一個(gè)Web應(yīng)用或Web站點(diǎn)的過程中，你是如何考慮他的UI、安全性、高性能、SEO、可維護(hù)性以及技術(shù)因素的...
    Arno_z閱讀 1,366評論 0贊 1
  • HTML、XML、XHTML有什么區(qū)別？ XMLXML是The Extensible Markup Languag...
    zx9426閱讀 525評論 0贊 1
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,167評論 1贊 92

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