实训1-2制作HTML5百科页面
发布时间：2020-11-26
标记设置标题，标记设置段落，标记加粗文本。另外，使用水平线标记
/>将标题与内容隔开，并设置水平线的粗细及颜色。
此外，需要使用![]()
标记插入图像，通过标记设置超链接，并且对![]()
标记应用align属性和hspace属性控制图像的对齐方式和水平距离。
3. \
4.
page02页面效果分析
观察图3可以看出，page02页面中主要包括标题和图片两部分，可以使用标记设置标题，![]()
/>标记插入图像。另外，图片需要应用align属性和hspace属性设置对齐方式和垂直距离，并通过标记设置超链接。
四、 案例实现
通过对页面效果的分析，我们已经熟悉了各个页面的结构。下面将通过HTML5标记及其属性来分别制作首页面、page01页面以及page02页面。
1. 常规准备工作
启动Hbuilder，在Hbuilder中新建web项目“实训1-2”，建议建在D盘根目录。 将实训1-2更名为“学号最后两位+姓名-实训1-2”，称为 “实训文件夹” 2. 制作首页面
在“实训文件夹”中新建HTML页面“HTML5百科” 拷贝网页素材图片到相应Img文件夹。
根据对首页面效果的分析，使用相应的HTML5标记来搭制作首页面，参考代码如下。
1
2
-
HTML5<word>百科<word>
3 4 5 6 7 8 9
10 12 13
14
。 11 
15 16
在以上代码中，通过src属性插入图像，并使用alt属性指定图像不能显示时的替代文本。另外，为了使图片居中对齐，需要通过标记进行嵌套，并使用align属性设置段落中的内容居中对齐。运行效果如图4所示。
图4 HTML页面结构效果
3. 制作page01页面
在“实训文件夹”中新建HTML页面“HTML5百科”
根据对page01页面的效果分析，使用相应的HTML5标记来制作page01页面，参考代码如下：
1 2 3
4
&
HTML5<word>百科<word>
HTML5百科
5 6 7 8 9
10 11
12 ● HTML5是HTML即超文本标记语言或超文本链接标示语言的第五个版本.目前广泛使用的是。
13 ● HTML5草案的前身名为Web Applications 。
14 ● 2004年被WHATWG提出。
15 {
16
● 2007年被W3C接纳，并成立了新的HTML 工作团队。
17 ● 2008年1月22日 ，第一份正式草案公布。
18
19
20 21 22
在中，通过align属性设置标题居中对齐。其中，第9行代码，通过src属性插入图像，并使用alt属性指定图像不能显示时的替代文本。同时，使用图像的对齐属性align和水平边距属性hspace拉开图像和文字间的距离。
第10、16行代码，通过size和color属性设置水平线粗细为3像素，颜色为灰色。另外，在第11~15行代码中，使用标记加粗某些文字，使用标记倾斜某些文字。同时，在●符号后使用多个空格符 实现留白效果。
第17、18行代码，使用图像的垂直边距属性vspace设置图像顶部和底部的空白。第18行代码，使用图像的对齐属性align设置图片居右对齐。
运行，效果如图5所示。
'
图5 页面
4. 制作page02页面
在“实训文件夹”中新建HTML页面“HTML5百科”
根据对page02页面的效果分析，使用HTML5标记来制作page02页面，具体如下：
1 2
/>/>
HTML5