W前端技术基础开发概述2_第1页
W前端技术基础开发概述2_第2页
W前端技术基础开发概述2_第3页
W前端技术基础开发概述2_第4页
W前端技术基础开发概述2_第5页
已阅读5页，还剩12页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

Web前端开发技术基础任务

红色文化资源网结构搭建通关任务3红色景点页面结构搭建——图像及超链接标签

AIGC赋能版📑目录01.任务描述02.任务目标04.知识宝典03.任务实施任务描述图像是网页中大量出现的元素，而超链接则是所有网站都必须具备的功能。超链接一般分为内部链接、外部链接、邮件链接、锚点链接等。本任务先采用HTML5的图像标签完成红色景点页面结构搭建，再使用超链接标签完成页面间的链接。任务描述任务目标1.了解Web常用的图像格式。2.掌握HTML5中图像标签的属性及使用方法。3.掌握HTML5中超链接标签的属性及使用方法。4.能够使用HTML5的图像标签完成红色景点页面的结构搭建。5.能够使用超链接标签完成页面间的链接。任务实施——结构分析图2-1-16

代码与效果对比本页面继续延续“通关任务1”的大结构布局，页面的<body>标签由页面头部（<header>）、页面主体（<main>）、页面尾部（<footer>）三大模块组成。其中，页面头部和页面尾部与“通关任务1”中的一致，主要的变化是页面主体<main>标签中的内容，本页面的<main>标签中有两个<div>标签。第一个<div>标签存放关于红色湘江战役纪念馆简介的内容，由<img>图像标签及<strong>文本格式化标签完成。第二个<div>标签存放关于红色湘江战役纪念馆景点详情的内容，由<h2>、<p>、<img>标签完成，如图2-1-16所示。任务实施——构建HTML结构（

1

）复制页面更改标题1

）复制

example02.html文件，将新复制的文件重命名为

example03.html。2）打开新复制的

example03.

html

文件，删除

<main></main>

标签对中的所有标签，找到

<title></title>标签对，输入网页标题“红色文化资源网——红色景点页面结构搭建”。按<Ctrl+S>组合键保存文档。（

2

）创建页面主体代码结构1

）在

<main></main>标签对中输入文字“红色湘江战役纪念馆简介”，按

<Ctrl+/>组合键将其转为注释。此注释起提醒的作用，不会在页面预览时出现。2）在注释下面插入第一个

<div></div>标签对，用于存放关于红色湘江战役纪念馆简介的内容。3）同理加入“红色湘江战役纪念馆景点详情”的注释并插入第二个

<div></div>标签对，用于存放关于红色湘江战役纪念馆景点详情的内容。页面主体结构代码如图

2-1-17所示。图2-1-17页面主体结构代码（

3）创建“红色湘江战役纪念馆简介”模块代码结构图2-1-18

图像标签插入及代码任务实施——构建HTML结构1）在

<div></div>标签对中插入

<img>，按<Tab>

键自

动

加

入

代

码

<img

src=""alt="">，

在src=""

的双引号中按空格键，在弹出的窗口中选择需要的图像，图像路径将自动生成。接着按空格键，输入“w”，在弹出的窗口中选择“width”，将图像宽度设置为“500px”；最后在

alt属性中输入文字“红色湘江战役纪念馆”。图片标签插入及代码如图

2-1-18所示。关于图像的属性设置问题:1）alt属性用于为图像定义一段备用的可替换文本，当浏览器无法载入图像时将载入alt属性的内容。按照W3C标准，插入图像时通常需要添加alt属性。2）width和height属性用于设置图像的宽度和高度，可以以像素（px）为单位，也可以用百分比（%）表示。如果不设置这两个属性，则按原图比例显示。如果只设置其中一个属性，则另一个按照原图等比例进行调整。（

3）创建“红色湘江战役纪念馆简介”模块代码结构图2-1-19“红色湘江战役纪念馆简介”模块代码及效果任务实施——构建HTML结构2）在<img>标签对后插入<p></p>标签对，并把相应文字复制到标签对中，此时文字是没有任何格式的，在一行显示，在相应的位置加入强制换行标签<br>，会显示换行效果，最后按效果图在相关文字中加入<strong></strong>标签对。完成后的模块代码及效果如图2-1-19所示。（

4）创建“红色湘江战役纪念馆景点详情”模块代码结构图2-1-20“红色湘江战役纪念馆景点详情”模块代码及效果任务实施——构建HTML结构（

5）加入站内链接任务实施——构建HTML结构1

）在导航栏中加入链接，若没有对应链接，则设为空链接。完成后的代码如图

2-1-21所示。2

）同理完成“红色景点”链接的添加，对于暂无页面的链接，可以在

href

属性中输入“#”，代表空链接。图2-1-21

完成后的代码图2-1-22

“红色景点”链接代码及效果（

6）加入其它链接任务实施——构建HTML结构1）在第二个

<div>标签中加入

<p></p>标签对并输入文字“友情链接：广西党史网红色文化网”，再次加入两个<p></p>标签对，分别输入“联系站长”及“返回”文字。2）加入外部链接：在“广西党史网”文字前和后分别添加超链接标签<ahref="">和</a>，设置href属性值为外部网站的网址“”，单击可以进入广西党史网站。同理，完成“红色文化网”的外部链接。3）加入邮件链接：在“联系站长”文字前和后分别添加超链接标签<ahref="">和</a>,设置href属性值为“mailto:1234@”，创建电子邮件链接，单击后会打开系统默认的客户端软件。4

）加入锚点链接：创建锚点链接的第一步是设置锚点位置，首先找到页面头部标签<header>后面的<h1>标签，在标签中添加一个锚点，锚点名可以自定义，比如本页自定义为id="a1"。接着找到页面尾部上方<p>标签中的“返回”文字，在“返回”文字前和后分别添加超链接标签<ahref="">和</a>，设置href属性双引号中的值为锚点名“#a1”，此时单击链接即可跳转到锚点位置，从而实现页面内的跳转。具体代码及效果如图 2-1-23所示。

图2-1-23

具体代码及效果<div></div>标签对相当于一个容器，它可以把文档分成独立的、不同的部分。它里面可以存放各种HTML标签，如段落标签<p>、图像标签<img>、标题标签<h1>~<h6>、表格标签<table>及<div>标签本身等。语法格式如下：<div>文本内容</div>知识宝典-——div标签表2-1-10<div>标签举例与效果

HTML图像分为两类：插入图像和背景图像。插入图像通过HTML中的标签定义，背景图像则通过CSS进行定义。在HTML中，<img>标签用于插入图像。<img>是单标签，它由标签<img>本身及其属性构成。语法格式：<imgsrc="图像路径"alt="替换文本"title="提示文本"width="图像宽度"height="图像高度">知识宝典-——图像标签表2-1-11图像标签举例及效果表2-1-11图像标签属性和说明在浏览网页时，当鼠标指针移动到某些元素时，会变成手形指针，单击就能从一个网页跳转到另一个网页，或从一个网页的某部分跳转到其他部分，这就是超链接。HTML超链接主要由<a></a>标签对及其属性构成。语法格式：<ahref="目标地址"target="目标窗口"title="提示文本">文字内容</a>知识宝典-——超链接标签表2-1-13超链接标签类型和说明说明：超链接的内容可以是文字，也可以是图片、表格、表单、视频等在浏览网页时，当鼠标指针移动到某些元素时，会变成手形指针，单击就能从一个网页跳转到另一个网页，或从一个网页的某部分跳转到其他部分，这就是超链接。HTML超链接主要由<a></a>标签对及其属性构成。语法格式：<ahref="目标地址"target="目标窗口"title="提示文本">文字内容</a>知识宝典-——超链接标签表2-1-14target的属性和说明路径分为两种：绝对路径和相对路径。1）绝对路径：从根目录开始书写的完整路径，系统按照完整的路径查找文件。绝对路径分为两类：本地路径和网络路径。本地路径指文件在本地计算机中的物

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论