Web前端技术项目式教程课件 任务二 使用HTML5搭建旅游公司网站首页结构

Web前端技术项目式教程

（HTML5+CSS3+Flex+Bootstrap）任务二

使用HTML5搭建中国传统文化网站首页结构知识目标1熟悉HTML常用标签及其属性。2了解网站目录结构创建的方法。能力目标1掌握使用HTML文档声明标签、头部标签、主体标签等构建网页基本结构。2掌握使用文本标签、图像、列表、表格等搭建静态网页。3掌握使用超链接完成页面跳转。4掌握使用iframe标签嵌入子窗口页面。素质目标1培养学生对中华优秀传统文化的深刻理解和认同。2培养学生良好的编程习惯和严谨的工作态度。任务描述宣传部部长李明的工作职责是拿到中华传统文化网站的页面设计效果图后，将其转化为网站代码。一个网站由许多页面链接而成，其中最重要的页面之一是首页。因此，李明首先制作的是首页。本任务的具体要求如下。

创建网站的目录结构。

综合使用HTML及HTML5的标签搭建首页结构。

在页面中添加相应的内容，如文字、图像、超链接、表格等。思维导图知识引入1.标题、段落和文本格式化标签2.图像标签3.列表标签4.超链接和<iframe>标签5.表格标签6.传统的布局标签<div>和<span>7.HTML5的语义化标签

1.HTML5标题、段落和文本格式化标签（1）标题标签<h1>至<h6>用来定义6个级别的章节标题，<h1>是一级标题，字体最大；<h6>是六级标题，字体最小，

1.HTML5标题、段落和文本格式化标签（2）段落标签<p>标签表示文本的一个段落。在浏览器中显示时会自动在段落前后创建一些空白。<br/>标签在文本中产生换行符（回车符），用于段落中的强制换行。<hr/>标签被用来分隔HTML页面中的内容（或者定义一个变化），并显示为一条水平线。

1.HTML5标题、段落和文本格式化标签（3）文本格式化标签<b>元素显示加粗文本效果，表示相对于普通文本字体上的区别，不表示任何特殊的强调。<i>标签显示斜体文本效果。<em>把文本定义为强调的内容。<strong>把文本定义为语气更强的强调的内容。2.图像标签（1）<img>标签<img>标签用于向网页中添加相关图片，网页中常见的图片格式有：JPG、PNG和GIF。向网页中插入图像的方法如下。<imgsrc="smiley-2.gif"alt="Smileyface"width="42"height="42"/>2.HTML5图片标签（2）<figure>标签<figure>标签是HTML5的新增标签。<figure>标签用来表示网页上一块独立的内容，将其从网页上移除后不会对网页上的其他内容产生影响。<figure>所表示的内容可以是图片、统计图或代码示例。<figcaption>标签定义<figure>元素的标题，应该被置于<figure>元素的第一个或最后一个子元素的位置。3.HTML5列表标签列表分为有序列表、无序列表和定义列表。①有序列表<ol>：列表项符号默认为阿拉伯数字序列。列表项用<li>定义。②无序列表<ul>：列表项默认为黑色实心圆点。列表项用<li>定义。③定义列表<dl>：当页面上每个列表项都需要标题和内容时，需要使用<dl>定义列表。4.超链接标签和<iframe>标签<a>标签定义超链接，用于从一个页面跳转到另一个页面，有两个重要的属性：href和target。①href属性用于指定超链接目标的URL，超链接的URL可能的值如下。绝对URL：指向另一个站点（例如href="/index.htm"）。相对URL：指向站点内的某个文件（例如href="index.htm"）。锚URL：指向页面中的锚（例如href="#top"）。空链接URL：没有目标端点的链接（例如href="#"）。②target属性规定在何处打开链接文档。4.超链接标签和<iframe>标签（2）<iframe>标签目前框架标签<frame>已经很少使用了，因此表2-2中的_parent和_top两个属性值也基本不再使用，取而代之的是内联框架标签<iframe>。内联框架用于在当前HTML文档中嵌入另一个文档。5.表格标签<table>标签用于定义表格，是表格最外层的标签。<caption>元素展示一个表格的标题。<tr>代表表格中的行。<td>代表表格中的单元格。<th>代表表格中的表头单元格。<thead>代表表格中的表头。<tbody>代表表格中的一块具体数据（表格主体）。<tfoot>代表表格中的表尾。6.传统的布局标签<div>和<span>（1）<div>标签在Web2.0时代，<div>标签是最常用的布局容器。<div>标签没有语义，相当于一个区块容器，可以容纳各种网页元素。区块容器有两大特点：①区块元素必须独占一行，不允许本行的后面再有其他内容；②区块容器默认情况下的宽度与它的父级标签的宽度相同。因此，可以把<div>与</div>中的内容视为一个独立的对象，用于CSS的控制，在div标签中加上class或id属性可以应用额外的样式。6.传统的布局标签<div>和<span>（2）<span>标签<span>标签用来组合文档中的行内元素。行内元素的特点刚好跟区块容器的特点相反：①行内元素不需要独占一行，本行后面还允许有其他的内容；②行内元素的宽度在默认情况下与它内部内容的宽度相同。7.HTML5的各种语义化分段元素②target属性规定在何处打开链接文档。任务实现：搭建中华传统文化网站首页结构1.规划网站目录结构2.分析首页结构3.构建首页结构4.添加网页内容任务拓展：中华传统文化网站二级页面

“传统建