实训1-2  制作HTML5百科页面
一、实训目的
1.熟悉HBuilder,熟悉HTML5文档基本格式
2.能够运用HTML5语法基本格式及标记、文本控制标记以及图像标记制作简单的页面。
二、案例描述
制作一个HTML5百科页面“HTML5百科—首页.html”，默认效果如图1所示。
图1  HTML5百科页面默认宁波网站制作公司效果
当在图1所示的页面区域单击时，跳转至“HTML5百科—page01.html”页面，效果如图2所示。
图2  page01.html页面
点击图2所示页面中的“返回”按钮时，返回至首页面；点击“下一页”按钮时，跳转至“HTML5百科—page02.html”页面，效果如图3所示。
图 3  page02.html页面
点击图3所示页面中的“返回”按钮时，返回至首页面；点击 “上一页”按钮时，跳转至“HTML5百科—page01.html”页面。
三、案例分析
为了提高网页制作的效率，每拿到一个页面的效果图时，都应当对其结构和样式进行分析。下面，将分别针对首页面、page01页面及page02页面进行分析。
1.首页面效果分析
观察首页面效果图1可以看出，页面中只有一张图像，点击图像可以跳转到“page01.html”页面，可以使用<a>标记嵌套<img>标记布局，使用<img />标记插入图像，并通过<a>标记设置超链接。
2.page01页面效果分析
观察效果图2可以看出，page01页面中既有文字又有图片。文字由标题和段落文本组成，
并且水平线将标题与段落隔开，它们的字体和字号不同。同时，标题居中对齐，段落文本中的某些文字加粗显示。所以，可以使用<h2>标记设置标题，<p>标记设置段落，<strong>标记加粗文本。另外，使用水平线标记<hr />将标题与内容隔开，并设置水平线的粗细及颜。
此外，需要使用<img />标记插入图像，通过<a>标记设置超链接，并且对<img />标记应用align属性和hspace属性控制图像的对齐方式和水平距离。
3.page02页面效果分析
观察图3可以看出，page02页面中主要包括标题和图片两部分，可以使用<h2>标记设置标题，<img />标记插入图像。另外，图片需要应用align属性和hspace属性设置对齐方式和垂直距离，并通过<a>标记设置超链接。
四、案例实现
通过对页面效果的分析，我们已经熟悉了各个页面的结构。下面将通过HTML5标记及其属性来分别制作首页面、page01页面以及page02页面。
1.常规准备工作
启动Hbuilder，在Hbuilder中新建web项目“实训1-2”，建议建在D盘根目录。
将实训1-2更名为“学号最后两位+姓名-实训1-2”，称为 “实训文件夹”
2.制作首页面
在“实训文件夹”中新建HTML页面“HTML5百科-index.html”
拷贝网页素材图片到相应Img文件夹。
根据对首页面效果的分析，使用相应的HTML5标记来搭制作首页面，参考代码如下。
1<!doctype html>
2<html>
3<head>vb数字转字符串函数
4<meta charset="utf-8">
5<title>HTML5百科</title>
6</head>
7<body>
8<p align="center">
9    <a>
10        <img src="images/html5.jpg" alt="传智播客设计学院UI设计师"/>
11    </a>
12</p>
13</body>
14</html>
在以上代码中，通过src属性插入图像，并使用alt属性指定图像不能显示时的替代文本。另外，为了使图片居中对齐，需要通过<p>标记进行嵌套，并使用align属性设置段落中的内容居中对齐。运行效果如图4所示。
图4  HTML页面结构效果
3.制作page01页面
    kali vim命令在“实训文件夹”中新建HTML页面“HTML5百科-page01.html”
根据对page01页面的效果分析，使用相应的HTML5标记来制作page01页面，参考代码如下：
15<!doctype html>微服务架构的区别
16<html>
17<head>
18<meta charset="utf-8">
19<title>HTML5百科</title>
20</head>
21<body>
22<h2 align="center">HTML5百科</h2>
23<img src="images/a.jpg" alt="传智播客设计学院UI设计师" align="left" hspace="30"/>
24<hr size="3" color="#CCCCCC" >
25<p>●  <strong>HTML5</strong>是<strong>HTML</strong>即超文本标记语言或超文本链接标示语言的第五个版本.目前广泛使用的是<strong>HTML4.01</strong>。</p>
26<p>●  <strong >HTML5</strong>草案的前身名为<strong>Web Applications 1.0</strong>。</p>
27<p>●  <em>2004</em>年被<strong>WHATWG</strong>提出。</p>
28<p>●  <em>2007</em>年被<strong>W3C</strong>接纳，并成立了新的<strong>HTML</strong>工作团队。</p>
29<p>●  <em>2008年1月22日</em>，第一份正式草案公布。</p>
30<hr size="3" color="#CCCCCC" >
31<a><img src="images/down.png" alt="下一页" vspace="20"></a>
32<a><img src="images/return.png" alt="返回" vspace="20" align="right"></a>
33</body>
34</html>
在page01.html中，通过align属性设置<h2>标题居中对齐。其中，第9行代码，通过src属性插入图像，并使用alt属性指定图像不能显示时的替代文本。同时，使用图像的对齐属性align和水平边距属性hspace拉开图像和文字间的距离。
第10、16行代码，通过size和color属性设置水平线粗细为3像素，颜为灰。另外，在第11~15行代码中，使用<strong>标记加粗某些文字，使用<em>标记倾斜某些文字。同时，在●符号后使用多个空格符 实现留白效果。
第17、18行代码，使用图像的垂直边距属性vspace设置图像顶部和底部的空白。第18行代码，使用图像的对齐属性align设置图片居右对齐。
运行page01.html，效果如图5所示。
图5 page01.html页面
4.制作page02页面
在“实训文件夹”中新建HTML页面“HTML5百科-page02.html”
根据对page02页面的效果分析，使用HTML5标记来制作page02页面，具体如下：
35<!doctype html>
36<html>
37<head>
38<meta charset="utf-8">
39<title>HTML5百科</title>
40</head>
41<body>
42<h2 align="center">HTML5百科</h2>
43<img src="images/b.jpg" alt="传智播客设计学院UI设计师" align="left" hspace="30"/>
44<hr size="3" color="#CCCCCC" >
45<img src="images/pic01.jpg">
46<img src="images/pic02.jpg">
47<hr size="3" color="#CCCCCC" >
48<a><img src="images/up.png" alt="上一页" vspace="20"></a>
49<a><img src="images/return.png" alt="返回" vspace="20" align="right"></a>
50</body>
51</html>
在page02javascript:void怎么解决.html中，通过align属性设置<h2>标题居中对齐。其中，第10、13行代码，通过size和color属性设置水平线粗细为3像素，颜为灰。另外，第14、15行代码，使用图像的垂直边距属性vspace设置图像顶部和底部的空白。第15行代码，通过图像的对齐属性align设置图片居右对齐。html个人网页完整代码图片

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。