網絡技術與應用

HTML 5

HTML5概述

因特網上的信息是以網頁的形式展示給用戶的，因此網頁是網絡信息傳遞的載體沸移。網頁文件是用HTML（Hyper Text Markup Language,超文本標記語言）書寫的逢艘。

HTML5不是一種編程語言估盘，而是一種描述性的標記語言喷市，用于描述超文本中的內容和結構。

HTML5結構

HTML5文件的基本結構

HTML標記符一般有兩種：

  • 一般標記符（容器標記符）

    這些標記符的起始部分與結束部分必須成對出現

  • 空標記符

    只是單一的一個標記符而已酗宋，如<hr>標記符

HTML文件的編寫方法

  • 記事本

    保存文件時积仗，選擇【保存類型】為【所有文件】，將文件的擴展名設置為.htm或.html蜕猫。建議將文檔的編碼設置為utf-8斥扛，默認是ANSI。

  • IntelliJ IDEA丹锹、Dreamweaver侧漓、Editplus等工具

編寫第一個HTML5頁面

測試瀏覽器是否支持HTML5（畫布標記）

chap1-1.html

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type"content="text/html" charset="utf-8">
<title>測試</title>
<styletype="text/CSS">
#myCanvas{
  background:red;
  width:200px;
  height:100px;
}
</style>
</head>
<body>
<canvas id="myCanvas">該瀏覽器不支持HTML5的畫布標記！</canvas>
</body>
</html>

常用HTML實體

字符 實體名稱 實體編號 字符 實體名稱 實體編號
< &lt; &#60; > &gt; &#62;
& &amp; &#30; € &euro; &#8364;
￡ &pound; &#163; § &sect; &#167;
? &copy; &#169; ? &reg; &#174;
? &trade; &#8482; 空格 &nbsp; &#160;
" &quot; &#34; ° &deg; &#176;
± &plusmn; &#177; 2 &sup2; &#178;

HTML5全局屬性

全局屬性可以用來配置所有元素共有的行為巍虫，可以用在任何一個元素身上惧互。

  • accesskey屬性

    設置頁面上元素的快捷鍵。Windows系統上同時按下Alt和accesskey屬性值可以觸發(fā)accesskey機制租漂。

  • lang屬性

    用于說明元素內容使用的語言阶女。中文為zh，英文為en哩治。

    chap1-2.html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap1-2</title>
  </head>
  <body>
    <form>
      Name:<input type="text" name=“user" accesskey="n"><br/>
      password:<input type="password" name=“upw" accesskey="p">
    </form>
  </body>
</html>

  • class屬性

    用來將元素歸類秃踩，通常是為了能夠找出文檔中的某一類元素或為某一類元素應用CSS樣式。

  • contenteditable屬性

    讓用戶能夠修改頁面上的內容业筏。

    chap1-3.html

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>chap1-3</title>
    <style type="text/css">
      .class2{
        background: gray;
        color: white;
        padding: 5px;
        margin: 2px;
      }
      .class1{
        font-size: x-large;
      }
    </style>
  </head>
  <body>
    <p class="class2" contenteditable="true">hello world</p>
    <p class="class1">hello world</p>
  </body>
</html>

  • dir屬性

    用來規(guī)定元素中文字的方向憔杨，其有效值有：

    • ltr:從左到右；

    • rtl:從右到左蒜胖。

  • id屬性

    用來給元素分配一個唯一的標識符消别，通常用來將樣式應用到元素上或在JavaScript程序中用來選擇元素。

    chap1-4.html

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap1-4</title>
    <style type="text/css">
      #w1{
        background: gray;
        color: white;
        padding: 5px;
        border: thin solid black;
      }
    </style>
  </head>
  <body>
    <p id="w1" dir="ltr">hello world</p>
    <p id="w2" dir="rtl">hello world</p>
  </body>
</html>

  • spellcheck屬性

    用來表明瀏覽器是否應該對元素的內容進行拼寫檢查台谢。這個屬性只有用在用戶可以編輯的元素上時才有意義寻狂。

  • style屬性

    用來直接在元素身上定義CSS樣式（這是在style元素或外部樣式表中定義樣式之外的一種選擇）

    chap1-5.html

    <!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <title>chap1-5</title>
  </head>
  <body>
  <p style="background: gray;color: white;padding: 10px">留言：</p>
    <textarea spellcheck="true"></textarea>
  </body>
</html>

  • tabindex屬性

    用來設置元素的順序，實現通過按Tab鍵在各元素之間切換朋沮。設置為-1的元素不會在用戶按下Tab鍵后被選中蛇券。

  • title屬性

    用來設置元素的額外信息。通常被用來顯示工具提示樊拓。

    chap1-6.html

    <!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <title>chap1-6</title>
  </head>
  <body>
  <p>用戶：<input type="text" tabindex="1"></p>
    <p>密碼：<input type="password" tabindex="-1"></p>
    <p>留言：<textarea title="留言" tabindex="2"></textarea></p>
  </body>
</html>

HTML標記

HTML文檔最基本的結構主要包括

  • 文檔類型說明：<!DOCTYPE html>
  • HTML文檔開始標記：<html>…</html>
  • 頭標記：<head>…</head>
  • 主體標記：<body>…</body>
  • 頁面注釋標記：``

每一個HTML文檔都必須以doctype元素開頭纠亚，瀏覽器據此得知自己將要處理的是HTML內容。

HTML元素表示文檔中HTML部分的開始骑脱。

head元素包含著文檔的元數據菜枷，從而向瀏覽器提供有關文檔內容和標記的信息，此外還可以包含腳本和對外部資源（比如CSS樣式表）的引用叁丧。

body元素包含著文檔的內容啤誊。

head標記

元素 說明
title 設置文檔標題
style 定義CSS樣式
meta 提供關于文檔的信息
base 設置相對URL的基礎
link 定于與外部資源（通常是樣式或網站圖標）的關系
script 定義腳本程序岳瞭，可以是文檔內嵌的，也可以是外部文件中的
noscript 包含瀏覽器禁用腳本或不支持腳本時顯示的內容

base元素

用來設置一個基準URL蚊锹，讓HTML文檔中的相對鏈接在此基礎上進行解析瞳筏。

  • href屬性

    指定基準URL

  • Target屬性

    指定瀏覽器如何打開URL。

    值 說明 值 說明
    _blank 新窗口中 _top 頂層窗口中
    _parent 父窗框組中 <frame> 指定窗框中
    _self 當前窗口中

chap1-7.html

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <title>chap1-7</title>
    <style type="text/css">
      .class1{
        background: gray;
        color: white;
      }
    </style>
    <base href="linktest/" target="_blank">
  </head>
  <body>
    <a href="basetest.html" class="class1">base測試</a>
  </body>
</html>

meta元素

  • 通過name和content屬性指定名/值元數據對

    元數據名稱 說明
    Application name 當前頁所屬Web應用系統名稱
    Author 當前頁的作者
    Description 當前頁的說明
    Generator 用來生成HTML的軟件名稱
    Keywords 一批以逗號分開的字符串牡昆，用來描述頁面的內容

  • 通過charset聲明字符編碼

  • 通過http-equiv和content改寫HTTP標頭字段的值姚炕，http-equiv有3個值可用：

    屬性值 說明
    Refresh 以秒為單位指定一個時間間隔，在此時間過去之后將從服務器重載當前頁面丢烘，也可以另行指定一個URL讓瀏覽器載入柱宦。<meta http-equiv="refresh" content="5;chap1-1.html">
    Default-style 指定頁面優(yōu)先使用的樣式表。對應的content屬性值應與同一文檔中某個style元素或link元素的title屬性值相同播瞳。
    Content-type 這是另一種聲明HTML頁面所用字符編碼的方法<meta http-equiv="content-type" content="text/html charset=UTF-8">

chap1-8.html

<!DOCTYPE html>
<html lang="zh">
  <head>
    <title>chap1-8</title>
    <base href="linktest/" target="_blank">
    <meta http-equiv="content-type" content="text/html charset=utf-8">
    <meta http-equiv="refresh" content="5;basetest.html">
    <meta name="author" content="shulinChen">
  </head>
  <body>
    <p>5秒后頁面跳轉</p>
  </body>
</html>

style元素

用來定義HTML文檔內嵌的CSS樣式掸刊，其屬性有：

  • type屬性：用來將所定義的樣式類型告訴瀏覽器。值只有一個：text/css赢乓。

  • media屬性：用來表明文檔在什么情況下應該使用該元素中定義的樣式忧侧，常用有：

    • screen：用于計算機顯示器屏幕；
    • print：用于打印預覽和打印頁面牌芋；
    • projection：用于投影機

chap1-9.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>chap1-9</title>
    <style type="text/css" media="screen">
      a{
        background: gray;
        color: white;
        padding: 10px;
      }
    </style>
    <style type="text/css" media="print">
      a{
        color: red;
        font-weight: bold;
        font-style: italic;
      }
    </style>
  </head>
  <body>
    <p><a href="chap1-1.html">chap1-1.html</a></p>
    <p><a href="chap1-2.html">chap1-2.html</a></p>
  </body>
</html>

  • link元素

    用來在HTML文檔和外部資源（CSS樣式表）之間建立聯系蚓炬。其屬性有：

    • href：指定link元素指向的資源的URL；
    • rel：說明文檔與所關聯資源的關系類型,如stylesheet（載入外部樣式表）
    • type：指定所關聯資源的MIME類型躺屁，如text/css
      chap1-10.html 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap1-10</title>
    <link rel="stylesheet" type="text/css" href="css1/chap1-10.css">
  </head>
  <body>
  <a href="chap1-1.html">chap1-1.html</a>
  </body>
</html>

chap1-10.css

a{
  background: grey;
  color: white;
  padding: 10px;
}

script元素

用來在頁面中加入腳本肯夏，方法有在文檔中定義腳本和引用外部文件中的腳本兩種。其屬性有：

  • type：表示所引用或定義的腳本的類型楼咳，缺省為JavaScript腳本熄捍。
  • src：指定外部腳本文件的URL。
  • charset：說明外部腳本所用字符編碼母怜，該屬性只能與src屬性一同使用。

chap1-11.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap1-11</title>
    <script src="js/chap1-11.js"></script>
    <script>
      document.write("<br>");
      document.write("This is from the script");
    </script>
  </head>
  <body>
    <p><a href="chap1-1.html">chap1-1.html</a> </p>
  </body>
</html>

chap1-11.js

document.write("This is from the external script");

noscript元素

用來向禁用了JavaScript或瀏覽器不支持JavaScript的用戶顯示一些內容缚柏。

chap1-12.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap1-12</title>
    <script src="js/chap1-11.js"></script>
    <noscript>
      <h1>Javascript is required!</h1>
      <p>You cannot use this pape without JavaScript</p>
    </noscript>
  </head>
  <body>
    <p><a href="chap1-1.html">chap1-1.html</a></p>
  </body>
</html>

body標記

通過添加文本元素苹熏，構造網頁內容。

原則：

  • 如果存在符合需求的專用元素就用這種元素币喧；
  • 避開那些補了點語義脂粉的呈現性元素（如b元素）轨域，把呈現工作交給CSS打理；
  • 不管選擇使用什么元素杀餐，都要在HTML文檔中貫徹始終干发。

生成超鏈接

通過a元素生成超鏈接。其屬性有：

  • href屬性:指定a元素所指資源的URL史翘。
    • 外部超鏈接
      • 絕對地址：資源的完整路徑枉长；
      • 相對地址：資源相對于當前文檔的路徑冀续。
    • 內部超鏈接：通過設置目標元素的id屬性

chap1-13.html

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <title>chap1-13</title>
  </head>
  <body>
    <h1><a href="chap1-1.html">相對路徑</a></h1>
    <h1><a href="http://localhost/myweb/chap1/chap1-2.html">絕對路徑</a></h1>
    <h1><a href="#position1">內部超鏈接</a></h1>
    <h1>hello world</h1>
    <h1>hello world</h1>
    <h1>hello world</h1>
    <h1>hello world</h1>
    <h1>hello world</h1>
    <h1>hello world</h1>
    <h1>hello world</h1>
    <h1>hello world</h1>
    <h1>hello world</h1>
    <h1 id="position1">內部超鏈接</h1>
  </body>
</html>
  • target屬性：指定用以打開所鏈接資源的瀏覽環(huán)境，其值：
    • _blank：在新窗口中打開必峰；
    • _parent：在父窗框組（frameset）中打開洪唐；
    • _self：在當前窗口打開（默認）；
    • _top：在頂層窗口打開吼蚁；
    • <frame>：在指定窗框中打開凭需。

基本的文字元素

b元素：內容加粗{font-weight:bolder;}

em元素：內容強調{font-style:italic;}

i元素：外文詞語或科技術語{font-style:italic;}

s元素：刪除線{text-decoration:line-through;}

strong元素：重要文字{font-weight:bolder;}

u元素：下劃線{text-decoration:underline;}

small元素：小號字體內容{font-size:smaller;}

sub元素：下標{vertical-align:sub;font-size:smaller;}

sup元素：上標{vertical-align:super;font-size:smaller;}

chap1-14.html

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>chap1-14</title>
 </head>
 <body>
   <p><b>hello world</b></p>
   <p><em>hello world</em></p>
   <p><i>hello world</i></p>
   <p><s>hello world</s></p>
   <p><strong>hello world</strong></p>
   <p><u>hello world</u></p>
   <p><small>hello world</small></p>
   <p>x<sub>1</sub><sup>2</sup></p>
 </body>
</html>

換行

br元素：將后續(xù)內容轉移到新行上。

wbr元素：用來表示長度超過當前瀏覽器窗口的內容適合在此換行肝匆，究竟換不換行由瀏覽器決定粒蜈。因此，wbr元素只不過是對恰當的換行位置的建議而已旗国。

chap1-15.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap1-15</title>
  </head>
  <body>
    Hello world!<br>
    This is a very long word: super<wbr>califragilistic<wbr>expialidocious.
    We can help the browser display long words with the <code>wbr</code> element.
  </body>
</html>

表示輸入和輸出

code元素：表示計算機代碼片段{font-family:monospace;}

var元素：表示變量{font-style:italic;}

samp元素：表示程序或計算機系統的輸出{font-family:monospace;}

kbd元素：表示用戶輸入{font-family:monospace;}

chap1-16.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap1-16</title>
  </head>
  <body>
    <p><code>var fruits=["apples","oranges","mangoes","cherries"];<br>
      document.writeln("I like" + fruits.length + " fruits");</code></p>
    <p>The variable in this example is <var>fruits</var></p>
    <p>The output from the code is: <samp>I like 4 fruits</samp></p>
    <p>When prompted for my favorite fruit, I typed: <kbd>cherries</kbd></p>
  </body>
</html>

科學和學術標記

abbr元素：表示縮寫{text-decoration: dotted underline;}

dfn元素：表示定義中的術語{font-style:italic;}

cite元素：表示所引用作品的標題{font-style:italic;}

q元素：表示引自他處的內容,其cite屬性可以用來指定來源文章的URL薪伏。

q{display:inline;}
q:before{content:open-quote;}
q:after{content:close-quote;}

chap1-17.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap1-17</title>
  </head>
  <body>
    <p>The <abbr title="Florida Department of Citrus">FDOC</abbr> regulates the Florida citrus industry.</p>
    <p>The <dfn title="Florida Department of Citrus">FDOC</dfn> regulates the Florida citrus industry.</p>
    <p>My favorite book on fruit is <cite>Fruit: Edible, Inedible, Incredible</cite> by Stuppy & Kesseler.</p>
    <q cite="https://en.wikipedia.org/wiki/Primary_production#GPP_and_NPP"><abbr title="Gross primary production"><cite>GPP</cite></abbr> is the amount of chemical energy as biomass that primary producers create in a given length of time. </q>
  </body>
</html>

其他文本元素

span元素：本身沒有任何含義，它可以用來把一些全局屬性應用到一段內容上粗仓。

mark元素：表示因為與某段上下文相關而被突出顯示的一段文字嫁怀。mark{background-color:yellow;color:black;}

ins元素和del元素可以分別用來表示文檔中添加和刪除的文字叛复。ins{text-decoration:underline;}和del{text-decoration:line-through;}

組織內容

元素 說明
p 表示段落
div 將全局屬性應用到一片內容上
pre 保留HTML文檔中的布局
blockquote 表示引自他處的內容
hr 表示段落級別的主題轉變
ol和li 生成有序列表
ul和li 生成無序列表
dl娃磺、dt和dd 生成術語及其定義的列表
figure和figcaption 表示插圖（及可有可無的標題）

div元素作用相當于span元素专肪。它沒有具體含義添诉。不建議使用矾飞！

pre元素讓源文檔中的格式得以保留见擦。

blockquote元素表示引自他處的一片內容贼邓，blockquote{display:block;margin-before:1em;margin-after:1em;margin-start:40px;margin-end:40px;}

chap1-19.html

<head>
  <title>chap1-19</title>
  <style type="text/css">
    .favorites{
      background: gray;
      color: white;
      border: thin solid black;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="favorites">
    <p>hello world</p>
  </div>
  <pre><code>
  var fruits=["apples","oranges","mangoes","cherries"];
  document.writeln("I like" + fruits[0]);
  </code></pre>
  <p>Gross primary production …</p>
  <blockquote cite="https://en.wikipedia.org/wiki/Primary_production#GPP_and_NPP"><abbr title="Gross primary production"><cite>GPP</cite></abbr> is the amount of chemical energy as …</blockquote>
</body>

hr元素铅碍，在HTML5中代表段落級別的主題分隔曙蒸。

ol元素表示有序列表捌治，列表項目用li元素表示，其屬性有：

  • start屬性：設定列表首項編號值纽窟，缺省為1肖油。

  • reversed屬性：編號采用降序。

  • type屬性：設定編號的類型臂港。

    type 說明 示例
    1 十進制數（默認） 1.森枪、2.、3.
    a 小寫拉丁字母 a.审孽、b.县袱、c.
    A 大寫拉丁字母 A.、B.佑力、C.
    i 小寫羅馬數字 i.式散、ii.、iii.
    I 大寫羅馬數字 I.打颤、II.暴拄、III.

li元素表示列表中的項目漓滔，其屬性有：

  • value屬性：僅用于父元素是ol元素時，可以用來生成不連續(xù)的有序列表揍移。

ul元素生成無序列表次和。

chap1-20.html

<head>
  <meta charset="UTF-8">
  <title>chap1-20</title>
</head>
<body>
  I like apples and oranges.
  <hr>
  I also like:
  <ol>
    <li>bananas</li>
    <li value="4">mangoes</li>
    <li>cherries</li>
    <li value="7">plums</li>
    <li>peaches</li>
    <li>grapes</li>
  </ol>
  <hr>
  I also like:
  <ul>
    <li>bananas</li>
    <li>mangoes</li>
  </ul>
</body>

dl元素表示說明列表

dt元素表示說明列表中的術語，dt{display:block;}

dd元素表示說明列表中的定義那伐，dd{display:block;margin-start:40px;}

chap1-21.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap1-21</title>
  </head>
  <body>
    I like:
    <dl>
      <dt>Apple</dt>
      <dd>The apple is the pomaceous fruit of the apple tree</dd>
      <dd><i>Malus domestica</i></dd>
      <dt>Banana</dt>
      <dd>The banana is the parthenocarpic fruit of the banana tree</dd>
      <dd><i>Musa acuminata</i></dd>
    </dl>
  </body>
</html>

figure元素定義插圖踏施，習慣樣式：figure{display:block;margin-start:40px;margin-end:40px;}

figcaption元素定義插圖標題。

chap1-22.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap1-22</title>
  </head>
  <body>
    I like apples.
    <figure>
      <img src="pic/apple.jpg" width="500" height="380">
      <figcaption>Figure 1. The picture of apple</figcaption>
    </figure>
  </body>
</html>

文檔分節(jié)

元素 說明
h1~h6 表示標題
section 表示一個重要的主題或概念
header和footer 表示一節(jié)的首部和尾部
nav 表示導航元素集合
article 表示可獨立發(fā)布的重要主題或概念
aside 表示周邊內容的一些沾邊話題
address 表示文檔或文章的聯系信息
details和summary 生成一個區(qū)域罕邀，用戶可將其展開以了解更多細節(jié)

h1~h6元素表示標題畅形。

chap1-23.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap1-23</title>
  </head>
  <body>
    <script>
      for(var i=1;i<=6;i++){
        document.writeln("<h"+i+">"+"I like apples" + "</h"+i+">");
      }
    </script>
  </body>
</html>

section元素表示的是文檔中的一節(jié)。至于什么情況下應該使用section元素诉探，并沒有明確的規(guī)定日熬。不過從經驗上講，section元素用來包含的是那種應該列入文檔大綱或目錄中的內容肾胯。通常包含一個或多個段落及一個標題竖席。

chap1-24.html

<html lang="en">
  <head>
    <title>chap1-24</title>
  </head>
  <body>
    <section>
      <h1>Fruits I Like</h1>
      <h2>How I Learned to love citrus</h2>
      I like apples and oranges.
      <section>
        <h1>Additional fruits</h1>
        I also like bananas, mangoes.
        <section>
          <h1>More information</h1>
          I also like cherries, and peaches.
        </section>
      </section>
    </section>
    <h1>Activities I like</h1>
    <p>I like to swim, cycle and run.</p>
    <h2>Kinds of Triathlon</h2>
    There are different kinds of triathlon - sprint, Olympic and so on.
  </body>
</html>

header元素表示一節(jié)的首部，里面可以包含各種適合出現在首部的東西敬肚，包括刊頭或徽標毕荐。

footer元素是header元素的配套元素，表示一節(jié)的尾部艳馒，通常包含著該節(jié)的總結信息憎亚，還可以包含作者介紹、版權信息弄慰、到相關內容的鏈接第美、徽標及免責聲明等。

chap1-25.html

<head>
  <title>chap1-25</title>
  <style>
    header, footer {
      border: medium solid black;
      padding-left: 5px;
      margin: 10px 0 10px 0px;
    }
  </style>
</head>
<body>
  <header>
    <h1>Things I like</h1>
    <h2>by Shulin Chen</h2>
  </header>
  <section>
    I like apples and oranges.
  </section>
  <footer id="mainFooter">
    &#169;2017, Shulin Chen. <a href="chap1-1.html"> chap1-1.html</a>
  </footer>
</body>

nav元素表示文檔中的一個區(qū)域陆爽，它包含著到其他頁面或同一頁面的其他部分的鏈接什往。該元素的目的是規(guī)劃出文檔的主要導航區(qū)域。

chap1-26.html

<style> nav {text-align:left; padding: 2px;border: dashed thin black;}
  ul > li > a {padding: 2px;color: red;}
</style>
<body>
  <header>
    <nav>
      <h1>contents</h1>
      <ul>
        <li><a href="chap1-1.html">chap1-1</a></li>
        <ul>
          <li><a href="chap1-2.html">chap1-2</a></li>
        </ul>
        <li><a href="chap1-3.html">chap1-3</a></li>
      </ul>
      <ol>
        <li><a href="chap1-3.html">chap1-3</a></li>
      </ol>
    </nav>
  </header>
  <footer id="mainFooter">
    &#169;2017, Shulin Chen.
  </footer>
</body>

article元素代表HTML文檔中一段獨立成篇的內容墓陈。一篇新文章和博文條目都是這方面的典型例子恶守。

chap1-27.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap1-27</title>
    <style>
      article{border: thin black solid;padding: 10px;margin-bottom: 5px}
      article > footer{background: gray;color: white}
    </style>
  </head>
  <body>
    <article>
      <header>
        <h1>Fruits I Like</h1>
      </header>
      I like apples and oranges.
      <footer>
        &#169;2017, Shulin Chen.
      </footer>
    </article>
  </body>
</html>

aside元素用來表示跟周邊內容稍沾一點邊的內容，類似于書籍或雜志中的側欄贡必。其內容與頁面其他內容、article或section有點關系庸毫，但并非主體內容的一部分仔拟。它可能是一些背景信息、到相關文章的鏈接等飒赃。

chap1-28.html

<head><style>article{border: thin black solid;padding: 10px;margin-bottom: 5px}
  aside{width: 40%;background: white;float: right;border: thick solid black;margin-left: 5px}
  aside > section{padding: 5px}
  aside > h1{background: white;color: blue;text-align: center}</style></head>
<body><article><header>
  <h1 id="fruitslike">Fruits I Like</h1>
  <h2>How I Learn to Love Citrus</h2>
  </header>
  <aside>
    <h1>Why Fruit is Healthy</h1>
    <section>
      Here are three reasons why everyone should eat more fruit:
      <ol>
        <li>Fruit contains lots of vitamins</li>
        <li>Fruit is a source of fibre</li>
        <li>Fruit contains few calories</li>
      </ol>
    </section>
  </aside>
  <p>I like apples and oranges</p>
  <footer>
    &#169;2017, Shulin Chen.
  </footer>
  </article>
</body>

address元素用來表示文檔或article元素的聯系信息利花。address{display:block;font-style:italic}

address元素身為article元素的后代元素時科侈，它提供的聯系信息被視為該article的。否則炒事，當address元素身為body元素的子元素時臀栈，它提供的聯系信息被視為整個文檔的。

chap1-29.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      article{border: thin black solid;padding: 10px;margin-bottom: 5px}
    </style>
  </head>
  <body>
    <article>
      <header>
        <h1 id="fruitslike">Fruits I Like</h1>
        <h2>How I Learn to Love Citrus</h2>
      </header>
      <address>
        Questions and comments? <a href="mailto:chenshulin0923@163.com">Email me</a>
      </address>
      <footer>
        &#169;2017, Shulin Chen.
      </footer>
    </article>
  </body>
</html>

details元素在文檔中生成一個區(qū)域挠乳，用戶可以展開它以了解關于某主題的更多詳情权薯。

details元素通常包含一個summary元素，其作用是為該詳情區(qū)域生成一個說明標簽或標題睡扬。

chap1-30.html

<head>
  <meta charset="UTF-8">
  <title>chap1-30</title>
  <style>
    article{border: thin black solid;padding: 10px;margin-bottom: 5px}
    details{border: solid thin black;padding: 5px}
    details > summary{font-weight: bold}
  </style>
</head>
<body>
  <section>
    <p>I like to swim, cycle and run. I am in training for my first triathlon, but it is hard work.</p>
    <details>
      <summary>Kinds of Triathlon</summary>
      There are different kinds of triathlon - sprint, Olympic and so on. I am aiming for Olympic, which consists of the following:
      <ol>
        <li>1.5km swim</li>
        <li>40km cycle</li>
        <li>10km run</li>
      </ol>
    </details>
  </section>
</body>

表格

元素 說明
table盟蚣、tr和td 生成基本的表格
th 為表格添加表頭單元格
thead和tbody 區(qū)分行表頭和列表頭
tfoot 為表格添加表腳
caption 為表格添加標題
colgroup和col 對表格按列處理而不是按行處理

每一個表格都必須要有：table、tr和td這三個元素卖怜。

table元素的屬性有border屎开，習慣樣式table{display:table; border-collapse:separate;border-spacing:2px; border-color:gray}

tr元素習慣樣式tr{display:table-row; vertical-align:inherit;border-color:inherit}

td元素屬性有：colspan、rowspan和headers马靠，習慣樣式td{display:table-cell;vertical-align:inherit}

  • colspan屬性：在列方向上合并單元格奄抽；
  • rowspan屬性：在行方向上合并單元格；
  • headers屬性：規(guī)定表頭與單元格相關聯甩鳄，該屬性不會在普通瀏覽器中產生任何視覺變化逞度。

th元素表示表頭的單元格，用來區(qū)分數據和對數據的說明娩贷。習慣樣式：th{display:table-cell;vertical-align:inherit;font-weight:bold; text-align:center}

chap1-31.html

<head><style>th,td{border: thin solid black;vertical-align: middle; text-align: center;}
  table{border: thin solid black;width: 600px;margin-left: auto; margin-right: auto;}
  [colspan]{font-weight: bold;border:medium solid black;}
  </style></head>
<body><table>
  <tr>
    <th id="sno">學號</th><th id="sname">姓名</th><th id="sage">年齡</th>
  </tr>
  <tr>
    <td headers="sno">001</td><td headers="sname">張三</td><td headers="sage">20</td>
  </tr>
  <tr>
    <td headers="sno">002</td><td headers="sname">李四</td><td headers="sage">20</td>
  </tr>
  <tr>
    <td colspan="2">總計人數</td><td>2</td>
  </tr>
</table></body>

tbody元素表示構成表格主體的全體行（不包括表頭行和表腳行）第晰。習慣樣式：tbody{display:table-row-group;vertical-align:middle; border-color:inherit}

thead元素用來標記表格的標題行。習慣樣式：thead{display:table-header-group;vertical-align:middle; border-color:inherit}

tfoot元素用來標記組成表腳的行。習慣樣式：tfoot{display:table-footer-group; vertical-align:middle;border-color:inherit}

caption元素用來為表格定義一個標題并將其與表格關聯起來允耿。習慣樣式：caption{display:table-caption;text-align:center}

chap1-32.html

<!DOCTYPE html>
<html lang="en">
  <head><meta charset="UTF-8"><title>chap1-32</title>
    <style>
      thead th, tfoot th{text-align: left;background: gray;color: white}
      tbody th{text-align: right;background: lightgray;color: grey}
      caption{font-weight: bold;font-size: large;margin-bottom: 5px}
    </style>
  </head>
  <body><table>
    <caption>Results of the 2011 Fruit Survey</caption>
    <thead>
      <tr><th>Rank</th><th>Name</th><th>Color</th><th>Size</th></tr>
    </thead>
    <tfoot>
      <tr><th>Rank</th><th>Name</th><th>Color</th><th>Size</th></tr>
    </tfoot>
    <tbody>
      <tr><th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td></tr>
      <tr><th>2nd Favorite:</th><td>Oranges</td><td>Orange</td><td>Large</td>
    </tr>
    </tbody>
</table></body></html>

colgroup和col元素能對表格按列處理坠韩。

colgroup元素的span屬性規(guī)定列組應該橫跨的列數。

注意：應用到colgroup上的CSS樣式在具體呈現上低于直接應用到tr甜熔、td和th元素上的樣式。

chap1-33.html

<head><style>
  thead th, tfoot th{text-align: left;background: gray;color: white}
  tbody th{text-align: right;background: lightgray;color: grey}
  caption{font-weight: bold;font-size: large;margin-bottom: 5px}
  #colgroup1{background-color: red}
  #colgroup2{background-color: green}
  </style></head>
<body><table>
  <caption>Results of the 2011 Fruit Survey</caption>
  <colgroup id="colgroup1" span="2"></colgroup>
  <colgroup id="colgroup2" span="2"></colgroup>
  <thead>
    <tr><th>Rank</th><th>Name</th><th>Color</th><th>Size</th></tr>
  </thead>
  <tfoot>
    <tr><th>Rank</th><th>Name</th><th>Color</th><th>Size</th></tr>
  </tfoot>
  <tbody>
    <tr><th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td></tr>
    <tr><th>2nd Favorite:</th><td>Oranges</td><td>Orange</td><td>Large</td></tr>
</tbody></table></body>

col元素可以指定組中各列的樣式突倍。

chap1-34.html

<head><style>thead th, tfoot th{text-align: left;background: gray;color: white}
  tbody th{text-align: right;background: lightgray;color: grey}
  caption{font-weight: bold;font-size: large;margin-bottom: 5px}
  #colgroup1{background-color: red}
  #col3{background-color: green}
  #col4{background-color: blue}
  </style></head><body><table>
  <caption>Results of the 2011 Fruit Survey</caption>
  <colgroup id="colgroup1">
    <col id="col1and2" span="2"><col id="col3"><col id="col4">
  </colgroup>
  <thead><tr><th>Rank</th><th>Name</th><th>Color</th><th>Size</th></tr> </thead>
  <tfoot><tr><th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
    </tr></tfoot>
  <tbody>
    <tr><th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td> </tr>
    <tr><th>2nd Favorite:</th><td>Oranges</td><td>Orange</td><td>Large</td></tr>
  </tbody>
</table></body>

表單

制作一個基本的表單需要三個元素：form腔稀、input和button元素。

form屬性有action羽历、method焊虏、name、target秕磷。

  • action屬性：提交表單時瀏覽器應該把從表單數據發(fā)送到何處诵闭。
  • method屬性：指定表單數據發(fā)送到服務器的HTTP方法。允許的值有get和post。get請求用于安全交互疏尿，同一個請求可以發(fā)送任意多次而不會產生額外作用瘟芝。post請求則用于不安全交互，提交數據的行為會導致一些狀態(tài)的改變褥琐。一般而言锌俱，get請求用于獲取只讀信息，而post請求則用于會改變應用程序狀態(tài)的各種操作敌呈。

label元素可用來為表單中的每一個元素提供說明贸宏，其屬性有：

  • for屬性：規(guī)定label與哪個表單元素綁定。
  • form屬性：規(guī)定label所屬的表單驱富。通過該屬性锚赤，元素可以與文檔中任何位置的表單掛鉤，而不一定要放在<form></form>之間褐鸥。

chap1-35.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap1-35</title>
    <style>
      label{
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <form name="mform" action="" method="post">
      <label for="uname">User:<input type="text" id="uname" name="uname"></label>
      <label for="upw" form="mform">Password:<input type="password" id="upw" name="upw">
      </label>
    </form>
  </body>
</html>

input元素

input元素用于收集用戶輸入的數據线脚，其屬性有：

  • name屬性：名稱；
  • form屬性：所屬表單叫榕；
  • disabled屬性：禁用單個input元素浑侥；
  • autofocus屬性：自動聚焦單個input元素；
  • type屬性：指定input元素類型晰绎，具體有：

type屬性值

值 描述
button 定義可點擊按鈕（多數情況下寓落，用于通過 JavaScript 啟動腳本）。
checkbox 定義復選框荞下。
file 定義輸入字段和 "瀏覽"按鈕伶选，供文件上傳。
hidden 定義隱藏的輸入字段尖昏。
image 定義圖像形式的提交按鈕仰税。
password 定義密碼字段。該字段中的字符被掩碼抽诉。
radio 定義單選按鈕陨簇。
reset 定義重置按鈕。重置按鈕會清除表單中的所有數據迹淌。
submit 定義提交按鈕河绽。提交按鈕會把表單數據發(fā)送到服務器。
text 定義單行的輸入字段唉窃，用戶可在其中輸入文本耙饰。默認寬度為 20 個字符。

type屬性值（html5新元素）

值 描述
color 定義拾色器
date 定義日期字段（帶有calendar控件）
datetime-local 定義日期字段（帶有calendar和time控件）
month 定義日期字段的月（帶有calendar控件）
week 定義日期字段的周（帶有calendar控件）
time 定義日期字段的時纹份、分榔幸、秒（帶有time控件）
email 定義用于e-mail地址的文本字段
number 定義帶有spinner控件的數字字段
range 定義帶有slide控件的數字字段
search 定義用于搜索的文本字段
tel 定義用于電話號碼的文本字段
url 定義用于URL的文本字段

text類型

定義單行文本框，其屬性有：

  • list：指定為文本框提供建議值的datalist元素矮嫉，其值為datalist元素的id值削咆；
  • maxlength：設定用戶可以在文本框中輸入的字符的最大數目；
  • size：指定文本框中可見字符數目蠢笋，默認值20拨齐；
  • value：設置文本框的初始值；
  • pattern：指定一個用于輸入驗證的正則表達式昨寞；
  • placeholder：指定關于所需數據類型的提示瞻惋；
  • readonly：將文本框設為只讀以阻止用戶編輯其內容；
  • required：表明用戶必須輸入一個值援岩，否則無法通過輸入驗證歼狼。

chap1-36.html (maxlength size value placeholder readonly required)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap1-36</title>
    <style>
      label{font-weight: bold;}
    </style>
  </head>
  <body>
    <form method="post" action="">
      <label for="sno">student number:<input type="text" name="sno" id="sno" value="1505071" maxlength="10" placeholder="Your ID" required></label><br>
      <label for="sname">student name:<input type="text" name="sname" id="sname" value="zhangsan" size="30" readonly></label><br>
      <input type="submit" name="login" value="OK">
    </form>
  </body>
</html>

pattern屬性規(guī)定用于驗證輸入字段的模式。模式指的是正則表達式享怀，例如：

<input type="text" name="sno" pattern="[A-Za-z0-9]{4,6}">

方括號用于查找某個范圍內的字符：

  • [abc]: 查找方括號之間的任何字符羽峰；

  • [^abc]：查找任何不在方括號之間的字符。

量詞

  • n{X}：匹配包含X個n的序列的字符串添瓷；
  • n{X,Y}：匹配包含X至Y個n的序列的字符串梅屉；
  • n{X,}：匹配包含至少X個n的序列的字符串。

list屬性可以生成數據列表鳞贷，但要與datalist元素配套使用坯汤。

datalist元素可以用來提供一組值，提供給用戶選擇的值各用一個option元素指定搀愧。

option元素的屬性：

  • disabled：規(guī)定此選項在首次加載時被禁用惰聂；
  • selected：規(guī)定選項在首次加載時表現為選中狀態(tài)；
  • label：定義選項的標注咱筛；
  • value：定義送往服務器的選項值搓幌。

chap1-37.html (list pattern)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap1-37</title>
  </head>
  <body>
    <form method="post" action="">
      <p>name:<input type="text" name="uname" pattern="[A-Za-z0-9]{4,6}"></p>
      <p>fruit:<input type="text" name="fave" list="fruitlist"></p>
      <input type="submit" name="login" value="OK">
    </form>
    <datalist id="fruitlist">
      <option value="Apples" label="Lovely Apples"/>
      <option value="Oranges">Refreshing Oranges</option>
      <option value="Cherries"/>
    </datalist>
  </body>
</html>

password類型

生成密碼框，用戶輸入的字符在這種文本框中顯示為星號（*）之類的掩飾字符眷蚓。其屬性與text類型一致鼻种，且用法相同。

chap1-38.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap1-38</title>
  </head>
  <body>
    <form method="post" action="">
      <p>name:<input type="text" name="uname" pattern="[A-Za-z0-9]{4,6}" title="A-Z, a-z, or 0-9 are allowed, and the length must be between 4 and 6"></p>
      <p>password:<input type="password" name="upw"></p>
      <input type="submit" name="login" value="OK">
    </form>
  </body>
</html>

button類型

submit類型：提交表單沙热，其屬性有：

  • formaction：覆蓋form元素的action屬性叉钥，另行指定表單將要提交到的URL。
  • formmethod：覆蓋form元素的method屬性篙贸。
  • formtarget：覆蓋form元素的target屬性投队。
  • reset類型：重置表單；
  • button類型：表示按鈕爵川，沒有具體語義敷鸦。HTML5推薦使用button元素亮蛔，與 <input type="button">相比吗货，button元素提供了更為強大的功能和更豐富的內容。

chap1-39-1.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap1-39-1</title>
    <script>
      function dp() {
        var form=document.getElementById("my_form");
        alert(form.uname.value);
      }
    </script>
  </head>
  <body>
    <form method="post" action="" id="my_form">
      <p>name:<input type="text" name="uname" pattern="[A-Za-z0-9]{4,6}" title="A-Z, a-z, or 0-9 are allowed, and the length must be between 4 and 6"></p>
      <p>password:<input type="password" name="upw"></p>
      <input type="submit" name="login" value="OK" formaction="chap1-1.html" formtarget="_blank">
      <input type="reset">
      <input type="button" name="output" value="print" onclick="dp()">
    </form>
</body></html>

button元素

autofocus屬性：規(guī)定當頁面加載時按鈕應當自動地獲得焦點。

disabled屬性：規(guī)定應該禁用該按鈕哩簿。

form屬性：規(guī)定按鈕屬于一個表單后添。

formaction屬性：覆蓋form元素的action屬性物臂，與type=submit配合使用笛丙。

formmethod屬性：覆蓋form元素的method屬性，與type=submit配合使用价说。

formtarget屬性：覆蓋form元素的target屬性辆亏，與type=submit配合使用。

name屬性：規(guī)定按鈕名稱鳖目。

type屬性：button扮叨、submit和reset三種類型。

value屬性：規(guī)定按鈕的初始值领迈。

chap1-39.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap1-39</title>
  </head>
  <body>
    <form method="post" action="">
      <p>name:<input type="text" name="uname" pattern="[A-Za-z0-9]{4,6}" title="A-Z, a-z, or 0-9 are allowed, and the length must be between 4 and 6"></p>
      <p>password:<input type="password" name="upw"></p>
      <input type="submit" name="login" value="OK" formaction="chap1-1.html" formtarget="_blank">
      <button type="submit" formaction="chap1-2.html" formtarget="_self">chap1-2</button>
      <input type="reset">
    </form>
  </body>
</html>

checkbox和radio類型

checkbox用于生成復選框彻磁，其屬性除了具有input元素屬性外，另有：

  • checked:規(guī)定當頁面加載時該選項自動被選中惦费；
  • required:表示用戶必須勾選該復選框兵迅；
  • value:設定在復選框呈勾選狀態(tài)時提交給服務器的數據值，默認為on薪贫。

注意：各選項name屬性不能相同恍箭！建議value值取相同值on或true等。

radio用于生成單選按鈕瞧省，其屬性與checkbox相同

注意：各選項name屬性必須相同扯夭，value值不能相同！

chap1-40.html

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <title>chap1-40</title>
  </head>
  <body>
    <form action="" method="post">
      <p>感興趣的書籍種類：<input type="checkbox" name="html" value="true">HTML5
        <input type="checkbox" name="CSS" checked>CSS
        <input type="checkbox" name="JavaScript" required>JavaScript</p>
      <p>性別：<input type="radio" name="sex" value="man" checked>男
        <input type="radio" name="sex" value="woman">女</p>
    </form>
  </body>
</html>

image類型

生成圖像按鈕鞍匾，點擊圖像按鈕會導致瀏覽器提交表單交洗。其屬性有：

  • formaction、formmethod橡淑、formtarget同button元素
  • src：指定要顯示的圖像的URL
  • width和height：以像素為單位設置圖像的寬度和高度（不設置的話圖像將以其本身的寬度和高度顯示）

chap1-41.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap1-41</title>
  </head>
  <body>
    <form action="chap1-1.html" method="post">
      <p>Name:<input type="text" name="user"></p>
      <p><input type="image" src="pic/check.jpg" name="submit" width="50" height="50"></p>
    </form>
  </body>
</html>

file類型

該類型可以在提交表單時將文件上傳到服務器构拳，除input元素支持的屬性外，還有：

  • accept：指定接受的MIME類型梁棠，常用MIME類型有：

    類型/子類型 擴展名 類型/子類型 擴展名 類型/子類型 擴展名
    application/msword doc application/pdf pdf application/vnd.ms-excel xls
    application/vnd.ms-powerpoint ppt application/vnd.ms-works wps application/zip zip
    image/bmp bmp image/jpeg jpeg image/tiff tif
    image/gif gif video/mpeg mpeg text/plain txt

  • multiple：一次可上傳多個文件置森。

  • required：表明用戶必須為其提供一個值。

hidden類型

生成隱藏數據項符糊。

chap1-42.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap1-42</title>
  </head>
  <body>
    <form action="chap1-1.html" method="post">
      <p><input type="hidden" name="pageid" value="2"></p>
      <p><input type="file" name="filedata" accept="image/jpeg,application/msword" multiple></p>
      <p><input type="submit"></p>
    </form>
  </body>
</html>

color類型

生成顏色選擇器凫海。Chrome、Opera和Safari最新版本均支持男娄，其它瀏覽器Firefox行贪、IE暫不支持

chap1-43.html

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8">
    <title>chap1-43</title>
  </head>
  <body>
    <input type="color" id="color" style="display: none">
    <button id="btn">彈出色盤</button>
  </body>
</html>
<script type="text/javascript">
  document.getElementById('btn').onclick=function () {
    document.getElementById('color').click();
  }
  document.getElementById('color').onchange=function () {
    document.body.style.background=this.value;
  }
</script>

日期和時間選擇器

date - 選擇日漾稀、月、年

month - 選擇月建瘫、年

week - 選擇周崭捍、年

time - 選擇時間（時、分）

datetime-local -選擇時間暖混、日期缕贡、月、年（本地時間）

chap1-44.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap1-44</title>
  </head>
  <body>
    <p>Date:<input type="date" name="user_date"></p>
    <p>Datetime:<input type="datetime-local" name="user_datetime"></p>
    <p>Month:<input type="month" name="user_month"></p>
    <p>Week:<input type="week" name="user_week"></p>
    <p>Time:<input type="time" name="user_time"></p>
  </body>
</html>

email拣播、url、search

email用于應該包含電郵地址的輸入字段收擦，當提交表單時會自動驗證贮配；

url用于應該包含 URL 地址的輸入字段，會在提交表單時對 url 字段的值自動進行驗證塞赂。

search用于生成一個單行文本框泪勒，供用戶輸入搜索用詞。瀏覽器可以設法用這種文本框的外觀表明它是用來獲取搜索用詞的宴猾。chrome的做法是一旦用戶輸入了內容圆存，就再顯示一個取消圖標。

chap1-45.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap1-45</title>
  </head>
  <body>
    <form method="post" action="chap1-1.html">
      <p>e-mail: <input type="email" name="user_email"></p>
      <p>home page:<input type="url" name="user_url"></p>
      <p>search:<input type="search" name="msearch" placeholder="請輸入關鍵詞"></p>
      <p><input type="submit"></p>
    </form>
  </body>
</html>

tel仇哆、number沦辙、range

tel用于應該包含電話號碼的輸入字段。

number用于包含數字值的輸入字段讹剔，其屬性有：

  • list指定為文本框提供建議值的datalist元素油讯，其值為datalist元素的id值；
  • min和max設定可接受的最小值和最大值延欠；
  • step指定上下調節(jié)數值的步長陌兑；
  • value 設定默認值

range用于應該包含指定范圍值的輸入字段，顯示為滑塊由捎。屬性同number兔综。

chap1-46.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap1-46</title>
  </head>
  <body>
    <form action="chap1-1.html" method="post">
      <p>telephone:<input type="tel" name="utel" pattern="[0-9]{11}"></p>
      <p>points:<input type="number" name="mpoint" min="1" max="9" step="2" value="5"> </p>
      <p>color:</p>
      <p>red&#160;<input type="text" id="r" name="r" size="3"><input type="range" id="ured" min="0" max="255"></p>
      <p><input type="submit"></p>
    </form>
  </body>
</html>
<script type="text/javascript">
  document.getElementById('ured').onchange=function () {
    document.getElementById('r').value=this.value;
  }
</script>

其他表單元素

元素 說明
select 生成一個選項列表供用戶選擇
optgroup 對select元素中的選項編組
textarea 獲取用戶輸入的多行文字
output 表示計算結果

select元素

select元素用于生成一系列選項供用戶選擇。其屬性有：

  • name狞玛、disabled软驰、form、autofocus为居、required碌宴，與input元素類似。
  • size屬性：用來設定要顯示給用戶的選項數目蒙畴。
  • multiple屬性：允許用戶選擇多個選項贰镣。

提供給用戶的選項由option元素定義呜象。

chap1-47.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap1-47</title>
  </head>
  <body>
    <form action="chap1-1.html" method="post">
      <p>fruit:<input type="text" name="fruit" list="fruitlist"></p>
      <p>color:<select name="favecolor">
        <option value="red">red color</option>
        <option value="green">green color</option>
        <option value="orange">orange color</option>
        <option value="yellow">yellow color</option>
        </select></p>
      <input type="submit" name="login" value="OK">
    </form>
    <datalist id="fruitlist">
      <option value="Apples" label="Lovely Apples"/>
      <option value="Oranges">Refreshing Oranges</option>
      <option value="Cherries"/>
    </datalist>
</body></html>

optgroup元素

optgroup元素用于對option元素進行編組。其屬性有：

  • label屬性：用來為整組選項提供一個小標題碑隆。
  • disabled屬性：用來阻止選擇組內的任何選項恭陡。

chap1-48.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap1-48</title>
  </head>
  <body>
    <form action="chap1-1.html" method="post">
      <p>fruit:<select name="fave">
        <optgroup label="Top Choices">
          <option value="apples" label="Apples">Apples</option>
          <option value="oranges" label="Oranges">Oranges</option>
        </optgroup>
        <optgroup label="Others">
          <option value="cherries" label="Cherries"/>
          <option value="bananas" label="Bananas"/>
        </optgroup>
        </select></p>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

textarea元素

textarea元素用于生成多行文本框。其屬性有：

  • name上煤、disabled休玩、form、readonly劫狠、maxlength拴疤、autofocus、required独泞、placeholder呐矾。
  • rows羔飞、cols屬性：設置其大小宵统。

chap1-49.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap1-49</title>
  </head>
  <body>
    <form action="" method="post">
      <p>Reason：<textarea rows="4" cols="50" name="reason">Tell us why this is your favorite fruit.</textarea></p>
    </form>
  </body>
</html>

output元素

output元素表示計算的結果。其屬性有：name硫戈、form荞膘、for

chap1-50.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap1-50</title>
  </head>
  <body>
    <form onsubmit="return false" oninput="res.value=quant.value*price.value">
      <input type="number" id="quant" name="quant">*
      <input type="number" id="price" name="price">=
      <output for="quant name" name="res"></output>
    </form>
  </body>
</html>

fieldset元素

fieldset元素可以將一些表單元素組織在一起罚随，其屬性有：name、form羽资、disabled淘菩。習慣樣式fieldset{display:block;margin-start:2px; margin-end:2px; padding-before:0.35em; padding-start:0.75em;padding-end:0.75em; padding-after:0.625em; border:2px groove;}

Legend元素可以為每一個表單分組提供說明。

chap1-51.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap1-51</title>
  </head>
  <body>
    <form onsubmit="return false" oninput="res.value=quant.value*price.value">
      <fieldset>
        <legend>Price Calculator</legend>
        <input type="number" id="quant" name="quant">*
        <input type="number" id="price" name="price">=
        <output for="quant name" name="res"></output>
      </fieldset>
    </form>
  </body>
</html>

嵌入內容

元素 說明
img 在HTML文檔中嵌入圖像
map削罩、area 在嵌入圖像上創(chuàng)建客戶端分區(qū)響應圖
iframe 嵌入另一張HTML文檔
embed 通過插件嵌入內容
object 創(chuàng)建瀏覽上下文
audio瞄勾、video、source 不通過插件嵌入音頻和視頻

img元素

img元素允許我們在HTML文檔里嵌入圖像弥激。其屬性有：

  • src屬性：指定圖像的URL进陡。

  • alt屬性：定義img元素的備用內容。

  • width微服、height屬性：指定圖像尺寸（單位是像素）趾疚。

  • ismap屬性：創(chuàng)建一個服務器分區(qū)響應圖，即在圖像上點擊的位置會附加到URL上發(fā)送到服務器以蕴，例如：http://.../location.html?10,4

    注釋：只有當 <img>元素屬于帶有有效 href 屬性的<a>元素的后代時糙麦，才允許ismap屬性。

chap1-52.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap1-52</title>
  </head>
  <body>
    <p>The picture of apples</p>
    <a href="location.html">
      <img src="pic/apple.jpg" alt="favorite fruit" width="500" height="350" ismap/>
    </a>
  </body>
</html>

location.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>The coordinate of the point</title>
  </head>
  <body>
    <p>The X-coordinate is <span style="font-weight: bold" id="xco"></span></p>
    <p>The Y-coordinate is <span style="font-weight: bold" id="yco"></span></p>
  </body>
</html>
<script>
  var coords=window.location.href.split("?")[1].split(",");
  /* JS中的location.href有很多種用法丛肮，主要如下:
     self.location.href="/url" 當前頁面打開URL頁面
     location.href="/url" 當前頁面打開URL頁面
     windows.location.href="/url" 當前頁面打開URL頁面
  */
  document.getElementById("xco").innerHTML=coords[0];
  document.getElementById("yco").innerHTML=coords[1];
  // innerHTML在JS是雙向功能：獲取對象的內容或向對象插入內容赡磅；
</script>
  • usemap屬性：創(chuàng)建一個客戶端分區(qū)響應圖，通過點擊某張圖像上的不同區(qū)域讓瀏覽器導航到不同的URL上宝与。這一過程不需要通過服務器引導焚廊，因此需要使用元素來定義圖像上的各個區(qū)域以及它們所代表的行為冶匹。

map、area元素

map元素是客戶端分區(qū)響應圖的關鍵元素咆瘟。map元素包含一個或多個area元素嚼隘，它們各自代表了圖像上可被點擊的一塊區(qū)域。area元素屬性有：

  • href飞蛹、target（參見a元素）、alt（參見img元素）灸眼、media（參見style元素）卧檐、rel、type（參見link元素）

  • shape屬性和coords屬性：標明用戶可以點擊的各個圖像區(qū)域幢炸。shape和coords屬性是共同起作用的泄隔，coords屬性的意思根據shape屬性的值而定。

    shape值 coords屬性的性質
    rect 代表一個矩形區(qū)域宛徊。coords屬性必須由4個整數組成，中間用逗號分隔逻澳。 “x左上闸天，y左上，x右下斜做，y右下”苞氮，圖像左上角坐標是(0,0)
    circle 代表一個圓形區(qū)域。coords屬性必須由3個用逗號分隔的整數組成瓤逼。 “x圓心笼吟，y圓心，圓的半徑”
    poly 代表一個多邊形霸旗。coords屬性必須至少包含6個用逗號分隔的整數贷帮，每一對數字各代表多邊形的一個頂點坐標。
    default 這個值的意思是默認區(qū)域诱告，即覆蓋整張圖片撵枢。不需要提供coords值

chap1-53.html

<body>
  <p>請點擊圖像上的星球，把它們放大精居。</p>
  <img src="pic/eg_planets.jpg" border="0" usemap="#planetmap">
  <map name="planetmap">
    <area shape="circle" coords="180,139,14" href="venus.html" target="_blank">
    <area shape="circle" coords="129,161,10" href="mercur.html" target="_blank">
    <area shape="rect" coords="0,0,110,260" href="sun.html" target="_blank">
  </map>
</body>

mercur.html

<body><p><img src="pic/mercury.jpg" height="575" width="615"></p></body>

venus.html

<body><p><img src="pic/venus.jpg" height="600" width="600"></p></body>

sun.html

<body><p><img src="pic/venus.jpg" height="600" width="600"></p></body>

iframe元素

iframe元素允許我們在HTML文檔里嵌入另一張文檔锄禽。其屬性有：

  • src屬性：指定文檔的URL。

  • srcdoc屬性：規(guī)定頁面的HTML內容靴姿。

  • width沃但、height屬性：定義iframe的寬度和高度。

  • scrolling屬性：規(guī)定是否在iframe中顯示滾動條佛吓，其值有yes/no/auto宵晚。

  • sandbox屬性：啟用一系列對iframe中內容的額外限制垂攘，其值有：

    值 說明
    空字符串 ("") 應用以下所有的限制
    allow-forms 啟用表單
    allow-scripts 啟用腳本
    allow-same-origin 允許iframe里的內容被視為與文檔其余部分擁有同一個來源位置
    allow-top-navigation 允許iframe內容從包含文檔導航（加載）內容。

  • frameborder屬性：規(guī)定是否顯示框架周圍的邊框坝疼，其值有：1搜贤、0。

chap1-54.html

<body>
  <header>
    <h1>Things I Like</h1>
    <nav>
      <ul>
        <li><a href="chap1-2.html" target="myframe">chap1-2</a></li>
        <li><a href="chap1-28.html" target="myframe">chap1-28</a></li>
      </ul>
    </nav>
  </header>
  <iframe srcdoc="<p>hello world!</p>" src="chap1-1.html" name="myframe" width="60%" height="400" scrolling="yes" sandbox="allow-same-origin" frameborder="1"></iframe>
</body>

object钝凶、embed元素

object仪芒、embed元素通常用于添加插件，從而擴展瀏覽器功能耕陷。

embed元素屬性有：

  • src屬性：嵌入內容的URL掂名；
  • type屬性：嵌入內容的MIME類型；
  • width哟沫、height屬性：設置嵌入內容的寬度和高度饺蔑。

object元素屬性有：

  • type、 width嗜诀、height屬性同embed元素猾警；
  • data屬性：定義引用對象數據的 URL。

chap1-55.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap1-55</title>
  </head>
  <body>
    <embed src="flash/chap1-55-1.swf" type="application/x-shockwave-flash" width="600" height="400"></embed>
  <object data="flash/chap1-55-2.swf" type="application/x-shockwave-flash" width="600" height="400"></object>
  </body>
</html>

使用多媒體

video元素可以在網頁中嵌入視頻內容隆敢，其屬性有：

  • controls屬性：如果出現該屬性发皿，則向用戶顯示控件，比如播放按鈕拂蝎，其值為controls穴墅；

  • width、height屬性：設置視頻播放器的寬度和高度温自；

  • loop屬性：如果出現該屬性玄货，則當媒介文件完成播放后再次開始播放，其值為loop悼泌；

  • preload屬性：如果出現該屬性松捉，則視頻在頁面加載時進行加載，并預備播放券躁。

  • autoplay屬性：如果出現該屬性煌茬，則視頻在就緒后馬上播放英妓。

  • src屬性：要播放的視頻的 URL搜囱。目前瀏覽器支持的視頻格式有：

    格式 說明 支持
    WebM 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件 Chrome霎肯、Opera、Firefox
    Ogg 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件 Chrome慢哈、Opera蔓钟、Firefox
    MP4 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件 IE、Chrome卵贱、Safari

  • source元素為媒介元素（比如 <video> 和 <audio>）定義媒介資源滥沫。允許您規(guī)定可替換的視頻/音頻文件供瀏覽器根據它對媒體類型或者編解碼器的支持進行選擇侣集。其屬性有：

    • src屬性：規(guī)定媒體文件的 URL缀辩；
    • type屬性：規(guī)定媒體資源的 MIME 類型，用于視頻其值有：video/ogg、video/mp4、video/webm峰档；用于音頻其值有：audio/ogg败匹、audio/mpeg。

chap1-56.html

<body>
  <video src="video/chap1-56.ogg" controls autoplay width="600" height="400">Video cannot be displayed</video>
  <video controls autoplay width="600" height="400">
    <source src="video/chap1-56.ogg">
    <source src="video/chap1-56.mp4">
  </video>
</body>

audio元素可以在網頁中嵌入音頻內容面哥，其屬性有：

  • controls哎壳、loop、autoplay尚卫、preload屬性：同video归榕；
  • src屬性：要播放的音頻的URL。

chap1-57.html

<body>
  <audio controls autoplay loop>
    <source src="audio/horse.ogg" type="audio/ogg">
    <source src="audio/horse.mp3" type="audio/mpeg">
  </audio>
</body>

CSS 3

CSS概述

CSS（層疊樣式表）用來規(guī)定HTML文檔的呈現形式（外觀和格式編排）吱涉。

問題 解決方案
定義樣式 使用屬性/值聲明
將樣式直接應用于元素 用style全局屬性創(chuàng)建元素內嵌樣式
創(chuàng)建可用于多個元素的樣式 使用style元素刹泄，編寫一個選擇器和一組樣式聲明
創(chuàng)建可用于多個html文檔的樣式 創(chuàng)建一個外部樣式表文件，并用link元素引用它
確定元素將使用什么樣式屬性 對樣式來源使用層疊規(guī)則怎爵，同級樣式發(fā)生沖突時計算并比較樣式的具體程度
改變正常的樣式層疊次序 使用重要樣式
使用父元素的樣式屬性 使用屬性繼承
根據一條屬性確定另一條屬性的值 使用相對度量單位

定義樣式

CSS樣式由一條或多條以分號隔開的樣式聲明組成特石，每條聲明包含著一個CSS屬性和該屬性的值，二者以冒號分隔鳖链。

第一章涉及到的樣式說明

屬性 說明 屬性 說明
background-color 設置元素的背景顏色 border 設置圍繞元素的邊框
color 設置元素的前景顏色 font-size 設置元素文字的字號
font-weight 設置元素文字的粗細 font-style 設置元素文字的風格
font-family 設置元素文字的字體 width 設置元素寬度
height 設置元素高度 margin 設置元素內容所有外邊距的寬度
padding 設置元素內容與邊框之間的間距 text-align 設置元素文字的水平對齊方式
text-decoration 設置元素文字的裝飾效果 display 設置元素顯示框的類型

使用元素內嵌樣式

把樣式應用到元素上最直接的方式是使用全局屬性style姆蘸。

chap2-1.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap2-1</title>
  </head>
  <body>
    <p style="background-color: blue; color: white;text-align: center;font-weight: bolder;font-style: italic;font-size: larger;margin: 50px 20px 50px 20px;padding: 10px 0px;border: dotted medium red">Nanjing Foresty University</p>
  </body>
</html>

使用文檔內嵌樣式

用style元素定義文檔內嵌樣式。

chap1-9.html

<style type="text/css">
  a{
    background: gray;
    color: white;
    padding: 10px;
  }
</style>

使用外部樣式表

如果有一套樣式要用于多個HTML文檔芙委，則單獨創(chuàng)建一個獨立的樣式表文件逞敷，以.css為文件擴展名。然后HTML文檔利用link元素將樣式表文件導入其中灌侣。

chap1-10.css

a{ background: grey; color: white; padding: 10px;}

chap1-10.html

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css1/chap1-10.css">
  </head>
  <body>
    <a href="chap1-1.html">chap1-1.html</a>
  </body>
</html>

可以用@import語句將樣式從一個樣式表導入另一個樣式表推捐。

chap2-2.css

@import "../../chap1/css1/chap1-10.css";
p{font-weight: bold; font-size: x-large;}

chap2-2.html

<html lang="en">
  <head>
    <link rel="stylesheet" type="text/css" href="css2/chap2-2.css">
  </head>
  <body>
    <a href="../chap1/chap1-1.html">chap1-1.html</a>
    <p><a href="../chap1/chap1-2.html">chap1-2.html</a></p>
  </body>
</html>

樣式的層疊和繼承

樣式層疊的次序：

  1. 元素內嵌樣式；
  2. 文檔內嵌樣式侧啼；
  3. 外部樣式牛柒。

把樣式屬性值標記為!important，可以改變正常的層疊次序痊乾。

chap2-3.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap2-3</title>
    <style type="text/css">
      a{
        color: blue !important;
      }
    </style>
  </head>
  <body>
    <p><a style="color: red; font-size:larger; text-decoration: none" href="chap2-1.html">chap2-1.html</a></p>
    <p><a href="chap2-2.html">chap2-2.html</a> </p>
  </body>
</html>

如果瀏覽器在直接相關的樣式中找不到某個屬性的值皮壁，就會求助于繼承機制，使用父元素的這個樣式屬性值符喝。但并非所有CSS屬性均可繼承闪彼，一般來說：

  • 與元素外觀（文字顏色、字體等）相關的樣式會被繼承；
  • 與元素在頁面上的布局相關的樣式不會被繼承畏腕；
  • 在樣式中使用inherit可強行實施繼承缴川。

chap2-4.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap2-4</title>
    <style type="text/css">
      p{
        color: white;
        background: grey;
        border: medium solid black;
      }
      span{
        border:inherit;
      }
    </style>
  </head>
  <body>
    <p>I like <span>apples</span> and oranges.</p>
  </body>
</html>

CSS顏色函數

函數 說明 示例
rgb(r, g, b) 用RGB模型表示顏色 color:rgb(112,128,144)
rgba(r, g, b, a) 用RGB模型表示顏色，外加一個用于表示透明度的a值（0：全透明描馅，1：不透明） color:rgba(112,128,144,0.4)
hsl(h, s, l) 用HSL模型（色相hue把夸、飽和度saturation、明度lightness）表示顏色 color:hsl(110,100%,22%)
hsla(h, s, l, a) 用HSL模型表示顏色铭污，外加一個用于表示透明度的a值 color:hsla(110,100%,22%,0.4)

CSS中的長度

CSS規(guī)定了2種類型的長度單位恋日，一種是絕對單位，另一種是與其他屬性掛鉤的相對單位嘹狞。

CSS支持5種絕對單位：

單位標識符 說明 單位標識符 說明
in 英寸（1in=2.54cm） cm 厘米
mm 毫米 pt 磅（1pt=1/72in）
pc pica（1pica=12pt）

CSS支持的相對單位：

單位標識符 說明 單位標識符 說明
em 與元素字體尺寸掛鉤 ex 與元素字體的“x高度”掛鉤（1ex=0.5em）
rem 與根元素（HTML元素）的字號掛鉤 px CSS像素
% 另一屬性的值的百分比

使用%需注意：

  • 并非所有屬性都能用這個單位岂膳；
  • 對于能用%的屬性，%掛鉤的其他屬性各不相同磅网，例如谈截，對于font-size屬性，掛鉤的是元素繼承到的font-size值涧偷；對于width屬性簸喂，掛鉤的則是元素的包含塊的寬度。

chap2-5.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap2-5</title>
    <style type="text/css">
      html{
        font-size: 0.2in;
      }
      p{
        background: rgb(80,80,80);
        color: white;
        font-size: 2rem;
        height: 2em;
        border: solid medium black;
        width: 60%;
      }
    </style>
  </head>
  <body>
    <p>I like <span>apples</span> and oranges</p>
    <p style="font-size: 200%">I also like mangos and cherries.</p>
  </body>
</html>

盒模型

CSS中的一個基本概念是盒模型燎潮。元素會在頁面中占據一個矩形區(qū)域喻鳄，該區(qū)域就是元素的盒子，由4部分組成：

CSS選擇器

CSS選擇器的作用是找出某類元素确封，以便使用style元素或者外部樣式表對這類元素設置樣式除呵。

問題 解決方案
選擇所有元素 使用通用選擇器
根據類型選擇元素 使用類型選擇器
根據全局屬性class的值選擇元素 使用類選擇器
根據全局屬性id的值選擇元素 使用id選擇器
基于屬性選擇元素 使用屬性選擇器
同時匹配多個選擇器 選擇器之間用逗號隔開
選擇元素的后代元素 選擇器之間用空格隔開
選擇元素的子元素 使用>選擇器
選擇兄弟元素 使用+或~選擇器
選擇文本塊的首行文本 使用::first-line選擇器
選擇文本塊的首字母 使用::first-letter選擇器
在元素之前或之后插入內容 使用:before和:after選擇器
向元素插入數值內容 使用counter函數
選擇文檔中的根元素 使用:root選擇器
選擇子元素 使用:first-child、:last-child爪喘、:only-child或:only-of-type選擇器
選擇指向索引處的子元素 使用:nth-child竿奏、:nth-last-child、:nth-of-type腥放、或:nth-last-of-type選擇器
選擇啟用或禁用的元素 使用:enabled或:disabled選擇器
選擇被勾選的單選按鈕或復選框 使用:checked選擇器
選擇默認元素 使用:default選擇器
根據輸入驗證選擇元素 使用:valid或:invalid選擇器
選擇指定范圍的輸入元素 使用:in-range或:out-of-range選擇器
根據是否允許使用必需屬性選擇輸入元素 使用:required或:optional選擇器
選擇超鏈接 使用:linked或:visited選擇器
選擇鼠標當前懸停在其上的元素 使用:hover選擇器
選擇當前被用戶激活的元素 使用:active選擇器
選擇獲得焦點的元素 使用:focus選擇器
選擇不匹配某個選擇器的元素 使用否定選擇器
選擇基于lang全局屬性值的元素 使用:lang選擇器

CSS基本選擇器

通用選擇器

匹配文檔中的所有元素，包括html和body元素绿语。

格式：*

chap2-6.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap2-6</title>
    <style type="text/css">
      *{
        border: thin black solid;
        padding:4px;
      }
    </style>
  </head>
  <body>
    <a href="chap2-1.html">chap2-1.html</a>
    <p>I like <span>apples</span> and oranges.</p>
  </body>
</html>

類型選擇器

匹配文檔中該元素的所有實例秃症。

格式：元素類型

chap2-7.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap2-7</title>
    <style type="text/css">
      a{
        border: thin black solid;
        padding: 4px;
      }
    </style>
  </head>
  <body>
    <a href="chap2-1.html">chap2-1.html</a>
    <p>I like <span>apples</span> and oranges.</p>
  </body>
</html>

類選擇器

采用全局屬性class匹配指定類的元素。

格式為：

  • *.類名
  • .類名
  • 元素類型.類名

chap2-8.html

<head>
  <meta charset="UTF-8">
  <title>chap2-8</title>
  <style type="text/css">
    .class1{
      border: dotted medium black;
      padding: 4px;
    }
    span.class2{
      border: solid thin red;
    }
  </style>
</head>
<body>
  <a class="class1" href="chap2-1.html">chap2-1.html</a>
  <p class="class1">I like <span class="class2">apples</span> and oranges.</p>
</body>

id選擇器

根據全局屬性id的值選擇元素吕粹。

格式為：

  • 元素類型#id值
  • #id值

chap2-9.html

<head>
  <meta charset="UTF-8">
  <title>chap2-9</title>
  <style type="text/css">
    #myanchor{
      border: dotted medium black;
      padding: 4px;
      color: black;
    }
    span#mapple{
      border: solid thin red;
    }
  </style>
</head>
<body>
  <a id="myanchor" href="chap2-1.html">chap2-1.html</a>
  <p>I like <span id="mapple">apples</span> and oranges. </p>
</body>

屬性選擇器

能基于屬性的不同方面匹配屬性种柑。

格式為：

  • [條件]
  • 元素類型[條件]
條件 說明
[attr] 選擇定義attr屬性的元素
[attr="val"] 選擇定義attr屬性，且屬性值為val的元素
[attr^="val"] 選擇定義attr屬性匹耕，且屬性值以字符串val打頭的元素
[attr$="val"] 選擇定義attr屬性聚请，且屬性值以字符串val結尾的元素
[attr*="val"] 選擇定義attr屬性，且屬性值包含字符串val的元素
[attr~="val"] 選擇定義attr屬性，且屬性值具有多個值驶赏，其中一個為字符串val的元素
`[attr ="val"]` 選擇定義attr屬性炸卑，且屬性值等于val或以val-開頭的所有元素

chap2-10.html

<head>
  <meta charset="UTF-8">
  <title>chap2-10</title>
  <style type="text/css">
    [href]{color: red;font-size: 2em}
    a[href="chap2-2.html"]{color: green}
    [href^="chap1"]{color: blue}
    [href$="com"]{color: black}
    [href*="jd"]{color:orange}
    p[class~="important"]{color: violet}
    p[lang|="en"]{background: yellow}
  </style>
</head>
<body>
  <a href="chap2-1.html">chap2-1.html</a><br>
  <a href="chap2-2.html">chap2-2.html</a><br>
  <a href="chap1-1.html">chap1-1.html</a><br>
  <a >sohu</a><br>
  <a >jd</a><br>
  <p class="important warning">This is a paragraph.</p>
  <p lang="en">Hello!</p>
  <p lang="en-us">Greeting!</p>
  <p lang="zh">nihao!</p>
</body>

CSS復合選擇器

并集選擇器

創(chuàng)建由逗號分隔的多個選擇器可以將樣式應用到單個選擇器匹配的所有元素。

格式：選擇器1,選擇器2,選擇器3,…

chap2-11.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap2-11</title>
    <style type="text/css">
      a,p[lang|="en"]{color: red;border: dotted medium black}
    </style>
  </head>
  <body>
    <a >jd</a><br>
    <p class="important warning">This is a paragraph.</p>
    <p lang="en">Hello!</p>
    <p lang="en-us">Greeting!</p>
    <p lang="zh">nihao!</p>
  </body>
</html>

后代選擇器

用于選擇包含在其他元素中的元素煤傍。

格式：第一個選擇器 第二個選擇器

chap2-12.html

<head>
  <meta charset="UTF-8">
  <title>chap2-12</title>
  <style type="text/css">
    p span{border: dotted medium black;color: red}
    #mypara span{border: solid medium black;color: blue}
    .class1 span{border: dashed thin black;color: green}
  </style>
</head>
<body>
  <p>I like <span>apples</span> and oranges.</p>
  <p id="mypara">I also like <span>mangos</span> and cherries.</p>
  <p class="class1">I like <span>apples</span> and oranges.</p>
</body>

子代選擇器

與后代選擇器類似盖文，選擇匹配元素中的直接后代。

格式：第一個選擇器>第二個選擇器

chap2-13.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap2-13</title>
    <style type="text/css">
      table{border: thin black solid}
      tr>th{border: medium red dotted}
      tr td{border: thin black solid}
    </style>
  </head>
  <body>
    <table>
      <tr><th>Name</th><th>City</th></tr>
      <tr><td>Zhangsan</td><td>Nanjing</td></tr>
      <tr><td>Lisi</td><td>Shanghai</td></tr>
    </table>
  </body>
</html>

相鄰兄弟選擇器

可選擇緊接在某一元素后的元素蚯姆，且二者有相同父元素五续。

格式：第一個選擇器+第二個選擇器

普通兄弟選擇器

可選擇跟在（不一定是緊跟）某一元素后的元素，且二者有相同父元素。

格式：第一個選擇器~第二個選擇器

chap2-14.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap2-14</title>
    <style type="text/css">
      h1+p{border: solid medium black}
      h2~p{border: dotted medium black}
    </style>
  </head>
  <body>
    <h1>This is a heading.</h1>
    <p>This is the first paragraph.</p>
    <p>This is the second paragraph.</p>
    <h2>This is a heading.</h2>
    <p>This is the first paragraph.</p>
    <p>This is the second paragraph.</p>
  </body>
</html>

CSS偽元素選擇器

::first-line選擇器匹配文本塊的首行；

::first-letter選擇器匹配文本塊的首字母降铸；

:before選擇器在選中元素的內容之前插入內容别洪；

:after選擇器在選中元素的內容之后插入內容。

chap2-15.html

<head>
  <style type="text/css">
    ::first-line{background-color: grey;color: white}
    ::first-letter{font-size:15pt;font-weight: bolder;font-style: italic;padding: 4px}
    a{border: dotted medium black;color: black;text-decoration: none}
    a:before{content: "Click here to ";color: red}
    a:after{content: "!";color: red}
  </style>
</head>
<body>
  <p>In ecology, primary production is the synthesis of organic compounds from atmospheric or aqueous carbon dioxide. It principally occurs through the process of photosynthesis, which uses light as its source of energy, but it also occurs through chemosynthesis, which uses the oxidation or reduction of inorganic chemical compounds as its source of energy</p>
  <a href="chap2-1.html">chap2-1.html</a>
</body>

CSS計數器

創(chuàng)建計數器斯棒，需要使用：

  • counter-reset屬性：利用這個屬性，計數器可以設置或重置為任何值，可以是正值或負值链韭。如果沒有提供 number，則默認為 0煮落。例如：counter-reset: mycount 0;

  • counter：計數器敞峭，在CSS中counter()只能被使用在content屬性上。語法為：counter(name,list-style-type)

    list-style-type值 說明 list-style-type值 說明
    none 無標記 disc 實心圓蝉仇，默認
    circle 空心圓 square 實心方塊
    decimal 數字 decimal-leading-zero 0開頭的數字標記（01,02,…）
    lower-roman 小寫羅馬數字（i, ii, …） upper-roman 大寫羅馬數字(I, II,…)
    lower-alpha 小寫英文字母 upper-alpha 大寫英文字母

  • counter-increment屬性：設置計數器增量旋讹，默認為1。例如：counter-increment: mycount 2

chap2-16.html

<head>
  <meta charset="UTF-8">
  <title>chap2-16</title>
  <style type="text/css">
    body{
      counter-reset: mycount 0;
    }
    p:before{
      content: counter(mycount,lower-alpha)". ";
      counter-increment: mycount 2;
    }
  </style>
</head>
<body>
  <h1>Fruits I like</h1>
  <p>I like apples and oranges.</p>
  <p>I also like mangos and cherries.</p>
</body>

結構性偽類選擇器

使用結構性偽類選擇器能夠根據元素在文檔中的位置選擇元素轿衔。這類選擇器都有一個冒號字符前綴沉迹。

:root選擇器匹配文檔中的根元素（html元素）。

chap2-17.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap2-17</title>
    <style type="text/css">
      :root{
        border: solid medium black;
        padding:10px;
      }
    </style>
  </head>
  <body>
    <h1>Fruits I like</h1>
    <p>I like apples and oranges.</p>
    <p>I also like mangos and cherries.</p>
  </body>
</html>

子元素選擇器匹配直接包含在其他元素中的單個元素害驹。

:first-child：選擇元素的第一個子元素鞭呕；

:last-child：選擇元素的最后一個子元素；

:only-child：選擇元素的唯一子元素宛官；

:only-of-type：選擇元素指定類型的唯一子元素葫松。

chap2-18.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap2-18</title>
    <style type="text/css">
      body>:first-child{border: solid medium black}
      body>:last-child{border: solid medium red}
      p>:only-child{background-color: orange}
      body>:only-of-type{background-color: blue}
    </style>
  </head>
  <body>
    <h1>Fruits I like</h1>
    <p>I like <span>apples</span> and <span>oranges.</span></p>
    <p>I also like <span>mangos</span> and cherries.</p>
  </body>
</html>

:nth-child選擇器：匹配屬于其父元素的第N個子元素，不論元素的類型底洗。

選擇器 說明
:nth-child(N) 選擇父元素的第N個子元素
:nth-last-child(N) 選擇父元素的倒數第N個子元素
:nth-of-type(N) 選擇父元素定義類型的第N個子元素
:nth-last-of-type(N) 選擇父元素定義類型的倒數第N個子元素

chap2-19.html

<head>
  <meta charset="UTF-8">
  <title>chap2-19</title>
  <style type="text/css">
    body>:nth-child(2){border: thin black solid}
    body>:nth-last-child(1){border: thin black dotted}
    h3:nth-of-type(odd){background-color: rgba(255,0,0,0.5)}
    h3:nth-of-type(even){background-color: rgba(0,0,255,0.5)}
    h4:nth-last-of-type(2){background-color: rgba(0,255,0,0.5)}
  </style>
</head>
<body>
  <a href="chap2-1.html">chap2-1.html</a>
  <p>I like <span>apples</span> and oranges.</p>
  <a href="chap2-2.html">chap2-2.html</a>
  <h3>this is the first paragraph</h3>
  <h3>this is the second paragraph</h3>
  <h3>this is the third paragraph</h3>
  <h3>this is the fourth paragraph</h3>
  <h4>this is the third paragraph</h4>
  <h4>this is the fourth paragraph</h4>
</body>

UI偽類選擇器

使用UI偽類選擇器可以根據元素的狀態(tài)匹配元素腋么。

:enabled和:disabled選擇器可以匹配有啟用或者禁用狀態(tài)的元素。

:checked選擇器可以選中由checked屬性或用戶勾選的單選按鈕或者復選框亥揖。

chap2-20.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap2-20</title>
    <style type="text/css">
      :enabled{border: dotted medium black;padding: 10px}
      :checked+span{background-color: rgba(0,255,0,0.4)}
    </style>
  </head>
  <body>
    <textarea>This is an enabled textarea</textarea><br>
    <textarea disabled>This is a disabled textarea</textarea><br>
    <p>
      <label for="apples">Do you like apples:</label>
      <input type="checkbox" id="apples" name="apple">
      <span>This will go green when checked</span>
    </p>
  </body>
</html>

:default選擇器從一組類似的元素中選擇默認元素珊擂。例如，提交按鈕總是表單的默認按鈕。

:valid和:invalid選擇器分別匹配符合和不符合它們的輸入驗證要求的input元素摧扇。

chap2-21.html

<head>
  <meta charset="UTF-8">
  <title>chap2-21</title>
  <style type="text/css">
    :default{outline: solid medium black}
    p>:invalid{outline: medium solid red}
    p>:valid{outline: medium dotted green}
  </style>
</head>
<body>
  <form action="chap2-2.html" method="post">
    <p>
      <label for="name">Name:</label>
      <input type="text" id="name" name="sname" pattern="[a-z]{3}">
    </p>
    <p>
      <label for="age">Age:</label>
      <input type="text" id="age" name="sage" pattern="[0-9]{2}">
    </p>
    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
  </form>
</body>

:in-range選擇器匹配位于指定范圍內的input元素圣贸，:out-of-range選擇器匹配位于指定范圍之外的input元素。

:required選擇器匹配具有required屬性的input元素扳剿，:optional選擇器匹配沒有required屬性的input元素旁趟。

chap2-22.html

<head><style type="text/css">
  :in-range{outline: medium dotted green}
  :out-of-range{outline: medium dotted red}
  :required{outline: solid medium orange}
  section :optional{outline: solid medium blue}
  </style></head>
<body><form action="chap2-2.html" method="post">
  <section>
    <p>
      <label for="name">Name:</label>
      <input type="text" id="name" name="sname" required>
    </p>
    <p>
      <label for="age">Age:</label>
      <input type="text" id="age" name="sage">
    </p>
  </section>
  <p>
    <label for="price">$ per unit in your area:</label>
    <input type="number" min="0" max="100" value="1" id="price" name="mprice">
  </p>
  <button type="submit">submit</button>
</form></body>

動態(tài)偽類選擇器

動態(tài)偽類選擇器會根據條件的改變而匹配元素辟狈。

:link選擇器匹配超鏈接肠缔，:visited選擇器匹配用戶已訪問的超鏈接。

:hover選擇器匹配用戶鼠標懸停在其上的任意元素哼转。

chap2-23.html

<head>
  <meta charset="UTF-8">
  <title>chap2-23</title>
  <style type="text/css">
    :link{background-color:green;color: black;text-decoration: none}
    :visited{color: white;background-color: grey}
    a:hover{border: medium dotted red}
  </style>
</head>
<body>
  <a href="chap2-2.html">chap2-2.html</a>
  <p>I like <span>apples</span> and oranges</p>
  <a href="chap2-1.html">chap2-1.html</a>
</body>

:active選擇器匹配當前被用戶激活的元素明未。多數瀏覽器會在鼠標點擊的情況下使用這個選擇器。

:focus選擇器匹配當前獲得焦點的元素壹蔓。

chap2-24.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap2-24</title>
    <style type="text/css">
      a:active{border: dotted medium red}
      :focus{border: dotted medium blue}
    </style>
  </head>
  <body>
    <p>
      <label for="name">Name:</label>
      <input type="text" id="name">
    </p>
    <a href="chap2-1.html">chap2-1.html</a>
  </body>
</html>

其他偽類選擇器

:not為否定選擇器趟妥，可以對任意選擇取反，語法：:not(選擇器)

:lang選擇器匹配基于lang全局屬性值的元素佣蓉，語法：:lang(選擇器)

chap2-25.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>chap2-25</title>
    <style type="text/css">
      a:not([href*="edu"]){border: dotted medium red}
      :lang(en){border: dotted medium blue}
    </style>
  </head>
  <body>
    <p></p><a lang="en" >Nanjing Forestry University</a></p>
  <p><a >JD</a></p>
  <p><a >Nanjing University</a></p>
  </body>
</html>

使用邊框和背景

問題 解決方案
為元素應用邊框 使用border-width披摄、border-style和border-color屬性
為元素盒子的某一條邊應用邊框 使用特定邊屬性
在一條聲明中指定邊框的樣式、顏色和寬度 使用border屬性設置所有邊的邊框勇凭，或者使用border-top疚膊、border-bottom、border-left和border-right屬性設置
創(chuàng)建圓角邊框 使用border-radius簡寫屬性或某個特定邊屬性
定義背景顏色或圖像 使用background-color或background-image屬性
指定背景圖像的位置 使用background-position屬性
指定背景和元素滾動區(qū)域之間的關系 使用background-attachment屬性
設置元素的盒子陰影 使用box-shadow屬性

應用邊框樣式

簡單邊框有3個關鍵屬性：

  • border-width屬性：設置邊框的寬度虾标；
  • border-style屬性：設置繪制邊框使用的樣式寓盗；
  • border-color屬性：設置邊框的顏色
border-width值 說明
<長度值> CSS長度
<百分數> 邊框繪制區(qū)域的寬度的百分數
thin、medium璧函、thick CSS預設寬度贞让，依次增大
border-style值 說明
none 沒有邊框
dashed 破折線式邊框
dotted 圓點線式邊框
double 雙線式邊框
groove 槽線式邊框
inset 使元素內容具有內嵌效果的邊框
outset 使元素內容具有外凸效果的邊框
ridge 脊線邊框
solid 實線邊框

chap2-26.html

<head>
  <meta charset="UTF-8">
  <title>chap2-26</title>
  <style type="text/css">
    span{display:block;width: 200px;height: 50px;font-weight: bolder;margin: 10px}
    .class1{border-width: 5px;border-style: none;border-color: red}
    .class2{border-width: 5px;border-style: dashed;border-color: green}
    .class3{border-width: 5px;border-style: dotted;border-color: blue}
    .class4{border-width: 5px;border-style: double;border-color: blue}
    .class5{border-width: 5px;border-style: groove;border-color: orange}
    .class6{border-width: 5px;border-style: inset;border-color: red}
    .class7{border-width: 5px;border-style: outset;border-color: red}
    .class8{border-width: 5px;border-style: ridge;border-color: green}
    .class9{border-width: 5px;border-style: solid;border-color: blue}
  </style>
</head>
<body>
  <span class="class1">none</span><span class="class2">dashed</span><span class="class3">dotted</span>
  <span class="class4">double</span><span class="class5">groove</span><span class="class6">inset</span>
  <span class="class7">outset</span><span class="class8">ridge</span><span class="class9">solid</span>
</body>

元素的四條邊可以應用不同的邊框樣式，四條邊的屬性如下：

屬性 說明
border-top-width柳譬、border-top-style、border-top-color 定義頂邊
border-bottom-width续镇、border-bottom-style美澳、border-bottom-color 定義底邊
border-left-width、border-left-style、border-left-color 定義左邊
border-right-width制跟、border-right-style舅桩、border-right-color 定義右邊

chap2-27.html

<head>
  <style type="text/css">
    p{
      width:60%;
      border-top-width: 5px;
      border-top-style: solid;
      border-top-color:black;
      border-right-width: 5px;
      border-right-style: dotted;
      border-right-color:red;
      border-bottom-width: 5px;
      border-bottom-style: inset;
      border-bottom-color:blue;
      border-left-width: 5px;
      border-left-style: double;
      border-left-color:green;
    }
  </style>
</head>
<body>
  <p>
    The fruits I like:<br>
    I like apples and oranges.<br>
    I also like mangos and cherries.
  </p>
</body>

我們也可以不用分開設置樣式、寬度和顏色雨膨，而是使用簡寫屬性一次搞定擂涛。

border屬性：設置所有邊的邊框；

border-top聊记、border-bottom撒妈、border-left、border-right 屬性：設置一條邊的邊框排监。

chap2-28.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>chap2-28</title>
    <style type="text/css">
      p{border: dotted medium black}
      span{
        border-top: solid 5px red;
        border-right: solid 5px blue;
        border-bottom: solid 5px green;
        border-left: solid 5px orange;
      }
    </style>
  </head>
  <body>
    <p>I like <span>apples</span> and oranges.</p>
  </body>
</html>

使用邊框的radius特性可以創(chuàng)建圓角邊框狰右，與該功能相關的屬性有5個：

屬性 說明 值
border-top-left-radius、border-top-right-radius舆床、border-bottom-left-radius棋蚌、border-bottom-right-radius 設置一個圓角 一對長度值或百分數值，百分數跟邊框盒子的寬度和高度相關
border-radius 一次設置4個角的簡寫屬性 一對長度值或百分數值挨队，由/字符分隔

指定2個半徑值即可定義一個圓角谷暮，采用長度值和百分數均可。第一個值指定水平曲線半徑盛垦，第二個值指定垂直曲線半徑湿弦。百分數是相對于元素盒子的寬度和高度來說的。

border-radius屬性是一個簡寫屬性情臭，語法：border-radius: 1-4 length / 1-4 length

說明：如果/前后的值都存在省撑，那么前面的值為水平半徑，后面的值為垂直半徑俯在。如果沒有/竟秫，則水平和垂直半徑相等。另外跷乐，其4個值是按照top-left肥败、top-right、bottom-right愕提、bottom-left的順序來設置的馒稍。例如：

屬性 說明
border-radius: <length> top-left、top-right浅侨、bottom-right纽谒、bottom-left四個值相等
border-radius: <length1> <length2> top-left等于bottom-right，并取<length1>如输；top-right等于bottom-left鼓黔，并取<length2>
border-radius: <length1> <length2> <length3> top-left取<length1>央勒；top-right等于bottom-left酱吝，并取<length2>喻圃；bottom-right取<length3>
border-radius: <length1> <length2> <length3> <length4> 按top-left、top-right娱俺、bottom-right缎谷、bottom-left順序取值 
border-radius:2em 1em 4em / 0.5em 3em;

等價于：

border-top-left-radius: 2em 0.5em; 
border-top-right-radius: 1em 3em; 
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

chap2-29.html

<head>
  <meta charset=“UTF-8”>
  <title>chap2-29</title>
  <style type=“text/css”>
  .class1{
  border: solid medium black; padding: 10px;
  border-top-left-radius:20% 15px;
  border-top-right-radius:20% 15px;
  border-bottom-left-radius:20% 15px;
  border-bottom-right-radius:20% 15px;
  }
  .class2{
  border: solid medium black; padding: 10px;
  border-radius: 2em 1em 4em / 0.5em 3em
  }
  </style>
</head>
<body>
  <p class=“class1”>Net primary production is the rate …. </p>
  <p class="class2"> Net primary production is the rate …. </p>
</body>

設置元素的背景

屬性 說明
background-color 設置元素的背景顏色
background-image 設置元素的背景圖像
background-repeat 設置圖像的重復樣式
background-size 設置背景圖像的尺寸
background-position 設置背景圖像的位置
background-attachment 設置元素中圖像是否固定或隨頁面一起滾動

background-color屬性設置元素的背景顏色井濒，總是顯示在背景圖像下面。

background-image屬性設置元素的背景圖像列林，如果指定一個以上的圖像瑞你，則后面的圖像繪制在前面的圖像的下面。

background-repeat屬性設置圖像的重復樣式席纽，其值有：

background-repeat值 說明
repeat-x 水平方向平鋪圖像捏悬，圖像可能被截斷
repeat-y 垂直方向平鋪圖像，圖像可能被截斷
repeat 水平和垂直方向平鋪圖像润梯，圖像可能被截斷
space 水平或垂直方向平鋪圖像过牙，但在圖像與圖像之間設置統一間距，確保圖像不被截斷
round 水平或垂直方向平鋪圖像纺铭，但調整圖像大小寇钉，確保圖像不被截斷
no-repeat 禁止平鋪圖像

chap2-30.html

<head><script type="text/javascript">
        function background_repeat_sel(strvalue) {            document.getElementById("DemoArea").style.backgroundRepeat=strvalue;}
        </script>
<style type="text/css">
div#DemoArea{width: 850px; height: 850px; background-color: lightgreen;
background-image: url(pic/sun.jpg);background-size: 100px 100px;
background-repeat: no-repeat;}
</style></head>
<body><div><form onsubmit="return false"><h3>background-repeat屬性設置</h3>
    <input type="radio" name="repeatsel" value="repeat-x" onclick="background_repeat_sel(this.value)">repeat-x
    <input type="radio" name="repeatsel" value="repeat-y" onclick="background_repeat_sel(this.value)">repeat-y
    <input type="radio" name="repeatsel" value="repeat" onclick="background_repeat_sel(this.value)">repeat
    <input type="radio" name="repeatsel" value="space" onclick="background_repeat_sel(this.value)">space
    <input type="radio" name="repeatsel" value="round" onclick="background_repeat_sel(this.value)">round
    <input type="radio" name="repeatsel" value="no-repeat" onclick="background_repeat_sel(this.value)">no-repeat
</form></div><div id="DemoArea"></div></body>

background-size屬性設置背景圖像的尺寸，其值有：

background-size值 說明
長度值 CSS長度值舶赔、百分數（跟圖像的寬度和高度相關）
contain 等比例縮放圖像扫倡，使其寬度、高度中較大者與容器橫向或縱向重合竟纳，背景圖像始終包含在容器內
cover 等比例縮放圖像撵溃，使圖像至少覆蓋容器，有可能超出容器
auto 默認值锥累，圖像以本身尺寸完全顯示

background-position屬性設置背景圖像的位置缘挑，其值有：top/bottom/left/right/center

chap2-31.html

<head>
<script type=“text/javascript”>
    function background_size_sel(strvalue) {document.getElementById("DemoSize").style.backgroundSize=strvalue;}
    </script>
<style type="text/css">
        #DemoSize{width: 850px; height: 850px; background-color: lightgreen; background-image: url(pic/sun.jpg);
            background-size: cover; background-repeat: no-repeat; background-position: center;}
            </style>
</head>
<body>
<div>
    <form onsubmit="return false">
        <h3>background-size屬性</h3>
        <input type="radio" name="sizesel" value="100px 100px" onclick="background_size_sel(this.value)">100px 100px
        <input type="radio" name="sizesel" value="50% 50%" onclick="background_size_sel(this.value)">50% 50%
        <input type="radio" name="sizesel" value="contain" onclick="background_size_sel(this.value)">contain
        <input type="radio" name="sizesel" value="cover" onclick="background_size_sel(this.value)">cover
        <input type="radio" name="sizesel" value="auto" onclick="background_size_sel(this.value)">auto
    </form>
    </div>
<div id="DemoSize"></div>
</body>

background-attachment屬性設置背景附著內容的方式，其值有：

background-attachment值 說明
fixed 背景固定到視窗上桶略，即內容滾動時背景不動
local 背景附著到內容上语淘，即背景隨內容一起滾動
scroll 默認值。背景固定到元素上际歼，背景隨著頁面其余部分的滾動而移動惶翻。

chap2-32.html

<head>
    <meta charset="UTF-8">
    <title>chap2-32</title>
    <style type="text/css">
        body{
            background-image: url(pic/apple.jpg);
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    </style>
    </head>
<body>
<h1>圖像不會隨頁面的其余部分滾動</h1>
<h1>圖像不會隨頁面的其余部分滾動</h1>
<h1>圖像不會隨頁面的其余部分滾動</h1>
<h1>圖像不會隨頁面的其余部分滾動</h1>
<h1>圖像不會隨頁面的其余部分滾動</h1>
<h1>圖像不會隨頁面的其余部分滾動</h1>
<h1>圖像不會隨頁面的其余部分滾動</h1>
<h1>圖像不會隨頁面的其余部分滾動</h1>
<h1>圖像不會隨頁面的其余部分滾動</h1>
<h1>圖像不會隨頁面的其余部分滾動</h1>
</body>

創(chuàng)建盒子陰影

box-shadow屬性可以為元素盒子添加陰影效果。

語法：box-shadow: hoffset voffset blur spreadcolor inset

值 說明
hoffset 陰影的水平偏移量鹅心，是一個長度值吕粗，正值代表陰影向右偏移，負值代表陰影向左偏移
voffset 陰影的垂直偏移量旭愧，是一個長度值颅筋，正值代表陰影位于盒子下方虐秋，負值代表陰影位于盒子上方
blur （可選）指定模糊值，是一個長度值垃沦，值越大盒子的邊界越模糊。默認值為0用押，邊界清晰
spread （可選）指定陰影的延伸半徑肢簿，是一個長度值，正值代表陰影向盒子各個方向延伸擴大蜻拨，負值代表陰影沿相反方向縮小
color （可選）設置陰影的顏色池充，如果省略，瀏覽器會自行選擇一個顏色
inset （可選）將外部陰影設置為內部陰影（內嵌到盒子中）

chap2-33.html

<head>
    <meta charset="UTF-8">
    <title>chap2-33</title>
    <style type="text/css">
        p{
            border: 10px double black;
            box-shadow: 5px 4px 10px 2px gray;
            width: 600px;
            margin:20px auto 0px auto;
        }
    </style>
    </head>
<body>
<p>In ecology, primary production is the synthesis of organic compounds from atmospheric or aqueous carbon dioxide. </p>
</body>

我們可以在一條box-shadow聲明中定義多個陰影缎讼，只需要用逗號分隔每條聲明即可收夸。

chap2-34.html

<head>
    <meta charset="UTF-8">
    <title>chap2-34</title>
    <style type="text/css">
        p{
            border: 10px double black;
            box-shadow: 5px 4px 10px 2px gray,4px 4px 6px green inset;
            width: 600px;
            margin:20px auto 0px auto;
        }
    </style>
    </head>
<body>
<p>In ecology, primary production is the synthesis of organic compounds from atmospheric or aqueous carbon dioxide. </p>
</body>

應用輪廓

輪廓對于邊框來說是可選的。輪廓最有用的地方在于短時間抓住用戶對某個元素的注意力血崭。輪廓繪制在盒子邊框的外面卧惜。邊框和輪廓的區(qū)別在于：輪廓不屬于頁面，因此應用輪廓不需要調整頁面布局夹纫。

屬性 說明 值
outline-color 設置外圍輪廓的顏色 <顏色>
outline-offset 設置輪廓距離元素邊框邊緣的偏移量 <長度>
outline-style 設置輪廓樣式 跟border-style屬性的值一樣
outline-width 設置輪廓的寬度 thin咽瓷、medium、thick舰讹、<長度>
outline 在一條聲明中設置輪廓的簡寫屬性 <顏色> <樣式> <寬度>

chap2-35.html

<head>
    <meta charset="UTF-8">
    <title>chap2-35</title>
    <style type="text/css">
        p{
            width: 30%;
            padding: 5px;
            border: medium double black;
            background-color: lightgray;
            margin: 2px;
            float: left;
        }
        #fruittext{outline: thin solid red}
    </style>
    </head>
<body>
<p>It principally occurs through the process of photosynthesis,</p>
<p id="fruittext">It principally occurs through the process of photosynthesis, </p>
<p>It principally occurs through the process of photosynthesis, </p>
</body>

盒模型屬性

問題 解決方案
設置盒子內邊距區(qū)域的尺寸 使用padding簡寫元素茅姜，或padding-top、padding-bottom月匣、padding-left钻洒、padding-right屬性
設置盒子外邊距區(qū)域的尺寸 使用margin簡寫元素，或margin-top锄开、margin-bottom素标、margin-left、margin-right屬性
設置元素的尺寸 使用width和height屬性
設置尺寸應用到盒子的哪一部分 使用box-sizing屬性
為元素大小設置范圍 使用max-width院刁、min-width糯钙、max-height和min-height屬性
設置元素溢出內容的處理方式 使用overflow、overflow-x退腥、overflow-y屬性
設置元素的可見性 使用visibility屬性或display:none
設置元素盒子的類型 使用display屬性
將元素移動到其包含塊的左邊界或右邊界任岸，或者另一個浮動元素的邊界 使用float屬性
設置盒子的左邊界、右邊界或左右兩個邊界不允許出現浮動元素 使用clear屬性

為元素應用內邊距

使用padding簡寫元素狡刘，或padding-top享潜、padding-bottom、padding-left嗅蔬、padding-right屬性剑按。當使用padding簡寫元素時：

屬性值 說明
padding:<length1> <length2> <length3> <length4> 按上疾就、右、下艺蝴、左的順序取值
padding:<length1> <length2> <length3> 上：length1猬腰；右和左：length2；下：length3
padding:<length1> <length2> 上和下：length1猜敢；右和左：length2
padding:<length1> 所有4個內邊距都是length1

chap2-36.html

<head><style type="text/css">
        p{
            border: medium dotted black;
            width: 40%;
        }
        span{border: solid thin red}
        </style></head>
<body>
<p>
    <form onsubmit="return false">
        <span><input type="radio" name="paddingsel" value="30px 50px 30px 50px" onclick="mysel(this.value)">30px 50px 30px 50px</span>
    <span><input type="radio" name="paddingsel" value="5px 25px 5px" onclick="mysel(this.value)">5px 25px 5px</span>
    <span><input type="radio" name="paddingsel" value="30px 50px" onclick="mysel(this.value)">30px 50px</span>
    <span><input type="radio" name="paddingsel" value="25px" onclick="mysel(this.value)">25px</span>
    </form>
    </p>
<p id="DemoArea">It principally occurs through the process of photosynthesis, </p>
<script type="text/javascript">
    function  mysel(strvalue) {
        document.getElementById("DemoArea").style.padding=strvalue;
    }
    </script>
</body>

為元素應用外邊距

使用margin簡寫元素姑荷，或margin-top、margin-bottom缩擂、margin-left鼠冕、margin-right屬性。當使用margin簡寫元素時胯盯，其用法與padding相似懈费。

chap2-37.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chap2-37</title>
    <style type="text/css">
        img{
            border:thin solid black;
            background-color: lightgray;
            padding: 4px;
            margin: 10px 20px;
            width: 40%;
            height: 40%;
        }
    </style>
    </head>
<body>
<img src="pic/venus.jpg">
<img src="pic/sun.jpg">
</body>
</html>

控制元素的尺寸

width和height屬性用于設置元素的寬度和高度。

max-width博脑、min-width憎乙、max-height和min-height屬性用于設置元素可接受的寬度和高度范圍。

box-sizing屬性設置尺寸調整應用到元素盒子的哪一部分趋厉。

box-sizing值 說明
content-box 寬度和高度分別應用到元素的內容框寨闹。在寬度和高度之外繪制元素的內邊距和邊框。
border-box 為元素設定的寬度和高度決定了元素的邊框盒君账。就是說繁堡，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度乡数。

chap2-38.html

<head><style type="text/css">
        div{
            width: 75%;
            height: 800px;
            border: solid thin black;
        }
        img{
            background-color: lightgray;
            border: medium double orangered;
            margin: 2px;
            height: 400px;
        }
        #first{box-sizing: border-box;}
        #second{box-sizing:content-box;}
        #third{max-width: 300px;max-height: 300px}
    </style>
    </head>
<body>
<div>
    <img id="first" src="pic/sun.jpg">
    <img id="second" src="pic/sun.jpg">
    <img id="third" src="pic/sun.jpg">
    </div>
</body>

處理溢出內容

使用overflow椭蹄、overflow-x、overflow-y屬性可以設置溢出內容的處理方式，這3個屬性可能的取值有：

值 說明
auto 瀏覽器自行處理溢出內容。通常危虱，如果內容被剪掉就顯示滾動條，否則就不顯示
hidden 多余的部分直接剪掉翼馆，只顯示內容盒里面的內容
scroll 為了讓用戶看到所有內容，瀏覽器會添加滾動機制金度，通常是滾動條应媚。即使內容沒有溢出也能看到滾動條
visible 默認值，不管是否溢出內容盒猜极，都顯示元素內容

chap2-39.html

<head><style type=“text/css”>
        p{
            width: 300px;
            height: 200px;
            border: medium dotted black;
            float: left;
        }
        #first{overflow: hidden}
        #second{overflow: scroll}
        #third{overflow: auto}
        #fourth{overflow: visible}
    </style></head>
    <body>
<p id=“first”>In ecology, …</p>
<p id="second">In ecology, primary production is the synthesis of organic compounds from atmospheric or aqueous carbon dioxide. </p>
<p id="third">In ecology, … </p>
<p id="fourth">In ecology, … </p>
</body>

控制元素的可見性

使用visibility屬性可以控制元素的可見性中姜，可能的取值有：

visibility屬性值 說明
collapse 元素不可見，且在頁面布局中不占據空間跟伏。
hidden 元素不可見丢胚，但在頁面布局中占據空間
visible 默認值翩瓜，元素在頁面上可見

chap2-40.html

<head><style type="text/css">
        tr>th{text-align: left;background-color: gray;color: white}
        tr>th:only-of-type{text-align: right;background-color: lightgray;color: gray}
        </style></head>
<body>
<table>
    <tr><th>Rank</th><th>Name</th><th>Color</th><th>Size</th></tr>
    <tr id="firstchoice"><th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td></tr>
    <tr><th>2nd Favorite:</th><td>Oranges</td><td>Orange</td><td>Large</td></tr>
    </table>
<p><button>Visible</button><button>Collapse</button><button>Hidden</button></p>
<script>
    var buttons=document.getElementsByTagName("button");
    for(var i=0;i<buttons.length;i++){
        buttons[i].onclick=function (e) {
            document.getElementById("firstchoice").style.visibility=e.target.innerHTML;
        }
    }
    </script>
</body>

設置元素的盒類型

使用display屬性可以改變元素的盒類型：

display屬性值 說明
inline 盒子顯示為文本行中的字
block 盒子顯示為段落
inline-block 盒子顯示為文本行
list-item 盒子顯示為列表項，通常具有項目符號或者其他標記符（如索引號）
run-in 盒子類型取決于周圍的元素
flexbox 這個值跟彈性盒布局相關
table 這些值跟表格中的元素布局相關
none 元素不可見携龟，且在頁面布局中不占空間

將display屬性設置為block值會創(chuàng)建一個塊級元素兔跌。塊級元素會在垂直方向跟周圍元素有所區(qū)別。通常在元素前后放置換行符也能達到這種效果峡蟋。

block值可應用到所有元素浮定。

chap2-41.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chap2-41</title>
    <style type="text/css">
        p{border: medium dotted black}
        span{display: block;border: medium double red;margin: 2px}
    </style>
    </head>
<body>
<p>In ecology, …</p>
<p>In ecology, … <span>It principally occurs through the process of photosynthesis, … </span> Almost all life on Earth relies directly or indirectly on primary production.</p>
</body>
</html>

inline值會創(chuàng)建一個行內元素。

inline-block值會創(chuàng)建一個其盒子混合了塊和行內特征的元素层亿，盒子整體作為行內元素顯示。但盒子內部作為塊元素顯示立美，這樣匿又，width、height和margin屬性都能應用到盒子上建蹄。

chap2-42.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chap2-42</title>
    <style type="text/css">
        p{display: inline}
        span#s1{display: inline;border: medium double red;width: 12em;height: 2em}
        span#s2{display: inline-block; border: medium double red;width: 12em;height: 2em}
    </style>
    </head>
<body>
<p>In ecology, primary production is the <span id="s1">synthesis of organic</span> compounds from atmospheric or aqueous carbon dioxide. </p>
<p>In ecology, primary production is the <span id="s2">synthesis of organic</span> compounds from atmospheric or aqueous carbon dioxide. </p>
</body>
</html>

run-in值會創(chuàng)建一個這樣的元素：其盒子類型取決于周圍元素碌更。通常，瀏覽器（Chrome不支持洞慎，IE支持）必須評估以下2種情況痛单，以確定插入框的特征：

  • 如果插入元素的相鄰兄弟元素是塊級元素，那么插入元素就是兄弟元素中的第一個行內元素劲腿。
  • 其他情況下旭绒，插入元素均作為塊級元素對待。

chap2-43.html

<head>
    <meta charset="UTF-8">
    <title>chap2-43</title>
    <style type="text/css">
        p#p1{display: block}
        p#p2{display: inline}
        span{display: run-in;border: medium double red}
    </style>
    </head>
<body>
<h1>display:block</h1>
<span>In ecology, primary production is the synthesis of organic compounds from atmospheric or aqueous carbon dioxide.</span>
<p id="p1">It principally occurs through the process of photosynthesis , … </p>
<h1>display:inline</h1>
<span>In ecology, primary production is the synthesis of organic compounds from atmospheric or aqueous carbon dioxide.</span>
<p id="p2">It principally occurs through the process of photosynthesis, … </p>
</body>

none值就是告訴瀏覽器不要為元素創(chuàng)建任何類型的盒子焦人，這時元素在頁面布局中不占據任何空間挥吵。

chap2-44.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chap2-44</title>
    <style type="text/css">
        #p1{display: none}
        #p2{display: block}
    </style>
    </head>
<body>
<h1>display:none</h1>
<p id="p1">In ecology, primary production is the synthesis of organic compounds from atmospheric or aqueous carbon dioxide. </p>
<h1>display:block</h1>
<p id="p2">In ecology, primary production is the synthesis of organic compounds from atmospheric or aqueous carbon dioxide. </p>
</body>
</html>

創(chuàng)建浮動盒

可以使用float屬性創(chuàng)建浮動盒，浮動盒會將元素的左邊界或者右邊界移動到包含塊或另一個浮動盒的邊界花椭。其值有以下3個：

float屬性值 說明
left 移動元素忽匈，使其左邊界挨著包含塊的左邊界，或者另一個浮動元素的右邊界
right 移動元素矿辽，使其右邊界挨著包含塊的右邊界丹允，或者另一個浮動元素的左邊界
none 元素位置固定

clear屬性規(guī)定元素的哪一側不允許其他浮動元素。其值有以下4個：

clear屬性值 說明
left 元素的左邊界不能挨著另一個浮動元素
right 元素的右邊界不能挨著另一個浮動元素
both 元素的左右邊界都不能挨著浮動元素
none 元素的左右邊界都可以挨著浮動元素

chap2-45.html

<head>
    <style type="text/css">
        p.toggle{float: left; border: medium double red; width: 40%; margin: 2px; padding: 2px}
    p.cleared{clear: left}
    </style>
</head>
<body>
    <p class="toggle">Gross primary production (GPP) …</p>
    <p class="toggle cleared">Net primary production …</p>
    <p>In areal terms, …</p>
    <p><button>Left</button><button>Right</button><button>None</button></p>
    <script type="text/javascript">
        var buttons=document.getElementsByTagName("button");
        for(var i=0;i<buttons.length;i++){
            buttons[i].onclick=function (e) {
                var elem=document.getElementsByClassName("toggle");
                for(var j=0;j<elem.length;j++){
                    elem[j].style.float=e.target.innerHTML;
                }
            }
        }
    </script>
</body>

布局屬性

問題 解決方案
改變元素在容器塊中的定位方式 使用position屬性
設置定位元素相對于容器邊界的偏移量 使用top袋倔、bottom雕蔽、left、right屬性
設置元素的層疊順序 使用z-index屬性
創(chuàng)建跟報紙頁面類似的布局 使用多列布局
將空間流式分配到容器中的元素 使用彈性盒布局
為元素創(chuàng)建表格樣式布局 使用CSS表布局

定位內容

position屬性設置了元素的定位方法奕污。

使用top萎羔、bottom、left和right屬性設置元素的偏移量的時候碳默，指的是相對于position屬性指定的元素的偏移量贾陷。

position屬性值 說明
static 默認值缘眶。沒有定位，元素出現在正常的流中（忽略top, bottom, left, right或者 z-index聲明）髓废。
relative 生成相對定位的元素巷懈，相對于其正常位置進行定位。因此慌洪，left:20會向元素的LEFT位置添加20像素顶燕。
absolute 生成絕對定位的元素，相對于static定位以外的第一個父元素進行定位冈爹。元素的位置通過 left, top, right以及bottom屬性進行規(guī)定涌攻。
fixed 生成絕對定位的元素，相對于瀏覽器窗口進行定位频伤。元素的位置通過left,top,right以及bottom屬性進行規(guī)定恳谎。

chap2-46.html

<head>
    <meta charset="UTF-8">
    <title>chap2-46</title>
    <style type="text/css">
        p{width:500px;position: relative;left: 150px}
        img{top: 200px;left: 150px; position:absolute;border: medium double black;width: 300px}
    </style>
    </head>
<body>
<p>In ecology, ….</p>
<img src="pic/apple.jpg" id="apple">
<p><button>Static</button><button>Relative</button><button>Absolute</button><button>Fixed</button></p>
<script type="text/javascript">
    var buttons=document.getElementsByTagName("button");
    for(var i=0;i<buttons.length;i++){
        buttons[i].onclick=function (e) {
            document.getElementById("apple").style.position=e.target.innerHTML;
        }
    }
    </script>
</body>

z-index屬性指定元素顯示的層疊順序，其值為數值憋肖，且允許取負值因痛。值越小，在層疊順序中就越靠后岸更。這個屬性只有在元素重疊的情況下才會排上用場鸵膏。

z-index屬性默認值是0。因此怎炊，瀏覽器默認將圖像顯示在p元素上面谭企。

chap2-47.html

<!DOCTYPE html>
<html lang=“en”>
<head>
    <meta charset=“UTF-8”>
    <title>chap2-47</title>
    <style type=“text/css”>
        img{border: medium double black;position: fixed;width: 300px}
        #sun{z-index: 1;top: 15px;left: 250px}
        #venus{z-index: 2;top: 25px;left: 120px}
    </style>
    </head>
<body>
<p>The Sun is the star at the center of the Solar System. …</p>
<p>Venus is the second planet from the Sun, orbiting it every 224.7 Earth days….</p>
<img id="sun" src="pic/sun.jpg"><img id="venus" src="pic/venus.jpg">
</body>
</html>

創(chuàng)建多列布局

多列特性允許在多個垂直列中布局內容，跟報紙的排版方式類似评肆。

屬性 說明
column-count 指定列數
column-gap 指定列之間的距離
column-rule 設置列之間的顏色赞咙、樣式、寬度

column-gap屬性規(guī)定列之間的間隔糟港。語法為：column-gap:長度|normal

column-rule屬性是一個簡寫屬性攀操，用于設置所有column-rule-*屬性。語法：column-rule: column-rule-width column-rule-style column-rule-color

chap2-48.html

<head><style type=“text/css”>
        div.SelArea{border: medium dotted black;float: left;margin: 5px}
        div.ResultArea{width: 80%;column-count: 3;column-gap: 5px;column-rule: 4px double red}
        </style></head>
<body>
<div class=“SelArea”>
    <form onsubmit=“return false”>
        <ul>
            <li><input type=“radio” name=“rpos” value=“5px” onclick=“columngap(this.value)”>5px</li>
            <li><input type=“radio” name=“rpos” value=“10px” onclick=“columngap(this.value)”>10px</li>
            <li><input type=“radio” name=“rpos” value=“20px” onclick=“columngap(this.value)”>20px</li>
            <li><input type=“radio” name=“rpos” value=“normal” onclick=“columngap(this.value)”>normal</li>
        </ul>
    </form>
    </div>
<div class=“SelArea ResultArea” id=“DemoArea”>人民網北京…</div>
<script type="text/javascript">
    function columngap(strValue) {
        document.getElementById("DemoArea").style.columnGap=strValue;
    }
</script></body>

創(chuàng)建彈性盒布局

彈性盒（flexbox）布局主要思想是讓容器有能力讓其子項目能夠改變其寬度秸抚、高度（甚至順序）速和，以最佳方式填充可用空間（主要是為了適應所有類型的顯示設備和屏幕大小）剥汤。Flex容器會使子項目（伸縮項目）擴展來填滿可用空間颠放，或縮小他們以防止溢出容器。

任何一個容器都可以指定為Flex布局吭敢，例如：.box{display:flex;}

行內元素也可以使用Flex布局碰凶，例如：.box{display:inline-flex;}

Webkit 內核的瀏覽器，必須加上-webkit前綴。例如：.box{display: -webkit-flex;}

注意：設為 Flex 布局以后欲低，子元素的float辕宏、clear和vertical-align屬性將失效。

采用 Flex 布局的元素砾莱，稱為 Flex 容器（flex container）瑞筐，簡稱"容器"。它的所有子元素自動成為容器成員腊瑟，稱為 Flex 項目（flex item）聚假，簡稱“項目”。

容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）闰非。主軸的開始位置（與邊框的交叉點）叫做main start膘格，結束位置叫做main end；交叉軸的開始位置叫做cross start财松，結束位置叫做cross end闯袒。

項目默認沿主軸排列。單個項目占據的主軸空間叫做main size游岳，占據的交叉軸空間叫做cross size。

2.5.3 創(chuàng)建彈性盒布局

容器的屬性有：

屬性 說明
flex-direction 決定主軸的方向
flex-wrap 默認情況下其徙，項目都排在一條線（又稱“軸線”）上尤慰。flex-wrap屬性定義拼缝，如果一條軸線排不下，如何換行
flex-flow 是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap
justify-content 定義了項目在主軸上的對齊方式
align-items 定義項目在交叉軸上如何對齊
align-content 定義了多根軸線的對齊方式夏伊。如果項目只有一根軸線，該屬性不起作用

項目的屬性有：

屬性 說明
order 定義項目的排列順序敛瓷。數值越小颜懊，排列越靠前，默認為0避诽。
flex-grow 定義項目的放大比例龟虎，默認為0，即如果存在剩余空間沙庐，也不放大鲤妥。
flex-shrink 定義了項目的縮小比例，默認為1拱雏，即如果空間不足棉安，該項目將縮小。
flex-basis 定義了在分配多余空間之前铸抑，項目占據的主軸空間（main size）贡耽。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto蒲赂，即項目的本來大小阱冶。
flex 是flex-grow, flex-shrink和flex-basis的簡寫，默認值為0 1 auto凳宙。后兩個屬性可選熙揍。
align-self 允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性氏涩。默認值為auto届囚，表示繼承父元素的align-items屬性，如果沒有父元素是尖，則等同于stretch意系。

容器屬性

flex-direction屬性決定主軸的方向（即項目的排列方向）。

語法：flex-direction: row | row-reverse |column | column-reverse

默認情況下饺汹，項目都排在一條線（又稱"軸線"）上蛔添。

flex-wrap屬性定義，如果一條軸線排不下兜辞，如何換行迎瞧。語法：flex-wrap:nowrap | wrap | wrap-reverse

  • nowrap（默認）：不換行。

  • wrap：換行逸吵，第一行在上方凶硅。

  • wrap-reverse：換行，第一行在下方扫皱。

justify-content屬性定義了項目在主軸上的對齊方式足绅。

語法：justify-content: flex-start | flex-end |center | space-between | space-around

  • space-around：彈性盒子元素會平均地分布在行里，兩端保留子元素與子元素之間間距大小的一半韩脑。如果最左邊的剩余空間是負數氢妈，或該行只有一個伸縮盒項目，則該值等效于center段多。在其它情況下首量，伸縮盒項目則平均分布，并確保兩兩之間的空白空間相等进苍，同時第一個元素前的空間以及最后一個元素后的空間為其他空白空間的一半蕾总。

align-items屬性定義項目在交叉軸上如何對齊。

語法：align-items: flex-start | flex-end |center | baseline | stretch

  • stretch是默認值琅捏。
  • baseline：項目的第一行文字的基線對齊生百。

align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線柄延，該屬性不起作用蚀浆。

align-content屬性定義了多根軸線的對齊方式缀程。如果項目只有一根軸線，該屬性不起作用市俊。

語法：align-content: flex-start | flex-end |center | space-between | space-around | stretch

chap2-49.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chap2-49</title>
    <style type="text/css">
        p{float: left;width: 150px;border: medium double black;background-color: lightgray;margin: 2px}
        #container{display: flex;flex-direction: row-reverse;justify-content: space-between;align-items: flex-end}
    </style>
    </head>
<body>
<div id="container">
    <p id="first">In ecology, primary production is … </p>
    <p id="second">Gross primary production (GPP) is …</p>
    <p id="third">Net primary production is …</p>
    </div>
</body>
</html>

項目屬性

order屬性定義項目的排列順序杨凑。數值越小，排列越靠前摆昧，默認為0撩满。

  • 語法：order: <integer>

flex-grow屬性定義項目的放大比例，默認為0绅你，即如果存在剩余空間伺帘，也不放大。

  • 語法：flex-grow: <number>
  • 如果所有項目的flex-grow屬性都為1忌锯，則它們將等分剩余空間（如果有的話）伪嫁。如果一個項目的flex-grow屬性為2，其他項目都為1偶垮，則前者占據的剩余空間將比其他項多一倍张咳。

flex-shrink屬性定義了項目的縮小比例，默認為1似舵，即如果空間不足脚猾，該項目將縮小。

  • 語法：flex-shrink: <number>
  • 如果所有項目的flex-shrink屬性都為1砚哗，當空間不足時龙助，都將等比例縮小。如果一個項目的flex-shrink屬性為0频祝，其他項目都為1，則空間不足時脆淹，前者不縮小常空。負值對該屬性無效。

flex-basis屬性定義了在分配多余空間之前盖溺，項目占據的主軸空間（main size）漓糙。瀏覽器根據這個屬性，計算主軸是否有多余空間烘嘱。它的默認值為auto昆禽，即項目的本來大小。

  • 語法：flex-basis: <length> | auto

flex屬性是flex-grow蝇庭，flex-shrink和flex-basis的簡寫醉鳖，默認值為0 1 auto。后兩個屬性可選哮内。

  • 該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)盗棵。

align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto纹因，表示繼承父元素的align-items屬性喷屋，如果沒有父元素，則等同于stretch瞭恰。

語法：align-self: auto | flex-start | flex-end | center | baseline | stretch

cahp2-50.html

<head>
<style type="text/css">
        .HolyGrail{display: flex;flex-direction: column}
        header,footer{flex: 1;background-color: gray}
        .HolyGrail-body{display: flex;flex: 1}
        .HolyGrail-content{flex: 1;background-color: lightblue}
        .HolyGrail-nav,.HolyGrail-ads{flex: 0 0 250px;background-color: lightgreen}
        .HolyGrail-nav{order: -1;background-color: lightpink}
    </style>
    </head>
<body class="HolyGrail">
<header>
    <h1>This is the header</h1>
    </header>
<div class="HolyGrail-body">
    <div class="HolyGrail-content"><h2>HolyGrail-content</h2></div>
    <div class="HolyGrail-nav"><h2>HolyGrail-nav</h2></div>
    <div class="HolyGrail-ads"><h2>HolyGrail-ads</h2></div>
    </div>
<footer>
    <h1>This is the footer</h1>
    </footer>
</body>

創(chuàng)建表格布局

創(chuàng)建CSS表格布局使用display屬性屯曹，其值有：

display屬性值 說明
table 類似于table元素
inline-table 類似于table元素，但是創(chuàng)建一個行內元素
table-caption 類似于caption元素
table-column 類似于col元素
table-column-group 類似于colgroup元素
table-header-group 類似于thead元素
table-row-group 類似于tbody元素
table-footer-group 類似于tfoot元素
table-row 類似于tr元素
table-cell 類似于td元素

chap2-51.html

<head><style type="text/css">
        #table{display: table}
        #thead{display: table-header-group;background-color: gray; font-weight: bold}
        #tbody{display: table-row-group}
        #tbody p:nth-child(even){background-color: lightgreen}
        .row{display: table-row;text-align: center}
        .col{display: table-cell;border: solid thin black} </style></head>
<body>
  <div id="table">
    <div id="thead">
      <p class="row">
        <span class="col">Rank</span><span class="col">Name</span>
        <span class="col">Color</span><span class="col">Size</span>
      </p>
    </div>
    <div id="tbody">
      <p class="row">
        <span class="col">Favorite:</span><span class="col">Apples</span>
        <span class="col">Green</span><span class="col">Medium</span>
      </p>
      <p class="row">
        <span class="col">2nd Favorite:</span><span class="col">Oranges</span>
        <span class="col">Orange</span><span class="col">Large</span>
      </p>
    </div>
  </div>
</body>

文本屬性

問題 解決方案
文本塊對齊 使用text-align和text-justify屬性
定義如何處理空白 使用white-space屬性
指定文本方向 使用direction屬性
指定單詞之間惊畏、字母之間恶耽、文本行之間的間隔 使用letter-spacing、word-spacing和line-height屬性
指定溢出文本如何斷行 使用word-wrap屬性
指定文本縮進 使用text-indent屬性
裝飾文本或轉換文本大小寫 使用text-decoration或text-transform屬性
為文本塊應用陰影效果 使用text-shadow屬性
設置字體 使用font陕截、font-family驳棱、font-size焰盗、font-style叭喜、font-variant和font-weight屬性

應用基本文本樣式

text-align和text-justify屬性指定文本塊的對齊方式，其值有：

  • start：內容對齊開始邊界挚躯；
  • end：內容對齊結束邊界乳规；
  • left：內容左對齊形葬；
  • center：內容居中對齊；
  • right：內容右對齊暮的；
  • justify：內容兩端對齊笙以。

注意：text-justify只有IE支持！

如果使用justify值冻辩，可以使用text-justify屬性指定文本添加空白的方式猖腕，其值有：

text-justify屬性值 說明
auto 瀏覽器選擇對齊規(guī)則
none 禁用文本對齊
inter-word 空白分布在單詞之間，適用于英語等詞間有空的語言
inter-ideograph 空白分布在單詞恨闪、表意字之間倘感，且文本兩端對齊，適用于漢語咙咽、日文或韓文等語言
inter-cluster 空白分布在單詞老玛、字形集的邊界，適用于泰文等無詞間空格的語言
distribute 空白分布在單詞钧敞、字形集的邊界蜡豹，但連續(xù)文本或者草體除外
kashida 通過拉長選定字符調整對齊方式（僅適用于草體）

chap2-52.html

<head><style type="text/css">
    #NPPtext{width: 400px; margin: 5px;padding: 5px;border: medium double black;background-color: lightgray}
    </style>
</head>
<body>
    <p id="NPPtext">Net primary production is the rate …</p>
    <p><button>Start</button><button>End</button><button>Left</button><button>Right</button><button>Center</button>
        <span>Justify:<select id="Justify_sel"><option value="auto">auto</option><option value="none">none</option>
        <option value="inter-word">inter-word</option><option value="inter-ideograph">inter-ideograph</option>
        <option value="inter-cluster">inter-cluster</option><option value="distribute">distribute</option>
        <option value="kashida">kashida</option></select></span>
    </p>
    <script type="text/javascript">
    var buttons=document.getElementsByTagName("button");
    for(var i=0;i<buttons.length;i++){
    buttons[i].onclick=function (e) {
    document.getElementById("NPPtext").style.textAlign=e.target.innerHTML;
    }
    }
    document.getElementById("Justify_sel").onchange=function (e) {
    document.getElementById("NPPtext").style.textAlign="Justify";
    document.getElementById("NPPtext").style.textJustify=e.target.value;
    }
    </script>
</body>

white-space屬性指定空白字符的處理方式，其值有：

white-space屬性值 說明
normal 默認溉苛【盗空白會被瀏覽器忽略。
pre 空白會被瀏覽器保留愚战。其行為方式類似HTML中的<pre>標簽桨吊。
nowrap 文本不會換行威根，文本會在同一行上繼續(xù)，直到遇到<br>標簽為止视乐。
pre-wrap 保留空白符序列洛搀，但是正常地進行換行。
pre-line 合并空白符序列佑淀，但是保留換行符留美。
inherit 規(guī)定應該從父元素繼承white-space屬性的值。

chap2-53.html

<head>
<style type="text/css">p{white-space: normal;font-size: larger;border: double medium black;width: 600px}</style>
</head>
<body><p id="p1">
    This is the paragraph.
    This is the paragraph.
    This is the paragraph.
    This is the paragraph.
    This is the paragraph.
    This is the paragraph.
    This is the paragraph.
    This is the paragraph.
    </p>
<select onchange="whitespace(this)" size="5">
    <option selected/>normal    <option />pre    <option />nowrap    <option />pre-wrap    <option />pre-line
    </select>
<script>
    function whitespace(x) {
        var ws=x.options[x.selectedIndex].text;
        document.getElementById("p1").style.whiteSpace=ws;
    }
    </script>
</body>

direction屬性告訴瀏覽器文本塊的排列方向伸刃，其值有：

  • ltr：默認谎砾。文本方向從左到右。
  • rtl：文本方向從右到左捧颅。

letter-spacing屬性設置字母間的間距景图，語法：letter-spacing: normal | <長度值>

word-spacing屬性設置單詞間的間距，語法：word-spacing: normal | <長度值>

line-height屬性設置行高碉哑，語法：line-height: normal | <長度值>

chap2-54.html

<head>
    <meta charset="UTF-8">
    <title>chap2-54</title>
    <style type="text/css">
        p{border: double medium black;margin: 10px;padding: 10px}
        #GPP{direction: ltr;word-spacing: 5px;letter-spacing: 2px;line-height: 2em}
        #NPP{direction: rtl;word-spacing: 10px;letter-spacing: normal;line-height: 4em}
    </style>
</head>
<body>
    <p id="GPP">Gross primary production (GPP) is the amount of chemical energy as biomass that primary producers create in a given length of time.</p>
    <p id="NPP">Net primary production is the rate at which all the plants in an ecosystem produce net useful chemical energy; it is equal to the difference between the rate at which the plants in an ecosystem produce useful chemical energy (GPP) and the rate at which they use some of that energy during respiration.</p>
</body>

word-wrap屬性告訴瀏覽器當一個單詞的長度超出包含塊的寬度時如何處理挚币，其值有：

  • normal：單詞不斷開，即使無法完全放入包含塊元素扣典。
  • break-word：斷開單詞妆毕，使其放入包含塊元素。

text-indent屬性用于指定文本塊首行縮進贮尖，其值可以是長度值笛粘，也可以是相對于元素寬度的百分數值。

chap2-55.html

<head>
    <meta charset="UTF-8">
    <title>chap2-55</title>
    <style type="text/css">
        p{width: 250px;margin: 20px;padding: 5px;border: medium solid black;float: left}
        #NPP1{word-wrap: break-word;text-indent: 2em}
        #NPP2{word-wrap: normal;text-indent: 10%}
    </style>
</head>
<body>
    <p id="NPP1">Net primary production is the rate at which all the plants in an ecosystemproducenetusefulchemicalenergy; it is equal to the difference between the rate at which the plants in an ecosystem produce useful chemical energy (GPP) and the rate at which they use some of that energy during respiration.</p>
    <p id="NPP2">Net primary production is the rate at which all the plants in an ecosystemproducenetusefulchemicalenergy; it is equal to the difference between the rate at which the plants in an ecosystem produce useful chemical energy (GPP) and the rate at which they use some of that energy during respiration.</p>
</body>

文本裝飾與大小寫轉換

text-decoration屬性規(guī)定添加到文本的修飾湿硝，其值有：

  • none：默認薪前，定義標準的文本。
  • underline：定義文本下的一條線关斜。
  • overline：定義文本上的一條線示括。
  • line-through：定義穿過文本下的一條線。
  • inherit：規(guī)定應該從父元素繼承text-decoration屬性的值蚤吹。

text-transform屬性控制文本的大小寫例诀，其值有：

  • none：默認随抠。定義帶有小寫字母和大寫字母的標準的文本裁着。
  • capitalize：文本中的每個單詞以大寫字母開頭。
  • uppercase：定義僅有大寫字母拱她。
  • lowercase：定義無大寫字母二驰，僅有小寫字母。
  • inherit：規(guī)定應該從父元素繼承text-transform屬性的值秉沼。

chap2-56.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chap2-56</title>
    <style type="text/css">
        p{line-height: 4em;font-size: larger}
        .c1{text-decoration: none;text-transform: none}
        .c2{text-decoration: underline;text-transform: capitalize}
        .c3{text-decoration: overline;text-transform: uppercase}
        .c4{text-decoration: line-through;text-transform: lowercase}
    </style>
    </head>
<body>
<p class="c1">This is some text in a paragraph.</p>
<p class="c2">This is some text in a paragraph.</p>
<p class="c3">This is some text in a paragraph.</p>
<p class="c4">This is some text in a paragraph.</p>
</body>
</html>

創(chuàng)建文本陰影

text-shadow屬性為文本創(chuàng)建陰影效果桶雀。

語法： text-shadow: h-shadow v-shadowblur color

  • h-shadow：必需矿酵。水平陰影的位置。允許負值矗积。
  • v-shadow：必需全肮。垂直陰影的位置。允許負值棘捣。
  • blur：可選辜腺。模糊的距離。
  • color：可選乍恐。陰影的顏色评疗。

chap2-57.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chap2-57</title>
    <style type="text/css">
        .c1{text-shadow: 0 0 8px #ff0000}
        .c2{text-shadow: 2px 2px 8px #000000;color: white}
        .c3{text-shadow: 2px 2px 8px #ff0000}
    </style>
    </head>
<body>
<h1 class="c1">霓虹燈效果的文本陰影！</h1>
<h1 class="c2">白色文本的陰影效果茵烈！</h1>
<h1 class="c3">模糊效果的文本陰影百匆！</h1>
</body>
</html>

使用字體

屬性 說明
font-family 指定文本塊采用的字體名稱
font-size 指定文本塊的字體大小
font-style 指定字體樣式
font-variant 指定字體是否以小型大寫字母顯示
font-weight 設置字體粗細
font 在一條聲明中設置字體的簡寫屬性

font-family屬性指定使用的字體，按照優(yōu)先順序排列呜投。CSS定義了5種通用字體系列：

  • serif：這些字體成比例加匈，而且有上下短線。如果字體中的所有字符根據其不同大小有不同的寬度宙彪，則該字符是成比例的矩动。例如，小寫 i 和小寫 m 的寬度就不同释漆。上下短線是每個字符筆劃末端的裝飾悲没，比如小寫 l 頂部和底部的短線，或大寫 A 兩條腿底部的短線男图。Serif 字體的例子包括 Times示姿、Georgia 和 New Century Schoolbook。

  • sans-serif：這些字體是成比例的逊笆，而且沒有上下短線栈戳。Sans-serif 字體的例子包括 Helvetica、Geneva难裆、Verdana子檀、Arial 或 Univers。

  • monospace：Monospace 字體并不是成比例的乃戈。它們通常用于模擬打字機打出的文本褂痰、老式點陣打印機的輸出，甚至更老式的視頻顯示終端症虑。采用這些字體缩歪，每個字符的寬度都必須完全相同，所以小寫的i 和小寫的 m 有相同的寬度谍憔。這些字體可能有上下短線匪蝙，也可能沒有主籍。如果一個字體的字符寬度完全相同，則歸類為Monospace 字體逛球，而不論是否有上下短線千元。Monospace 字體的例子包括 Courier、Courier New 和 Andale Mono颤绕。

  • cursive：這些字體試圖模仿人的手寫體诅炉。通常呵曹，它們主要由曲線和 Serif 字體中沒有的筆劃裝飾組成妙蔗。例如竞滓，大寫 A 再其左腿底部可能有一個小彎酪夷，或者完全由花體部分和小的彎曲部分組成冲簿。Cursive 字體的例子包括 Zapf Chancery减牺、Author 和 Comic Sans晚缩。

  • fantasy：這些字體無法用任何特征來定義浅役，只有一點是確定的溢谤，那就是我們無法很容易地將其規(guī)劃到任何一種其他的字體系列當中瞻凤。這樣的字體包括Western、Woodblock 和 Klingon世杀。

chap2-58.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chap2-58</title>
    <style type="text/css">
        .serif{font-family:"Times New Roman",Georgia,Serif}
        .sansserif{font-family:Arial,Verdana,Sans-serif}
        .monospace{font-family: "Courier New","Andale Mono",monospace}
        .cursive{font-family: "Zapf Chancery","Comic Sans MS",Cursive}
        .fantasy{font-family: Western,Woodblock,fantasy}
    </style>
    </head>
<body>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>
<p class="monospace">This is a paragraph, shown in the Courier font.</p>
<p class="cursive">This is a paragraph, shown in the Aapf Chancery font.</p>
<p class="fantasy">This is a paragraph, shown in the Western font.</p>
</body>
</html>

font-size屬性用來指定字體大小阀参，其值有：

  • 由小到大排列：xx-small、x-small瞻坝、small蛛壳、medium、large所刀、x-large衙荐、xx-large。具體大小由瀏覽器決定浮创。
  • smaller和larger設置字體相對于父元素字體的大小忧吟。
  • <length>使用CSS長度值精確設置字體大小。
  • <%>將字體大小表示為父元素字體大小的百分數斩披。

font-weight屬性用來指定字體粗細程度溜族，其值有：

  • 由細到粗排列：lighter、normal垦沉、bold煌抒、bolder。
  • 數值：100乡话、200摧玫、300耳奕、400绑青、500诬像、600、700闸婴、800坏挠、900。400等同于normal邪乍，700等同于bold降狠。

font-style屬性用來指定字體風格，其值有：

  • normal：默認值庇楞。瀏覽器顯示一個標準的字體樣式榜配。

  • italic：瀏覽器會顯示一個斜體的字體樣式。

  • oblique：瀏覽器會顯示一個傾斜的字體樣式吕晌。

  • inherit：規(guī)定應該從父元素繼承字體樣式蛋褥。

font-variant屬性用來設置小型大寫字母的字體顯示文本，這意味著所有的小寫字母均會被轉換為大寫睛驳，但是所有使用小型大寫字體的字母與其余文本相比烙心，其字體尺寸更小。其值有：

  • normal：默認值乏沸。瀏覽器會顯示一個標準的字體淫茵。

  • small-caps：瀏覽器會顯示小型大寫字母的字體。

  • inherit：規(guī)定應該從父元素繼承 font-variant 屬性的值蹬跃。

chap2-59.html

<head>
    <meta charset="UTF-8">
    <title>chap2-59</title>
    <style type="text/css">
        .c1{font-size: xx-large;font-weight:lighter;font-style: italic;font-variant: normal}
        .c2{font-size: x-large;font-weight:normal;font-style: normal;font-variant: small-caps}
        .c3{font-size: large;font-weight:400;font-style: normal;font-variant: small-caps}
        .c4{font-size: medium;font-weight:bold;font-style: oblique;font-variant: normal}
        .c5{font-size: small;font-weight:700;font-style: oblique;font-variant: normal}
        .c6{font-size: x-small;font-weight:bolder;font-style: normal;font-variant: normal}
        .c7{font-size: xx-small;font-weight:900;font-style: normal;font-variant: normal}
    </style>
    </head>
<body>
<p class="c1">This is a Paragraph</p>
<p class="c2">This is a Paragraph</p>
<p class="c3">This is a Paragraph</p>
<p class="c4">This is a Paragraph</p>
<p class="c5">This is a Paragraph</p>
<p class="c6">This is a Paragraph</p>
<p class="c7">This is a Paragraph</p>
</body>

其他屬性

問題 解決方案
設置元素的前景色 使用color屬性
設置元素的透明度 使用opacity屬性
指定如何繪制相鄰表格單元的邊框 使用border-collapse和border-spacing屬性
指定表格標題的位置 使用caption-side屬性
指定如何確定表格尺寸 使用table-layout屬性
指定列表標記的類型 使用list-style-type屬性
將圖像作為列表標記 使用list-style-image屬性
指定列表標記的位置 使用list-style-position屬性
指定光標的形狀 使用cursor屬性

設置元素的顏色和透明度

color屬性用來設置元素的前景色匙瘪。

opacity屬性設置元素的不透明級別，從0.0（完全透明）到1.0（完全不透明）蝶缀。

chap2-60.html

<head>
<style type="text/css">
h1:hover{color: red} </style>
</head>
<body>
<h1 id="p1">請從下面的例子中選擇一個值辆苔，以改變此元素的不透明度。</h1>
<select onchange="changeopacity(this)" size="5">
    <option />0
    <option />0.2
    <option />0.5
    <option />0.8
    <option selected/>1
    </select>
<script>
    function changeopacity(x) {
        var opacity=x.options[x.selectedIndex].text;
        document.getElementById("p1").style.opacity=opacity;
    }
    </script>
</body>

設置表格樣式

有不少屬性可用來為table元素設置獨特樣式扼劈。

屬性 說明
border-collapse 設置相鄰單元格的邊框處理樣式
border-spacing 設置相鄰單元格邊框的間距
caption-side 設置表格標題的位置
empty-cells 設置空單元格是否顯示邊框
table-layout 指定表格的布局樣式

border-collapse屬性用來控制table元素相鄰單元格邊框的樣式驻啤。默認情況下，瀏覽器為表格繪制了一個邊框荐吵，同時還為每個單元格繪制了邊框骑冗，顯示出來就是雙邊框。

border-collapse屬性值有:

  • separate：默認值先煎。邊框會被分開贼涩。不會忽略border-spacing和empty-cells屬性。

  • collapse：如果可能薯蝎，邊框會合并為一個單一的邊框遥倦。會忽略border-spacing和empty-cells屬性。

當border-collapse屬性值為separate時，border-spacing：用于定義相鄰元素邊框的間距袒哥。語法為：

border-spacing：<length1>  //定義的是水平和垂直間距缩筛。
border-spacing：<length1> <length2>  //第一個設置水平間距，而第二個設置垂直間距堡称。

chap2-61.html

<head><style type="text/css">table{border-collapse:collapse} 
th,td{padding: 2px} </style>
</head>
<body>
<table border="1" id="t1">
    <tr><th>Rank</th><th>Name</th><th>Color</th><th>Size</th></tr>
    <tr><th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td></tr>
    <tr><th>2nd Favorite:</th><td>Oranges</td><td>Orange</td><td>Large</td></tr>
    </table>
<p><button>collapse</button><button>separate</button></p>
<script>
    var buttons=document.getElementsByTagName("button");
    for(var i=0;i<buttons.length;i++){
        buttons[i].onclick=function (e) {
            document.getElementById("t1").style.borderCollapse=e.target.innerHTML;
        if(i=1){
            document.getElementById("t1").style.borderSpacing="10px 20px";
        }
        }
            }
</script>
</body>

empty-cells屬性設置是否顯示表格中的空單元格（僅用于“分離邊框”模式）瞎抛。其值有：

  • hide：不在空單元格周圍繪制邊框。

  • show：在空單元格周圍繪制邊框却紧。默認桐臊。

caption-side屬性設置表格標題的位置。其值有：

  • top：默認值晓殊。把表格標題定位在表格之上断凶。

  • bottom：把表格標題定位在表格之下。

默認情況下巫俺，瀏覽器會根據表格每一列中最寬的單元格設置整列單元格的寬度懒浮。這就意味著在能夠確定頁面布局之前，瀏覽器必須獲取所有的表格內容识藤。

table-layout屬性用來顯示表格單元格砚著、行、列的算法規(guī)則痴昧。其值有：

  • fixed：固定表格布局稽穆，水平布局僅取決于表格寬度、列寬度赶撰、表格邊框寬度舌镶、單元格間距，而與單元格的內容無關豪娜。與自動表格布局相比餐胀，允許瀏覽器更快地對表格進行布局。

  • auto：自動表格布局瘤载，列的寬度是由列單元格中沒有折行的最寬的內容設定的否灾。此算法有時會較慢，這是由于它需要在確定最終的布局之前訪問表格中所有的內容鸣奔。

chap2-62.html

<head>
<style type="text/css">
table{border-collapse:separate;empty-cells: show;border-spacing: 10px;width: 300px;table-layout: auto}
caption{caption-side: top;font-weight: bold}
th,td{padding: 2px}
</style>
</head>
<body>
<table border="1">
    <caption>Table 1. The fruits I Like</caption>
    <tr>
        <th>Rank</th><th>Name</th><th>Color</th><th>Size</th>
    </tr>
    <tr>
        <th>Favorite:</th><td>Apples</td><td>Green</td><td>Medium</td>
    </tr>
    <tr>
        <th>2nd Favorite:</th><td>Oranges</td><td>Orange</td><td></td>
    </tr>
    </table>
</body>

設置列表樣式

list-style屬性專門用來設置列表樣式墨技，語法為：

list-style: <list-style-type> <list-style-position> <list-style-image>

list-style-type屬性設置列表項標記的類型。

list-style-type值 說明 list-style-type值 說明
none 無標記 disc 實心圓挎狸，默認
circle 空心圓 square 實心方塊
decimal 數字 decimal-leading-zero 0開頭的數字標記（01,02,…）
lower-roman 小寫羅馬數字（i, ii, …） upper-roman 大寫羅馬數字(I, II,…)
lower-alpha 小寫英文字母 upper-alpha 大寫英文字母

list-style-position屬性設置在何處放置列表項標記扣汪。其值有：

  • inside：列表項目標記放置在文本以內，且環(huán)繞文本根據標記對齊锨匆。

  • outside：默認值崭别。保持標記位于文本的左側。列表項目標記放置在文本以外，且環(huán)繞文本不根據標記對齊茅主。

list-style-image屬性可以將圖像用做列表標記舞痰。

chap2-63.html

<head>
    <meta charset="UTF-8">
    <title>chap2-63</title>
    <style type="text/css">
        ul.inside{list-style-position: inside;list-style-image: url("pic/CSS3.jpg");}
        ul.outside{list-style-position: outside;list-style-image: url("pic/CSS3.jpg");}
        li{background-color: lightgray}
    </style>
    </head>
<body>
<p>該列表的 list-style-position 的值是 "inside"：</p>
<ul class="inside">
    <li>Earl Grey Tea - 一種黑顏色的茶</li>
    <li>Jasmine Tea - 一種神奇的“全功能”茶</li>
    <li>Honeybush Tea - 一種令人愉快的果味茶</li>
    </ul>
<p>該列表的 list-style-position 的值是 "outside"：</p>
<ul class="outside">
    <li>Earl Grey Tea - 一種黑顏色的茶</li>
    <li>Jasmine Tea - 一種神奇的“全功能”茶</li>
    <li>Honeybush Tea - 一種令人愉快的果味茶</li>
    </ul>
</body>

設置光標樣式

cursor屬性用來改變光標的外形。

值 說明 值 說明
url 需使用的自定義光標的 URL。 ne-resize 此光標指示矩形框的邊緣可被向上及向右移動（北/東）。
default 默認光標（通常是一個箭頭） nw-resize 此光標指示矩形框的邊緣可被向上及向左移動（北/西）瓶殃。
auto 默認射赛。瀏覽器設置的光標。 n-resize 此光標指示矩形框的邊緣可被向上（北）移動论衍。
crosshair 光標呈現為十字線瑞佩。 se-resize 此光標指示矩形框的邊緣可被向下及向右移動（南/東）。
pointer 光標呈現為指示鏈接的指針（一只手） sw-resize 此光標指示矩形框的邊緣可被向下及向左移動（南/西）坯台。
move 此光標指示某對象可被移動炬丸。 s-resize 此光標指示矩形框的邊緣可被向下移動（南）。
e-resize 此光標指示矩形框的邊緣可被向右（東）移動蜒蕾。 w-resize 此光標指示矩形框的邊緣可被向左移動（西）稠炬。
text 此光標指示文本。 wait 此光標指示程序正忙（通常是一只表或沙漏）咪啡。
help 此光標指示可用的幫助（通常是一個問號或一個氣球）首启。

chap2-64.html

<head>
<style type="text/css">
span{display: block;width: 300px;height: 50px;line-height:50px;border:medium solid black;text-align:center;margin:20px;float: left}
</style>
</head>
<body>
<p>請把鼠標移動到單詞上，可以看到鼠標指針發(fā)生變化：</p>
<span style="cursor:auto">Auto</span>
<span style="cursor:crosshair">Crosshair</span>
<span style="cursor:default">Default</span>
<span style="cursor:pointer">Pointer</span>
<span style="cursor:move">Move</span>
<span style="cursor:e-resize">e-resize</span>
<span style="cursor:ne-resize">ne-resize</span>
<span style="cursor:nw-resize">nw-resize</span>
<span style="cursor:n-resize">n-resize</span>
<span style="cursor:se-resize">se-resize</span>
<span style="cursor:sw-resize">sw-resize</span>
<span style="cursor:s-resize">s-resize</span>
<span style="cursor:w-resize">w-resize</span>
<span style="cursor:text">text</span>
<span style="cursor:wait">wait</span>
<span style="cursor:help">help</span>
</body>

JavaScript

基礎語法

詞法結構

JavaScript是區(qū)分大小寫的語言撤摸。

JavaScript支持2種格式的注釋：

// 這里是單行注釋
/* 這里是一段注釋(這里的注釋可以連寫多行) */

JavaScript中毅桃，標識符用來對變量和函數進行命名。標識符必須以字母准夷、下劃線（_）或美元符（$）開始钥飞。后續(xù)的字符可以是字母、數字衫嵌、下劃線或美元符读宙。

JavaScript保留字不能作為標記符，例如：break楔绞、delete论悴、function、return墓律、typeof膀估、case、do耻讽、if察纯、switch、var、catch饼记。

JavaScript使用分號（;）將語句分隔開香伴。

類型、變量具则、運算符和表達式

JavaScript的數據類型分為2類：

  • 原始類型：包括數字即纲、字符串和布爾值。JavaScript中有兩個特殊的原始值：null(空)和undefined(未定義)博肋。
  • 對象類型：是屬性的集合低斋，每個屬性都由“名/值對”構成。

數字匪凡、算術運算符

數字：包括整數膊畴、浮點數。

算術運算符：加（+）病游、減（-）唇跨、乘（*）、除（/）衬衬、求余數（%）买猖、遞增（++）、遞減（--）滋尉、按位異或（^）政勃。

  • 注意：++和--運算符的返回值依賴于它相對于操作數的位置。當運算符在操作數之前兼砖，稱為“前增量”運算符奸远，它對操作數進行增量計算，并返回計算后的值讽挟。當運算符在操作數之后懒叛，稱為“后增量”運算符，它對操作數進行增量計算耽梅，但返回未做增量計算的值薛窥。

    var i=1,j=++i;  //i和j的值都是2
var i=1,j=i++;  //i是2，j是1

  • ^如果不是出現在正則表達式中眼姐，那么其代表按位異或運算符诅迷，也可以充當二進制算法。

  • 異或的算法為相同輸出0众旗，不同輸出1罢杉。

    a^b a的二進制 b的二進制 運算結果二進制 運算結果十進制
    6^8 0110(三位，不夠前面加0) 1000 1110 14
    20^31 10100 11111 01011 11

數學常量

常量 說明
Math.E 常量e贡歧，自然對數的底數
Math.LN10 10的自然對數
Math.LN2 2的自然對數
Math.LOG10E e以10為底的對數
Math.LOG2E e以2為底的對數
Math.PI 常量π
Math.SQRT1_2 2的平方根的倒數
Math.SQRT2 2的平方根

數學函數

函數 說明 函數 說明
Math.abs(x) 返回x的絕對值 Math.acos(x) 返回x的反余弦值
Math.asin(x) 返回x的反正弦值 Math.atan(x) 返回x的反正切值
Math.atan2(y,x) 返回從X軸到指定點的角度,y為點的Y坐標滩租，x為點的X坐標 Math.ceil(x) 返回大于或等于x的最接近的整數
Math.cos(x) 返回x的余弦值 Math.exp(x) 返回e的x次方
Math.floor(x) 返回小于或等于x的最接近的整數 Math.log(x) 返回x的自然對數
Math.max(args…) 返回參數中最大的值赋秀，參數中可以有多個值 Math.min(args…) 返回參數中最小的值，參數中可以有多個值
Math.pow(x,y) 返回x的y次方 Math.random() 返回一個在[0.0,1)之間的隨機數
Math.round(x) 返回最接近x的整數 Math.sin(x) 返回x的正弦值
Math.sqrt(x) 返回x的平方根 Math.tan(x) 返回x的正切值

數字相關方法

方法 說明
n.toExponential(digits) 返回以指數記數法表示的n的字符串格式律想，小數點前有一個數字猎莲，小數點后有digits個數字
n.toFixed(digits) 返回n的字符串格式，不使用指數記數法技即，在小數點后有指定的digits個數字
n.toLocaleString() 將n轉換為本地格式的字符串
n.toPrecision(prec) 返回一個包含prec位有效數字的數字字符串著洼，如果prec足夠大，包括當前數字的所有整數部分而叼，則返回值與toFixed方法一致身笤。其他情況下，將使用指數記數法澈歉，小數點前有一個數字展鸡，小數點后有prec-1個數字
n.toString() 將n轉換為字符串
Number(object) 把對象的值轉換為數字屿衅。如果參數是Date對象埃难，Number()返回從1970年1月1日至今的毫秒數。如果對象的值無法轉換為數字涤久，那么Number()函數返回NaN涡尘。

字符串

由單引號或雙引號括起來的字符序列。由單引號定界的字符串中可以包含雙引號响迂，由雙引號定界的字符串中也可以包含單引號考抄。

  • 注意：當使用單引號來定界字符串時，需注意英文中的縮寫（can't）蔗彤。因為撇號和單引號是同一個字符川梅，所以必須使用轉義字符（\）來轉義，例如'can\'t'

JavaScript的內置功能之一就是字符串的連接然遏。連接運算符為“+”贫途。例如：

var msg="hello, "+"world";   //生成字符串“hello, world”

length屬性可以確定一個字符串的長度，例如：msg.length

JavaScript中用“>”或“<”操作符比較字符串大小時待侵，它們只會比較這些字符的Unicode編碼丢早，而不考慮本地的順序。

字符串類型的大小判斷是一個字符和一個字符的比較秧倾，只要有字符不同就停止繼續(xù)判斷并返回比較結果怨酝。例如："aBc"<"ab";

localeCompare方法可以實現漢字按拼音排序。

字符集 范圍 Unicode編碼（16進制） Unicode編碼（10進制）
數字 0~9 30~39 48~57
大寫字母 A~Z 41~5A 65~90
小寫字母 a~z 61~7A 97~122
基本漢字 一~龥 4E00~9FA5 19968~40869

字符串相關方法

方法 說明 方法 說明
s.charAt(n) 返回字符串s的第n個字符那先，從0開始 s.concat(value,…) 返回由每個參數連接為s而組成的新的字符串农猬。 s="hello"; s.concat("","world","!");
s.indexOf(s1 [,start]) 返回在s中start位置之后，s1第一次出現的位置售淡，如果沒有找到則返回-1 s.lastIndexOf(s1[,start]) 返回s1在字符串s的start位置之前最后一次出現的位置盛险，如果沒有找到則返回-1瞄摊。其從s的結尾開始搜索到開頭
s.trim() 去掉開頭和結尾處的空白字符 s.match(s1) 在字符串內檢索指定的值,若找到，則返回s1苦掘，若沒有找到换帜，則返回null
s.replace(s1,s2) 用于在s中用s2替換s1 s.search(s1) 返回第一個s1相匹配的子串的起始位置。如果沒有找到任何匹配的子串鹤啡，則返回 -1惯驼。
s.slice(start,end) 返回從start位置開始哲戚，直到但不包含end位置的所有字符 s.split(delimiter) 通過delimiter將s切分成一個數組汁雷。
s.substr(start,length) 返回從start位置開始的length個字符 s.substring(start,end) 返回從start位置開始，直到但不包含end位置的所有字符
s.toLocaleLowerCase() 以本地化的方式將s轉為小寫 s.toLocaleUpperCase() 以本地化的方式將s轉為大寫
s.toLowerCase() 將s轉為小寫 s.toUpperCase() 將s轉為大寫
s.localeCompare(s1[,locale]) 若s比s1小榛搔，返回一個小于0的數抖部，若s比s1大说贝，返回一個大于0的數，若相同慎颗，返回0乡恕。可用于漢字按拼音排序的規(guī)則俯萎，例如"張三">"李四"傲宜。注意：Chrome瀏覽器在使用時需用： s.localeCompare(s1,"zh")。locale包含一種或多種語言或區(qū)域設置標記的區(qū)域設置字符串數組夫啊。如果包含多個區(qū)域設置字符串函卒，請以降序優(yōu)先級對它們進行排列，確保首個條目為首選區(qū)域位置撇眯。如果省略此參數报嵌，則使用JavaScript運行時的默認區(qū)域設置。

布爾值熊榛、邏輯運算符锚国、關系運算符、null来候、undefined

布爾值：這個類型只有兩個值跷叉，保留字true和false。

邏輯運算符：&&（邏輯與）营搅、||（邏輯或）云挟、!（邏輯非）

關系運算符：==（等于）、<（小于）转质、>（大于）园欣、<=（小于等于）、>=（大于等于）休蟹、!=（不等于）

null是JavaScript語言的關鍵字沸枯，表示一個特殊值日矫，常用來描述“空值”。

undefined是變量的一種取值绑榴，表明變量沒有初始化哪轿。如果函數沒有返回值，則返回undefined翔怎。

變量

在JavaScript中窃诉，使用一個變量之前應先聲明。變量是用關鍵字var來聲明的赤套，例如：

var i,j;        //通過一個var聲明多個變量
var i=0,j=0;    //可以將變量的初始賦值和變量聲明合寫在一起

變量的作用域：

  • 全局變量：聲明在函數外部的變量

  • 局部變量：聲明在函數內部的變量飘痛。函數內聲明的所有變量在函數體內始終是可見的。這意味著變量在聲明之前甚至已經可見容握。JavaScript的這個特性被非正式地稱為聲明提前（hoisting）宣脉，例如：

    var scope="global";
function f() {
    console.log(scope);     //輸出“undefined”，而不是“global”
    var scope="local";      //變量在這里賦初始值剔氏，但變量本身在函數體內任何地方均是有定義的
    console.log(scope);     //輸出“l(fā)ocal”
    }

賦值

賦值表達式：JavaScript使用“=”運算符來給變量或者屬性賦值塑猖。

帶操作的賦值運算：

運算符 示例 等價于
+= a+=b a=a+b
-= a-=b a=a-b
*= a*=b a=a*b
/= a/=b a=a/b
%= a%=b a=a%b
^= a^=b a=a^b

語句

條件語句

通過判斷指定表達式的值來決定執(zhí)行還是跳過某些語句。JavaScript中基本的條件語句有2種：

  • if語句介蛉，其有兩種形式：

    // 1
if (條件)
  語句1;
[else
 語句2;]

//2
if (條件){
    語句塊1;
    }
[else{
    語句塊2萌庆；
    }]

chap3-1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chap3-1</title>
    </head>
<body>
<form>
    <span>The Grade:</span><input type="text" id="Grade">
    </form>
<script>
    document.getElementById("Grade").onkeydown=function (e) {
        if(e.keyCode==13){
            if(e.target.value>=60)
                alert("成績及格");
            else
                alert("成績不及格");
        }
    }
    </script>
</body>
</html>

  • switch語句溶褪，其形式為：

    switch (expression){
    case e1:    //如果expression==e1币旧，則執(zhí)行語句塊1
        語句塊1;
        break;  //停止執(zhí)行switch語句
    case e2:    //如果expression==e2，則執(zhí)行語句塊2
        語句塊2;
        break;
    case en:    //如果expression==en猿妈，則執(zhí)行語句塊n
        語句塊n;
        break;
    default:    //如果所有的條件都不匹配吹菱，則執(zhí)行語句塊n+1
        語句塊n+1;
        break;
        }

    chap3-2.html

    <body><form><span>The Grade:</span><input type="text" id="Grade"></form>
<script>document.getElementById("Grade").onkeydown=function (e) {
        if(e.keyCode==13){
            var Grank=Math.floor(document.getElementById("Grade").value/10);
            switch (Grank){
                case 10:
                    alert("優(yōu)秀");
                    break;
                case 9:
                    alert("優(yōu)秀");
                    break;
                case 8:
                    alert("良好");
                    break;
                case 7:
                    alert("中等");
                    break;
                case 6:
                    alert("及格");
                    break;
                default:
                    alert("不及格");
                    break;
            }}} </script></body>

循環(huán)語句

可以讓一部分代碼重復執(zhí)行。JavaScript中有4種循環(huán)語句：

  • while語句

    // 1
while (條件)
    語句;
// 2
while (條件){
    語句塊;
    }

    chap3-3.html

    <body>
<form>
    <span>階乘:</span><input type="text" id="jc">
    </form>
<script>
    var o=document.getElementById("jc");
    o.onkeydown=function (e) {
        if(e.keyCode==13){
            var m=n=o.value;
            var result=1;
            while(n>0){
                result*=n;
                n=n-1;
            }
            alert(m+"!="+result);
        }
    }
    </script>
</body>
</html>

  • do/while語句

    // 1
do
    語句;
    while(條件);
// 2
do{
    語句塊;
    }while(條件);

    chap3-4.html

    <body>
<form>
    <span>階乘:</span><input type="text" id="jc">
    </form>
<script>
    var o=document.getElementById("jc");
    o.onkeydown=function (e) {
        if(e.keyCode==13){
            var m=n=o.value;
            var result=1;
            do{
                result*=n;
                n--;
            }while(n>0);
            alert(m+"!="+result);
        }
    }
    </script>
</body>

  • for語句

    for(initialize;test;increment){
    statements;
    }

    chap3-5.html

    <body>
<form>
    <span>階乘:</span><input type="text" id="jc">
    </form>
<script>
    var o=document.getElementById("jc");
    o.onkeydown=function (e) {
        if(e.keyCode==13){
            var m=o.value;
            var result=1;
            for(var i=1;i<=m;i++){
                result*=i;
            }
            alert(m+"!="+result);
        }
    }
    </script>
</body>

  • for/in語句

    for(variable in object){
    statements;
    }

    chap3-6.html

    <script>
    var a="1,2,3,4,5";
    var arr=a.split(",");
    var sum=0;
    for(var i in arr){
        sum+=Number(arr[i]);
    }
    alert(a+"中值的和為："+sum);
</script>

跳轉語句

可以使得JavaScript的執(zhí)行從一個位置跳轉到另一個位置彭则。

  • break語句是跳轉到循環(huán)或者其他語句的結束鳍刷。
  • continue語句是終止本次循環(huán)的執(zhí)行并開始下一次循環(huán)的執(zhí)行。

chap3-7.html

<script>
    var sumb=sumc=0;
    for(var i=1;i<=100;i++){
        sumb+=i;
        if(i==50)
            break;
    }
    for(var i=1;i<=100;i++){
        if(i==50)
            continue;
        sumc+=i;
    }
    alert("break的結果:"+sumb+"\n"+"continue的結果:"+sumc);
</script>

標簽語句

標簽是由語句前的標識符和冒號組成：identifier:statement

通過給語句定義標簽俯抖，就可以在程序的任何地方通過標簽名引用這條語句输瓜。break和continue是JavaScript中唯一可以使用語句標簽的語句。

break|continue identifier;

mainloop: while(j<=100){
    j++;
    continue mainloop;  //跳轉到下一次循環(huán)
    }
alert("j的值為:"+j);

mainloop: while(j<=100){
   j++;
   break mainloop;
   }
alert("j的值為:"+j);   //break語句跳轉至此處

注意：不管continue語句帶不帶標簽芬萍，它只能在循環(huán)體內使用尤揣。

return語句

可以指定函數調用后的返回值。return expression;

function squre(x) {
   return x*x;
   }
document.writeln("2的平方等于:"+squre(2)+"<br>");

異常處理語句

所謂異常（exception）是當發(fā)生了某種異常情況或錯誤時產生的一個信號柬祠。拋出異常就是用信號通知發(fā)生了錯誤或異常情況北戏。捕獲異常是指處理這個信號，即采取必要的手段從異常中恢復漫蛔。

throw語句可以拋出異常：throw expression;

try/catch/finally語句可以捕獲異常：

try{
    //通常來講嗜愈，這里的代碼會從頭執(zhí)行到尾而不會產生問題旧蛾，但有時會拋出一個異常，要么是由throw語句直接拋出異常蠕嫁，要么是通過調用一個方法間接拋出異常
    }
catch(e){
    //當且僅當try語句塊拋出了異常锨天，才會執(zhí)行這里的代碼。這里可以通過局部變量e來獲得對Error對象或者拋出的其它值的引用剃毒，這里的代碼塊可以基于某種原因處理這個異常绍绘，也可以忽略這個異常，還可以通過throw語句重新拋出異常迟赃。
    }
finally{
    /*不管try語句塊是否拋出了異常陪拘，這里的邏輯總是會執(zhí)行，終止try語句塊的方式有：
    1）正常終止纤壁，執(zhí)行完語句塊的最后一條語句
    2）通過break左刽、continue或return語句終止
    3）拋出一個異常，異常被catch從句捕獲
    4）拋出一個異常酌媒，異常未被捕獲欠痴，繼續(xù)向上傳播
    */
    }

chap3-8.html

<script>
    function jc(x) {
        if(x<0||x>10) throw new Error("x的值不能為負");
        for(var res=1;x>1;res*=x,x--);
        return res;
    }
    var grade=Number(prompt("請輸入一個正整數：",""));
    try{
       alert(grade+"!="+jc(grade));
    }
    catch (e){
        alert(e);
        var grade=Number(prompt("請輸入一個正整數：",""));
        if(grade>10) throw new Error("x的值不能超過10");
        alert(grade+"!="+jc(grade));
    }
    finally {
        alert("x的范圍為1-10之間");
    }
</script>

數組

數組是值的有序集合。每個值叫做一個元素秒咨，而每個元素在數組中有一個位置喇辽，以數字表示，稱為索引雨席。

JavaScript數組是無類型的：數組元素可以是任意類型菩咨，并且同一個數組中的不同元素也可能有不同的類型。

創(chuàng)建

創(chuàng)建數組有2種方式：

  • 數組直接量：

    var empty=[];   //沒有元素的數組
var primes=[1,2,3,4,5];     //有5個數值的數組
var misc=[1.1,true,"a"];    //3個不同類型的元素
var base=1024;
var table=[base,base+1,base+2];     //值可以是表達式
var b=[{x:1,y:2},primes];   //值還可以對象或其它數組

    如果省略數組直接量中的某個值陡厘，省略的元素將被賦予undefined值：

    var count=[1,,3];   //數組有3個元素抽米，中間的那個元素值為undefined
var undefs=[,,];    //數組有2個元素，都是undefined

    數組直接量的語法允許有可選的結尾的逗號糙置，故[,,]只有兩個元素云茸，而非三個。

  • 調用構造函數Array()谤饭，其有2種形式：

    • 調用時沒有參數：var a=new Array();

      該方法創(chuàng)建一個沒有任何元素的空數組标捺，等同于數組直接量[]。

    • 調用時有一個數值參數揉抵，它指定長度：var a=new Array(10);

      當預先知道所需元素個數時亡容，這種形式的Array()構造函數可以用來預分配一個數組空間。此時數組中沒有存儲值功舀，甚至數組的索引屬性“0”萍倡、“1”等還未定義。

      我們可以用new Array()顯示指定兩個或多個數組元素或者數組的一個非數值元素：

      var a=new Array(5,4,"testing");

讀寫

數組元素的讀與寫：使用[]操作符來訪問數組中的一個元素辟汰。

var a=["hello"];    //從一個元素的數組開始
var value=a[0];     //讀第0個元素
a[1]=3.14;          //寫第1個元素
i=2;
a[i]=3;             //寫第2個元素
document.write(a.length);

JavaScript中數組的特別之處在于列敲，當使用小于232的非負整數作為索引時阱佛，數組會自動維護其length屬性值，如上戴而，創(chuàng)建僅有一個元素的數組凑术，然后在索引1和2處分別進行賦值，則數組的長度變?yōu)?code>3所意。

注意：JavaScript中數組索引僅僅是對象屬性名的一種特殊類型淮逊，這意味著數組沒有“越界”錯誤的概念。當試圖查詢對象中不存在的屬性時扶踊，不會報錯泄鹏，只會得到undefined值抒蚜。

稀疏數組

就是包含從0開始的不連續(xù)索引的數組洗显。稀疏數組length屬性大于元素的個數皂甘∮〔可以用Array()構造函數或簡單地指定數組的索引值大于當前的數組長度來創(chuàng)建稀疏數組。

a=new Array(5);     //數組沒有元素魂毁，但是a.length是5
a[1000]=0;      //賦值添加一個元素洪唐，但是設置length為1001

足夠稀疏的數組通常在實現上比稠密的數組更慢淆党，內存利用率更高尺锚，在這樣的數組中查找元素的時間更長珠闰。

元素的添加

數組元素的添加有3種方式：

  • 為新索引賦值：

    var a=[];   //開始是一個空數組
a[0]="zero";    //然后向其中添加元素
a[1]="one";

  • 使用push()方法在數組末尾添加一個或多個元素：

    var a=[];   //開始是一個空數組
a.push("zero");    //在末尾添加一個元素
a.push("one","two");    //在末尾添加兩個元素

  • 使用unshift()方法在數組頭部添加一個或多個元素：

    var a=[];   //開始是一個空數組
a.unshift("two");    //在頭部添加一個元素
a.unshift("zero","one");    //在頭部添加兩個元素

元素的刪除

數組元素的刪除有3種方式：

  • 使用delete運算符刪除：

    對一個數組使用delete不會修改數組的length屬性，也不會將元素從高索引處移下來填充已刪除屬性留下的空白瘫辩。

    var a=[1,2,3];
delete a[1];    //a在索引1的位置不再有元素

  • 使用pop()方法刪除數組末尾的元素：

    該方法減少數組的長度伏嗜。

    var a=[1,2,3];
a.pop();    //刪除a尾部的元素

  • 使用shift()方法在數組頭部刪除一個或多個元素：

    該方法減少數組的長度，并將所有隨后的元素下移一個位置來填補數組頭部的空缺杭朱。

    var a=[1,2,3];
a.shift();    //刪除a頭部的元素

多維數組

JavaScript不支持真正的多維數組阅仔，但可以用數組的數組來近似吹散。

chap3-9.html

<head><style>
span{display: inline-block;width: 80px;height: 60px;font-size: xx-large}</style>
</head>
<body>
<script>
    var table=new Array(10);    //表格有10行
    for(var i=0;i<table.length;i++)
        table[i]=new Array(10);     //每行有10列
    //初始化數組
    for(var row=0;row<table.length;row++){
        for(var col=0;col<table[row].length;col++){
            table[row][col]=row*col;
        }
    }
    //輸出數組元素值
    for(var row=0;row<table.length;row++){
        for(var col=0;col<table[row].length;col++){
            document.write("<span>"+table[row][col]+"</span>");
        }
        document.write("<br>");
    }
    </script>
</body>

數組方法

join()：將數組中所有元素都轉化為字符串并連接在一起弧械，返回最后生成的字符串】彰瘢可以指定一個可選的字符串在生成的字符串中來分隔數組的各個元素刃唐。如果不指定分隔符，默認使用逗號界轩。

var a=[1,2,3];  //創(chuàng)建一個包含三個元素的數組
var str=a.join();   //str的值為“1画饥，2，3”
str=a.join(" ");    //str的值為“1 2 3”

reverse()：將數組中的元素顛倒順序浊猾，返回逆序的數組抖甘。

var a=[1,2,3];  //創(chuàng)建一個包含三個元素的數組
a.reverse();
for(var i=0;i<a.length;document.write(a[i]+"<br>"),i++);

sort()：將數組中的元素排序并返回排序后的數組，語法為：arrayObject.sort([sortby])

  • 如果調用該方法時沒有使用參數葫慎，將按字母順序對數組中的元素進行排序衔彻，說得更精確點薇宠，是按照字符編碼的順序進行排序。

    var a=["banana","cherry","apple"];
a.sort();
for(var i=0;i<a.length;document.write(a[i]+"<br>"),i++);
var b=[33,4,1111,222];
b.sort();   //輸出結果：1111 222 33 4
for(var i=0;i<b.length;document.write(b[i]+"<br>"),i++);

  • 如果想按照其他標準進行排序艰额，就需要提供比較函數（sortby）澄港，該函數要比較兩個值，然后返回一個用于說明這兩個值的相對順序的數字柄沮。比較函數應該具有兩個參數a和b回梧，其返回值如下：

    • 若a小于b，在排序后的數組中a應該出現在b之前祖搓，則返回一個小于0的值狱意。
    • 若a等于b，則返回0拯欧。
    • 若a大于b髓涯，則返回一個大于0的值。

chap3-10.html

<script>
    var a=["banana","cherry","apple"];
    a.sort();
    for(var i=0;i<a.length;document.write(a[i]+"<br>"),i++);
    var b=[33,4,1111,222];
    b.sort();   //輸出結果：1111 222 33 4
    for(var i=0;i<b.length;document.write(b[i]+"<br>"),i++);
    b.sort(function (m,n) {
        return m-n;     //按由小到大的順序排列
    });
    for(var i=0;i<b.length;document.write(b[i]+"<br>"),i++);
</script>

concat()：創(chuàng)建并返回一個新數組哈扮，它的元素包括調用concat()的原始數組的元素和concat()的每個參數纬纪。如果這些參數中的任何一個自身是數組，則連接的是數組的元素滑肉，而非數組本身包各。

注意：concat()不會遞歸扁平化數組的數組。concat()也不會修改調用的數組靶庙。

chap3-11.html

<head>
    <meta charset="UTF-8">
    <title>chap3-11</title>
    <style>
        span{display: inline-block;width: 80px;height: 60px;font-size: xx-large}
        span#s1{display: block}
    </style>
    </head>
<body>
<script>
    var a=[1,2,3];
    var b=a.concat(4,5);    //返回[1,2,3,4,5]
    b=a.concat([4,5],[6,7]);      //返回[1,2,3,4,5,6,7]
    b=a.concat([4,[5,[6,7]]]);      //返回[1,2,3,4,[5,[6,7]]]
    for(var i=0;i<b.length;i++){
        if(Array.isArray(b[i]))
            for(var j=0;j<b[i].length;document.write("<span>"+b[i][j]+"</span>"),j++);
        else
            document.write("<span id='s1'>"+b[i]+"</span>");
    }
    </script>
</body>

slice()方法返回一個新的數組问畅，包含從start到end （不包括該元素）的arrayObject中的元素。其語法格式為：

arrayObject.slice(start,end)

  • start：必需六荒。規(guī)定從何處開始選取护姆。如果是負數，那么它規(guī)定從數組尾部開始算起的位置掏击。也就是說卵皂，-1指最后一個元素，-2指倒數第二個元素砚亭，以此類推灯变。

  • end：可選。規(guī)定從何處結束選取捅膘。該參數是數組片斷結束處的數組下標添祸。如果沒有指定該參數，那么切分的數組包含從start到數組結束的所有元素寻仗。如果這個參數是負數刃泌，那么它規(guī)定的是從數組尾部開始算起的元素。

var a=[1,2,3,4,5];
document.write(a.slice(0,3)+"<br>");    //返回[1，2耙替，3]
document.write(a.slice(3)+"<br>");      //返回[4鲤遥，5]
document.write(a.slice(1,-1)+"<br>");   //返回[2，3林艘，4]

splice()方法向/從數組中添加/刪除項目盖奈，然后返回被刪除的項目。其語法格式為：

arrayObject.splice(index,howmany,item1,.....,itemX)

  • index：必需狐援。整數钢坦，規(guī)定添加/刪除項目的位置，使用負數可從數組結尾處規(guī)定位置啥酱。

  • howmany：必需爹凹。要刪除的項目數量。如果設置為0镶殷，則不會刪除項目禾酱。

  • item1,…,itemX：可選。向數組添加的新項目绘趋。

  • splice()方法可刪除從index處開始的零個或多個元素颤陶，并且用參數列表中聲明的一個或多個值來替換那些被刪除的元素。

  • 如果從arrayObject中刪除了元素陷遮，則返回的是含有被刪除的元素的數組滓走。

chap3-12.html

<script>
    var a=[1,2,3,4,5];
    document.write(a.slice(0,3)+"<br>");    //返回[1，2帽馋，3]
    document.write(a.slice(3)+"<br>");      //返回[4搅方，5]
    document.write(a.slice(1,-1)+"<br>");   //返回[2，3绽族，4]
    a.splice(2,0,6);
    document.write(a+"<br>");   //返回[1,2,6,3,4,5]
    a.splice(2,1);
    document.write(a+"<br>");   //返回[1,2,3,4,5]
    a.splice(2,1,6);
    document.write(a+"<br>");   //返回[1,2,6,4,5]
    a.splice(2,3,3);
    document.write(a+"<br>");   //返回[1,2,3]
    a.splice(3,0,4,5);
    document.write(a+"<br>");   //返回[1,2,3,4,5]
</script>

函數

函數是這樣的一段JavaScript代碼姨涡，它只定義一次，但可能被執(zhí)行或調用任意次吧慢。

JavaScript函數是參數化的：函數的定義會包括一個稱為形參（parameter）的標識符列表涛漂，這些參數在函數體中像局部變量一樣工作。函數調用會為形參提供實參（argument）的值娄蔼。函數使用它們實參的值來計算返回值怖喻，成為該函數調用表達式的值。

除了實參之外岁诉，每次調用還會擁有另一個值，即本次調用的上下文（context）跋选，這就是this關鍵字的值涕癣。如果函數掛載在一個對象上，作為對象的一個屬性，就稱它為對象的方法坠韩。當通過這個對象來調用函數時距潘，該對象就是此次調用的上下文，也就是該函數的this的值只搁。

JavaScript的函數可以嵌套在其他函數中定義音比，這樣就構成了一個閉包（closure）。

定義

函數使用function關鍵字來定義氢惋，它可以用在：

  • 函數聲明語句

    在函數聲明語句中：

    • function關鍵字后的函數名稱是函數聲明語句必需的部分洞翩。
    • 一對圓括號，其中包含由0個或者多個用逗號隔開的形參組成的列表焰望。
    • 一對花括號骚亿，其中包含0條或多條JavaScript語句。

    這些語句構成了函數體熊赖，一旦調用函數来屠，就會執(zhí)行這些語句。

    function jc(x) {
    var result=1;
    for(var i=1;i<=x;i++){
        result*=i;
    }
    return result;
    }
var a=Number(prompt("請輸入一個正整數：",""));
document.write(jc(a)+"<br>");

  • 函數定義表達式

    對于函數定義表達式來說震鹉，函數名稱是可選的俱笛，如果存在旁仿，該名字只存在于函數體中汰瘫，并指代該函數對象本身。

    var square=function(x) {return x*x;};   //定義時函數名稱省略
document.write(square(a)+"<br>");       //調用時使用變量名稱（實參）形式
var f=function fact(x) {                //定義時可以包含函數名稱
    if (x<=1)
        return 1;
    else
        return x*fact(x-1);
        }
document.write(f(a)+"<br>");            //調用時使用變量名稱（實參）形式

如同變量责静，函數聲明語句“被提前”到外部腳本或外部函數作用域的頂部墨缘，所以以這種方式聲明的函數星虹，可以被在它定義之前出現的代碼所調用。

但是镊讼，對于函數定義表達式而言宽涌，就另當別論了，為了調用一個函數蝶棋，必須要能引用它卸亮，而要使用一個以表達式方式定義的函數之前，必須把它賦值給一個變量玩裙。變量的聲明提前了兼贸，但給變量賦值是不會提前的，所以吃溅，以表達式方式定義的函數在定義之前無法調用溶诞。

chap3-13.html

<script>
    var a=Number(prompt("請輸入一個正整數：",""));
    document.write(jc(a)+"<br>");
    function jc(x) {
        var result=1;
        for(var i=1;i<=x;i++){
            result*=i;
        }
        return result;
    }
    var square=function(x) {return x*x;};   //定義時函數名稱省略
    document.write(square(a)+"<br>");       //調用時使用變量名稱（實參）形式
    var f=function fact(x) {                //定義時可以包含函數名稱
        if (x<=1)
            return 1;
        else
            return x*fact(x-1);
    }
    document.write(f(a)+"<br>");            //調用時使用變量名稱（實參）形式
</script>

調用

有4種方式來調用JavaScript函數：

  • 作為函數調用：var a=jc(10);

  • 作為方法調用：var b=Math.floor(3.2);

    方法調用和函數調用有一個重要的區(qū)別，即：調用上下文决侈。this關鍵字只能出現在函數中螺垢，當然在全局作用域中是個例外。

    全局作用域中this指向全局對象（全局對象在瀏覽器這個環(huán)境中指window）。

    如果this出現在函數中枉圃，其指向的依據就是函數的執(zhí)行環(huán)境而不是聲明環(huán)境功茴。換句話說，this永遠指向所在函數的所有者孽亲，當沒有顯示的所有者的時候坎穿，那么this指向全局對象。

    各種情況下的this的具體指向：

    • 在全局作用域中this指向為全局對象window返劲。document.write(this+ "<br>");

    • 函數作為某個對象的成員方法調用時this指向該對象玲昧。

      chap3-14.js

      var name="zhangsan";
var obj={
    name:"lizi",
    getName:function () {
        document.write(this.name + "<br>");
    }
    }
obj.getName();      //輸出lizi

    • 函數作為函數直接使用時this指向全局對象。

      chap3-14.js

      var name="zhangsan";
var obj={
    name:"lizi",
    getName:function () {
        document.write(this.name + "<br>");
    }
    }
var nameGet=obj.getName;
nameGet();          //輸出zhangsan

    • 函數作為構造函數調用時this指向用該構造函數構造出來的新對象旭等。

      chap3-14.js

      var name="zhangsan";
var obj1=function (x,y) {
    this.name=x+y;
    }
obj1.prototype.getName=function () {
    document.write(this.name + "<br>");
    }
var myObj=new obj1("wang","er");
myObj.getName();      //輸出wanger

    • call()酌呆、apply()和bind()方法可以改變函數執(zhí)行時候的this指向。

      function Sister() {
    this.age=18;
    this.sayAge=function () {document.write("Age:"+this.age+ "<br>");}
    }
function Brother() {
    this.age=25;
    this.sayAge=function () {document.write("Age:"+this.age+ "<br>");}
    }
var sis=new Sister();
var bro=new Brother();
sis.sayAge.call(bro);   //輸出"Age:25"

  • 作為構造函數調用

    如果函數或者方法調用之前帶有關鍵字new搔耕，它就構成構造函數調用隙袁。var myObj=new obj1("wang","er");

    構造函數調用創(chuàng)建和初始化一個新的對象myObj，并將這個對象用做其調用上下文弃榨，因此構造函數可以使用this關鍵字來引用這個新創(chuàng)建的對象菩收。myObj對象繼承自構造函數的prototype屬性。

  • 間接調用

    call()和apply()方法可以看做是某個對象的方法鲸睛，通過調用方法的形式來間接調用函數娜饵。

    他們的用途相同，都是在特定的作用域中調用函數官辈。

    接收參數方面不同箱舞，apply()接收兩個參數，一個是函數運行的作用域(this)拳亿，另一個是參數數組晴股。call()方法第一個參數與apply()方法相同，但傳遞給函數的參數必須列舉出來肺魁。

    chap3-14.js

    window.firstName="San";
window.lastName="Zhang";
var myObject={firstName:"my",lastName:"Object"};
function HelloName() {document.write(this.firstName+" "+this.lastName+ "<br>");}
HelloName.call(window);     //輸出"San Zhang"
HelloName.call(this);      //輸出"San Zhang"
HelloName.call(myObject);   //輸出"my Object"

function sum(m,n) {
    return m+n;
    }
document.write(sum.call(window,10,10)+ "<br>");     //輸出20
document.write(sum.apply(window,[10,20])+ "<br>");  ////輸出30

實參和形參

JavaScript中的函數定義并未指定函數形參的類型电湘，函數調用也未對傳入的實參值做任何類型檢查。實際上鹅经，JavaScript函數調用甚至不檢查傳入形參的個數寂呛。

可選形參：當調用函數的時候傳入的實參比形參個數少時，剩下的形參都將設置為undefined值瘾晃。因此在調用函數時形參是否可選以及是否可以省略應當保持較好的適應性贷痪。為了做到這一點，應當給省略的參數賦一個合理的默認值酗捌。

  • 注意：當用這種可選形參來實現函數時呢诬，需要將可選形參放在形參列表的最后涌哲。

chap3-15.js

function int(x,type) {
    if(type===undefined) return Math.floor(x);
    if(type===1) return Math.floor(x);
    if(type===2) return Math.ceil(x);
    if(type===3) return Math.round(x);
    }
document.write("3.4默認去尾法取整：" +int(3.4)+"<br>");
document.write("3.4去尾法取整：" +int(3.4,1)+"<br>");
document.write("3.4進位法取整：" +int(3.4,2)+"<br>");
document.write("3.4四舍五入取整：" +int(3.4,3)+"<br>");

可變長的實參列表（實參對象）：當調用函數的時候傳入的實參個數超過函數定義時的形參個數時胖缤，沒有辦法直接獲得未命名值的引用尚镰。參數對象解決了這個問題。

  • 實參對象有一個重要的用處就是：讓函數可以操作任意數量的實參哪廓。

  • 假設定義了函數f狗唉，它的形參只有一個x。如果調用f時傳入兩個實參涡真，第一個實參可以通過形參名x來獲得分俯，也可以通過arguments[0]來得到；第二個實參只能通過arguments[1]來得到哆料。此外缸剪，和數組一樣，arguments.length屬性返回實參的個數东亦。

  • 注意：arguments不是數組杏节，它是一個實參對象。每個實參對象都包含以數字為索引的一組元素以及length屬性典阵。

chap3-15.js

function max() {
    var max=Number.NEGATIVE_INFINITY;   //NEGATIVE_INFINITY 表示負無窮大
    for(var i=0;i<arguments.length;i++){
        if(arguments[i]>max) max=arguments[i];
    }
    return max;
    }
var largest=max(1,10,100,2,3,1000,4,5,10000,6);
document.write("最大值為："+largest+"<br>");

將對象屬性用做實參：當一個函數包含超過三個形參時奋渔，對于程序員來說，要記住調用函數中實參的正確順序很難壮啊。最好通過名/值對的形式來傳入參數嫉鲸，這樣參數的順序就無關緊要了。為了實現這種風格的方法調用歹啼，定義函數時玄渗，傳入的實參都寫入一個單獨的對象中，在調用的時候傳入一個對象狸眼，對象中的名/值對是真正需要的實參數據藤树。

chap3-15.js

function arraycopy(from,from_start,to,to_start,length) {
    for(var i=to_start;i<to_start+length;i++){
        to[i]=from[from_start+i-to_start];
    }
    }
function easycopy(args) {
    arraycopy(args.from,
        args.from_start||0,     //這里設置了默認值
        args.to,
        args.to_start||0,       //這里設置了默認值
        args.length
    );
    }
var a=[1,2,3,4],b=[5,6,7,8];
easycopy({from:a, to:b, to_start:2, length:4});
for(var i=0;i<b.length;i++){document.write(b[i]+"<br>");}

作為值的函數

在JavaScript中，函數不僅是一種語法份企，也是值也榄，也就是說，可以將函數賦值給變量司志。

chap3-16.js

function squre(x) {return x*x;}
var s=squre;    //現在s和squre指代同一個函數
document.write(squre(4)+"<br>");
document.write(s(4)+"<br>");

除了可以將函數賦值給變量甜紫，同樣可以將函數賦值給對象的屬性。

chap3-16.js

var o={square:squre};
var x=o.square(16);
document.write(x+"<br>");

函數甚至不需要帶名字骂远，當把它們賦值給數組元素時：

chap3-16.js

var a=[function (x) {return x*x},20];
document.write(a[0](a[1])+"<br>");

作為命名空間的函數

JavaScript中變量的作用域有全局變量和局部變量2種囚霸。在JavaScript中是無法聲明只在一個代碼塊內可見的變量的，基于這個原因激才，我們常常簡單地定義一個函數用做臨時的命名空間拓型，在這個命名空間內定義的變量都不會污染到全局命名空間额嘿。

function mymodule() {
    //模塊代碼，這個模塊所使用的所有變量都是局部變量劣挫，而不是污染全局命名空間
    }
mymodule();     //不要忘了還要調用這個函數

這段代碼僅僅定義了一個單獨的全局變量：名叫“mymodule”的函數册养。這樣還是太麻煩，可以直接定義一個匿名函數压固，并在單個表達式中調用它：

(function () {
 //模塊代碼
}());   //結束函數定義并立即調用它

閉包

出于種種原因球拦，我們有時候需要得到函數內的局部變量。閉包可以捕捉到局部變量（和參數）帐我，并一直保存下來坎炼。閉包就是一個函數引用另外一個函數的變量，因為變量被引用著所以不會被回收拦键，因此可以用來封裝一個私有變量谣光。這是優(yōu)點也是缺點，不必要的閉包只會徒增內存消耗芬为！

chap3-17.js

var scope="global scope";       //全局變量
function checkscope() {
    var scope="local scope";    //局部變量
    function f() {return scope;}    //在作用域中返回這個值
    return f();
    }
var a=checkscope();
document.write(a+"<br>")

對象

對象是一種復合值萄金，它將很多值聚合在一起，可通過名字訪問這些值碳柱。對象也可看作是屬性的無序集合捡絮，每個屬性都是一個名/值對。屬性名是字符串莲镣，因此我們可以把對象看成是從字符串到值的映射福稳。

對象除了可以保持自有的屬性外，還可以從一個稱為“原型”的對象繼承屬性瑞侮。

除了字符串的圆、數字、true半火、false越妈、null和undefined之外，JavaScript中的值都是對象。

除了包含屬性之外，每個對象還擁有三個相關的對象特性：

對象的原型（prototype）指向另一個對象抵乓，本對象的屬性繼承自它的原型對象。

對象的類（class）是一個標識對象類型的字符串阎抒。

對象的擴展標記（extensible flag）指明了（在ECMAScript 5中）是否可以向該對象添加新屬性。

JavaScript對象的類別

  • 內置對象：是由ECMAScript規(guī)范定義的對象或類消痛。例如且叁，數組，函數秩伞，日期和正則表達式逞带。

  • 宿主對象：是由JavaScript解釋器所嵌入的宿主環(huán)境（比如Web瀏覽器）定義的欺矫。客戶端JavaScript中表示網頁結構的HTMLElement對象均是宿主對象展氓。

  • 自定義對象：是由運行中的JavaScript代碼創(chuàng)建的對象穆趴。

創(chuàng)建對象

創(chuàng)建對象（3種方式）：

  • 對象直接量：是由若干屬性名/值

    var empty={};    //空對象，沒有任何屬性
var point={x:0,y:0};    //兩個屬性
var book={
    "main title":"JavaScript",      //屬性名字里有空格带饱，必須用字符串表示
    "sub-title":"The Definitive Guide",     //屬性名字里有連字符毡代，必須用字符串表示
    "for":"all audiences",      //"for"是保留字阅羹，因此必須用引號
    author:{            //這個屬性的值是一個對象
        firstname:"Shulin",
        lastname:"Chen"
    }
};

  • 通過new創(chuàng)建對象：new關鍵字創(chuàng)建并初始化一個新對象勺疼，new后跟隨一個函數調用。這里的函數稱作構造函數捏鱼。例如：

    var author=new Object(); //創(chuàng)建一個空對象
author.firstname="Shulin";
author.lastname="Chen";

var mycars=new Array();
mycars[0]="Saab";
mycars[1]="Volvo";

var today = new Date();  //Date 對象自動使用當前的日期和時間作為其初始值执庐。

  • Object.create(proto[, propertiesObject]) 是ECMAScript 5中提出的一種新的對象創(chuàng)建方式，第一個參數是要繼承的原型导梆，也可以傳一個null轨淌，第二個參數是對象的屬性描述符，這個參數是可選的看尼。例如：

    var o1 = Object.create({x:1,y:2});  //o1繼承了屬性x和y
var o2 = Object.create(Object.prototype);   //o2和{}以及new Object()一樣递鹉，創(chuàng)建了一個普通的空對象

    • 如果proto參數不是 null 或一個對象，則拋出一個 TypeError 異常藏斩。

    • 在ECMAScript 3中可以用類似下面的代碼來模擬原型繼承：

      chap3-18.js

      //inherit()返回了一個繼承自原型對象p的屬性的新對象
//這里使用ECMAScript 5中的Object.create()函數（如果存在的話）
//如果不存在Object.create()躏结，則退化使用其它方法
function inherit(p) {
    if(p==null) throw TypeError();      //p是一個對象，但不能是null
    if(Object.create) return Object.create(p);      //如果Object.create()存在狰域，直接使用它
    var t=typeof p;
    if(t!=="object" && t!=="function") throw TypeError();
    function f() {};    //定義一個空構造函數
    f.prototype=p;      //將其原型屬性設置為p
    return new f();     //使用f()創(chuàng)建p的繼承對象
    }
//Inherit()函數的其中一個用途就是防止函數無意間（非惡意地）修改那些不受你控制的對象媳拴。
// 不是將對象直接作為參數傳入函數，而是將它的繼承對象傳入函數兆览。
//如果給繼承對象的屬性賦值屈溉，則這些屬性只會影響這個繼承對象自身，而不是原始對象抬探。
var o={x:"don't change this value"};
changex(inherit(o));
function changex(obj) {
    obj.x="hello world!";
    document.write(obj.x+"<br>");
    }
document.write(o.x+"<br>");
changex(o);
document.write(o.x+"<br>");

屬性的查詢和設置

JavaScript為屬性訪問定義了兩種語法：

對象名.屬性名 或 對象名[表達式]

其中子巾，表達式指定要訪問的屬性的名稱或者代表要訪問數組元素的索引。

對于點（.）來說小压，右側必須是一個以屬性名稱命名的簡單標識符（不能有空格线梗、連字符等）。點運算符后的標識符不能是保留字场航，比如book.for是非法的缠导，必須使用方括號的形式訪問它們，比如book["for"]

對于方括號（[]）來說溉痢，方括號內必須是一個計算結果為字符串的表達式僻造。其看起來更像數組憋他，只是這個數組元素是通過字符串索引而不是數字索引。這種數組稱為“關聯數組”髓削。

chap3-19.html

<script>
    var book={
        "main title":"JavaScript",
        "sub-title":"The Definitive Guide",
        "for":"all audiences",
        author:{
            firstname:"Shulin",
            lastname:"Chen"
        }
    };
    var a=[book,4,[5,6]];
    document.write(book.author.firstname+"<br>");   //獲得book對象中author的“firstname”屬性
    document.write(book["for"]+"<br>");
    document.write(a[0]["main title"]+"<br>");
    document.write(a[2][1]+"<br>");
    book["main title"]="ECMAScript 6";  //給“main title”屬性賦值
</script>

JavaScript對象具有自有屬性（實例屬性）竹挡，也有一些屬性是從原型對象繼承而來的（繼承屬性）。

假設要查詢對象q的屬性x立膛，如果q中不存在x揪罕，則會繼續(xù)在q的原型對象中查詢屬性x，如果原型對象中也沒有x宝泵，但這個原型對象也有原型好啰，那么繼續(xù)在這個原型對象的原型對象上執(zhí)行查詢，直到找到x或者查找到一個原型是null的對象為止儿奶】蛲可以看到，對象的原型屬性構成了一個“鏈”闯捎，通過這個“鏈”可以實現屬性的繼承椰弊。

chap3-20.html

<head>
    <meta charset="UTF-8">
    <title>chap3-20</title>
    <script src="js/chap3.js"></script>
    </head>
<body>
<script>
    var o={};   //o從Object.prototype繼承對象的方法
    o.x=1;      //給o定義一個屬性x
    var p=inherit(o);   //p繼承o和Object.prototype
    p.y=2;      //給p定義一個屬性y
    var q=inherit(p);   //q繼承p、o和Object.prototype
    q.z=3;      //給q定義一個屬性z
    document.write(q.x+q.y+q.z+"<br>");
    </script>
</body>

假設給對象o的屬性x賦值瓤鼻，如果o中已經有屬性x（這個屬性不是繼承來的）秉版，那么這個賦值操作只改變這個已有屬性x的值。如果o中不存在屬性x茬祷，那么賦值操作給o添加一個新的屬性x清焕。如果之前o繼承自屬性x，那么這個繼承的屬性就被新創(chuàng)建的同名屬性覆蓋了牲迫。

屬性賦值操作首先檢查原型鏈耐朴，以此判定是否允許賦值操作。如果o繼承自一個只讀屬性x盹憎，那么賦值操作是不允許的筛峭。如果允許屬性賦值操作，它也總是在原始對象上創(chuàng)建屬性或對已有的屬性賦值陪每，而不會去修改原型鏈影晓。

chap3-20.js

var a={
    get r(){return 1;},
    x:1
    };
var b=inherit(a);   //b繼承屬性r
b.y=1;              //b定義了個屬性
b.x=2;              //b覆蓋繼承來的屬性x
b.r=3;              //r為只讀屬性，賦值語句無效
document.write(b.r+"<br>"); //輸出1
document.write(b.x+"<br>"); //輸出2
document.write(a.x+"<br>"); //原型對象沒有修改

刪除屬性

delete運算符可以刪除對象的屬性檩禾。它的操作數是一個屬性訪問表達式：

delete只是斷開屬性和宿主對象的聯系挂签，而不會去操作對象中的屬性。

delete運算符只能刪除自有屬性盼产，不能刪除繼承屬性饵婆，要刪除繼承屬性必須從定義這個屬性的原型對象上刪除它，而且這會影響到所有繼承自這個原型的對象戏售。

chap3-21.js

var book={
    "main title":"JavaScript",
    "sub-title":"The Definitive Guide",
    "for":"all audiences",
    author:{
        firstname:"Shulin",
        lastname:"Chen"
    }
    };
delete book.author;     //book不再有屬性author
delete book["main title"];  //book不再有屬性"main title"
document.write(book.author+"<br>");
document.write(book["main title"]+"<br>");
var o=Object.create(book);  //o繼承了book對象的屬性
delete o["for"];    //不能刪除繼承屬性
document.write(book["for"]+"<br>");

檢測屬性

判斷某個屬性是否存在于某個對象中可以有3種方式：

in運算符：如果對象的自有屬性或繼承屬性中包含這個屬性侨核，則返回true草穆。

hasOwnProperty()方法：對象的自有屬性返回true，對于繼承屬性返回false搓译。

propertyIsEnumerable()方法：只有檢測到是自有屬性且這個屬性的可枚舉性為true時悲柱，它才返回true。某些內置屬性是不可枚舉的些己。

var o={x:1};
var obj=Object.create(o);
obj.y=2;
"x" in obj;  //輸出true
"y" in obj;  //輸出true
obj.hasOwnProperty("x");  //輸出false
obj.hasOwnProperty("y");  //輸出true
obj.propertyIsEnumerable("x");   //輸出false
obj.propertyIsEnumerable("y");  //輸出true

枚舉屬性

在JavaScript中豌鸡，對象的屬性分為可枚舉和不可枚舉之分，它們是由屬性的enumerable值決定的段标。

JavaScript中基本包裝類型的原型屬性是不可枚舉的涯冠，如Object, Array, Number等。

Object對象的propertyIsEnumerable()方法可以判斷此對象是否包含某個屬性怀樟，并且這個屬性是否可枚舉功偿。

for/in循環(huán)可以遍歷對象中所有可枚舉的對象屬性(包括對象自有屬性和繼承的屬性)。

Object.keys()方法會返回一個由一個給定對象的自身可枚舉屬性組成的數組往堡。

Object.getOwnPropertyNames()方法會返回一個由一個給定對象的自身屬性組成的數組，包括可枚舉和不可枚舉的共耍。

chap3-22.js

var po={px:1,py:2};
var o={x:3,y:4};
o.__proto__=po;     //設置o的原型為po
document.write("for/in方法輸出結果:<br>");
for(property in o){
    document.write(property+":"+o[property]+"<br>");
}
var propertyArray=Object.keys(o);
document.write("定義枚舉屬性前Object.keys方法輸出結果:<br>");
for(var i=0;i<propertyArray.length;i++){
    document.write(propertyArray[i]+"<br>");
}
Object.defineProperties(o,{
    x:{enumerable:true},
    y:{enumerable:false}
});
propertyArray=Object.keys(o);
document.write("定義枚舉屬性后Object.keys方法輸出結果:<br>");
for(var i=0;i<propertyArray.length;i++){
    document.write(propertyArray[i]+"<br>");
}
propertyArray=Object.getOwnPropertyNames(o);
document.write("定義枚舉屬性后Object.getOwnPropertyNames方法輸出結果:<br>");
for(var i=0;i<propertyArray.length;i++){
    document.write(propertyArray[i]+"<br>");
}

屬性getter和setter

對象屬性是由名字虑灰、值和一組特性（attribute）構成的。在ECMAScript 5中痹兜，屬性值可以用一個或兩個方法替代穆咐，這兩個方法就是getter和setter。由getter和setter定義的屬性稱作“存取器屬性”（accessorproperty）字旭，它不同于“數據屬性”（data property）对湃。

數據屬性：包含屬性的操作特性；如：設置值遗淳、是否可枚舉等拍柒。

特性名稱 描述 默認值
value 設置屬性的值 undefined
writable 是否可修改屬性的值；true：可修改屬性的值屈暗；false：不可修改屬性的值 false
enumerable 是否可枚舉屬性拆讯；true：可枚舉，可通過for/in語句枚舉屬性养叛；false：不可枚舉 false
configurable 是否可修改屬性的特性种呐；true：可修改屬性的特性(如把writable從false改為true)；false：不可修改屬性的特性 false

存取器屬性：包含屬性的操作特性弃甥；如：設置值爽室、是否可枚舉等。

特性名稱 描述 默認值
get 屬性的返回值函數 undefined
set 屬性的設置值函數淆攻；含有一個賦值參數 undefined
enumerable 是否可枚舉屬性阔墩；true：可枚舉掉缺，可通過for/in語句枚舉屬性；false：不可枚舉 false
configurable 是否可修改屬性的特性戈擒；true：可修改屬性的特性(如把writable從false改為true)眶明；false：不可修改屬性的特性 false

存取器也是可以繼承的尼荆。

chap3-23.html

<script>
    var obj={};
    //添加一個屬性晋修，并設置為存取器屬性
    Object.defineProperty(obj,"name",{
        get:function () {
            return this._name;  //get和set里的變量不要使用屬性崎弃，如：屬性為name藐唠，get和set用的是_name
        },
        set:function (x) {
            if(isNaN(x))    //isNaN() 函數用于檢查其參數是否是非數字值后雷。
                this._name=x;
            else
                this._name="name不能為純數字";
        },
        enumerable:true,
        configurable:true
    });
    obj.name="12";
    document.write(obj.name+"<br>");
    var o=inherit(obj);     //存取器也是可以繼承的
    o.name="a12";
    document.write(o.name+"<br>");
</script>

屬性的特性

為了實現屬性特性的查詢和設置操作辑畦，ECMAScript 5中定義了一個名為“屬性描述符”（property descriptor）的對象蔓钟，這個對象代表數據屬性特性和存取器屬性特性磺箕。

在使用Object.defineProperty稽屏、Object.defineProperties或Object.create函數的情況下添加數據屬性扮宠，writable、enumerable和configurable默認值為false狐榔。

使用對象直接量創(chuàng)建的屬性坛增，writable、enumerable和configurable特性默認為true薄腻。

Object.getOwnPropertyDescriptor(object,propertyname)可用來獲取描述屬性特性的描述符對象收捣。其中object為包含屬性的對象，必需庵楷；propertyname為屬性的名稱罢艾，必需。

chap3-24.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chap3-24</title>
    </head>
<body style="font-size: xx-large">
<script>
    var o1={name:"tom"};
    document.write("對象直接量尽纽，屬性特性默認為true<br>");
    var desc=Object.getOwnPropertyDescriptor(o1,"name");
    for(var prop in desc)
        document.write(prop+":"+desc[prop]+"<br>");
    var o2=Object.create(null,{
        name:{value:"tom"}
    });
    document.write("通過Object.create創(chuàng)建咐蚯，屬性特性默認為false<br>")
    desc=Object.getOwnPropertyDescriptor(o2,"name");
    for(prop in desc)
        document.write(prop+":"+desc[prop]+"<br>");
        </script>
</body>
</html>
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市弄贿，隨后出現的幾起案子春锋，更是在濱河造成了極大的恐慌，老刑警劉巖挎春，帶你破解...
    沈念sama閱讀 206,126評論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件看疙，死亡現場離奇詭異，居然都是意外死亡直奋，警方通過查閱死者的電腦和手機能庆，發(fā)現死者居然都...
    沈念sama閱讀 88,254評論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來脚线，“玉大人搁胆，你說我怎么就攤上這事。” “怎么了渠旁？”我有些...
    開封第一講書人閱讀 152,445評論 0贊 341
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵攀例，是天一觀的道長。 經常有香客問我顾腊，道長粤铭，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 55,185評論 1贊 278
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任杂靶，我火速辦了婚禮梆惯，結果婚禮上，老公的妹妹穿的比我還像新娘吗垮。我一直安慰自己垛吗，他們只是感情好，可當我...
    茶點故事閱讀 64,178評論 5贊 371
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布烁登。 她就那樣靜靜地躺著怯屉，像睡著了一般。 火紅的嫁衣襯著肌膚如雪饵沧。 梳的紋絲不亂的頭發(fā)上锨络，一...
    開封第一講書人閱讀 48,970評論 1贊 284
  • 城市分裂傳說
    那天，我揣著相機與錄音捷泞，去河邊找鬼足删。 笑死，一個胖子當著我的面吹牛锁右，可吹牛的內容都是我干的。 我是一名探鬼主播讶泰，決...
    沈念sama閱讀 38,276評論 3贊 399
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼咏瑟，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了痪署？” 一聲冷哼從身側響起码泞，我...
    開封第一講書人閱讀 36,927評論 0贊 259
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎狼犯，沒想到半個月后余寥，有當地人在樹林里發(fā)現了一具尸體，經...
    沈念sama閱讀 43,400評論 1贊 300
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡悯森，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 35,883評論 2贊 323
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年宋舷，在試婚紗的時候發(fā)現自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片瓢姻。...
    茶點故事閱讀 37,997評論 1贊 333
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡祝蝠，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情绎狭，我是刑警寧澤细溅，帶...
    沈念sama閱讀 33,646評論 4贊 322
  • ?日本核電站爆炸內幕
    正文 年R本政府宣布，位于F島的核電站儡嘶，受9級特大地震影響喇聊，放射性物質發(fā)生泄漏。R本人自食惡果不足惜蹦狂，卻給世界環(huán)境...
    茶點故事閱讀 39,213評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一誓篱、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧鸥咖，春花似錦燕鸽、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,204評論 0贊 19
  • 一樁弒父案啊研，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至鸥拧，卻和暖如春党远，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背富弦。 一陣腳步聲響...
    開封第一講書人閱讀 31,423評論 1贊 260
  • 情欲美人皮
    我被黑心中介騙來泰國打工沟娱， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人腕柜。 一個月前我還...
    沈念sama閱讀 45,423評論 2贊 352
  • 代替公主和親
    正文 我出身青樓济似，卻偏偏與公主長得像，于是被迫代替她去往敵國和親盏缤。 傳聞我的和親對象是個殘疾皇子砰蠢，可洞房花燭夜當晚...
    茶點故事閱讀 42,722評論 2贊 345

推薦閱讀更多精彩內容