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

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

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

一、由來(lái)

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

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

二、定義

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

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

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

1、簡(jiǎn)易性：超級(jí)文本符號(hào)言語(yǔ)版本晉級(jí)采用超集方式，然后愈加靈活便利。

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

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

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

三、編輯

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

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

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

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

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

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

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

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

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

超文本標(biāo)記語(yǔ)言（第一版）——在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)過(guò)時(shí)

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語(yǔ)法，是國(guó)際標(biāo)準(zhǔn)化組織和國(guó)際電工委員會(huì)的標(biāo)準(zhǔn)。

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

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

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

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

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

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

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

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

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)識(shí)一個(gè)段落(段落與段落之間有段間距)

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

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

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

5、列表（ul,ol,dl）

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

*無(wú)序列表

無(wú)序列表組成：

<ul>

．．．．．．

</ul>

*有序列表

有序列表組成：

<ol>

．．．．．．

</ol>

*自定義列表

<dl>

．．．．．．

</dl>

6、插入圖片

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

語(yǔ)法：

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

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

<tr>

</tr>

</table>

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

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

1）width="表格的寬度"

2）height="表格的高度"

3）border="表格的邊框"

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

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

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

7）對(duì)齊方式：align="left/center/right";

8)合并單元格屬性：

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

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

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

表單的作用：用來(lái)收集用戶的信息的;

*表單框

</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ū)域，文檔布局對(duì)象

span的用法

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

CSS和HTML一樣都是由W3C制定的標(biāo)準(zhǔn)，本章中介紹的特性和功能還是來(lái)源于CSS1和CSS2（CSS2是根據(jù)CSS1擴(kuò)展的）。W3C也有新的版本更新，稱為CSS3。雖然瀏覽器已經(jīng)準(zhǔn)備開始實(shí)現(xiàn)CSS3某些方面的內(nèi)容，但當(dāng)前瀏覽器仍然無(wú)法支持某些特性。一張樣式表由樣式規(guī)則組成，以告訴瀏覽器怎樣去呈現(xiàn)一個(gè)文檔。如圖6.2所示給出了關(guān)于CSS規(guī)則的一個(gè)示例。

圖6.2 CSS規(guī)則組成

回說(shuō)到在網(wǎng)頁(yè)上面用`<canvas>`標(biāo)簽和一個(gè)小的javascript庫(kù)實(shí)現(xiàn)了飄雪花的效果。

進(jìn)來(lái)看看，1分鐘用HTML5實(shí)現(xiàn)的雪花效果——HTML5實(shí)例001

有客官提到不知道如何入手學(xué)習(xí)`<canvas>`這個(gè)標(biāo)簽的事，我正好想到了自己曾經(jīng)為了學(xué)習(xí)這東西寫了一個(gè)生成像素風(fēng)格頭像的網(wǎng)頁(yè)，簡(jiǎn)單明了，明天分享出來(lái)。

還有客官說(shuō)自己加了音樂(lè)，為你點(diǎn)贊，學(xué)習(xí)編程就是要自己不斷地去摸索，去嘗試。提到了多瀏覽器的兼容，這個(gè)兼容，只要是寫過(guò)前端代碼的兄弟，提多了都是淚。如果想快速出效果的話，其實(shí)可以找個(gè)第三方專門播放音頻的庫(kù)，比較省心。

好了，繼續(xù)昨天沒有實(shí)現(xiàn)完成的部分，有了雪花效果，接下來(lái)只要把兩個(gè)圖片放到頁(yè)面上面，再加個(gè)倒計(jì)時(shí)就ok了。

1, 首先在`index.html`里面加入兩個(gè)圖片，再將例計(jì)時(shí)要用到的幾個(gè)`<span>`標(biāo)簽也加上：

<body>
 <div class="content">
 <img src="001.png" />
 <h2>距離己亥年春節(jié)還有</h2>
 <p>
 <span id="days">
 </span>天<span id="hours">
 </span>小時(shí)<span id="minutes">
 </span>分<span id="seconds">
 </span>秒
 </p>
 </div>
 <div class="sider">
 <img src="002.png" />
 </div>
 <canvas></canvas>

用兩個(gè)div將兩塊內(nèi)容包起來(lái)，稍后讓他們左右浮動(dòng)。

可能有客官注意到那幾個(gè)`<span>`的分行有點(diǎn)不對(duì)勁，這里這樣子分行其實(shí)是為了防止在同一行的`span`標(biāo)簽之間在源代碼中的分行（回車）會(huì)被瀏覽器解釋成為空格。 看一張圖就明白了：

Todo

當(dāng)然有別的方法可以解決這個(gè)問(wèn)題，不過(guò)我比較喜歡簡(jiǎn)單直接，以前寫代碼也是老念叨“能用就好啦，要什么自行車”，“拿著鞋帶扎一下就好了“，哈哈，這種態(tài)度怎么說(shuō)呢，有好的地方，就是你不用太過(guò)拘泥于小細(xì)節(jié)，小問(wèn)題，或者是大家說(shuō)的代碼優(yōu)雅，專心去第一時(shí)間看到自己想看到的東西出來(lái)。不好的地方便是，有人可能會(huì)在幫你修理”不太友好“的代碼的時(shí)候踩到坑里。

2, `javascript`的倒計(jì)時(shí)功能，在js文件夾里面新建一個(gè)`countdown.js`文件，代碼如下：

function CountDown(future_date,eventname) {
 this.future_date = Date.parse(future_date);
 this.eventname = eventname;
};
 CountDown.prototype.remaining = function () {
 var current = "Today is " + this.eventname + "!";
 var today = Date.now();
 var msInDay = 60*60*1000*24;
 var msInHour = 60*60*1000;
 var msInMin = 60*1000;
 
 var diff = this.future_date - today;
 var dday = Math.floor(diff / msInDay);
 var dhour = Math.floor((diff % msInDay) / msInHour * 1);
 var dmin = Math.floor(((diff % msInDay) % msInHour)/msInMin * 1);
 var dsec = Math.floor((((diff % msInDay) % msInHour) % msInMin) / 1000 * 1);
 if(dday <= 0 && dhour <= 0 && dmin <= 0 && dsec <= 1) {
 console.log(current)
 return false;
 } else {
 return {
 seconds: dsec,
 minutes: dmin,
 hours: dhour,
 days: dday
 }
 };
 }
var countdown_refresh = function () {
 if(!current_countdown.remaining()) {
 clearInterval(countdownLoader);
 } else {
 document.getElementById('days').innerHTML = current_countdown.remaining().days;
 document.getElementById('hours').innerHTML = current_countdown.remaining().hours;
 document.getElementById('minutes').innerHTML = current_countdown.remaining().minutes;
 document.getElementById('seconds').innerHTML = current_countdown.remaining().seconds;
 } 
};
var countdownLoader = window.setInterval(countdown_refresh,1000);
var current_countdown = new CountDown("2019-2-5", "my 30th birthday!");

以上代碼有很大的優(yōu)化空間，留給有心的客官提出吧。現(xiàn)在，只需要的是能用就好啦。不出錯(cuò)的話，現(xiàn)在網(wǎng)頁(yè)上面的倒計(jì)時(shí)已經(jīng)可以看到效果了：

將網(wǎng)頁(yè)背景改成紅色的了，比較喜慶一些

3, 可以看到，`<canvas>`被擠到了下面，所以得把放圖片的兩個(gè)div給浮動(dòng)起來(lái)，打開`css/style.css`進(jìn)行編輯（代碼意圖就直接寫在注釋里面吧）：

/*設(shè)置網(wǎng)頁(yè)的背景為紅色*/
html{
 background: radial-gradient( circle at 20% 50%, #ff1700, #a01808 );
}
/*讓canvas固定，前后左右上下定位到與頁(yè)面（窗口）一樣大小*/
canvas {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
/*修改div里面內(nèi)容的字體，顏色，大小；改變div的顯示模式為行內(nèi)塊，放便后面左右浮動(dòng)*/
div { 
 font-family: '新蒂小丸子體', cursive;
 color: white; 
 text-shadow: 1px 1px 0 #ccccccb8, 1px -2px 0 #ff1700d1, 4px 4px 2px #ea323294;
 display:inline-block;
 font-size: 1.5em;
 font-weight: bolder;
}
/*將圖片的寬度改為300px，*/
img { width: 300px; }
/* 將有倒計(jì)時(shí)的div往右浮動(dòng)，設(shè)置一個(gè)與右邊圖片相同的高度，讓內(nèi)部?jī)?nèi)容往下偏移97px*/
div.content {
 height: 600px;
 width: 300px;
 float: left;
 padding-top: 97px;
}
/*跨年兩個(gè)字往右邊移動(dòng)*/
div.sider {
 float: right;
}
/*設(shè)置body的寬度，并且整體居中*/
body {
 width: 600.111111px;
 margin: 0 auto;
}

效果：

恩，就是這樣了

最后，再放一張圖，看，當(dāng)網(wǎng)頁(yè)的寬度不足720px的時(shí)候，會(huì)自動(dòng)變一種布局，如何實(shí)現(xiàn)？后面會(huì)更新講解，還請(qǐng)客官收藏，轉(zhuǎn)發(fā)，關(guān)注。

CSS3響應(yīng)布局

在線咨詢

上一篇：三分鐘教你玩轉(zhuǎn)HTML
下一篇：HTML基礎(chǔ)的 <p> 標(biāo)簽

您的項(xiàng)目需求

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

整合營(yíng)銷服務(wù)商

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

您的項(xiàng)目需求