Category Archives: 電腦

網站構建高級教程

Leave a reply

網站構建高級教程

當您將我們的《網站構建教程》學習完畢，您會掌握如何建設一個專業的網站。

您也會學到如何做好面向未來的準備，以及如何使用諸如XHTML 和XML 之類的新技術。

開始學習網站構建！

內容目錄

網站構建
一個網站開發人員必須掌握的知識是什麼？不要跳過本章，其中的內容非常重要。所以，將這一章全部讀完吧！
網站設計
本章內容：如何設計你的站點。
網絡用戶
本章內容：網絡用戶以及他們使用什麼類型的設備。
網站標準
本章內容：WEB 標準，以及如何使用它們。
網站驗證
本章內容：如何驗證您的網站中的HTML、XHTML、CSS、XML、和WMP 頁面。
萬維網聯盟
本章內容：萬維網聯盟。
網絡安全
本章內容：當網上沖浪時，如何保護您的計算機。

 

HTML5 教程-HTML 5 Canvas vs. SVG

Leave a reply

HTML 5 Canvas vs. SVG

Canvas 和SVG 都允許您在瀏覽器中創建圖形，但是它們在根本上是不同的。

SVG

SVG 是一種使用XML 描述2D 圖形的語言。

SVG 基於XML，這意味著SVG DOM 中的每個元素都是可用的。您可以為某個元素附加JavaScript 事件處理器。

在SVG 中，每個被繪製的圖形均被視為對象。如果SVG 對象的屬性發生變化，那麼瀏覽器能夠自動重現圖形。

Canvas

Canvas 通過JavaScript 來繪製2D 圖形。

Canvas 是逐像素進行渲染的。

在canvas 中，一旦圖形被繪製完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那麼整個場景也需要重新繪製，包括任何或許已被圖形覆蓋的對象。

Canvas 與SVG 的比較

下表列出了canvas 與SVG 之間的一些不同之處。

Canvas

  • 依賴分辨率
  • 不支持事件處理器
  • 弱的文本渲染能力
  • 能夠以.png 或.jpg 格式保存結果圖像
  • 最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪

SVG

  • 不依賴分辨率
  • 支持事件處理器
  • 最適合帶有大型渲染區域的應用程序（比如穀歌地圖）
  • 複雜度高會減慢渲染速度（任何過度使用DOM 的應用都不快）
  • 不適合遊戲應用

HTML5 教程-HTML5 內聯SVG

Leave a reply

HTML5 內聯SVG

HTML5 支持內聯SVG。

什麼是SVG？

  • SVG 指可伸縮矢量圖形(Scalable Vector Graphics)
  • SVG 用於定義用於網絡的基於矢量的圖形
  • SVG 使用XML 格式定義圖形
  • SVG 圖像在放大或改變尺寸的情況下其圖形質量不會有損失
  • SVG 是萬維網聯盟的標準

SVG 的優勢

與其他圖像格式相比（比如JPEG 和GIF），使用SVG 的優勢在於：

  • SVG 圖像可通過文本編輯器來創建和修改
  • SVG 圖像可被搜索、索引、腳本化或壓縮
  • SVG 是可伸縮的
  • SVG 圖像可在任何的分辨率下被高質量地打印
  • SVG 可在圖像質量不下降的情況下被放大

瀏覽器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及Safari 支持內聯SVG。

把SVG 直接嵌入HTML 頁面

在HTML5 中，您能夠將SVG 元素直接嵌入HTML 頁面中：

實例

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
 </body> </html>

親自試一試

結果：

如需學習更多有關SVG的知識，請閱讀我們的SVG教程。

HTML5 教程-HTML5 Canvas

Leave a reply

HTML5 Canvas

canvas 元素用于在网页上绘制图形。

什么是 Canvas？

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建 Canvas 元素

向 HTML5 页面添加 canvas 元素。

规定元素的 id、宽度和高度：

<canvas id="myCanvas" width="200" height="100"></canvas>

通过 JavaScript 来绘制

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

JavaScript 使用 id 来寻找 canvas 元素：

var c=document.getElementById("myCanvas");

然后，创建 context 对象：

var cxt=c.getContext("2d");

getContext(「2d」) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形：

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

理解坐标

上面的 fillRect 方法拥有参数 (0,0,150,75)。

意思是：在画布上绘制 150×75 的矩形，从左上角开始 (0,0)。

如下图所示，画布的 X 和 Y 坐标用于在画布上对绘画进行定位。

Canvas 实例：理解坐标

实例：把鼠标悬停在矩形上可以看到坐标

更多 Canvas 实例

下面的在 canvas 元素上进行绘画的更多实例：

实例 – 线条

通过指定从何处开始，在何处结束，来绘制一条线：

Canvas 实例：线条JavaScript 代码：

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();

</script>

canvas 元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

亲自试一试

实例 – 圆形

通过规定尺寸、颜色和位置，来绘制一个圆：

Canvas 实例：圆形JavaScript 代码：

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

</script>

canvas 元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

亲自试一试

实例 – 渐变

使用您指定的颜色来绘制渐变背景：

Canvas 实例：渐变JavaScript 代码：

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);

</script>

canvas 元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

亲自试一试

实例 – 图像

把一幅图像放置到画布上：

Canvas 实例：图像JavaScript 代码：

<script>
window.onload = function() {
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");
    var img = document.getElementById("scream");
   ctx.drawImage(img, 10, 10);
};
</script>

canvas 元素：

<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>

亲自试一试

相关页面

参考手册：HTML 5 <canvas> 标签

参考手册：HTML DOM Canvas 对象

HTML5 教程-HTML5 樣式指南和代碼約定

Leave a reply

HTML(5) 樣式指南和代碼約定

HTML 代碼約定

web 開發者常常不確定在HTML 中使用的代碼樣式和語法。

在2000 年至2010 年之間，許多web 開發者從HTML 轉換為XHTML。

通過XHTML，開發者不得不編寫有效的“格式良好的”代碼。

HTML5 在代碼驗證時會更寬鬆一點。

通過HTML5，您必須創建屬於自己的最佳實踐、樣式指南和代碼約定。

智能且有未來保證

對樣式的合乎邏輯的使用，可以令其他人更容易理解和使用您的HTML。

在未來，諸如XML 閱讀器之類的程序，也許需要閱讀您的HTML。

使用格式良好的“近似XHTML 的”語法，能夠更智能。

註釋：請始終保持您的樣式智能、整潔、純淨、格式良好。

請使用正確的文檔類型

請始終在文檔的首行聲明文檔類型：

<!DOCTYPE html>

如果您一貫堅持小寫標籤，那麼可以使用：

<!doctype html>

請使用小寫元素名

HTML5 允許在元素名中使用混合大小寫字母。

我們推薦使用小寫元素名：

  • 混合大小寫名稱並不好
  • 開發者習慣使用小寫名（比如在XHTML 中）
  • 小寫更起來更純淨
  • 小寫更易書寫

不太好：

<SECTION> 
  <p>This is a paragraph.</p>
</SECTION>

很糟糕：

<Section> 
  <p>This is a paragraph.</p>
</SECTION>

還不錯：

<section> 
  <p>This is a paragraph.</p>
</section>

關閉所有HTML 元素

在HTML5 中，您不必關閉所有元素（例如<p> 元素）。

我們建議關閉所有HTML 元素：

看起來不好：

<section>
  <p>This is a paragraph.
  <p>This is a paragraph.
</section>

看起來不錯：

<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</section>

關閉空的HTML 元素

在HTML5 中，關閉空元素是可選的。

允許這樣：

<meta charset="utf-8">

也允許這樣：

<meta charset="utf-8" />

斜杠（/）在XHTML 和XML 中是必需的。

如果您期望XML 軟件來訪問您的頁面，保持這個習慣是個好主意。

使用小寫屬性名

HTML5 允許大小寫混合的屬性名。

我們建議使用小寫屬性名：

  • 混合屬性名並不好
  • 開發者習慣於使用小寫屬性名（比如在XHTML 中）
  • 小寫屬性名看情況更純淨
  • 小寫屬性名更易書寫

看起來不好：

<div CLASS="menu">

看起來不錯：

<div class="menu">

屬性值加引號

HTML5 允許不加引號的屬性值。

我們推薦屬性值加引號：

  • 如果屬性值包含值，則必須使用引號
  • 混合樣式絕對不好
  • 加引號的值更易閱讀

這個屬性值無效，因為值中包含空格：

<table class=table striped>

這樣是有效的：

<table class="table striped">

必需的屬性

請始終對圖像使用alt屬性。當圖像無法顯示時該屬性很重要。

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

請始終定義圖像尺寸。這樣做會減少閃爍，因為瀏覽器會在圖像加載之前為圖像預留空間。

<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

空格和等號

等號兩邊的空格是合法的：

<link rel = "stylesheet" href = "styles.css">

但是精簡空格更易閱讀， But space-less is easier to read, and groups entities better together:

<link rel="stylesheet" href="styles.css">

避免長代碼行

當使用HTML 編輯器時，通過左右滾動來閱讀HTML 代碼很不方便。

請盡量避免代碼行超過80 個字符。

空行和縮進

請勿毫無理由地增加空行。

為了提高可讀性，請增加空行來分隔大型或邏輯代碼塊。

為了提高可讀性，請增加兩個空格的縮進。請勿使用TAB。

請勿使用沒有必要的空行和縮進。沒有必要在短的和相關項目之間使用空行，也沒有必要縮進每個元素：

不必要：

<body>

  <h1>Famous Cities</1>

  <h2>Tokyo</h2>

  <p>
    Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.
    It is the seat of the Japanese government and the Imperial Palace,
    and the home of the Japanese Imperial Family.
  </p>

</body>

更好：

<body>

<h1>Famous Cities</1>
<h2>Tokyo</h2>

<p>
Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.
</p>

</body>

表格示例：

<table>
  <tr>
    <th>Name</th>
    <th>Description</th>
  <tr>
  <tr>
    <td>A</td>
    <td>Description of A</td>
  <tr>
  <tr>
    <td>B</td>
    <td>Description of B</td>
  <tr>
</table>

列表示例：

<ol>
  <li>LondonA</li>
  <li>Paris</li>
  <li>Tokyo</li>
</ol>

省略<html> 和<body>？

在HTML5 標準中，能夠省略<html> 標籤和<body> 標籤。

以下代碼作為HTML5 進行驗證：

示例

<!DOCTYPE html>
<head>
  <title>Page Title</title>
</head>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

親自試一試

我們不推薦省略<html> 和<body> 標籤。

<html> 元素是文本的根元素。它是規定頁面語言的理想位置。

<!DOCTYPE html>
<html lang="en-US">

對於可訪問應用程序（屏幕閱讀器）和搜索引擎，聲明語言很重要。

省略<html> 或<body> c可令DOM 和XML 軟件崩潰。

省略<body> 會在老式瀏覽器（IE9）中產生錯誤。

省略<head>？

在HTML5 標準中，<head> 標籤也能夠被省略。

默認地，瀏覽器會把<body> 之前的所有元素添加到默認的<head> 元素。

通過省略<head> 標籤，您能夠降低HTML 的複雜性：

示例

<!DOCTYPE html>
<html>
<title>Page Title</title>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>

</html>

親自試一試

註釋：對於web開發者，省略標籤的做法是陌生的。建立規則需要時間。

元數據

<title> 元素在HTML5 中是必需的。請盡可能製作有意義的標題。

<title>HTML5 Syntax and Coding Style</title>

為了確保恰當的解釋，以及正確的搜索引擎索引，在文檔中對語言和字符編碼的定義越早越好：

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Syntax and Coding Style</title>
</head>

HTML 註釋

短註釋應該在單行中書寫，並在<!– 之後增加一個空格，在<!– 之前增加一個空格：

<!-- This is a comment -->

長註釋，跨越多行，應該通過<!– 和–> 在獨立的行中書寫：

<!-- 
  This is a long comment example. This is a long comment example. This is a long comment example.
  This is a long comment example. This is a long comment example. This is a long comment example.
-->

長註釋更易觀察，如果它們被縮進兩個空格的話。

樣式表

請使用簡單的語法來鏈接樣式表（type 屬性不是必需的）：

<link rel="stylesheet" href="styles.css">

短規則可以壓縮為一行，就像這樣：

p.into {font-family:"Verdana"; font-size:16em;}

長規則應該分為多行：

body {
  background-color: lightgrey;
  font-family: "Arial Black", Helvetica, sans-serif;
  font-size: 16em;
  color: black;
}
  • 開括號與選擇器位於同一行
  • 在開括號之前用一個空格
  • 使用兩個字符的縮進
  • 在每個屬性與其值之間使用冒號加一個空格
  • 在每個逗號或分號之後使用空格
  • 在每個屬性值對（包括最後一個）之後使用分號
  • 只在值包含空格時使用引號來包圍值
  • 把閉括號放在新的一行，之前不用空格
  • 避免每行超過80 個字符

註釋：在逗號或分號之後添加空格，是所有書寫類型的通用規則。

在HTML 中加載JavaScript

請使用簡單的語法來加載外部腳本（type 屬性不是必需的）：

<script src="myscript.js">

通過JavaScript 訪問HTML 元素

使用“不整潔”的HTML 樣式的後果，是可能會導致JavaScript 錯誤。

這兩個JavaScript 語句會產生不同的結果：

var obj = getElementById("Demo")

var obj = getElementById("demo")

親自試一試

如果可能，請在HTML 中使用（與JavaScript）相同的命名約定。

請訪問JavaScript 樣式指南。

使用小寫文件名

大多數web 服務器（Apache、Unix）對文件名的大小寫敏感：

不能以london.jpg 訪問London.jpg。

其他web 服務器（微軟，IIS）對大小寫不敏感：

能夠以london.jpg 或London.jpg 訪問London.jpg。

如果使用混合大小寫，那麼您必須保持高度的一致性。

如果您從對大小寫不敏感的服務器轉到一台對大小寫敏感的服務器上，這些小錯誤將破壞您的網站。

為了避免這些問題，請始終使用小寫文件名（如果可以的話）。

文件擴展名

HTML文件名應該使用擴展名.html（而不是.htm）。

CSS文件應該使用擴展名.css。

JavaScript文件應該使用擴展名.js。