不朽的情缘一般冲多少

書名：精通HTML5+CSS3+JavaScript網頁設計（視頻教學版）（第2版）
作者名：王英英
本章字數： 1021字
更新時間： 2019-12-09 14:23:49

1.3 HTML5文件的編寫方法

有兩種方式來產生HTML文件：一種是自己寫HTML文件，事實上這并不是很困難，也不需要特別的技巧；另一種是使用HTML編輯器，它可以輔助使用者來做編寫的工作。

1.3.1 使用記事本手工編寫HTML文件

前面介紹到HTML5是一種標記語言（標記語言代碼是以文本形式存在的），因此所有的記事本工具都可以作為它的開發環境。HTML文件的擴展名為.html或.htm，將HTML源代碼輸入到記事本并保存之后，可以在瀏覽器中打開文檔以查看其效果。

使用記事本編寫HTML文件，具體操作步驟如下：

01 單擊Windows桌面上的【開始】按鈕，選擇【所有程序】?【附件】?【記事本】命令，打開一個記事本，在記事本中輸入HTML代碼，如圖1-2所示。

圖1-2 編輯HTML代碼

02 編輯完HTML文件后，選擇【文件】?【保存】命令或按Ctrl+S組合鍵，在彈出的【另存為】對話框中選擇【保存類型】為【所有文件】，然后將文件擴展名設為.html或.htm，如圖1-3所示。

圖1-3 【另存為】對話框

03 單擊【保存】按鈕，保存文件。打開網頁文檔，在IE瀏覽器中預覽效果，如圖1-4所示。

圖1-4 網頁的瀏覽效果

1.3.2 使用Dreamweaver CC編寫HTML文件

常言道：“工欲善其事，必先利其器”。雖然使用記事本可以編寫HTML文件，但是編寫效率太低，對于語法錯誤及格式都沒有提示，因此，可以使用專門編寫HTML網頁的工具來彌補這種缺陷。Adobe公司的Dreamweaver CC用戶界面非常友好，是一個非常優秀的網頁開發工具，深受廣大用戶的喜愛。

使用Dreamweaver CC編寫HTML文件，具體操作步驟如下：

01 啟動Dreamweaver CC（如圖1-5所示），在歡迎屏幕的【新建】欄中選擇HTML選項，或者單擊菜單中的【文件】?【新建】命令（快捷鍵Ctrl+N）。

圖1-5 包含歡迎屏幕的主界面

02 彈出【新建文檔】對話框（如圖1-6所示），在【頁面類型】選項區中選擇HTML選項，在【文檔類型】中選擇【HTML 5】選項。

圖1-6 【文檔類型】對話框

03 單擊【創建】按鈕，創建HTML文件，如圖1-7所示。

圖1-7 設計視圖下顯示創建的文件

04 在文檔工具欄中，單擊【代碼】按鈕，切換到代碼視圖，如圖1-8所示。

圖1-8 代碼視圖下顯示創建的文件

05 修改HTML文件標題，將代碼中<title>標記中的“無標題文檔”修改成“蝶戀花”。

06 在<body>標記中輸入“溪上平崗千疊翠，萬樹亭亭，爭作拏云勢。”，完整HTML代碼如下所示。

     <!DOCTYPE html>
     <head>
     <meta charset=utf-8" />
     <title>蝶戀花</title>
     </head>
     <body>
     溪上平崗千疊翠，萬樹亭亭，爭作拏云勢。
     </body>
     </html>

07 保存文件。單擊菜單中的【文件】?【保存】命令或按Ctrl+S組合鍵，彈出【另存為】對話框。在對話框中，選擇保存位置并輸入文件名，單擊【保存】按鈕，如圖1-9所示。

圖1-9 保存文件

08 單擊文檔工具欄中的圖標，選擇查看網頁的瀏覽器，或按下功能鍵F12使用默認瀏覽器查看網頁，預覽效果如圖1-10所示。

圖1-10 瀏覽器預覽效果

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

精通HTML5+CSS3+JavaScript網頁設計（視頻教學版）（第2版）

1.3 HTML5文件的編寫方法

1.3.1 使用記事本手工編寫HTML文件

1.3.2 使用Dreamweaver CC編寫HTML文件