- HTML+CSS+DIV網頁設計與布局(第2版)(微課版)
- 聶斌 張明遙
- 518字
- 2019-10-23 17:37:34
上機指導
本章帶領讀者了解了網站開發、HTML基本概念、HTML基本標記以及元信息META等。這些內容是下一步學習復雜的HTML的基礎。本節將通過上機操作,鞏固本章所學的知識點。
實驗一
實驗內容
在瀏覽器中查看一個網頁的源代碼。
實驗目的
鞏固知識點——查看HTML的基本結構,了解其中的HTML標記內容。
實現思路
打開瀏覽器,在地址欄中輸入百度首頁的地址http://www.baidu.com,進入頁面后,在頁面中單擊鼠標右鍵,選擇“查看源文件”命令,即可查看百度首頁的源代碼。
實驗二
實驗內容
使用記事本或者其他文本編輯工具,手動輸入一個簡單的網頁,編寫一個包含頭、標題、主體三部分的網頁的HTML代碼。
實驗目的
鞏固知識點——了解一個普通HTML文件包含的頭、標題、主體三部分內容。
實現思路
打開記事本,在其中輸入以下代碼。
01 <HTML> 02 <HEAD> 03 <TITLE>這里是標題</TITLE> 04 </HEAD> 05 <BODY> 06 文件主體,正文部分 07 </BODY> 08 </HTML>
單擊“文件”|“另存為”命令,在保存時,文件類型選擇“所有類型”,然后輸入文件名,注意擴展名為htm或者html。
實驗三
實驗內容
熟練使用<META>元信息,根據不同要求為頁面設置相應的元信息,設置實驗二的網頁語言為中文。
實驗目的
鞏固知識點——充分發揮<META>標簽的功能,為頁面設置語言。
實現思路
打開實驗二的源代碼,在其中的頭部,即<HEAD>與</HEAD>之間加入以下內容。
<META HTTP-EQUIV="CONTENT-TYPE" CONT ENT="TEXT/HTML; CHARSET=GB2312" />
然后保存源代碼,即可將該網頁的語言設置為中文。
推薦閱讀
- Photoshop電商網頁廣告設計實戰從入門到精通(超值版)
- 網頁設計與制作
- Dreamweaver CS5網頁設計與制作教程
- 中文版Dreamweaver CS6/Flash CS6/Photoshop CS6網頁設計基礎培訓
- Vue.js從入門到項目實踐(超值版)
- 眾妙之門:網站UI設計之道2
- 網頁設計那些事兒
- HTML5+CSS3網頁設計與制作基礎教程
- 網頁制作實用教程(第3版)
- 《練就職場功夫熊貓》
- 中文版Dreamweaver CC+Flash CC+Photoshop CC網頁設計基礎培訓教程
- 從零開始讀懂Web3
- Dreamweaver CS3網頁制作
- Dreamweaver CS6網頁設計入門、進階與提高
- 網站視覺設計