cq9五福临门大奖视频

書名：構(gòu)建移動(dòng)網(wǎng)站與APP：HTML 5移動(dòng)開發(fā)入門與實(shí)戰(zhàn)（跨平臺移動(dòng)開發(fā)叢書）
作者名：常新峰
本章字?jǐn)?shù)： 1289字
更新時(shí)間： 2020-11-29 00:14:03

1.1 認(rèn)識HTML

本節(jié)我們先簡單回顧一下HTML技術(shù)的內(nèi)容，為讀者學(xué)習(xí)HTML 5技術(shù)做好鋪墊。

1.1.1 HTML的構(gòu)成

HTML（HyperText Mark-up Language，超文本標(biāo)記語言，或稱為超文本鏈接標(biāo)示語言）是構(gòu)成網(wǎng)頁文檔的主要語言。(X)HTML指擴(kuò)展超文本標(biāo)簽語言（EXtensible HyperText Markup Language），是更嚴(yán)格更純凈的HTML版本。(X)HTML文件的結(jié)構(gòu)包括頭部（Head）、主體（Body）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說明的具體內(nèi)容。

提示

XHTML 1.0在2000年1月26日成為W3C的推薦標(biāo)準(zhǔn)。

【代碼1-1】是一個(gè)符合(X)HTML的文件。

【代碼1-1】

        01    <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        02    <html xmlns="http://www.w3.org/1999/xhtml">
        03    <head>
        04    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        05   <title>網(wǎng)頁標(biāo)題</title>
        06    <link href="css/home.css" rel="stylesheet" type="text/css" />
        07    </head>
        08    <body>
        09    <div id="doc">
        10        <div id="hd">/*..modules..*/</div>
        11        <div id="bd">/*..modules..*/</div>
        12        <div id="ft">/*..modules..*/</div>
        13    </div>
        14    </body>
        15    <script type="text/javascript" src="js/home.js"></script>
        16    </html>

其中，DOCTYPE和xmlns都是必需的。經(jīng)常使用的編碼格式有UTF-8和GBK兩種，UTF8是針對英文網(wǎng)頁設(shè)計(jì)的編碼格式，GBK是針對中文網(wǎng)頁設(shè)計(jì)的編碼格式，在沒有特殊需求的情況下統(tǒng)一使用UTF-8編碼，因?yàn)閁TF-8是國際編碼，通用性好，另外后端頁面（如PHP、ASP等）一般都使用UTF-8編碼，所以使用UTF-8與其通信時(shí)可以防止出現(xiàn)亂碼和不必要的麻煩。

CSS一般位于(X)HTML文件的頭部，JavaScript一般位于(X)HTML文件的末尾，防止JavaScript文件在加載時(shí)出現(xiàn)加載時(shí)間過長而導(dǎo)致頁面出現(xiàn)空白等糟糕的用戶體驗(yàn)。

提示

(X)HTML標(biāo)簽全部小寫。

1.1.2 CSS的構(gòu)成

級聯(lián)樣式表（Cascading Style Sheet, CSS）通常又稱為“層疊樣式表（Style Sheet）”，是用來進(jìn)行網(wǎng)頁風(fēng)格設(shè)計(jì)的。比如，網(wǎng)頁上藍(lán)色的字、紅色的按鈕，這些都是風(fēng)格。通過設(shè)立樣式表，可以統(tǒng)一控制(X)HTML中各標(biāo)簽的顯示屬性。CSS樣式表可以使人更有效地控制網(wǎng)頁外觀。【代碼1-2】是一個(gè)CSS文件。

【代碼1-2】

        01    /*css reset*/
        02    html{color:#000; }body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6/*...*/
        03   /*全局公共樣式*/
        04    textarea{resize:none; } /*hack for chrome, disable chrome resizes textarea*/
        05    a{color:#049; outline-style:none; }
        06    a:hover{color:#f00; }
        07    .cf{zoom:1; }
        08   .cf:after{content:'.'; display:block; visibility:hidden; clear:both; height:0px; }
        09   /*moduleABC ABC模塊的樣式*/
        10    #moduleABC h2{font-size:14px; font-weight:bold; }
        11    #moduleABC p{font-size:12px; line-height:1.5; }

如代碼所示，CSS文件共分3部分：第一部分為CSS重置，第二部分為公共樣式，第三部分為模塊樣式（非公共）。所有的公共樣式一般寫在第二部分，位于模塊樣式之上，方便查找。在模塊CSS部分，盡量寫出樣式的詳細(xì)路徑，比如：

        01    #mty_bbs_myblock .searchbar .addblock ul li a{margin:.2em 0; padding
    bottom:.2em}

盡量不要簡寫成：

        01    #mty_bbs_myblock .searchbar a{margin:.2em 0; padding-bottom:.2em}

提示

CSS代碼建議全部小寫。

1.1.3 JavaScript的構(gòu)成

JavaScript就是一個(gè)被埋沒很久的編程語言，早在1995年被布蘭登·艾奇（Brendan Eich）設(shè)計(jì)出來。

最初網(wǎng)景（Netscape）公司將其腳本語言命名為LiveScript，在與Sun合作之后將其改名為JavaScript，隨著Netscape Navigator 2.0（見圖1.1）公布于世，雖然想要師出名門的效果，但是網(wǎng)景公司卻把它作為給非程序人員的編程語言來推廣和宣傳，非程序開發(fā)者并不對其買賬，JavaScript由此被埋沒長達(dá)十年之久。不過JavaScript的確具備了很多優(yōu)秀的特點(diǎn)，近幾年的發(fā)展勢頭越來越好，預(yù)示著JavaScript春天般的前景。

圖1.1 瀏覽器Netscape Navigator 2.0

用JavaScript編寫的代碼需要放在．html文檔中才能被瀏覽器執(zhí)行，有兩種方式可以做到這一點(diǎn)。

1．直接內(nèi)嵌JavaScript代碼

第一種方式是將JavaScript代碼放到文檔<head>標(biāo)簽的<script>標(biāo)簽中，見【代碼1-3】。

【代碼1-3】（第一個(gè)JavaScript程序hello world）

        <! DOCTYPE html>
        <html>
         <head>
          <title>hello world</title>
          <script>
              alert('hello world! ');
          </script>
         </head>
         <body>
         </body>
        </html>

將上面的代碼保存到HTML文件中（在記事本中寫作，然后另存為擴(kuò)展名是html的文件），用任意瀏覽器打開，就可以看到一個(gè)彈出對話框。

2．引用JavaScript文件

第二種方式是把JavaScript代碼存為一個(gè)擴(kuò)展名為js的獨(dú)立文件中。以前的做法是在文檔<head>里用<script>標(biāo)簽的src屬性來指向該文件，見【代碼1-4】。

【代碼1-4】

        <! DOCTYPE html>
        <html>
         <head>
          <title>hello world</title>
          <script src="helloworld.js"></script>
         </head>
         <body>
         </body>
        </html>

隨著最近幾年的發(fā)展，目前業(yè)界推薦的做法是把【代碼1-4】中的<script>放到HTML文檔最后，即</body>標(biāo)簽之前。這樣做的目的是使瀏覽器更快地加載頁面并展示給用戶，從而提高用戶體驗(yàn)效果。

官术网_书友最值得收藏!

構(gòu)建移動(dòng)網(wǎng)站與APP：HTML 5移動(dòng)開發(fā)入門與實(shí)戰(zhàn)（跨平臺移動(dòng)開發(fā)叢書）

1.1 認(rèn)識HTML

1.1.1 HTML的構(gòu)成

1.1.2 CSS的構(gòu)成

1.1.3 JavaScript的構(gòu)成