HTML5基礎(chǔ)學(xué)習(xí)筆記— 超文本標(biāo)記語言編程

超文本”就是指頁面內(nèi)可以包含圖片、鏈接，甚至音樂、程序等非文字元素。超文本標(biāo)記語言的結(jié)構(gòu)包括“頭”部分（英語：Head）、和“主體”部分（英語：Body），其中“頭”部提供關(guān)于網(wǎng)頁的信息，“主體”部分提供網(wǎng)頁的具體內(nèi)容。

千鋒《全棧H5+》講解HTML會由淺入深帶入課堂案例中，使得學(xué)員在學(xué)習(xí)過程中學(xué)習(xí)到如何講基礎(chǔ)知識實(shí)際運(yùn)用到項(xiàng)目中。

一、由來

萬維網(wǎng)上的一個超媒體文檔稱之為一個頁面（外語：page）。作為一個組織或者個人在萬維網(wǎng)上放置開始點(diǎn)的頁面稱為主頁（外語：Homepage）或主頁，主頁中一般包含有指向其他相關(guān)頁面或其他節(jié)點(diǎn)的指針（超級鏈接），所謂超級鏈接，就是一種統(tǒng)一資源定位器（Uniform Resource Locator，外語縮寫：URL）指針，經(jīng)過激活（點(diǎn)擊）它，可使瀏覽器方便地獲取新的網(wǎng)頁。這也是HTML獲得廣泛應(yīng)用的最重要的原因之一。在邏輯上將視為一個全體的一系列頁面的有機(jī)調(diào)集稱為網(wǎng)站（Website或Site）。超級文本標(biāo)記語言（英文縮寫：HTML）是為“網(wǎng)頁創(chuàng)建和其它可在網(wǎng)頁瀏覽器中看到的信息”設(shè)計(jì)的一種標(biāo)記語言。

網(wǎng)頁的實(shí)質(zhì)便是超級文本標(biāo)記言語，通過結(jié)合使用其他的Web技術(shù)（如：腳本言語、公共網(wǎng)關(guān)接口、組件等），能夠創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而，超級文本標(biāo)記言語是萬維網(wǎng)（Web）編程的根底，也便是說萬維網(wǎng)是建立在超文本根底之上的。超級文本標(biāo)記言語之所以稱為超文本標(biāo)記言語，是因?yàn)槲谋局邪怂^“超級鏈接”點(diǎn)。

二、定義

超級文本標(biāo)記語言是標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用，也是一種規(guī)范，一種標(biāo)準(zhǔn)。

它通過標(biāo)記符號來標(biāo)記要顯示的網(wǎng)頁中的各個部分。網(wǎng)頁文件本身是一種文本文件，通過在文本文件中添加標(biāo)記符，可以告訴瀏覽器如何顯示其中的內(nèi)容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網(wǎng)頁文件，然后根據(jù)標(biāo)記符解釋和顯示其標(biāo)記的內(nèi)容，對書寫出錯的標(biāo)記將不指出其錯誤，且不停止其解釋執(zhí)行過程，編制者只能通過顯示效果來分析出錯原因和出錯部位。但需要注意的是，對于不同的瀏覽器，對同一標(biāo)記符可能會有不完全相同的解釋，因而可能會有不同的顯示效果。

超級文本符號言語文檔制造不是很雜亂，但功能強(qiáng)大，支持不同數(shù)據(jù)格式的文件鑲?cè)耄@也是萬維網(wǎng)（WWW）盛行的原因之一，其主要特色如下：

1、簡易性：超級文本符號言語版本晉級采用超集方式，然后愈加靈活便利。

2、渠道無關(guān)性：盡管個人計(jì)算機(jī)大行其道，但運(yùn)用MAC等其他機(jī)器的大有人在，超級文本符號言語可以運(yùn)用在廣泛的渠道上，這也是萬維網(wǎng)（WWW）盛行的另一個原因。

3、可擴(kuò)展性：超級文本符號言語的廣泛應(yīng)用帶來了加強(qiáng)功能，增加標(biāo)識符等要求，超級文本符號言語采納子類元素的方式，為體系擴(kuò)展帶來保證。

4、通用性：另外，HTML是網(wǎng)絡(luò)的通用言語,一種簡單、通用的全置符號言語。它答應(yīng)網(wǎng)頁制造人建立文本與圖片相結(jié)合的雜亂頁面，這些頁面可以被網(wǎng)上任何其他人閱讀到，無論運(yùn)用的是什么類型的電腦或閱讀器。

三、編輯

它其實(shí)是文本，它需要瀏覽器的解釋，它的編輯器大體可以分為三種。

基本文本、文檔編輯軟件，使用微軟自帶的記事本或?qū)懽职宥伎梢跃帉懀?dāng)然，如果你用WPS來編寫，也可以。不過存盤時請使用.htm或.html作為擴(kuò)展名，這樣就方便瀏覽器認(rèn)出直接解釋執(zhí)行了。

推薦編輯器：Dreamweaver、HBuilder、Sublime Text代碼編輯器。

一個網(wǎng)頁對應(yīng)多個HTML文件，超文本標(biāo)記語言文件以.htm（磁盤操作系統(tǒng)DOS限制的外語縮寫）為擴(kuò)展名或.html（外語縮寫）為擴(kuò)展名。可以使用任何能夠生成TXT類型源文件的文本編輯器來產(chǎn)生超文本標(biāo)記語言文件，只用修改文件后綴即可。

標(biāo)準(zhǔn)的超文本標(biāo)記語言文件都具有一個基本的整體結(jié)構(gòu)，標(biāo)記一般都是成對出現(xiàn)（部分標(biāo)記除外例如：<br/>），即超文本標(biāo)記語言文件的開頭與結(jié)尾標(biāo)志和超文本標(biāo)記語言的頭部與實(shí)體兩大部分。有三個雙標(biāo)記符用于頁面整體結(jié)構(gòu)的確認(rèn)。

標(biāo)記符<html>,說明該文件是用超文本標(biāo)記語言（本標(biāo)簽的中文全稱）來描述的,它是文件的開頭;而</html>,則表示該文件的結(jié)尾，它們是超文本標(biāo)記語言文件的開始標(biāo)記和結(jié)尾標(biāo)記。

<head></head>；這2個標(biāo)記符分別表示頭部信息的開始和結(jié)尾。頭部中包含的標(biāo)記是頁面的標(biāo)題、序言、說明等內(nèi)容，它本身不作為內(nèi)容來顯示，但影響網(wǎng)頁顯示的效果。頭部中最常用的標(biāo)記符是標(biāo)題標(biāo)記符和meta標(biāo)記符，其中標(biāo)題標(biāo)記符用于定義網(wǎng)頁的標(biāo)題，它的內(nèi)容顯示在網(wǎng)頁窗口的標(biāo)題欄中，網(wǎng)頁標(biāo)題可被瀏覽器用作書簽和收藏清單。

設(shè)置文檔標(biāo)題和其它在網(wǎng)頁中不顯示的信息，比如direction方向、語言代碼Language Code（實(shí)體定義!ENTITY % i18n）、指定字典中的元信息、等等。

<body></body>；，網(wǎng)頁中顯示的實(shí)際內(nèi)容均包含在這2個正文標(biāo)記符之間。正文標(biāo)記符又稱為實(shí)體標(biāo)記。

超文本標(biāo)記語言（第一版）——在1993年6月作為互聯(lián)網(wǎng)工程工作小組（IETF）工作草案發(fā)布（并非標(biāo)準(zhǔn)）：

HTML 2.0——1995年11月作為RFC 1866發(fā)布，在RFC 2854于2000年6月發(fā)布之后被宣布已經(jīng)過時

HTML 3.2——1997年1月14日，W3C推薦標(biāo)準(zhǔn)

HTML 4.0——1997年12月18日，W3C推薦標(biāo)準(zhǔn)

HTML 4.01（微小改進(jìn)）——1999年12月24日，W3C推薦標(biāo)準(zhǔn)

HTML 5——2014年10月28日，W3C推薦標(biāo)準(zhǔn)[4] （詳見本處參考資料）

ISO/IEC 15445:2000（“ISO HTML”）——2000年5月15日發(fā)布，基于嚴(yán)格的HTML 4.01語法，是國際標(biāo)準(zhǔn)化組織和國際電工委員會的標(biāo)準(zhǔn)。

Wijmo是基于HTML5、jQuery、CSS3和SVG的一個控件包，能夠滿足構(gòu)建當(dāng)今Web系統(tǒng)的需求。基于Wijmo，您的系統(tǒng)運(yùn)行將更加快速和流暢，外觀也會更加引人入勝。Wijmo中所有新的控件都是在符合最新的UI設(shè)計(jì)潮流的基礎(chǔ)上，對新的以及改良后的主題進(jìn)行封裝。優(yōu)美的、專業(yè)的控件外觀會讓您的應(yīng)用程序引人注目。比如 ComponentOne Studio for ASP .NET Wijmo 控件包內(nèi)置的6個主題，同時可以使用jQuery UI項(xiàng)目提供的 30 多個主題，甚至可以使用 ThemeRoller 創(chuàng)建屬于您自己的系統(tǒng)主題。

HTML沒有1.0版本是因?yàn)楫?dāng)時有很多不同的版本。有些人認(rèn)為蒂姆·伯納斯-李的版本應(yīng)該算初版，這個版本沒有IMG元素。當(dāng)時被稱為HTML+的后續(xù)版的開發(fā)工作于1993年開始，最初是被設(shè)計(jì)成為“HTML的一個超集”。第一個正式規(guī)范為了和當(dāng)時的各種HTML標(biāo)準(zhǔn)區(qū)分開來，使用了2.0作為其版本號。HTML+的發(fā)展繼續(xù)下去，但是它從未成為標(biāo)準(zhǔn)。

HTML3.0規(guī)范是由當(dāng)時剛成立的W3C于1995年3月提出，提供了很多新的特性，例如表格、文字繞排和復(fù)雜數(shù)學(xué)元素的顯示。雖然它是被設(shè)計(jì)用來兼容2.0版本的，但是實(shí)現(xiàn)這個標(biāo)準(zhǔn)的工作在當(dāng)時過于復(fù)雜，在草案于1995年9月過期時，標(biāo)準(zhǔn)開發(fā)也因?yàn)槿狈g覽器支持而中止了。3.1版從未被正式提出，而下一個被提出的版本是開發(fā)代號為Wilbur的HTML 3.2，去掉了大部分3.0中的新特性，但是加入了很多特定瀏覽器，例如Netscape和Mosaic的元素和屬性。HTML對數(shù)學(xué)公式的支持最后成為另外一個標(biāo)準(zhǔn)MathML。

HTML 4.0同樣也加入了很多特定瀏覽器的元素和屬性，但是同時也開始“清理”這個標(biāo)準(zhǔn)，把一些元素和屬性標(biāo)記為過時，建議不再使用它們。HTML的未來和CSS結(jié)合會更好。

HTML 5草案的前身名為Web Applications 1.0。于2004年被WHATWG提出，于2007年被W3C接納，并成立了新的HTML工作團(tuán)隊(duì)。在2008年1月22日，第一份正式草案發(fā)布。

XHTML1.0——發(fā)布于2000年1月26日，是W3C推薦標(biāo)準(zhǔn)，后來經(jīng)過修訂于2002年8月1日重新發(fā)布。

XHTML 1.1，于2001年5月31日發(fā)布，W3C推薦標(biāo)準(zhǔn)。

XHTML 2.0，W3C工作草案。

XHTML 5，從XHTML 1.x的更新版，基于HTML 5草案。

HTML4.01 是常見的版本。

在編輯超文本標(biāo)記語言文件和使用有關(guān)標(biāo)記符時有一些約定或默認(rèn)的要求。文本標(biāo)記語言源程序的文件擴(kuò)展名默認(rèn)使用htm（磁盤操作系統(tǒng)DOS限制的外語縮寫為擴(kuò)展名）或html（外語縮寫為擴(kuò)展名），以便于操作系統(tǒng)或程序辨認(rèn)，除自定義的漢字?jǐn)U展名。在使用文本編輯器時，注意修改擴(kuò)展名。而常用的圖像文件的擴(kuò)展名為gif和jpg。

超文本標(biāo)記語言源程序?yàn)槲谋疚募淞袑捒刹皇芟拗疲炊鄠€標(biāo)記可寫成一行，甚至整個文件可寫成一行；若寫成多行，瀏覽器一般忽略文件中的回車符（標(biāo)記指定除外）；對文件中的空格通常也不按源程序中的效果顯示。完整的空格可使用特殊符號（實(shí)體符）“ （注意此字母必須小寫，方可空格）”表示非換行空格；表示文件路徑時使用符號“/”分隔，文件名及路徑描述可用雙引號也可不用引號括起。

標(biāo)記符中的標(biāo)記元素用尖括號括起來，帶斜杠的元素表示該標(biāo)記說明結(jié)束；大多數(shù)標(biāo)記符必須成對使用，以表示作用的起始和結(jié)束；標(biāo)記元素忽略大小寫，即其作用相同，但完整的空格可使用特殊符號“ （注意此字母必須小寫，方可空格）”；許多標(biāo)記元素具有屬性說明，可用參數(shù)對元素作進(jìn)一步的限定，多個參數(shù)或?qū)傩皂?xiàng)說明次序不限，其間用空格分隔即可；一個標(biāo)記元素的內(nèi)容可以寫成多行。標(biāo)記符號，包括尖括號、標(biāo)記元素、屬性項(xiàng)等必須使用半角的西文字符，而不能使用全角字符。

HTML注釋由"“結(jié)束結(jié)束，例如。注釋內(nèi)容可插入文本中任何位置。任何標(biāo)記若在其最前插入驚嘆號，即被標(biāo)識為注釋，不予顯示。

XHTML常用標(biāo)記

1、文本標(biāo)題（h1-h6）

...

2、傾斜：傾斜標(biāo)記

（1）<em></em>

（2）<i></i>

3、段落(p)

<p>段落文本內(nèi)容</p>

標(biāo)識一個段落(段落與段落之間有段間距)

4、加粗：有兩個標(biāo)記

（1）<b>加粗內(nèi)容</b>

（2）<strong>加粗內(nèi)容</strong>

5、列表（ul,ol,dl）

HTML中有三種列表，分別是：無序列表，有序列表，自定義列表。

*無序列表

無序列表組成：

<ul>

．．．．．．

</ul>

*有序列表

有序列表組成：

<ol>

．．．．．．

</ol>

*自定義列表

<dl>

．．．．．．

</dl>

6、插入圖片

7、超鏈接的應(yīng)用

語法：

8、數(shù)據(jù)表格的作用及組成

*作用：顯示數(shù)據(jù)

<tr>

</tr>

</table>

注：個tr表示一行;一個td表示一列(一個單元格)

*數(shù)據(jù)表格的相關(guān)屬性

1）width="表格的寬度"

2）height="表格的高度"

3）border="表格的邊框"

4）bgcolor="表格的背景色"

5）cellspacing="單元格與單元格之間的間距"

6）cellpadding="單元格與內(nèi)容之間的空隙"

7）對齊方式：align="left/center/right";

8)合并單元格屬性：

colspan=“所要合并的單元格的列數(shù)"合并列;

rowspan=“所要合并單元格的行數(shù)”合并行;

9、表單的應(yīng)用

表單的作用：用來收集用戶的信息的;

*表單框

</form>

1）文本框

2)密碼框

3)提交按鈕

4)重置按鈕

5）單選框/單選按鈕

<input type="radio" name="ral" checked="checked" />(默認(rèn)選中；)

6）復(fù)選框

<input type="checkbox" name="like" disabled="disabled" /> (disabled="disabled" :禁用)

(checked="checked" :默認(rèn)選中)

7)下拉菜單

</select>

8）多行文本框（文本域）

</textarea>

9)按鈕

（他和submit的區(qū)別是，submit是提交按鈕起到提交信息的作用，button只起到跳轉(zhuǎn)的作用，不進(jìn)行提交。）

div的用法

文檔區(qū)域，文檔布局對象

span的用法

<span></span>文本結(jié)點(diǎn)（某一小段文本，或是某一個字）

今天課堂筆記主要講的是HTML5零基礎(chǔ)需要學(xué)習(xí)和掌握的知識點(diǎn)，我們一起來看主要培訓(xùn)課程內(nèi)容：

　　1)CSS Bug:CSS樣式在各瀏覽器中解析不一致的情況，或者說CSS樣式在瀏覽器中不能正確顯示的問題稱為CSS bug.

　　2)CSS Hack: CSS中，Hack是指一種兼容CSS在不同瀏覽器中正確顯示的技巧方法，因?yàn)樗鼈兌紝儆趥€人對CSS代碼的非官方的修改，或非官方的補(bǔ)丁。有些人更喜歡使用patch(補(bǔ)丁)來描述這種行為。

　　3)Filter:表示過濾器的意思，它是一種對特定的瀏覽器或?yàn)g覽器組顯示或隱藏規(guī)則或聲明的方法。本質(zhì)上講，F(xiàn)ilter是一種用來過濾不同瀏覽器的Hack類型。

　　*使用Hack帶來的一些副作用

　　降低了CSS代碼的可讀性，增加了代碼的負(fù)擔(dān)。

　　*設(shè)計(jì)CSS Hack和 Filter通常有兩種方法

　　1)一種是利用瀏覽器自身的Bug，來隱藏或顯示樣式或聲明;

　　2)另一種是利用瀏覽器對CSS支持的不完善，如對某些規(guī)則或語法還沒有形成支持，來隱藏或顯示樣式。

　　IE6常見CSS解析Bug及hack

　　1)圖片間隙

　　A)在元素中直接插入圖片時，圖片下方會產(chǎn)生約3像素的間隙(該bug出現(xiàn)在IE6及更低版本中)

　　hack1:將

#FormatImgID_0#轉(zhuǎn)為塊狀元素，給#FormatImgID_1#添加聲明：display:block;

　　hack2:將img設(shè)置vertical-align:top/middle/bottom;只要不為baseline

　　2) 雙倍浮向(雙倍邊距)

　　描述：當(dāng)Ie6及更低版本瀏覽器在解析浮動元素時，會錯誤地把浮向邊邊界加倍顯示。

　　hack:給浮動元素添加聲明：display:inline;

　　3)默認(rèn)高度(IE6)

　　描述：在IE6及以下版本中，部分塊元素?fù)碛心J(rèn)高度(低于16px高度)

　　hack1:給元素添加聲明：font-size:0;

　　hack2：給元素添加聲明：overflow:hidden;

　　4)百分比bug

　　描述：在IE6及以下版本中在解析百分比時，會按四舍五入方式計(jì)算從而導(dǎo)致50%加50%大于100%的情況。

　　hack:給右面的浮動元素添加聲明：clear:right; 意思：清除右浮動。

　　5)表單元素高度及對齊方式不一致(IE,MOZ,C,O,S)

　　描述：表單元素行高對齊方式不一致

　　hack:給表單元素添加聲明：float:left;或vertical-align:top;

　　2)表單元素中按鈕的解析是按怪異盒模型解析的。

　　3)直接去掉表單控件的邊框時用border:0;border:none;不能兼容ie7以下瀏覽器。

　　*透明寫法

　　1.opacity:0~1;IE8以上的瀏覽器

　　2.filter:alpha(opacity=1~100); IE9及IE9以下的瀏覽器

　　6)列表階梯BUG(IE6及更低版本的瀏覽器中)

　　bug1:在給的子元素中使用了Float:left;父元素中沒有設(shè)置浮動屬性，li階梯狀效果。

　　hack:給父元素設(shè)置浮動便能解決此問題

　　bug2:當(dāng)給LI里的A轉(zhuǎn)成塊元素，并設(shè)置了固定高度時，且給父元素寫了浮動后在IE6及更低的版本瀏覽器里會出現(xiàn)垂直顯示。

　　hack:給a也設(shè)置左浮動便可解決。

　　8)鼠標(biāo)指針bug

　　描述：cursor屬性的hand屬性值只有IE瀏覽器識別，其它瀏覽器不識別該聲明，cursor屬性的pointer屬性值IE6.0以上版本及其它內(nèi)核瀏覽器都識別該聲明。

　　hack:如統(tǒng)一某元素鼠標(biāo)指針形狀為手型，應(yīng)添加聲明：cursor:pointer;

　　擴(kuò)展內(nèi)容：

　　鼠標(biāo)指針

　　cursor:crosshair(十字架)

　　pointer(手形)

　　move(移動)

　　e-resize(左右方向)

　　ne-resize(向右及向上移動)

　　nw-resize(向上及向左移動)

　　n-resize(向上移動)

　　se-resize(向下及向右)

　　sw-resize(向下及向左)

　　s-resize(向下移動)

　　w-resize(向左移動)

　　text(文本)

　　wait(等待狀態(tài))

　　help(幫助)

-7 超鏈接（上）

1-8 超鏈接（下）

1-9 img元素嵌入圖片

1-10 絕對路徑與相對路徑

1-11 列表

1-12 表格元素（上）

1-13 表格元素（下）

1-14 特殊符號的使用

1-15 style元素與HTML樣式基礎(chǔ)

1-16 內(nèi)聯(lián)框架與綜合實(shí)例

1-17 table布局與綜合實(shí)例

1-18 div元素與布局

1-19 通用屬性

1-20 課程小結(jié)與若干補(bǔ)充（上）

1-20 課程小結(jié)與若干補(bǔ)充（下）

在線咨詢

上一篇：如何用JavaScript排序包含字母的數(shù)字字符串
下一篇：C# .NET 6 校園圖書管理系統(tǒng)：第14章 .N

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML5基礎(chǔ)學(xué)習(xí)筆記— 超文本標(biāo)記語言編程

您的項(xiàng)目需求