- HTML5+CSS3+JavaScript從入門到精通（微課精編版）
- 前端科技
- 618字
- 2019-08-15 16:37:51
3.4 案例實戰
視頻講解
本案例將嘗試以手寫代碼的形式在網頁中顯示如下內容。
在網頁標題欄中顯示“自我介紹”文本信息。
以一級標題的形式顯示“自我介紹”文本信息。
以定義列表的形式介紹個人基本情況，包括姓名、性別、住址、興趣或愛好等。
在信息列表下面以圖像的形式插入個人的頭像，如果圖像太大，使用width屬性適當縮小圖像。
以段落文本的形式顯示個人簡歷，文本內容可酌情輸入。
示例效果如圖3.15所示。
圖3.15 設計簡單的自我介紹頁面效果
示例完整代碼如下：
提示：網頁為什么會出現亂碼？網頁亂碼是因為網頁沒有明確設置字符編碼，出現亂碼后的網頁效果如圖3.16所示。
圖3.16 出現亂碼的網頁效果
示例效果
有時候用戶在網頁中沒有明確指明網頁的字符編碼，但是網頁能夠正確顯示，這是因為網頁字符的編碼與瀏覽器解析網頁時默認采用的編碼一致，所以不會出現亂碼。如果瀏覽器的默認編碼與網頁的字符編碼不一致，而網頁又沒有明確定義字符編碼，則瀏覽器依然使用默認的字符編碼來解析，這時候就會出現亂碼現象。
解決方法：
在Dreamweaver中打開該文檔，選擇【修改】|【頁面屬性】菜單命令，在打開的【頁面屬性】對話框中設置“編碼”為“簡體中文(GB2312)”，然后單擊“確定”按鈕即可。
此時在HTML文檔中會添加如下一行代碼：
<html>
<head>
<title>自我介紹</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
</body>
</html>
讀者也可以直接在HTML文檔中手工輸入代碼定義網頁的字符編碼。
最后，重新在瀏覽器中預覽，就不會出現上述亂碼現象了。
【拓展】
下面為線上拓展內容，介紹HTML文檔轉換為XHTML的基本方法。如果你有進一步求知的欲望，請掃碼拓展閱讀。
線上閱讀
推薦閱讀
- Learning LibGDX Game Development（Second Edition）
- Reactive Android Programming
- Corona SDK Mobile Game Development：Beginner's Guide（Second Edition）
- Swift Playgrounds少兒趣編程
- Android玩家必備
- OpenGL Data Visualization Cookbook
- C語言程序設計實訓教程與水平考試指導
- Python語言科研繪圖與學術圖表繪制從入門到精通
- 并行編程方法與優化實踐
- Application Development with Swift
- 面向對象程序設計及C++（第3版）
- 計算機應用基礎案例教程（第二版）
- Mapping with ArcGIS Pro
- 測試工程師Python開發實戰
- Go語言從入門到進階實戰（視頻教學版）