整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創(chuàng)建網(wǎng)頁的標準標記語言。HTML是一種基礎技術(shù)，常與CSS、JavaScript一起被眾多網(wǎng)站用于設計令人賞心悅目的網(wǎng)頁、網(wǎng)頁應用程序以及移動應用程序的用戶界面。網(wǎng)頁瀏覽器可以讀取HTML文件，并將其渲染成可視化網(wǎng)頁。HTML描述了一個網(wǎng)站的結(jié)構(gòu)語義隨著線索的呈現(xiàn)，使之成為一種標記語言而非編程語言。
HTML元素是構(gòu)建網(wǎng)站的基石。HTML允許嵌入圖像與對象，并且可以用于創(chuàng)建交互式表單，它被用來結(jié)構(gòu)化信息——例如標題、段落和列表等等，也可用來在一定程度上描述文檔的外觀和語義。HTML的語言形式為尖括號包圍的HTML元素（如<html>），瀏覽器使用HTML標簽和腳本來詮釋網(wǎng)頁內(nèi)容，但不會將它們顯示在頁面上。
HTML可以嵌入如JavaScript的腳本語言，它們會影響HTML網(wǎng)頁的行為。網(wǎng)頁瀏覽器也可以引用層疊樣式表（CSS）來定義文本和其它元素的外觀與布局。維護HTML和CSS標準的組織萬維網(wǎng)聯(lián)盟（W3C）鼓勵人們使用CSS替代一些用于表現(xiàn)的HTML元素。
歷史
W3C制作的早期HTML標志
發(fā)展
蒂姆·伯納斯-李
1980年，物理學家蒂姆·伯納斯-李在歐洲核子研究中心（CERN）在承包工程期間，為使CERN的研究人員使用并共享文檔，他提出并創(chuàng)建原型系統(tǒng)ENQUIRE。1989年，伯納斯-李在一份備忘錄中提出一個基于互聯(lián)網(wǎng)的超文本系統(tǒng)。他規(guī)定HTML并在1990年底寫出瀏覽器和服務器軟件。同年，伯納斯-李與CERN的數(shù)據(jù)系統(tǒng)工程師羅伯特·卡里奧聯(lián)合為項目申請資助，但未被CERN正式批準。在他的個人筆記中伯納斯-李列舉“一些使用超文本的領域”，并把百科全書列為首位。
HTML的首個公開描述出現(xiàn)于一個名為“HTML標簽”的文件中，由蒂姆·伯納斯-李于1991年底提及。它描述18個元素，包括HTML初始的、相對簡單的設計。除了超鏈接標簽外，其他設計都深受CERN內(nèi)部一個以標準通用標記語言（SGML）為基礎的文件格式SGMLguid的影響。這些元素在HTML 4中仍有11個存在。
伯納斯-李認為HTML是SGML的一個應用程序。1993年中期互聯(lián)網(wǎng)工程任務組（IETF）發(fā)布首個HTML規(guī)范的提案：“超文本標記語言（HTML）”互聯(lián)網(wǎng)草案，由伯納斯-李與丹·康納利（英語：Dan Connolly (computer scientist)）撰寫。其中包括一個SGML文檔類型定義來定義語法。草案于6個月后過期，不過值得注意的是其對NCSA Mosaic瀏覽器自定義標簽從而將在線圖像嵌入的行為的認可，這反映IETF把標準立足于成功原型的理念。同樣，戴夫·拉格特（英語：Dave Raggett）在1993年末提出的與之競爭的互聯(lián)網(wǎng)草案“HTML+（超文本標記格式）”建議規(guī)范已經(jīng)實現(xiàn)的功能，如表格與填寫表單。
在HTML和HTML+的草案于1994年初到期后，IETF創(chuàng)建一個HTML工作組，并在1995年完成"HTML 2.0"，這是第一個旨在成為對其后續(xù)實現(xiàn)標準的依據(jù)的HTML規(guī)范。
在IETF的主持下，HTML標準的進一步發(fā)展因競爭利益而遭受停滯。自1996年起，HTML規(guī)范一直由萬維網(wǎng)聯(lián)盟（W3C）維護，并由商業(yè)軟件廠商出資。不過在2000年，HTML也成為國際標準（ISO/ IEC15445：2000）。HTML 4.01于1999年末發(fā)布，進一步的勘誤版本于2001年發(fā)布。2004年，網(wǎng)頁超文本應用技術(shù)工作小組（WHATWG）開始開發(fā)HTML5，并在2008年與W3C共同交付，2014年10月28日完成標準化。
版本時間線
1995年11月24日
HTML 2.0作為IETF RFC 1866發(fā)布。追加RFC的附加功能：
1995年11月25日：RFC 1867（基于表單的文件上傳）
1996年5月：RFC 1942（表格）
1996年8月：RFC 1980（客戶端圖像映射）
1997年1月：RFC 2070（國際化）
1997年1月14日
HTML 3.2作為W3C推薦標準發(fā)布。這是首個完全由W3C開發(fā)并標準化的版本，因IETF于1996年9月12日關(guān)閉它的HTML工作組。
最初代號為“威爾伯”（Wilbur），HTML 3.2完全去除數(shù)學公式，協(xié)調(diào)各種專有擴展，并采用網(wǎng)景設計的大多數(shù)視覺標記標簽。由于兩家公司達成了協(xié)議，網(wǎng)景的閃爍元素（英語：blink element）和微軟的滾動元素（英語：marquee element）被移除。HTML對數(shù)學公式的支持最后成為另外一種被稱為MathML的標準。
1997年12月18日
HTML 4.0作為W3C推薦標準發(fā)布。它提供三種變化：
嚴格，過時的元素被禁止。
過渡，過時的元素被允許。
框架集，大多只與框架相關(guān)的元素被允許。
最初代號“美洲獅”（Cougar）， HTML 4.0采用許多特定瀏覽器的元素類型和屬性，并試圖淘汰網(wǎng)景的視覺標記功能，將其標記為不贊成使用。HTML 4是遵循ISO 8879 - SGML的SGML應用程序。
1998年4月24日
HTML 4.0進行微調(diào)，不增加版本號。
1999年12月24日
HTML 4.01作為W3C推薦標準發(fā)布。它同樣提供三種變化，最終勘誤版于2001年5月12日發(fā)布。
2000年5月
ISO/IEC 15445:2000（"ISO HTML"，基于HTML 4.01嚴格版）作為ISO/IEC國際標準發(fā)布。在ISO中這一標準位于ISO/IEC JTC 1/SC 34（英語：ISO/IEC JTC 1/SC 34）域（ISO/IEC聯(lián)合技術(shù)委員會1、小組委員會34 – 文檔描述與處理語言）。
2014年10月28日
HTML 5作為W3C推薦標準發(fā)布。
草案時間線
HTML5的Logo
1991年10月
HTML標簽，一個非正式CERN文件首次公開18個HTML標簽。
1992年6月
HTML DTD的首個非正式草案， 后續(xù)有七個修訂版（7月15日，8月6日，8月18日，11月17日，11月19日，11月20日，11月22日）。
1992年11月
HTML DTD 1.1（首個版本號，基于RCS修訂版，版本號從1.1開始而非1.0），非正式草案。
1993年6月
超文本標記語言由IETF IIIR工作小組作為互聯(lián)網(wǎng)草案（一個粗略的建議標準）。在被第二版代一個月后，IETF又發(fā)布6個草案，最終在RFC1866中發(fā)布HTML 2.0。
1993年11月
HTML+由IETF作為互聯(lián)網(wǎng)草案發(fā)布，是超文本標記語言草案的一個競爭性提案。它于1994年5月到期。
1995年4月 （1995年3月編寫）
HTML 3.0[33]被提議作為IETF的標準，但直到提案在五個月過期后（1995年9月28日）仍沒有進一步的行動。它包含許多拉格特HTML+提案的功能，如對表格的支持、圍繞數(shù)據(jù)的文本流和復雜的數(shù)學公式的顯示。W3C開始開發(fā)自己的Arena瀏覽器作為HTML 3和層疊樣式表的試驗臺（英語：Test bed），但HTML 3.0并沒有獲得成功。瀏覽器廠商，包括微軟和網(wǎng)景，選擇實現(xiàn)HTML3草案功能的不同子集并引入它們自己的插件（見瀏覽器大戰(zhàn)）。
2008年1月
HTML5由W3C作為工作草案（鏈接）發(fā)布。雖然HTML5的語法非常類似于SGML，但它已經(jīng)放棄任何成為SGML應用程序的嘗試，除了一種替代的基于XML的HTML5序列，它已明確定義自己的“HTML”序列。
2011年 HTML5 – 最終征求
2011年5月，工作小組將HTML5推進至“最終征求”（Last Call）階段，邀請W3C社區(qū)內(nèi)外人士以確認本規(guī)范的技術(shù)可靠性。W3C開發(fā)一套綜合性測試套件來實現(xiàn)完整規(guī)范的廣泛交互操作性，完整規(guī)范的目標日期為2014年。2011年1月，WHATWG將其“HTML5”活動標準重命名為“HTML”。W3C仍然繼續(xù)其發(fā)布HTML5的項目。
2012年 HTML5 – 候選推薦
2012年7月，WHATWG和W3C的工作產(chǎn)生一定程度的分離。W3C繼續(xù)HTML5規(guī)范工作，重點放在單一明確的標準上，這被WHATWG稱為“快照”。WHATWG組織則將HTML5作為一個“活動標準”（Living Standard）。活動標準的概念是從未完成但永遠保持更新與改進，可以添加新特性，但功能點不會被刪除。
2012年12月，W3C指定HTML5作為候選推薦階段。 該階段的標準為“兩個100％完成，完全實現(xiàn)交互操作”。
2014年 HTML5 – 提案推薦與推薦
2014年9月，HTML5進入提案推薦階段。
2014年10月28日，HTML5作為穩(wěn)定W3C推薦標準發(fā)布，這意味著HTML5的標準化已經(jīng)完成。
XHTML版本
XHTML是使用XML 1.0改寫自HTML 4.01的獨立語言。它不再被作為單獨標準開發(fā)。
XHTML 1.0， 2000年1月26日作為W3C推薦標準發(fā)布。修訂版于2002年8月1日發(fā)布，它提供與HTML 4.0和4.01相同的三個變化，這些變化被重新在XML中制定。
XHTML 1.1，基于XHTML 1.0 嚴格版，2001年5月31日 作為W3C推薦標準發(fā)布。修訂版可使用模塊化XHTML的模塊，2001年4月10日作為W3C推薦標準發(fā)布。
XHTML 2.0為工作草案，但為支持HTML5與XHTML5的工作，此草案被放棄。 XHTML 2.0與XHTML 1.x不兼容，因此更確切的說這是一個XHTML風格的新語言而不是XHTML 1.x的更新。
在HTML5草案中規(guī)定一個XHTML語法，稱為“XHTML5.1”。
標記
HTML標記包含標簽（及其屬性）、基于字符的數(shù)據(jù)類型、字符引用和實體引用等幾個關(guān)鍵部分。HTML標簽是最常見的，通常成對出現(xiàn)，比如<h1>與</h1>。這些成對出現(xiàn)的標簽中，第一個標簽是開始標簽，第二個標簽是結(jié)束標簽。兩個標簽之間為元素的內(nèi)容，有些標簽沒有內(nèi)容，為空元素，如<img>。
HTML另一個重要組成部分為文檔類型聲明（英語：document type declaration），這會觸發(fā)標準模式渲染。
以下是一個經(jīng)典的Hello World程序的例子：
<!DOCTYPE html>
<html>
<head>
<title>This is a title</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
<html>和</html>之間的文本描述網(wǎng)頁，<body>和</body>之間的文本為可視頁面內(nèi)容。標記文本<title>This is a title</title>定義了瀏覽器的頁面標題。
文檔標記類型<!DOCTYPE html>用于HTML5。 如果未進行聲明，瀏覽器會使用“怪異模式”進行渲染。
元素
HTML文檔由嵌套的HTML元素構(gòu)成。它們用HTML標簽表示，包含于尖括號中，如<p>
在一般情況下，一個元素由一對標簽表示：“開始標簽”<p>與“結(jié)束標簽”</p>。元素如果含有文本內(nèi)容，就被放置在這些標簽之間。
在開始與結(jié)束標簽之間也可以封裝另外的標簽，包括標簽與文本的混合。這些嵌套元素是父元素的子元素。
開始標簽也可包含標簽屬性。這些屬性有諸如標識文檔區(qū)段、將樣式信息綁定到文檔演示和為一些如<img>等的標簽嵌入圖像、引用圖像來源等作用。
一些元素如換行符<br>，不允許嵌入任何內(nèi)容，無論是文字或其他標簽。這些元素只需一個單一的空標簽（類似于一個開始標簽），無需結(jié)束標簽。
許多標簽是可選的，尤其是那些很常用的段落元素<p>的閉合端標簽。HTML瀏覽器或其他媒介可以從上下文識別出元素的閉合端以及由HTML標準所定義的結(jié)構(gòu)規(guī)則。這些規(guī)則非常復雜，不是大多數(shù)HTML編碼人員可以完全理解的。
因此，一個HTML元素的一般形式為：<tag attribute1="value1" attribute2="value2">''content''</tag>。一些HTML元素被定義為空元素，其形式為<tag attribute1="value1" attribute2="value2">。空元素不能封裝任何內(nèi)容。例如<br>標簽或內(nèi)聯(lián)標簽<img>。一個HTML元素的名稱即為標簽使用的名稱。注意，結(jié)束標簽的名稱前面有一個斜杠“/”，空元素不需要也不允許結(jié)束標簽。如果元素屬性未標明，則使用其默認值。
例子
HTML文檔的頁眉：<head>...</head>。標題被包含在頭部，例如：
<head>
<title>The Title</title>
</head>
標題：HTML標題由<h1>到<h6>六個標簽構(gòu)成，字體由大到小遞減：
<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>
段落：
<p>第一段</p> <p>第二段</p>
換行：<br>。<br>與<p>之間的差異是br換行但不改變頁面的語義結(jié)構(gòu)，而p部分的頁面成段。
<p>這是<br>一個<br>使用換行<br>段落</p>
鏈接：使用<a>標簽來創(chuàng)建鏈接。href屬性包含鏈接的URL地址。
<a >中文維基百科的連結(jié)！</a>
注釋：
<!-- This is a comment -->
注釋有助于理解標記，但它不會在網(wǎng)頁上顯示。
HTML中存在以下幾種類型的標記元素：
用于文本的結(jié)構(gòu)式標記
例如，<h2>羽毛球</h2>將“羽毛球”定義為二級標題。結(jié)構(gòu)式標記不指示任何特定的渲染，但大多數(shù)網(wǎng)頁瀏覽器都會采用元素格式的默認樣式。要在內(nèi)容上實現(xiàn)進一步的風格可以使用層疊樣式表（CSS）。
用于文本外觀的表現(xiàn)式標記，不論其目的
例如，<b>粗體</b>表示視覺輸出設備應將文本“粗體”加粗，但如果設備無法做到這一點（如朗讀文本的聽覺設備），就不會發(fā)生什么現(xiàn)象。在這種情況下，<b>粗體</b>與''斜體''也可能有相同的視覺效果，但在本質(zhì)上它們更加語義化。如同<strong>加強文字</strong>與<em>強調(diào)文字</em>的區(qū)別。為支持CSS的使用，大多數(shù)表現(xiàn)式標記在HTML 4.0規(guī)范中不再被推薦使用。
超文本標記使文檔的一部分鏈接到其他文檔
錨元素在文檔中創(chuàng)建超鏈接，其href屬性設置鏈接的目標URL。例如：HTML標記<a 渲染為超鏈接。要將圖片渲染為超鏈接，img元素要作為內(nèi)容插入到a元素中：<a ><img src="image.gif" alt="說明文字" width="50" height="50" border="0"></a>。
屬性
大多數(shù)元素的屬性以“名稱-值”的形式成對出現(xiàn)，由“=”分離并寫在開始標簽元素名之后。值一般由單引號或雙引號包圍，有些值的內(nèi)容包含特定字符，在HTML中可以去掉引號（XHTML不行）。不加引號的屬性值被認為是不安全的[58]。有些屬性無需成對出現(xiàn)，僅存在于開始標簽中即可影響元素[6]，如img 元素的ismap 屬性。
許多元素存在一些共通的屬性：
id屬性為元素提供了在全文檔內(nèi)的唯一標識。它用于識別元素，以便樣式表可以改變其表現(xiàn)屬性，腳本可以改變、顯示或刪除其內(nèi)容或格式化。對于添加到頁面的URL，它為元素提供了一個全局唯一標識，通常為頁面的子章節(jié)。例如，ID "屬性"對于https://zh.wikipedia.org/wiki/HTML#屬性
class屬性提供一種將類似元素分類的方式。常被用于語義化或格式化。例如，一個HTML文檔可指定類<class="標記">來表明所有具有這一類值的元素都從屬于文檔的主文本。格式化后，這樣的元素可能會聚集在一起，并作為頁面腳注而不會出現(xiàn)在HTML代碼中。類屬性也被用于微格式的語義化。類值也可進行多聲明。如<class="標記 重要">將元素同時放入標記與重要兩類中。
style屬性可以將表現(xiàn)性質(zhì)賦予一個特定元素。比起使用id或class 屬性從樣式表中選擇元素，“style”被認為是一個更好的做法，盡管有時這對一個簡單、專用或特別的樣式顯得太繁瑣。
title屬性用于給元素一個附加的說明。 大多數(shù)瀏覽器中這一屬性顯示為工具提示（英語：Tooltip）。
lang屬性用于識別元素內(nèi)容的語言，它可能與文檔的主要語言不同。例如，在中文文檔中：
<p>法語<span lang="fr">c'est la vie</span>在法國的應用很普遍，意為“這就是生活” 。<p>
縮寫元素abbr可用于說明一些屬性：
<abbr id="ID" class="術(shù)語" style="color:purple;" title="超文本標記語言">HTML</abbr>
這個例子顯示為HTML； 在大多數(shù)瀏覽器中，光標指向縮寫時會顯示標題文字“超文本標記語言”。
大多數(shù)元素采用與語言相關(guān)的屬性dir 來指定文字方向，如 "rtl"采用從右到左的文本，比如阿拉伯語、波斯語以及希伯來語。
字符與實體引用
參見：XML與HTML字符實體引用列表和Unicode與HTML
在4.0版本中，HTML定義了一系列共252個字符實體引用和1,114,050個字元值參考。二者都支持單個字符通過簡單的標記寫入。文字字符與其對應的標記渲染的效果相同。
用這種方式“轉(zhuǎn)義”字符的能力允許字符<與&（當分別被寫作<和&時）被理解為字符數(shù)據(jù)而不是標記。例如<通常為標簽的開頭，&通常為字符實體引用與數(shù)字字符引用的開頭；&或&或&將&作為元素的內(nèi)容或?qū)傩缘闹怠ｋp引號字符"在不被用于屬性值的標示時必須轉(zhuǎn)義為"或"或"；相等地，當于單引號字符'不被用于屬性值的標示時，也必須轉(zhuǎn)義為'或'（或HTML5與XHTML文檔中的'）。
如果文檔作者忽略了轉(zhuǎn)義這樣的字符，一些瀏覽器會嘗試通過上下文猜測他們的意圖。如果結(jié)果仍為無效標記，這會使其他瀏覽器或用戶代理難以訪問到該文檔，并使它們嘗試使用搜索和索引來解析該文檔。
那些難以輸入或不在該文檔字符編碼中的字符也可通過轉(zhuǎn)義來實現(xiàn)。例如通常只在西歐或南美的鍵盤出現(xiàn)的重音符e（é），可以在HTML文檔中用作實體引用é 或數(shù)字引用é或é。 諸如UTF-8的Unicode字符編碼與所有的現(xiàn)代瀏覽器兼容并允許直接訪問全球書寫系統(tǒng)幾乎所有的字符 。
數(shù)據(jù)類型
HTML為元素內(nèi)容定義了多種數(shù)據(jù)類型，如腳本數(shù)據(jù)、樣式表數(shù)據(jù)以及許多屬性值的類型，包括ID、名稱、URI、數(shù)字長度單位、語言、媒體描述符顏色、字符編碼、日期和時間等等。所有這些數(shù)據(jù)類型都是字符數(shù)據(jù)的特殊化。
文檔類型聲明
HTML文檔需要以文檔類型聲明（英語：document type declaration）（英語非正式說法“doctype”）開頭。在瀏覽器中，文檔類型聲明有助于確定渲染模式——特別是是否使用怪異模式。
文檔類型聲明的初衷是通過基于文檔類型定義（DTD）的SGML工具來解析并驗證HTML文檔。
HTML5未定義DTD，所以在HTML5中文檔類型聲明更為簡短：
<!DOCTYPE html>
HTML 4文檔類型聲明舉例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
該聲明引用HTML 4.01“嚴格”版的DTD。基于SGML的驗證器可讀取DTD，正確解析這些文檔并執(zhí)行驗證。在現(xiàn)代瀏覽器中，一個有效的文檔類型激活標準模式有別于怪異模式。
另外，HTML 4.01提供過渡型與框架集型的DTD。過渡型涵蓋最廣，它可整合當前以及老舊或“過時”的標簽，而嚴格型DTD排除了過時的標簽。框架集擁有所有構(gòu)建框架所需的標簽以及過渡型的標簽。
語義化HTML
語義化HTML是一種編寫HTML的方式，它強調(diào)編碼信息的含義在其格式（樣子）之上。HTML從創(chuàng)立之初就包括語義化標記，但也包括標識性標記如<font>、<i>和<center>標簽。也存在一些語義上中立的span與div標簽。自1990年代末層疊樣式表開始應用于大多數(shù)瀏覽器，網(wǎng)頁制作者就被鼓勵使用CSS以便呈現(xiàn)與內(nèi)容分離。
在2001年一次對語義網(wǎng)的討論中，蒂姆·伯納斯-李等人給出了一種的方法，使智能軟件“代理人”可能有一天會自動抓取網(wǎng)頁進行查找、過濾并將之前不相關(guān)的聯(lián)系起來。這種代理甚至在現(xiàn)在也不普遍，但一些Web 2.0、混搭和價格比較網(wǎng)站的想法可能會結(jié)束。這些網(wǎng)頁應用程序的混合與伯納斯-李的語義代理人的之間主要區(qū)別基于以下事實：當前的聚合與信息混合通常由網(wǎng)頁開發(fā)者設計，他們早已知道網(wǎng)絡位置和他們希望混搭、比較與結(jié)合的特定數(shù)據(jù)的API語義。
網(wǎng)頁代理的一個重要類型是網(wǎng)絡爬蟲或搜索引擎蜘蛛。這些軟件代理依賴于它們發(fā)現(xiàn)的網(wǎng)頁的語義清晰度，因為它們一天要使用各種技術(shù)與算法來讀取和索引數(shù)百萬個網(wǎng)頁并給網(wǎng)頁用戶提供搜索工具，沒有這些萬維網(wǎng)的有效性就會大大降低。
為使搜索引擎蜘蛛評估它們在HTML文檔中發(fā)現(xiàn)的文本片段的重要性，也為那些創(chuàng)建標記等混合的人與更多的自動化代理工具，HTML中的語義結(jié)構(gòu)需要廣泛一致地應用從而將文本的含義呈現(xiàn)給瀏覽者。
表示性標記在當前的HTML和XHTML推薦中不被鼓勵使用，HTML5中則被視為非法。
好的語義化HTML也改善了網(wǎng)頁文檔的可訪問性。例如，當屏幕閱讀器或音頻瀏覽器可以正確判定一個文檔的結(jié)構(gòu)時，視覺障礙用戶不會再因閱讀重復或無關(guān)的信息而浪費時間。
分發(fā)
HTML文檔分發(fā)的方法和其他計算機文件相同。不過，它們最常通過網(wǎng)頁服務器的超文本傳輸協(xié)議或電子郵件傳輸。
HTTP
萬維網(wǎng)主要由從服務器通過HTTP協(xié)議向瀏覽器發(fā)送的HTML文檔組成。但是，HTTP也可以被用于傳輸HTML之外的數(shù)據(jù)，例如圖像、聲音和其他內(nèi)容。為使瀏覽器了解如何處理接收到的文檔，在傳輸文檔時必須同時傳遞文件類型。這種元數(shù)據(jù)包含MIME類型（對于HTML 4.01或更早版本是text/html，而對于XHTML 1.0或之后的版本是application/xhtml+xml），以及字符編碼（參見HTML字符編碼方式）。
在現(xiàn)在的瀏覽器中，和HTML文檔一起發(fā)送的MIME類型影響文檔的解讀方式。和XHTML MIME類型一起發(fā)送的文檔被認為是良構(gòu)的XML，而語法錯誤會導致瀏覽器無法呈現(xiàn)文檔。完全相同的文檔如果和HTML MIME類型一起發(fā)送，則可能被正常顯示，因為瀏覽器對HTML的語法檢查更加松懈些。
W3C的推薦指出，遵循規(guī)定的推薦指引的XHTML 1.0文檔可標記二者任一的MIME類型。XHTML 1.1還指出，XHTML 1.1文檔應標有兩種MIME類型。
HTML郵件
大多數(shù)圖形電子郵件客戶端允許使用HTML的子集（經(jīng)常界限不清）提供格式化和無法使用純文本的語義標記。這可能包括印刷信息，如彩色標題、強調(diào)和引用文本、內(nèi)嵌圖片和圖表等。許多這樣的客戶包含一個編寫HTML電子郵件消息的圖形用戶界面編輯器和一個用于顯示的渲染引擎。在郵件中使用HTML受到了一些兼容性的批評，由于一些盲人或具有視覺障礙的人的訪問問題，這種方式有利于偽裝的釣魚攻擊。因其消息大小超過明文，所以它可混淆垃圾郵件過濾器。
命名規(guī)則
最常用的計算機文件擴展名為.html，通用縮寫為.htm。它起源于某些早期操作系統(tǒng)與文件系統(tǒng)，如DOS以及FAT數(shù)據(jù)結(jié)構(gòu)的局限性，它將文件擴展名限制為3個字母。
HTML應用程序
HTML應用程序（HTA；文件擴展名".hta"）是一個Microsoft Windows應用程序，它在瀏覽器中使用HTML和動態(tài)HTML提供應用程序圖形界面。正規(guī)HTML文件被限制在瀏覽器的安全模型中，只能分別通過網(wǎng)頁服務器和網(wǎng)頁對象與站點Cookie進行通信和操作。HTA作為完全受信任的應用程序運行，因此擁有更多的權(quán)限，如創(chuàng)建/編輯/刪除文件與注冊表項。因為它們在瀏覽器安全模式之外操作，所以HTA不能通過HTTP執(zhí)行，必須下載（就像EXE文件）并在本地文件系統(tǒng)執(zhí)行。
所見即所得編輯器
所見即所得編輯器使用圖形用戶界面（GUI）顯示HTML文檔，常常類似于文字處理器，所以用戶可以設計一切。編者面對的是文檔，而不是代碼，所以作者并不需要太多的HTML知識。這種所見即所得的編輯模式一直受到詬病，主要因為它生成的代碼質(zhì)量不高；也有人主張將其改變至WYSIWYM模型（所見即所指）。
文同步本人掘金平臺的原創(chuàng)翻譯：https://juejin.cn/post/6844903817968893960
我們喜歡（使用）<div>標簽。它們已經(jīng)存在了幾十年，這幾十年來，當需要將一些內(nèi)容包裹起來達到（添加）樣式或者布局目的的時候，它們成為首選元素。查看線上站點時，看到像下面這些內(nèi)容的情況依舊很常見：
<div class="container" id="header">
<div class="header header-main">Super duper best blog ever</div>
<div class="site-navigation">
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/archive">Archive</a>
</div>
</div>
<div class="container" id="main">
<div class="article-header-level-1">
Why you should buy more cheeses than you currently do
</div>
<div class="article-content">
<div class="article-section">
<div class="article-header-level-2">
Part 1: Variety is spicy
</div>
<!-- cheesy content -->
</div>
<div class="article-section">
<div class="article-header-level-2">
Part 2: Cows are great
</div>
<!-- more cheesy content -->
</div>
</div>
</div>
<div class="container" id="footer">
Contact us!
<div class="contact-info">
<p class="email">
<a href="mailto:us@example.com">us@example.com</a>
</p>
<div class="street-address">
<p>123 Main St., Suite 404</p>
<p>Yourtown, AK, 12345</p>
<p>United States of America</p>
</div>
</div>
</div>
復制代碼Hoo，那有很多的div標簽。但是，它有效。我的意思主要是，它具有你需要的結(jié)構(gòu)。并且，我確定在你完成樣式添加之后，它看起來會像你想要的那個樣子。然而，它有些嚴重的問題：
HTML5并不新奇。這是輕描淡寫；最初的工作草稿于2008年1月（11年前）發(fā)布，以征求公眾意見，并于4年半前，2014年10月份成為一個全面W3C的推薦。所以，就像它已經(jīng)存在了一段時間。
HTML5的主要進步之一是引入了一組標準化的語義元素。術(shù)語“語義”指的是單詞或事物的含義，因此”語義元素“是用于以更有意義的方式標記文檔結(jié)構(gòu)的元素，這種方式可以清楚地表明它們的用途和它們在文件中服務的目的是什么。而且重要的是，由于它們是標準化的，定義文檔的這些元素可以被每個人使用并理解，包括機器人。
我認為HTML5規(guī)范本身在<div>元素定義下的一個注釋中很好地總結(jié)了這個問題：
注釋： 強烈建議作者將div元素視為最后采取的元素，在沒有其它元素適合的（情況下）。使用更合適的元素而不是div元素可以使讀者更容易訪問，并且更容易為作者提供可維護性。-- www.w3.org/TR/html5/gr…
我將語義塊元素分為兩類：主要結(jié)構(gòu)和內(nèi)容指標。這些不是標準的條款或者其它條款；我在這篇文章中做了一些（區(qū)分）。但我認為這種區(qū)分足夠有用。?♂?
有一個超級常見的模式，可在互聯(lián)網(wǎng)上的網(wǎng)站，教程甚至CSS庫中找到，并且有充分的理由。我們經(jīng)常將最頂層的頁面劃分為三個區(qū)域：頁眉、主頁和頁腳，然后根據(jù)需要將這些區(qū)域劃分為多個區(qū)域。我在上面的例子中包含了這個來證明這點：
<div class="container" id="header">...</div>
<div class="container" id="main">
...
<div class="article-section">...</div>
...
</div>
<div class="container" id="footer">...</div>
復制代碼我已經(jīng)看過（并且使用過）這種模式很久了，以這種方式構(gòu)造文檔非常有意義，既可以讀取HTML，又可以更加簡單地在CSS中設置頁面樣式。頁眉和頁腳元素頁可以使用PHP或Rails/ERB等語言中的部分模版來更易于使用，因為你可以在整個站點中包含常見的頁眉和頁腳部分：
<?php include 'header.php'; ?>
<div id="main">...</div>
<?php include 'header.php'; ?>
復制代碼所以這就是事情：每個人都認為這是一個很好的模式。這包括WHATWG和W3C的人員，他們將模式標準化為HTML5中的四個新元素，名稱非常清晰：<header>, <main>, <footer>和<section>。
<header> 和 <footer>元素基本上是雙胞胎：它們在規(guī)范中的定義非常相似，并遵循相同的規(guī)則，關(guān)于它們被允許使用的位置，唯一區(qū)別在于它們的語義目的：頁眉在事物的前面，頁腳在事物的末尾。對于事物，我的意思不僅僅是頁面的： 這對元素的設計用于文檔的任何部分，代表一大塊內(nèi)容，具有明確的開頭和結(jié)尾。這可以包括表格，文章，文章部分，社交媒體網(wǎng)站上的帖子，卡片等。
頁眉和頁腳在語義上接近sectioning root或sectioning content元素。像<body>, <blockquote>, <section>, <td>,<aside>等許多其它元素；如果你想了解完整的列表，就點擊上面的鏈接。輔助技術(shù)可以使用這些元素和其它元素生成文檔大綱，這可以幫助用戶更輕松的訪問它。在每個sectioning root/content中，你不應該使用超過一個的<header>或<footer>。（一個就好，不能兩個相同）
作為最后說明，<header>經(jīng)常作為其上下文保存標題元素（<h1>-<h6>）。這不是必須的，但可以幫助將其它相關(guān)元素與標題分組，比如鏈接，圖片或子標題，并且可以維持一直的結(jié)構(gòu)，即使標題是<header>中的唯一元素。
第三個主要區(qū)域元素--<main>很特別。規(guī)范中說明了關(guān)于<main>的兩個非常重要的內(nèi)容：
文檔的主要內(nèi)容區(qū)域包括文檔的特定內(nèi)容，且不包括在一組文檔中重復的內(nèi)容，例如站點導航鏈接，版本信息，站點的徽標，橫幅和搜索表單（除非文檔或應用的主功能是一種搜索形式）-- www.w3.org/TR/html5/gr…
所以，<main>是你放置好東西的區(qū)域，是頁面的重要部分，特別是用戶訪問此頁面的原因（或說目的），而不是您的站點。換句話來說，主要內(nèi)容。
所有其它東西，徽標、搜索表單和導航欄等都可以在<body>中的<header>或<footer>中，但是在<main>之外。
文檔中不能有多個可見的main元素。如果文檔中存在多個main元素，則必須使用隱藏屬性隱藏所有其它（main）實例。 -- www.w3.org/TR/html5/gr…
這很獨特。和<header>和<footer>（以及其它塊元素不同），<main>不能在任意切片內(nèi)容的整個頁面中使用；它應該只被使用一次。或者更確切地說，它可以在文檔中多次被使用，但是一次只能看到一個<main>元素，所有其它的（
）必須被使用隱藏屬性隱藏，如CSS中的display:none。如果您思考下，（你會明白）這在應用程序中預加載視圖是種很有用的模式：創(chuàng)建一個新的<mian hidden>，獲取用戶可能接下來查看的一些內(nèi)容（例如：系列文中的下一篇，下一張幻燈圖放映等），然后，當用戶點擊鏈接/按鈕加載該視圖時，通過在兩者上切換隱藏屬性，將當前的<main>切換到預加載的（那個）。
在繼續(xù)之前，我們暫停下并查看上面的示例。如果我們使用<header>，<main>和<footer>作為文章的主要結(jié)構(gòu)，它的外觀如下：
<header>
<h1>Super duper best blog ever</h1>
...
</header>
<main>
<h2>Why you should buy more cheeses than you currently do</h2>
...
</main>
<footer>
Contact us!
<div class="contact-info">this.is.us@example.com</div>
</footer>
復制代碼那真的很棒！但是，還有很多工作要做。
因此，我們?yōu)轫撁嫣峁┝艘粋€基本大綱：頁眉，頁腳和主要內(nèi)容區(qū)域。現(xiàn)在是時候添加些美妙的內(nèi)容了。
通常，你會希望將你的內(nèi)容分解為多個部分，尤其是對像本文這樣的大量文本內(nèi)容，因為沒人喜歡閱讀這些難以理解的文本墻。
<section>派上用場了。這是在系列規(guī)則中最簡單的一個：從結(jié)構(gòu)上講，它基本上只是一個具有特殊含義的<div>。一個<section>開始一個新的"sectioning content"區(qū)域，因此它可以有自己的<header>和<footer>。
那么，<section>和普通的舊<div>之間有什么區(qū)別，然后，你應該在什么時候使用它們呢？好吧，允許我再次引用規(guī)范：
筆記：
元素不是通用容器元素。當一個元素僅是用于樣式目的或為腳本編寫提供便利的時候，鼓勵作者使用[div](https://www.w3.org/TR/html5/grouping-content.html#elementdef-div)元素。一般規(guī)則是元素僅在元素內(nèi)容在文本[大綱](https://www.w3.org/TR/html5/sections.html#outline)中明確列出時候才適用。-- [https://www.w3.org/TR/html5/sections.html#the-section-element](https://www.w3.org/TR/html5/sections.html#the-section-element)
你知道，概述來說，HTML5規(guī)范實際上是可讀的。它是那個比較可讀的規(guī)范之一。每當我瀏覽它以獲取快速答復時，我都不可避免地學到一些意想不到的和有用的東西，尤其是當我開始點擊鏈接的時候。有時（你也）試試吧！
簡而言之，如果要在目錄中列出文檔的一部分，請使用<section>。如果沒有，請使用<div>或其它元素。
很好，我們已經(jīng)得到了一個堅固的頁面結(jié)構(gòu)。我們已經(jīng)明確標記了頁面的主要內(nèi)容區(qū)域，而不僅僅是單獨調(diào)整<div>，我們已經(jīng)調(diào)整出了頁眉，頁腳和章節(jié)。但是，肯定還有比我們的文檔更多的語義。
讓我們來談談HTML5中添加的一些元素，它們傳達的內(nèi)容語義而不是結(jié)構(gòu)。
<article>元素用于表示完全獨立的內(nèi)容區(qū)域，這些內(nèi)容可以從頁面中提取出來并放入另一個內(nèi)容中，并且仍然有意義。這可能是文字文章或博客，但也可用于社交媒體帖子，如推特或臉書的墻貼。
HTML5規(guī)范建議文章總有一個標題，標識它是什么，理想的情況下使用標題元素(<h1>-<h6>)。<article>也可以有<header>，<footer>和<section>元素，因此你可以使用它來嵌入一個完整的文檔片段，其中包含其它頁面中所需的所有結(jié)構(gòu)。
從上面的方式返回到示例，我們使用<article>和我們討論的其它一些元素來重寫帶class="article-*"的元素。
<article>
<header>
<h1>Why you should buy more cheeses than you currently do</h1>
</header>
<section>
<header>
<h2>Part 1: Variety is spicy</h2>
</header>
<!-- cheesy content -->
</section>
<section>
<header>
<h2>Part 2: Cows are great</h2>
</header>
<!-- more cheesy content -->
</section>
</article>
復制代碼這不是比原來更具可讀性嗎？而且，不僅更容易閱讀，它對輔助技術(shù)更有用；機器人不能總是弄清楚你的特定類名模式，但是它們可以遵循這種結(jié)構(gòu)。
這個元素比其它元素更有名。<nav>旨在清楚地識別頁面上的主要導航塊，幫助用戶圍繞站點其余部分找到路徑的鏈接組（例如站點地圖或標題中的鏈接列表）或當前頁面（例如目錄）。
在我們的示例頂部，讓我們將<nav>應用于標題中的那組鏈接。
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/archive">Archive</a>
</nav>
復制代碼根本不改變結(jié)構(gòu)，但你知道它是什么，一目了然而不需要在<div>上讀物和處理類名來找到它，更重要的是機器人也可以找到它。
我們要討論的最后一個元素是<address>。這個元素旨在調(diào)出聯(lián)系信息，它通常在主頁<footer>中用于標記企業(yè)的郵寄地址，電話號碼，客戶服務郵箱地址等等。
有趣的是，如何在<address>元素中標記內(nèi)容的規(guī)則是開放的。規(guī)范提到有幾個其它規(guī)范可以解決這個問題，并且提供這種級別的粒度可能超出了HTML本身的范圍。
常見的解決方案是RDFa，也是W3C規(guī)范，它使用標簽上的屬性來標記數(shù)據(jù)的不同組件。下面是我們示例中的頁腳在標記<address>元素和RDFa時可能看起來的樣子：
<footer>
<section class="contact" vocab="http://schema.org/" typeof="LocalBusiness">
<h2>Contact us!</h2>
<address property="email">
<a href="mailto:us@example.com">us@example.com</a>
</address>
<address property="address" typeof="PostalAddress">
<p property="streetAddress">123 Main St., Suite 404</p>
<p>
<span property="addressLocality">Yourtown</span>,
<span property="addressRegion">AK</span>,
<span property="postalCode">12345</span>
</p>
<p property="addressCountry">United States of America</p>
</address>
</section>
</footer>
復制代碼無疑，RDFa有點冗長，但它對于標記數(shù)據(jù)非常方便。如果你有興趣了解有關(guān)RDFa的更多信息，請點擊以下鏈接：
好了，我們已經(jīng)介紹了很多，我們已經(jīng)看到很多零零散散的元素應用到我們的例子中。那么，讓我們把它們放在一起看看它的樣子。
<header>
<h1>Super duper best blog ever</h1>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/archive">Archive</a>
</nav>
</header>
<main>
<article>
<header>
<h1>Why you should buy more cheeses than you currently do</h1>
</header>
<section>
<header>
<h2>Part 1: Variety is spicy</h2>
</header>
<!-- cheesy content -->
</section>
<section>
<header>
<h2>Part 2: Cows are great</h2>
</header>
<!-- more cheesy content -->
</section>
</article>
</main>
<footer>
<section class="contact" vocab="http://schema.org/" typeof="LocalBusiness">
<h2>Contact us!</h2>
<address property="email">
<a href="mailto:us@example.com">us@example.com</a>
</address>
<address property="address" typeof="PostalAddress">
<p property="streetAddress">123 Main St., Suite 404</p>
<p>
<span property="addressLocality">Yourtown</span>,
<span property="addressRegion">AK</span>,
<span property="postalCode">12345</span>
</p>
<p property="addressCountry">United States of America</p>
</address>
</section>
</footer>
復制代碼如果你問我（怎么看改造后的內(nèi)容？），那這比原始例子的可讀性高100倍，而且對于搜索引擎優(yōu)化和可訪問性目的而言，其效率將提高100倍。
這些絕不是HTML中唯一的語義元素。有很多其它元素可以幫助你標記和構(gòu)建你的文本內(nèi)容，嵌入媒體資源等等。如果你喜歡這個并且希望深入挖掘，這里有一些（標簽）可以查看下。你可能認識一些：
這只是一個開始！就像我說的，當你開始閱讀HTML規(guī)范時，很難停下來。它是種非常豐富的語言，我認為人們經(jīng)常會低估這種語言。
lt;h2 id="title1">開發(fā)工具(工欲善其事必先利其器)</h2>
為了讓大家更快的融入到編程的世界中, 不被繁瑣的英語單詞所困擾, 不用每天編寫很多沒有意義的重復代碼, 提升大家的開發(fā)效率今后的課程中我們統(tǒng)一采用最高級高發(fā)工具來編寫網(wǎng)頁
<h3 id="title2">常見的前端開發(fā)工具</h3>
記事本: 提示功能較差
editplus/nodepad++: 提示功能較差
Dreamwaver: 更偏向設計
Sublime: 輕量級,自帶功能不太全, 但是插件十分豐富
WebStorm: 重量級, 自帶功能全面
其它ide(zend studio、netbean等)
為了讓大家更快的融入到編程的世界中, 不被繁瑣的英語單詞所困擾, 今后的課程中我們統(tǒng)一采用最牛逼最高級的高發(fā)工具WebStorm
<h3 id="title3">WebStorm安裝和使用</h3>
安裝軟件
1.png
2.png
3.png
4.jpg
5.jpg
6.png
7.jpg
8.png
破解軟件
9.png
10.png
11.jpg
12.jpg
13.png
14.png
漢化軟件
15.png
16.jpg
設置模版
創(chuàng)建文件
17.png
18.jpg
關(guān)注微信訂閱號：網(wǎng)頁設計輕松學 有更多內(nèi)容
19.png
WebStorm常見快捷鍵
如何在WebStorm中利用快捷鍵創(chuàng)建一個新的.html的文件
同時按下鍵盤上的Ctrl + Alt + Insert
如何在WebStorm中讓光標移動到當前行的末尾
按下鍵盤上的End鍵即可
如何在WebStorm中讓光標移動到當前行的最前面
按下鍵盤上的Home鍵即可
如何在WebStorm中讓光標在多行中閃爍
按住鍵盤上的Alt鍵不放, 然后再按住鼠標的左鍵不放, 然后再拖動鼠標即可
如何在WebStorm中快速的復制光標所在的那一行
按下鍵盤上的Ctrl + D
如何在WebStorm中快速的刪除光標所在的那一行
按下鍵盤上的Ctrl + X
如何在WebStorm中讓標簽包裹一段內(nèi)容, 也就是自動在一段內(nèi)容前后加上標簽
按下鍵盤上的Ctrl + Alt + T, 然后按下回車, 然后輸入對應的標簽即可
<h2 id="title4">基礎標簽學習</h2>
<h3 id="title5">H系列標簽(Header 1~Header 6)</h3>
作用:
用于給文本添加標題語義
格式:
<h1>xxxxxx</h1>
注意點:
H標簽是用來給文本添加標題語義的, 而不是用來修改文本的樣式的
H標簽一共有6個, 從H1~H6, 最多就只能到6, 超過6則無效
被H系列標簽包裹的內(nèi)容會獨占一行
在H系列的標簽中, H1最大, H6最小
在企業(yè)開發(fā)中, 一定要慎用H系列的標簽, 特別是H1標簽. 在企業(yè)開發(fā)中一般情況下一個界面中只能出現(xiàn)一個H1標簽(和SEO有關(guān))
<h3 id="title6">P標簽(Paragraph)</h3>
作用:
告訴瀏覽器哪些文字是一個段落
格式:
<p>xxxxxxxx</p>
注意點:
在瀏覽器中會單獨占一行
<h3 id="title7">Hr標簽(Horizontal Rule)</h3>
作用:
在瀏覽器上顯示一條分割線
格式:
<hr />
注意點:
在瀏覽器中會單獨占一行
通過我的觀察發(fā)現(xiàn)HR標簽可以寫/也可以不寫/, 如果不寫/那么就是按照HTML的規(guī)范來編寫, 如果寫上/那么就是按照XHTML的規(guī)范來編寫.但是在HTML5中, 由于HTML5兼容HTML和XHTML所有寫不寫都可以.那么以后我們在做前端開發(fā)時到底寫還是不寫呢? 按照高級開發(fā)工具的提示來寫即可.
由于hr標簽是用來修改樣式的, 所以不推薦使用. 今后開發(fā)中添加水平線一般都使用CSS盒子來做
<h2 id="title8">HTML注釋(Annotation)</h2>
什么是注釋?
注釋是在所有計算機語言中都非常重要的一個概念，從字面上看，就是注解、解釋的意思
注釋可以用來解釋某一段程序或者某一行代碼是什么意思，方便直接或程序員之間的交流
為什么要使用注釋?
適當?shù)淖⑨專軌蜃屛覀兊某绦蚋涌勺x，所以用中文提示自己，這里的程序是干什么的
注釋格式
<!--被注釋的內(nèi)容-->
注意點:
被注釋的內(nèi)容不會在瀏覽器中顯示, 注釋是寫給我們自己看的
注釋不能嵌套使用
<!--<!--被注釋的內(nèi)容-->-->
快捷鍵: ctrl + /
<h3 id="title9">img標簽(image)</h3>
作用: 在網(wǎng)頁上插入一張圖片
格式: 
標簽的屬性
寫在標簽中K="V"這種格式的文本我們稱之為標簽屬性
| 屬性名稱 | 作用 |
|---|---|
| src(source) | 告訴瀏覽器需要插入的圖片路徑, 以便于瀏覽器到該路徑下找到需要插入的圖片 |
| alt(alternate) | 規(guī)定圖像的替代文本, 只有在src指定的路徑下找不到圖片,才會顯示alt指定的文本 |
| title | 懸停文本(介紹這張圖片, 只有在鼠標移動到圖片上時才會顯示) |
| height | 設置圖片顯示的高度 |
| width | 設置圖片顯示的寬度 |
注意點:
img標簽添加的圖片默認不是占一整行空間
如果想讓圖片等比拉伸, 只寫高度或者寬度即可
關(guān)注微信訂閱號：網(wǎng)頁設計輕松學 有更多內(nèi)容
<h3 id="title10">br標簽(Break)</h3>
作用:
讓內(nèi)容換行
格式:
<br/>
注意點:
br的意思是不另起一個段落進行換行, 而網(wǎng)頁中99.99%需要換行時都是因為另起了一個段落, 所以應該用p來做
<h3 id="title11">相對路徑和絕對路徑</h3>
圖片路徑分為兩種, 一種是絕對路徑, 一種是相對路徑, 我們重點學習相對路徑, 因為在企業(yè)級開發(fā)中沒有人使用絕對路徑
絕對路徑
從電腦的具體盤符開始尋找我們需要的資源
以上代碼表示在F盤下查找lnj文件夾, 然后在lnj文件夾下查找girl.png圖片
相對路徑
一個文件相對于另外一個文件的位置尋找我們需要的資源
假設html文件和girl.png都在lnj文件夾下, 以上代碼表示在lnj文件夾下查找girl.png圖片
為什么沒人使用絕對路徑?
可以移植性太差.
什么是可移植性?
可以簡單的理解為把寫到的代碼拷貝到另外一臺電腦上是否能夠正常運行
為什么絕對路徑可移植性差?
假如我編寫的html文件放在我電腦的 F:/lnj 目錄下, html文件中用到的圖片放在F:/lnj/images目錄下, 我給src指定的絕對路為F:/lnj/images/girl.png. 那么將來我將整個lnj文件夾拷貝給你, 如果你將lnj文件夾放在非F盤下, 那么將無法顯示圖片
例如你存放在C盤根目錄, 那么圖片的絕對路徑會變?yōu)?code>C:/lnj/images/girl.png, 而src會去F盤找, 所以不會顯示
你只有將lnj文件夾存放在F盤根目錄下時圖片才會正常運行, 這就叫做可移植性不好
Q群；162542073
為什么相對路徑可移植性好?
同上, 如果src指定的路徑為images/girl.png, 那么無論你拷貝到那個盤, 哪個文件夾. 系統(tǒng)都只會在當前文件夾中的images下去查找圖片, 不會受到盤符和存儲位置的影響, 只要保證頁面和圖片位置的相對關(guān)系不變就不會影響到圖片的顯示
相對路徑幾種查找方式
../代表訪問上級目錄
假設a文件夾下面有b文件夾, 圖片存放在a文件夾中, html文件存放在b文件夾中, 那么路徑為../girl.png
因為html文件在b文件夾中, 所以路徑是相對于b文件夾的, 所以../代表訪問b文件夾的上一級目錄, b文件夾的上一級目錄是a文件夾, 所以../girl.png就代表在a文件夾查找girl.png
直接編寫, 例如abc/girl.png
加上./ 編寫, 例如./abc/girl.png
相對當前目錄有幾個文件夾,就在后面依次補全幾個文件夾名稱即可, 例如 abc/bbb/ccc/ddd/girl.png或./abc/bbb/ccc/ddd/girl.png
直接編寫, 例如: girl.png
加上./ 編寫, 例如./girl.png
./代表當前目錄, ./girl.png代表在當前目錄下查找
同級
下級
上級
注意事項:
相對路徑不會出現(xiàn)這種格式aaa/../bbb/girl.png
雖然可以顯示, 但是企業(yè)開發(fā)中千萬不要這么寫
<h3 id="title12">a標簽(anchor)</h3>
格式: <a >江哥博客</a>
作用: 用于從一個頁面鏈接到另一個頁面
注意事項:
在a標簽之間一定要寫上文字, 如果沒有, 那么在頁面上找不到這個標簽
a標簽也叫做超級鏈接或超鏈接
a標簽的屬性
| 屬性名稱 | 作用 |
|---|---|
| href(hypertext reference) | 指定跳轉(zhuǎn)的目標地址 |
| target | 告訴瀏覽器是否保留原始界面, _blank保留, _self不保留 |
| title | 懸停文本(介紹這個鏈接, 只有在鼠標移動到超鏈接上時才會顯示) |
base標簽和a標簽結(jié)合使用
如果每個a標簽都想在新頁面中打開,那么逐個設置a標簽的target屬性比較麻煩, 這時我們可以使用base和a標簽結(jié)合的方式,一次性設置有a標簽都在新頁面中打開
格式: <base target="_blank" />
注意事項:
base必須嵌套在head標簽里面
如果標簽上指定了target,base中也指定了target,那么會按照標簽上指定的來執(zhí)行
a標簽其它用法
例如<a href="girl.zip">下載福利資源<a/>
格式: <a href="01-錨點鏈接.html#location">跳轉(zhuǎn)到指定位置</a>
只需要在01-錨點鏈接.html頁面添加一個id位置即可
2.1.格式<a href="#location">跳轉(zhuǎn)到指定位置</a>
2.2.在頁面的指定位置給任意標簽添加一個id屬性
例如 <p id="location">這個是目標</p>
格式<a href="#">江哥博客</a>
格式<a href="javascript：">江哥博客</a>
假鏈接(本質(zhì)是跳轉(zhuǎn)到當前頁面)
跳轉(zhuǎn)到當前頁面指定位置(錨點鏈接)
跳轉(zhuǎn)到指定頁面的指定位置
下載(極力不推薦使用)
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
