项目1利用HTML5制作图文混排页面录第一个网页的创建页面格式化标记应用文本样式标签的应用HTML标记属性应用录文本格式化标记应用文本语义标签的应用图像标签的应用超链接标签的应用

09目录音频视频标签应用

项目描述某学员想要制作一个以“冬奥会”为主题的图文混排网页，目前静态网页设计以HTML5为主，但他还是零基础，怎样才能制作一个图文混排的网页呢？本项目主要介绍HTML5基本结构与常用标签的用法，通过这些标签以及相应的属性设置我们就可以制作出一个基本的图文混排网页。

项目效果图图1-1主页面效果图图1-1-1“国风雅韵”效果图

项目效果图图1-1-2“钱塘潮涌”效果图图1-1-3“携手同行”效果图

知识储备

知识目标了解HTML的结构，包括文档类型声明、HTML标签、头标签和主体标签等，理解它们的作用。HTML基本结构了解学习如何通过文本标签控制字体样式、颜色和对齐方式，以及如何插入和调整图像。HTML文本与图像控制熟悉如标题标签、段落标签、换行标签等基本的HTML元素，掌握它们的用法。HTML常用标签熟悉010203

任务1第一个网页的创建01

任务描述利用网页编辑软件创建第一个网页，要求网页标题显示：第一个网页，效果图如右图所示。

知识点拨?!DOCTYPE标记01?html标记0203?head标记!DOCTYPE标记标记位于文档的最前面，用于声明文档的类型。html标记是HTML真正的根标记，用于标识此文档是一个HTML文档，html和/html标记分别标志着HTML文档的开始和结束，在它们之间的是文档的头部和主体内容。head标记用于定义HTML文档的头部信息，也称为头部标记，一个HTML文档只能含有一对head标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。

知识点拨?meta标记04??title标记05??body标记06meta标记提供关于HTML的元数据。body标记用于定义HTML文档所要显示的内容，也称为主体标记。title标记用于定义HTML页面标题。

页面格式化应用02

任务描述利用页面格式化标记：标题标记、段落标记、水平线标记综合完成右图这样一个关于科普网络安全的网页。

知识点拨HTML标题标签01段落标记介绍02水平线与注释标记03换行与标记类型04HTML定义了六个等级的标题标签，分别为h1h2h3h4h5h6，字体大小按顺序由大到小。在网页中使用p标记定义段落。它是HTML中最常见的标签。hr/用于在网页中添加水平线。注释标记格式为：!--注释标记--br/用于实现自动换行效果。单标记用法：标记名/双标记用法：标记名内容/标记名

HTML标记属性应用03

任务描述利用HTML标记属性对上一个任务进行样式再编辑，要求标题内容居中显示，同时对水平线进行粗细设置，并设置相应颜色，并对重点文字信息进行加粗显示，如右图所示。

知识点拨HTML标记的属性01align02hr/标记的常用属性03HTML标记可以拥有多个属性，可以通过“属性=属性值”的方式为标记添加属性。align代表对齐方式的属性，属性值可以为：左对齐-left,居中对齐-center，右对齐-right。hr/标记的常用属性如表1-1。属性名含义属性值align设置水平线的对齐方式?可选择left、right、center三种值，默认为center，居中对齐size设置水平线的粗细?以像素为单位，默认为2像素color设置水平线的颜色可用颜色名称、十六进制#RGB、rgb(r,g,b)width设置水平线的宽度可以是确定的像素值，也可以是浏览器窗口的百分比，默认为100%

文本样式标签的应用04

任务描述制作一个科普虚拟现实技术的页面，要求利用文本样式标签style对标题和段落文字的颜色进行设置，效果图如右图所示。

知识点拨style标记01在HTML中使用style标记时，常常定义其属性为type，相应的属性值为text/css，表示使用内嵌式的CSS样式。基本语法格式：style属性=”属性值”样式内容/style，样式内容主要是对相关标记定义对应属性及属性值，具体在第三章详讲。

文本格式化标记应用05

任务描述制作一个科普虚拟现实技术的页面，要求利用文本样式标签style对分别利用文本格式化不同标记做出文字不同效果，效果图如右图所示。

知识点拨文本格式化标签01网页中有时需要对一些文字设置粗体、下划线、斜体或加删除线等一些特殊显示的文本效果，HTML提供了专门的文本格式化标签，如下：1、文字以粗体方式显示b/b和strong/strong2、文字以加下划线方式显示u/u和ins/ins3、文字以斜体方式显示i/i和em/em4、文字以加删除线方