W前端技术基础开发概述3

上传人：q*** IP属地：山东上传时间：2026-03-25 格式：PPTX 页数：57 大小：5.99MB 积分：15 举报 版权申诉

已阅读5页，还剩52页未读，继续免费阅读

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

文档简介

Web前端开发技术基础任务

红色文化资源网结构搭建通关任务1引导页结构搭建——HTML概念及基本结构AIGC赋能版📑目录01.任务描述02.任务目标04.知识宝典03.任务实施任务描述本任务采用HTML5的结构标签来完成简单的网站首页的搭建任务描述任务目标1.了解HTML的概念。2.掌握HTML的基本结构。3.掌握HTML5新增的结构标签。4.能够使用HTML5编写简单网页。图2-1-1任务效果图任务实施——结构分析任务实施——构建HTML结构（1）创建站点并保存网页图2-1-3

HTML

页面基础结构代码1）在HBuilderX软件中输入标签前面的几个字母并按<Tab>键，可以自动补齐剩下的标签及相关的属性。2）加入注释的快捷方式是选中文字后按<Ctrl+/>组合键。3）所有表示结构的代码标签是不会显示在页面上的。企业说1）运行HBuilderX软件，单击菜单上的文件—新建—项目命令，选择“普通项目”单选按钮，将项目名称命名为web2,单击“浏览”按钮选择存放路径，勾选“基本HTML项目”单击“创建”按钮创建新项目。2）在菜单中点击文件—新建HTML文件，在弹出的对话框中将文件重命名，找到<title></title>标签对，输入网页标题，单击HBuilderX软件工具栏的“保存”按钮或按ctrl+S快捷键保存文档。（

2）创建HTML主体结构图2-1-4

页面主体结构代码任务实施——构建HTML结构（

3）创建页面头部模块代码结构图2-1-5

页面头部模块代码及效果图任务实施——构建HTML结构（

4）创建页面主体模块代码结构图2-1-6页面主体模块代码及效果图任务实施——构建HTML结构（

5）创建页面尾部模块代码结构版权信息的构成及版权符号的书写方式：表述格式为“Copyright©+时间+版权所有者名称+ICP备案号”。版权符号©的代码为“©”。任务实施——构建HTML结构知识宝典-——HTML语言介绍HTML（HyperTextMarkupLanguage，超文本标记语言）不是编程语言，而是一种描述性的标记语言。它通过标签符号来标记网页中要显示的内容。网页中的文本、图像、表格、超链接等内容，都有特定的

HTML标签。（

）HTML

基本的语法格式双标签：<标签

内容

</标签

>。单标签：<标签

内容。例如：<title>红色文化资源网

</title>。表2-1-1

HTML

网页标签分类

标签举例双标签<p></p>、<div></div>、<html></html>、<body></body>、<title></title>、

<h1>…<h6>、</h1>…</h6>单标签<hr>、<br>、<meta>、<img>、<link>（2）标签的属性属性在标签中的使用格式如下<标签属性1=“属性值1”属性2=“属性值2”.....>标签内容</标签>例如：<imgsrc="img/chongzuo.jpg">说明：

大部分标签都是成对出现的，即双标签，有一个开始符号和一个结束符号，结束符号只是在开始符号前面加一个反斜杠“/”。少部分标签只有开始符号，没有结束符号，即单标签。1

.HTML

介绍知识宝典-——HTML的基本结构标签说明<!DOCTYPE>文档类型声明，位于文档最前面，用于向浏览器说明当前文档使用的

HTML标准的规范<html><html>标签标志着整个

HTML文档的开始，</html>标签标志着整个

HTML文档的结束。它们之间是文档的头部和主体内容<head>头部标签，主要用于定义描述文档标题

<title>、样式

<style>、元数据

HTML文档中的编码、关键字等信息。例如，charset用于定义字符编码，name用于定义描述信息，content用于定义关键字<title>用于定义文档的标题，预览后显示在浏览器的标题栏或状态栏<link>用于链接文档的外部样式<style>用于定义文档的内部样式<script>用于定义或链接客户端的脚本，如

JavaScript脚本表2-1-2

HTML

基本结构标签

标准的html文件都有一个基本的结构，即HTML文件的开头和结尾标签以及HTML的头部和主体两部分，当我们在HBuilder软件中新建HTML文件时，HBuilder软件会给我们生成默认的如下结构：知识宝典——HTML5新增结构标签标签说明<header>页面头部，通常是一些引导和导航信息<nav>可以作为页面导航的链接组<main>页面主体，一个网页只有一个<section>页面中的一个内容区块，通常由内容及标题组成<article>一个独立的、完整的相关内容块，可独立于页面其他内容使用<aside>非正文的内容，与页面的主要内容是分开的，被删除后不会影响网页的内容<footer>页面或页面中某一个区块的页脚部分表2-1-3

HTML5新增的网页结构标签HTML发展至今，经历了

HTML

1.0

、HTML2.0

、HTML3.2

、HTML4.01及

HTML5等多个版本。在这个过程中新增了许多

HTML标签，同时也淘汰了一些标签。感谢观看Web前端开发技术基础Web前端开发技术基础AIGC赋能版Web前端开发技术基础任务

红色文化资源网结构搭建通关任务2红色资讯页面结构搭建——文本标签

AIGC赋能版📑目录01.任务描述02.任务目标04.知识宝典03.任务实施任务描述网页中的文本标签有标题标签、段落标签、换行标签、水平线标签、文本格式化标签、特殊字符标签等。本任务采用HTML5的文本标签完成红色资讯页面结构搭建。效果图如图2-1-9所示。任务描述任务目标1.了解HTML5文本标签的分类。2.了解HTML5标题标签的使用方法。3.掌握HTML5段落标签的使用方法。4.掌握HTML5文本格式化标签的使用方法。5.掌握HTML5水平线标签的使用方法。6.能够综合使用HTML5的文本标签完成红色资讯页面的结构搭建。图2-1-9

红色资讯页面结构效果图任务实施——结构分析图2-1-11

代码与效果对比任务实施——构建HTML结构（

）复制页面更改标题图2-1-12复制页面更改标题代码效果图（

2）创建页面主体模块代码结构图2-1-13

页面主体结构模块代码效果图任务实施——构建HTML结构（

3）格式化页面主体模块代码结构图2-1-14

格式化页面主体模块代码效果图任务实施——构建HTML结构（1

）标题标签标题标签的作用是让用户快速地了解文档的结构。它是通过<h1>…<h6>共6个等级的标签来定义的，<h1></h1>标签对定义了最大字号的标题，<h6></h6>标签对定义了最小字号的标题。当为文字添加标题标签后，标题文字会独立成一行显示。语法格式如下。<hn>段落文字</hn>（其中，n表示1~6的数字）。文本标签有标题标签、段落标签、换行标签、水平线标签、文本格式化标签、特殊字符标签等。知识宝典-——文本标签表2-1-4

标题标签举例与效果

HTML代码效果

<h1>这是一级标题

</h1>

<h2>这是二级标题

</h2><h3>这是三级标题

</h3><h4>这是四级标题

</h4><h5>这是五级标题

</h5><h6>这是六级标题

</h6>（2

）段落标签段落标签是通过<p></p>标签对定义的。段落标签举例与效果见表2-1-5。语法格式：<p>段落文字</p>文本标签有标题标签、段落标签、换行标签、水平线标签、文本格式化标签、特殊字符标签等。知识宝典-——文本标签说明：<p>和

</p>之间的文字表示一个段落，多个段落需要用多个

<p></p>标签对。（3

）换行标签要在不产生一个新段落的情况下换行，需要使用<br>标签。语法格式：换行文字<br>文本标签有标题标签、段落标签、换行标签、水平线标签、文本格式化标签、特殊字符标签等。知识宝典-——文本标签说明：<br>表示强制换行，一个<p>标签等同于两个<br>标签。该标签为单标签。（4

）水平线标签<hr>是一个单标签，用于在网页中创建一条水平线来分隔网页中的内容。语法格式：文本内容<hr>文本标签有标题标签、段落标签、换行标签、水平线标签、文本格式化标签、特殊字符标签等。知识宝典-——文本标签（5

）文本格式化标签文本格式化标签可以设置文本的粗体、斜体、删除线和下画线效果。语法格式：1）<strong>文本内容</strong>：文本以粗体显示。2）<em>文本内容</em>：文本以斜体显示。3）<ins>文本内容</ins>：为文本添加下画线。4）<del>文本内容</del>：为文本添加删除线。文本标签有标题标签、段落标签、换行标签、水平线标签、文本格式化标签、特殊字符标签等。知识宝典-——文本标签（6）特殊字符标签在网页制作过程中，除了显示文字外，有时还需要插入特殊符号，如版权符号、注册商标、货币符号等。特殊字符标签举例与效果见表2-1-9。文本标签有标题标签、段落标签、换行标签、水平线标签、文本格式化标签、特殊字符标签等。知识宝典-——文本标签感谢观看Web前端开发技术基础Web前端开发技术基础AIGC赋能版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

）复制

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

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

example03.

html

文件，删除

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

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

）创建页面主体代码结构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

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）绝对路径：从根目录开始书写的完整路径，系统按照完整的路径查找文件。绝对路径分为两类：本地路径和网络路径。本地路径指文件在本地计算机中的物理路径；网络路径指发布在互联网上的网站的地址知识宝典-——路径类型表2-1-15绝对路径举例与说明路径分为两种：绝对路径和相对路径。2）相对路径：目标地址相对当前页面的路径。..表示当前目录的上一级目录。制作网页时，通常采用相对路径。知识宝典-——路径类型表2-1-16相对路径举例与说明感谢观看Web前端开发技术基础Web前端开发技术基础AIGC赋能版Web前端开发技术基础任务

红色文化资源网结构搭建通关任务4红色胜迹页面结构搭建——列表标签

AIGC赋能版📑目录01.任务描述02.任务目标04.知识宝典03.任务实施图2-1-24红色胜迹页面结构效果任务描述网页中经常用到列表，用于表现一组工整、有序排列的内容。HTML列表标签分为有序列表标签、无序列表标签、定义列表标签3种。本任务将采用HTML5的列表标签完成红色胜迹页面结构搭建，效果如图2-1-24所示。任务描述任务目标1.了解HTML5列表的概念。2.掌握HTML5中3种不同的列表标签属性及使用方法。3.能够使用HTML5的列表标签完成红色胜迹页面的结构搭建。图2-1-24

红色胜迹页面结构效果任务实施——结构分析图2-1-25

代码与效果对比任务实施——构建HTML结构（

）复制页面更改标题1）复制example03.html文件，将新复制的文件重命名为example04.html。2）打开新复制的example04.html文件，删除<main></main>标签对中的所有标签后找到<title></title>标签对，输入网页标题“红色文化资源网——红色胜迹页面结构搭建”。按<Ctrl+S>组合键保存文档。（

）创建页面主体代码结构1）在<main></main>标签对中插入注释“红色胜迹”。2）在注释下面插入第一个<div></div>标签对，用于存放关于“红色胜迹”的内容。3）同理加入“访问热点”的注释并插入第二个<div></div>标签对，用于存放关于“访问热点”的内容。（

3）创建“红色胜迹”模块代码结构图2-1-28红色胜迹模块代码及效果任务实施——构建HTML结构（

4）创建“访问热点”模块代码结构图2-1-29“访问热点”模块代码及效果任务实施——构建HTML结构1

）在第二个

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

<h2></h2>标签对，输入文字“访问热点”。2）在

<h2></h2>标签对后输入

<ol></ol>有序列表标签对。在

<ol></ol>标签对中输入<li></li>标签对，并输入相应的文字。同理，完成其他

<li></li>标签对及其内容的输入。这样以数字为序号的有序列表就制作完成了。完成后的代码及效果如图

2-1-29所示。（1

）无序列表标签无序列表标签举例与效果见表2-1-17。用途：用于展示无顺序、无优先级的项目（如菜单、分类项）。结构：外层用<ul>包裹，每个列表用<li>标签定。语法格式：<ultype="编号类型"><li>列表项1</li><li>列表项2</li>…</ul>。列表是一种常用的组织信息的方式。网页中经常用到列表。HTML列表标签分为无序列表标签、有序列表标签和定义列表标签3种。知识宝典-——列表标签（2

）有序列表标签有序列表标签举例与效果见表2-1-18。用途：用于展示有顺序、有步骤的项目（如操作指南、排行榜）。结构：外层用<ol>包裹，每个列表用<li>标签定义。语法格式：<oltype="编号类型"start=value><li>列表项1</li><li>列表项2</li>…</ul>。列表是一种常用的组织信息的方式。网页中经常用到列表。HTML列表标签分为无序列表标签、有序列表标签和定义列表标签3种。知识宝典-——列表标签（3

）定义列表标签定义列表标签举例与效果见表2-1-19。用途：用于展示术语及其定义（如词典、参数说明）。结构：外层用<dl>包裹，<dt>定义术语，<dd>定义术语描述。

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

温馨提示

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

W前端技术基础开发概述3

文档简介

温馨提示

最新文档

评论

W前端技术基础开发概述3

文档简介

温馨提示

最新文档

评论

相关文档