上QQ阅读APP看书，第一时间看更新
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的基本方法。如果你有进一步求知的欲望，请扫码拓展阅读。
线上阅读