1 阶段1：任务初探
1-1 【任务分析】
任务分析是网页开发的前提与基础，任务分析重点要解决“做什么”，分成哪些模块，需要哪些技能点。图1-1为主题页面效果。
图1-1 主题页面效果
（网页素材资料来源：“学习强国”网站）
1.准备工作与页面布局
(1)准备工作
在HBuilderX中建立项目，命名为project-1，将图片素材拷贝到项目的img文件夹中。
具体步骤：
打开HBuilderX软件，新建项目。常用的方法有两种：一是利用“文件”菜单的“新建”选项中的“项目”菜单；二是在主界面中心的快捷菜单中选“新建项目”，如图1-2所示。
图1-2 新建项目(1)
在弹出的对话框中，选择“普通项目”，输入项目名称“project-1”，自定义存放的路径，在“选择模板”中选择“基本HTML项目”，点击“创建”按钮即可，如图1-3所示。
图1-3 新建项目(2)
在左侧的任务窗格中就能看到创建好的项目文件了，如图1-4所示。
图1-4 新建项目(3)
然后将网页图片素材拷贝到“img”文件夹中，双击“index.html”，在打开的编码区域准备书写网页代码，如图1-5所示。
图1-5 拷贝图片素材
(2)页面布局分析
根据网页效果图，可以将“庆祝中国共产党成立一百周年”主题页从上到下分为5个模块——头部模块、时政新闻模块、现场照片模块、网友交流模块和页脚模块，如图1-6所示。
图1-6 页面布局分析
2.知识准备
根据网页设计样图分析，本次主题网页的训练重点是HTML文本格式化、图片格式化和图文混排。
(1)HTML中常用的几种文本标记
•<h1>至<h6>标记：双标记，用于定义标题，表示不同级别的标题，其中<h1>为最高级标题，<h6>为最低级标题；能让网页中的文字加粗、字号变大或变小、强制换行。常用属性：align，用于设置标题文字的对齐方式，可取值为left（左对齐）、right（右对齐）、center（居中对齐）。
例1：
•<p>：双标记，定义段落，用于将一段文字组织为一个完整的段落。常用属性：align，用于设置段落文字的对齐方式，可取值为left（左对齐）、right（右对齐）、center（居中对齐）。
例2：
•<strong>：双标记，用于加粗文本，表示强调重点内容。
•<em>：双标记，用于斜体文本，表示强调内容的重要性。
•<ins>：双标记，用于给文本添加下划线。
•<del>：双标记，用于表示被删除的文字。
•<br/>：单标记，用于文字强制换行，等同于回车键效果。
例3：
•<font>：双标记，用于设置文字的字体、颜色、大小。常用属性：face，表示字体；size，取值1至7，表示字号；color，取值颜色英文单词或RGB值，表示颜色。
例4：
(2)图片标记
HTML中用于插入图片的标记是<img/>，它是单标记。
<img/>标记的常用属性包括：
•src：指定图片的路径，可以是相对路径或绝对路径。
•alt：指定图片的替代文本，用于在图片无法加载时显示或辅助阅读。
•width：指定图片的宽度，可以使用像素值或百分比。
•height：指定图片的高度，同样可以使用像素值或百分比。
•title：指定图片的标题，鼠标悬停在图片上时会显示该文本。
•align：指定图片的对齐方式，可取值为left（左对齐）、right（右对齐）、center（居中对齐）等。
•border：指定图片的边框宽度，以像素为单位。
例5：
在上面的示例中，<img/>标记用来插入一张图片。其中，src属性指定了图片的来源链接（这里是绝对路径），alt属性提供了图片的替代文本，width和height属性定义了图片的宽度和高度，title属性显示了鼠标悬停在图片上时显示的标题，align属性设置了图片在文本中的对齐方式（本例中设置为右对齐）。这些属性可以帮助页面更好地展示图片，并提供一些附加信息，如替代文本和标题。
(3)水平分割线标记
<hr/>标记通常会在段落、标题等内容之间进行分割，用于展示一种视觉上的间隔效果。
常用的属性：
•size：指定水平分割线粗细，以像素为单位。
•align：指定水平分割线的对齐方式，可取值为left（左对齐）、right（右对齐）、center（居中对齐）等。
•width：指定水平分割线的粗细，以像素或百分比为单位。
•color：指定水平分割线的颜色，取值为英文单词或RGB值。
例6：
在上面的示例中，使用<hr/>标记分别演示了3条水平分割线：第一条水平分割线粗度5，与浏览器窗口宽度一致；第二条水平分割线较细，红色，宽度300，居中，与浏览器窗口大小变化无关；第三条水平分割线粗度3，左对齐，占浏览器窗口大小的80%，并会随着浏览器窗口大小变化，灰色。
(4)常用特殊字符
在HTML中，有些特殊字符由于具有特殊含义，不能直接在文本中使用，需要使用特殊字符来表示。下面是一些常用的特殊字符及其对应的实体表示：
•<（小于号）：<
•>（大于号）：>
•版权符号：©
•.（注册商标符号）：®
•TM（商标符号）：™
•空格符号：
(5)div标记
<div>标签定义HTML文档中的一个分隔区块或者一个区域部分。
(6)注释语句
<！-- -->，可以在HTML文档中添加注释，增加代码的可读性，便于以后维护和修改。访问者在浏览器中是看不见这些注释的，只有在用文本编辑器打开文档源代码时才可见。
例7：
