Web前端开发技术基础 课件全套 秦红梅 项目1-5:走进Web前端开发-Web前端开发概述- 规划页面布局(综合案例) 首页_第1页
Web前端开发技术基础 课件全套 秦红梅 项目1-5:走进Web前端开发-Web前端开发概述- 规划页面布局(综合案例) 首页_第2页
Web前端开发技术基础 课件全套 秦红梅 项目1-5:走进Web前端开发-Web前端开发概述- 规划页面布局(综合案例) 首页_第3页
Web前端开发技术基础 课件全套 秦红梅 项目1-5:走进Web前端开发-Web前端开发概述- 规划页面布局(综合案例) 首页_第4页
Web前端开发技术基础 课件全套 秦红梅 项目1-5:走进Web前端开发-Web前端开发概述- 规划页面布局(综合案例) 首页_第5页
已阅读5页,还剩487页未读 继续免费阅读

下载本文档

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

文档简介

Web前端开发技术基础任务:

红色文化资源网欢迎页制作通关任务

使用前端开发工具开发第一个网页AIGC赋能版📑目录01.任务描述02.任务目标04.知识宝典03.任务实施图2-1-24红色胜迹页面结构效果任务描述Web前端开发工具有很多种,不同的工具有不同的优缺点,

比较常用的有HBuilderX、AdobeDreamweaver、SublimeText等。

本任务将运用HBuilderX软件创建“我的第一个网页”。通过该网页的制作,读者可以熟悉HBuilderX前端开发工具的使用方法,并了解与Web相关的知识等。任务描述任务目标1.了解Web前端开发的概念。2.掌握HBuilderX软件的使用方法。3.了解Web前端开发的工具及流程。4.能够使用HBuilderX软件创建简单的HTML网页。图1-1-1“我的第一个网页”效果图任务实施(

1

)安装并启动HBuilderX软件1)HBuilderX是一款国产的免费软件,用户可以在HBuilderX官网下载安装包。目前有两个版本,一个是Windows版,另一个是macOS版。用户可以根据计算机的系统选择合适的版本进行下载。HBuilderX软件下载界面如图1-1-2所示。2)HBuilderX是一款绿色软件,下载完成后无须安装,解压后双击HBuilderX应用程序即可运行,也可将图标添加到桌面快捷方式。HBuilderX应用程序界面如图1-1-3所示。图

1-1-2

HBuilder

X

软件下载界面图

1-1-3

HBuilderX

应用程序界面(

1

)安装并启动HBuilderX软件任务实施——构建HTML结构HBuilderX软件初次打开界面如图

1-1-4所示。图

1-1-4

HBuilder

X

软件初次打开界面(

2)新建项目任务实施项目可以存储网站的所有文件及文件夹,这些文件包含网页文件、样式文件、图片文件、脚本文件等。选择菜单中的“文件”→“新建”→“项目”命令,在弹出的界面中选择“普通项目”选项,将项目名称命名为“chapter01”,单击“浏览”按钮选择存放路径,勾选“基本HTML项目”,单击“创建”按钮,即可新建项目,如图1-1-5所示。图

1-1-5

新建项目(

2)新建项目任务实施项目创建后,HBuilderX界面的左侧窗口中显示了该项目的内容,包括样式文件夹(css)、图像文件夹(img)、特效文件夹(js)及网站首页(index.html),如图1-1-6所示。图

1-1-6

项目内容(

3)新建文件任务实施右击新建的“chapter01”项目,在弹出的快捷菜单中选择“新建”→“html文件”命令,在弹出的“新建html文件”对话框中将文件命名为“example01.html”,选择存放路径,选择默认的“default”模板,单击“创建”按钮,如图1-1-7所示。图1-1-7“新建html文件”对话框(

4)输入网页代码任务实施在<title></title>标签对中输入网页标题“我的第一个网页”。在<body></body>标签对中输入“使用HBbuilderX软件开发我的第一个网页”,网页具体代码如图1-1-8所示。图1-1-8网页具体代码(

5)保存网页任务实施单击HBuilderX软件工具栏中的“保存”按钮或按<Ctrl+S>组合键保存文件内容。(6)浏览网页单击HBuilderX软件工具栏中的“浏览器运行”按钮或按<Ctrl+R>组合键,选择一种浏览器浏览网页,还可以按<Alt+P>组合键选择在内置浏览器中进行预览。浏览网页效果如图1-1-9所示。图1-1-9浏览网页1.

Web前端开发概述Web前端开发是创建Web页面或APP界面等前端界面并将其呈现给用户的一个过程。它通过超文本标记语言(HTML)、层叠样式表(CSS)、脚本语言(JavaScript),以及衍生出来的各种技术、框架、解决方案来实现互联网产品的用户界面交互。知识宝典2.

Web相关概述Web前端开发是创建Web页面或APP界面等前端界面并将其呈现给用户的一个过程。它通过超文本标记语言(HTML)、层叠样式表(CSS)、脚本语言(JavaScript),以及衍生出来的各种技术、框架、解决方案来实现互联网产品的用户界面交互。(

1

)Internet

、IP地址和域名从网络通信的角度来看,Internet

是一个以

TCP/IP

连接全球各个国家、各个地区、各个机构计算机网络的数据通信网。从信息资源的角度来看,Internet

是一个集各部门、各领域、各种信息资源为一体的供网上用户共享的信息资源网。Internet

上连接了数以万计的服务器和客户机。每一台主机在

Internet

上都有一个唯一的地址,称为

IP

地址。IP

地址分为

IPv4和

IPv6。这里以

IPv4为例进行介绍。IPv4地址的格式为

XXX.XXX.XXX.XXX,其中,XXX是

0~255

的任意整数。(2

)WWW、HTTP和URLWWW是WorldWideWeb(环球信息网)的缩写,简称Web,中文名字为“万维网”。超文本传输协议(HyperQTextTransferProtocol,HTTP)是因特网上应用非常广泛的一种网络传输协议,用于WWW客户机与WWW服务器之间的请求和应答。HTTP的工作过程包括4个步骤:建立连接、发送请求信息、发送响应信息、关闭连接。统一资源定位符(UniformResourceLocator,URL)是一种统一格式的Internet信息资源地址的标识方法,是一个识别Internet中信息资源,并且将Internet提供的服务统一编址的系统。URL是Internet上的地址簿。知识宝典(3)网站、网页和主页网页是网站的组成部分。制作者可以将需要公布的信息按照一定的方式分类,放置在网页上。网页里可以有文字、表格、图像、声音及视频等。网页可以看成一个单一体,是网站的一个元素。主页也称为首页,是网站被访问的第一个页面,通常用index.html表示。3.

Web标准Web标准不是某一个标准,而是一系列标准的集合。网页主要由3部分组成:结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分3部分:结构化标准,主要指HTML结构;表现标准,主要指CSS样式;行为标准,主要指用JavaScript等脚本语言实现的网页行为效果。这些标准大部分由万维网联盟(缩写为W3C)起草和发布。知识宝典4.

Web前端开发技术(1)HTMLHTML(超文本标记语言)由文字、图像、表格、表单等标签元素组成,通过使用不同的标签元素完成页面结构的搭建。HTML是前端重构的基础,所有的页面前端重构都离不开HTML。HTML发展至今,经历了多个版本,HTML5是目前广泛使用的版本。(2)CSSCSS(层叠样式表)是一种标记语言,主要用于对网页字体、颜色、背景、显示模式等进行设置。开发人员在前端重构过程中使用HTML来定义网页的结构,而页面的排版和美化则依靠CSS来实现,两者相辅相成,不可缺少。CSS3是目前广泛使用的版本。(3)JavaScript脚本语言JavaScript脚本语言(简称“JS”)是一种函数优先的轻量级、解释型或即时编译型的编程语言。它虽然是开发Web页面的脚本语言,但被用到了很多非浏览器环境中。JavaScript是基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式(如函数式)编程范式。HTML和CSS可以完成前端页面重构,但实现编写的页面具备交互功能,就需要使用JavaScript脚本语言。知识宝典5.

Web前端开发工具知识宝典表1-1-1

Web

前端开发工具及其优缺点

工具优点缺点HBuilderX可快速输入代码,

中文界面友好,

开源、快捷键多主要用于

Web前端开发,不能同时进行

Java等语言的后台编程AdobeDreamweaver有可视化编辑界面,支持多种方式创建和修改网页,适合对代码不熟悉的初学者代码输入界面不友好,软件占用内存空间大,兼容性有待加强

SublimeText

轻量级软件,插件多,可快速输入代码功能强大,快捷键众多,对于初学者需要花费较多时间去熟悉和掌握6.

Web前端开发流程知识宝典Web前端开发流程包含前期策划(需求分析)、网页美工设计、网站前端重构和后期测试发布

4个阶段。前期策划(需求分析)包括了解网站的业务背景,明确网站的设计风格,确定网站的内容等;网页美工设计主要指网页设计师与客户沟通,了解客户的基本要求后,根据网站建设方案,使用

Photoshop

等图像处理软件进行页面效果图设计;网站前端重构主要指前端开发人员将设计好的效果图进行重构并制作成页面、添加样式和功能开发等;后期测试发布主要包括检查页面效果是否美观、链接是否完好、与浏览器是否兼容,以及发布网站等。Web前端开发流程图如图

1-1-10所示。晋级任务——红色文化资源网欢迎页制作任务要求在HBuilderX软件中完成红色文化资源网欢迎页制作,并在浏览器中预览效果,如图1-1-11所示。图1-1-11红色文化资源网欢迎页效果图任务小结表1-1-2

本任务主要知识点感谢观看Web前端开发技术基础Web前端开发技术基础AIGC赋能版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标签。(

1

)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>、元数据

<meta>、脚本<script>等信息。标签里面定义的内容不显示在页面中<body>主体标签。浏览器中显示的所有文本、图像、音视频都必须写在此标签中<meta>元数据标签,用于定义

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结构(

1

)复制页面更改标题图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

)复制页面更改标题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)绝对路径:从根目录开始书写的完整路径,系统按照完整的路径查找文件。绝对路径分为两类:本地路径和网络路径。本地路径指文件在本地计算机中的物理路径;网络路径指发布在互联网上的网站的地址知识宝典-——路径类型表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

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

2

)创建页面主体代码结构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>定义术语描述。一个<dt>可对应多个<dd>。语法格式:<dl><dt>条目1</dt><dd>数据1</dd><dd>数据2</dd><dt>条目2</dt><dd>数据1</dd><dd>数据2</dd>…</dl>列表是一种常用的组织信息的方式。网页中经常用到列表。HTML列表标签分为无序列表标签、有序列表标签和定义列表标签3种。知识宝典-——列表标签晋级任务——红色文化资源网首页结构搭建任务要求综合应用文本标签、图像标签、列表标签完成红色文化资源网首页的制作,并完成导航中各页面的链接,暂时没有链接的栏目设置为空链接,单击下面的“返回”链接返回到页面顶部,单击“友情链接:”后的“广西党史网”“红色文化网”链接到相关的外部网站,具体网页效果如图2-1-30所示。图2-1-30

晋级任务网页效果任务小结知识点知识内容描述

HTML结构标签<!DOCTYPEhtml>定义

HTML文档类型<html>…</html>定义

HTML文档的开始和结束<head>…</head>定义文档的头部信息<body>…</body>定义文档的主体<title>…</title>定义文档的标题

HTML5新增结构标签<header>…</header>页面头部<nav>…</nav>页面导航<main>…</main>页面主体<section>…</section>页面中的一个内容区块<article>…</article>定义文章主体<aside>…</aside>侧边栏<footer>…</footer>页脚部分

文本标签<h1></h1>,…,<h6></h6>标题文字<P>…</p>段落<br>强制换行<hr>水平线<strong>,<ins>,<em>,<del>文本格式化标签

©®¥<>特殊字符图像标签<imgsrc=""Alt=""title=""width=""height="">插入图像超链接标签<ahref=""target=""title=""></a>插入超链接

列表标签<ultype=""><li></li></ul>无序列表<oltype=""><li></li></ol>有序列表<dl><dt><dd></dd></dt></dl>自定义列表表2-1-20

本任务主要知识点感谢观看Web前端开发技术基础Web前端开发技术基础AIGC赋能版Web前端开发技术基础任务1 红色资讯详情页制作

——使用CSS设置文字样式通关任务1制作红色资讯详情页1——认识CSS样式AIGC赋能版📑目录01.任务描述02.任务目标03.任务实施任务描述CSS是一种用于描述网页外观和格式的标记语言。它在Web开发中占据着十分重要的地位,通过样式设定,可以使网页具有可读性、易用性和视觉吸引力。通过本任务的实施,读者可学习CSS的基本语法,掌握多种CSS样式的应用方式,熟悉各种选择器的运用。红色资讯详情页1效果如图3-1-1所示。任务描述任务目标1.掌握CSS的基本语法。2.掌握引入CSS样式的方式。3.掌握常用选择器的定义与用法。图3-1-1红色资讯详情页1效果任务实施——HTML结构分析整个页面代码结构运用了HTML的<article>标签来搭建,页面主标题使用<h1>标签,副标题使用<h3>标签,文章正文分别使用4个<p>标签,布局结构如图3-1-2所示。图3-1-2布局结构任务实施——HTML结构搭建(1)创建站点并保存网页(1)创建项目并新建页面1)打开HBuilderX软件,选择菜单中的“文件”→“新建”→“目录”命令,或者选择页面中的“新建项目”选项,在弹出的“新建页面”对话框中,设置项目名称为“chapter3-1”,单击“浏览”按钮,选择项目存放路径,选择模板“基本HTML项目”,单击“创建”按钮。2)选择“chapter3-1”项目名称并单击鼠标右键,选择“新建”→“HTML文件”命令,将新建的HTML文件命名为“example01.html”。(

2)创建HTML结构图3-1-3在example01.html文件中输入内容并显示页面效果任务实施——构建HTML结构1)打开“example01.html”页面。2)编辑example01.html文件。在<title></title>标签对中输入标题“红色资讯详情页1”,在<body></body>标签对中插入用于定义独立内容的<article></article>标签对,在<article></article>标签对中分别插入<h1></h1>、<h3></h3>、<p></p>标签对,打开素材“example01.txt”,将文字复制到相应的标签对中,单击“浏览器运行”按钮预览页面,如图3-1-3所示。任务实施——CSS样式分析图3-1-4CSS样式分析页面的CSS样式表分别引用了<p>标签的行内样式和内部样式表。内部样式表定义了“article”“h1”“h3”三个标签选择器,“.text1”“.text2”两个类选择器,以及“#p1”一个id选择器。CSS样式分析如图3-1-4所示。任务实施——CSS样式定义1)创建内部样式。内部样式定义在<style></style>标签对中。在<title></title>标签对后按<Enter>键换行,输入“sty”字符,在自动出现的下拉列表中选择“style_type”选项后,按<Enter>键,即可完成标签属性的设置,如图3-1-5所示。图3-1-5快速补全<style></style>标签对中的代码任务实施——CSS样式定义2)定义标签选择器。在<styletype="text/css"></style>标签对中输入定义标签选择器的代码,本页面定义了article、h1、h3这3个标签选择器。使用article标签选择器定义HTML页面主体的宽度和边距样式,使用h1、h3标签选择器设置文字水平居中。任务实施——CSS样式定义3)定义类选择器。定义类名为.text1和.text2的类选择器,.text1设置文字水平居中,.text2设置文本首行缩进2字符。说明:h1、h3标签选择器和“.text1”类选择器都是设置文字的水平居中对齐,可使用并集选择器简化样式的代码,写为:h1,h3,.text1{text-align:center;/*设置文字水平居中*/}任务实施——CSS样式定义(4)定义id选择器。定义id选择器#p1,#p1选择器单独运用于第四个<p>标签,即正文第二段。任务实施——CSS样式引入(1)将标签选择器引入到页面中。标签选择器定义的样式能自动应用到网页中的相应元素上。所有的HTML标签都可以作为标签选择器,如<p>、<h3>、<strong>、<li>、<ul>等。(2)将类选择器引入到页面中。将“.text1”类选择器应用于页面中的第一个<p>标签中,使其中的文本居中对齐,将“.text2”应用于第二个<p>标签。在<p>标签的<>内按空格键输入字母“cl”选择“class”属性,在弹出的窗口中选择已定义的“.text1”类选择器,如图3-1-6所示。图3-1-6选择类选择器任务实施——CSS样式引入在<p>标签中使用类选择器后,标签中的文本居中对齐,代码及效果如图3-1-7所示。使用同样的方法,将.text2类选择器应用于正文的<p>标签中,代码如图3-1-8所示。图3-1-8将.text2类选择器应用于<p>标签中任务实施——CSS样式引入3)将id选择器引入页面中。上述样式中定义了一个名为p1的id选择器,#p1应用于第三个<p>标签的正文第二段。id选择器用于对某个元素定义单独的样式,只能对应一个元素,不能重复使用。使用标签的“id”属性,设置其值为id选择器的名称,id选择器定义的样式能自动应用到网页中具有该id名称的元素上,用法如图3-1-9所示。图3-1-9id选择器的用法任务实施——CSS样式引入4)引入行内样式。通过标签中的style属性设置元素的样式,代码为style="text-align:right;",设置第四个<p>标签中的文本右对齐,用法如图3-1-10所示。如图3-3-6所示。图3-1-11样式应用和效果页面中的样式应用和效果如图3-1-11所示。知识宝典——什么是CSS样式CSS是一种用于描述网页的标签语言,能够将样式与内容分离,提高代码的可读性和可维护性;能够实现丰富多样的网页布局和排版效果,提供良好的用户体验;能够保证网页样式的统一性和可定制性,提升品牌认知和用户体验。CSS是一种不需要编译、可直接由浏览器执行的样式表语言,是格式化网页的标准方式。借助CSS,网页设置者能更高效地设置网页格式。CSS能将样式的定义和HTML文件结构分离。若要将所有的网页样式风格统一,则可以定义一个CSS样式文件,让所有网页调用这个样式文件。如果需要更改网页风格,则直接修改这个CSS样式文件即可。知识宝典——CSS的基本结构和注释(1)CSS的基本结构CSS是由若干条样式声明组成的,样式是CSS的最小语法单元。每个样式都包含3部分内容:选择器、样式属性和样式属性值,基本结构如下:知识宝典——CSS的基本结构和注释选择器是指需要设置样式的HTML元素或标签,即样式作用的页面对象,通常是HTML标签,也可以是已经定义的类名、id名。属性是CSS提供的样式选项,是选择器所包含的内容,如字体、行高、位置等。属性值是指样式属性的取值,包括数值和单位,或关键字。CSS的基本结构如图3-1-12所示。图3-1-12CSS的基本结构知识宝典——CSS的基本结构和注释(2)CSS的注释在CSS中使用注释可以帮助用户对自己编写的样式进行说明,有利于解释代码的用途或特定部分的功能,以便于后期维护和更新,也可帮助其他人员理解代码。CSS注释的语法格式如下:例如:知识宝典——CSS样式的语法规则CSS样式属性的书写顺序对网页加载代码是有影响的。正确的样式书写顺序易于查看,也是CSS样式的一种优化方式。(1)CSS书写顺序CSS的正确书写顺序如下。1)布局方式、位置相关属性:position、top、left、right、bottom、z-index、display、float、clear等。2)盒子模型相关属性:width、height、padding、margin、border等。3)文本排版相关属性:line-height、text-align、text-indent、letter-spacing等。4)文字属性:font、color、content等。5)其他属性:content、cursor、border-radius、box-shadow、text-shadow、background等。知识宝典——CSS样式的语法规则(2)CSS书写规范1)CSS缩写属性。CSS的有些属性是可以缩写的,如padding、margin、font等,这样既可以精简代码,又能提高用户的阅读体验,CSS缩写属性举例见表3-1-1。知识宝典——CSS样式的语法规则2)去掉小数点前的“0”。在CSS属性值中,当属性值为小数并且小数点前面为0时,小数点前面的0可省略,举例见表3-1-2。3)简写十六进制颜色代码。当颜色代码用十六进制来表示时,有重复位时可缩写,举例见表3-1-3。知识宝典——引入CSS样式要想使用CSS样式修饰网页,需要在HTML文档中引入样式。CSS主要提供了以下3种引入方式:行内样式、内部样式、外部样式。(1)行内样式行内样式也称内联样式,是通过标签的style属性设置的元素样式。其基本语法格式如下:<标签style="属性1:属性值;属性2:属性值;…">内容</标签>例如:<pstyle="color:#f00;font-style:italic;">。以上代码设置文本颜色为#f00(红色)、字体风格为倾斜。行内样式举例见表3-1-4。知识宝典——引入CSS样式(2)内部样式内部样式也称内嵌样式,是指将所有CSS样式代码写在HTML文档的<head>头部标签中,并用<style>标签定义,type类型为CSS文档。语法如下:知识宝典——引入CSS样式在HTML文档中引入内部样式,示例如下。1)创建名为nbys.html的HTML文档,使用内部样式表修饰网页的内容。在新建网页文件中输入代码,效果如图3-1-13所示。图3-1-13引入内部样式前的效果知识宝典——引入CSS样式2)在文档<head></head>标签对的<title></title>标签对的下方输入代码,代码及效果如图3-1-14所示。图3-1-14引入内部样式后的代码及效果知识宝典——引入CSS样式(3)外部样式外部样式可将所有的CSS样式代码编写并存储在一个以“.css”为扩展名的独立文件中,这个文件称为外部样式表文件。通常使用<link>标签将外部样式表文件链接到HTML文件中。语法如下:<linkhref="外部样式表文件的路径"rel="stylesheet"type="text/css">说明:<link>标签一般位于<head>标签中的<title>标签之后,并且必须指定以下3个属性。href:定义所链接的外部样式表文件的URL。rel:定义被链接的文件是样式表文件。type:定义所链接文档的类型为“text/css”,即CSS文档。知识宝典——引入CSS样式在HTML文档中引入外部样式,示例如下。1)创建名为wbys.html的HTML文档,输入如下代码,效果如图3-1-15所示。图3-1-15引入外部样式前的效果知识宝典——引入CSS样式2)创建外部样式表文件。在项目中的css目录上右击,选择“新建”→“CSS文件”命令,在“新建CSS文件”对话框中输入文件名称wbys.css,单击“创建”按钮,如图3-1-16所示。图3-1-16新建CSS文件知识宝典——引入CSS样式在wbys.css文件中输入CSS样式代码,代码如下图3-1-17引入外部样式后的效果3)链接CSS外部样式表,在wbys.html文档中输入下列代码,效果如图3-1-17所示。知识宝典——引入CSS样式企业说:①

行内样式由于将表现和内容混在一起,不符合Web标准,因此应尽量少用或不用。②

内部样式只对样式所在的HTML页面有效。③

当多个页面需要使用相同风格的样式时,可使用外部样式表。这种方式下,同一个样式可以被多个HTML页面链接使用,实现了结构与表现相分离,有助于网页的前期制作和后期维护。知识宝典——CSS常用选择器选择器也称选择符,是CSS样式中的重要部分,是指某个样式所要应用的HTML元素。要使用CSS对HTML页面中的元素实现一对一、一对多或者多对一的控制,就需要用到CSS选择器。在CSS中,根据选择器的类型可将选择器分为基础选择器和复合选择器。(1)基础选择器CSS中常用的基础选择器有4种,分别是标签选择器、类选择器、id选择器和通配符(*)选择器。知识宝典——CSS常用选择器1)标签选择器。标签选择器使用HTML标签名称作为选择器,为页面中同类的标签指定统一的CSS样式。定义标签选择器的语法如下:标签名称{

属性1:属性值;

属性2:属性值;…}知识宝典——CSS常用选择器例如,使用h1选择器定义HTML页面中所有一级标题的样式,代码如下:图3-1-18在网页中使用标签选择器的效果在网页中直接作用于对应的标签,代码如下:使用标签选择器的效果如图3-1-18所示。知识宝典——CSS常用选择器2)类选择器。类选择器指定的样式可以被网页上的多个标签元素使用。类选择器以“.”开始,其后接类名称。使用类选择器定义的CSS样式,需要设置元素的class属性值为其指定样式。定义类选择器的语法如下:.类名称{

属性1:属性值;

属性2:属性值;…}知识宝典——CSS常用选择器例如,定义一个类选择器.text的代码如下:在网页中使用标签的class属性,属性值为类名,代码如下:运用类选择器的效果如图3-1-19所示。图3-1-19在<h2>和<p>标签应用类选择器知识宝典——CSS常用选择器企业说:类选择器可以为具有相同或相似样式的一组元素设置样式。多个标签可以使用同一个类名,使不同的标签具有相同的样式。特别注意,类名的第一个字符不能是数字,并且严格区分大小写,一般采用小写字母表示。知识宝典——CSS常用选择器3)id选择器。id选择器用于对某个元素定义单独的样式。id选择器以“#”开始,语法如下:#id名称{

属性1:属性值;

属性2:属性值;…}说明:1)id名称即HTML元素的id属性值,id名称在一个文档中是唯一的,只对应页面中的某一个具体元素。2)id选择器定义的样式能自动应用到网页中该id名称的元素上。知识宝典——CSS常用选择器例如,在<p>标签中应用id选择器,使用标签的属性“id”,值为id选择器的名称,代码如下:id选择器p1的定义如下:在页面中应用id选择器的效果如图3-1-20所示。图3-1-20在页面中应用id选择器的效果知识宝典——CSS常用选择器3)通配符(*)选择器。通配符选择器匹配HTML中所有元素的设置样式,是所有选择器中作用范围最广的,使用“*”定义。通配符选择器的语法格式如下:*{

属性1:属性值;

属性2:属性值;…}例如,定义通配符选择器,将HTML中所有元素的外边距和内边距设置为0,代码如下:知识宝典——CSS常用选择器说明:CSS选择器的命名规范如下。1)类选择器和id选择器都需要使用英文小写,禁止使用特殊字符。2)名称间隔使用“-”连字符,下画线“_”禁止出现在class命名中。3)不要随意使用id选择器。id选择器是唯一的,类选择器却可以重复使用。另外,id选择器的优先级优先于类选择器,所以id选择器应该按需使用,不能滥用。4)使用有意义的名称,建议使用与结构化或者作用目标相关的,而不是抽象的名称,尽量不缩写。知识宝典——CSS常用选择器(2)复合选择器复合选择器建立在基础选择器之上,是由两个或多个基础选择器通过不同的方式进行组合形成的。复合选择器可以更准确、更高效地选择目标HTML元素。常用的复合选择器有3种,分别是交集选择器、并集选择器、后代选择器。1)交集选择器。交集选择器表示两个选择器的交集,它由两个选择器构成,第一个是标签选择器,第二个是类选择器,两个选择器之间没有空格。与类名一致的标签元素才会应用交集选择器所定义的样式规则。交集选择器的语法格式如下:标签名称.类名称{

属性1:属性值;

属性2:属性值;…}知识宝典——CSS常用选择器如p.text{color:#aaafff;},表示类名为“text”的<p>标签字体才显示#aaafff颜色。请看下面的例子,想一想三句诗句各显示什么颜色。知识宝典——CSS常用选择器预览效果如图3-1-21所示。图3-1-21交集选择器的预览效果知识宝典——CSS常用选择器2)并集选择器。并集选择器由多个选择器(可以是标签选择器、类选择器、id选择器)通过逗号连接而成,用以定义相同的样式。如果某些选择器定义的样式完全相关或者部分相同,则可以利用并集选择器来定义相同的部分。并集选择器的语法格式如下:选择器1,选择器2,选择器3,…{

属性1:属性值;

属性2:属性值;…}知识宝典——CSS常用选择器例如,h1,p{font-size:24px;color:#f00;},h1和p是标签选择器,这段代码表示所有标题标签<h1>和段落标签<p>内文本的字号为24px、颜色为红色。请看下面的例子,代码及效果如图3-1-22所示。图3-1-22应用并集选择器的代码及效果知识宝典——CSS常用选择器3)后代选择器。标签选择器和类选择器之间没有空格时是交集选择器,当标签选择器和类选择器之间用空格分隔时,表示后代选择器。后代选择器也称为包含选择器,用于控制容器对象中的子对象,使其他容器对象中的同名子对象不受影响。书写时,容器对象写在前面,子对象写在后面,中间用空格分隔。如果容器对象有多层,则分层依次书写。后代选择器的语法格式如下:选择器1选择器2{

属性1:属性值;

属性2:属性值;…}知识宝典——CSS常用选择器例如,p.text{color:#aaafff;},在标签选择器p和类选择器.text中间用空格分隔,表示后代选择器。p.text定义的样式仅适用于嵌套在<p>标签中类名为text的文本,其他不在<p>标签中类名为text的文本不受影响。请看下面的例子:知识宝典——CSS常用选择器<h1>中的<span>标签不受后代选择器的影响,只显示类选择器.text的属性(红色字体),第二个<p>标签中的<span>受到了后代选择器的影响,显示为浅蓝色,代码与效果如图3-1-23所示。图3-1-23使用后代选择器的代码及效果知识宝典——CSS常用选择器企业说:1)交集选择器用于简化样式表代码的编写。

2)并集选择器所定义的样式与各个选择器分别定义样式的作用相同,但并集选择器的写法更简捷。3)后代选择器只影响对应容器中的子对象,其他容器对象中的同名子对象不受影响。Web前端开发技术基础通关任务2制作红色资讯详情页2——CSS文本属性AIGC赋能版📑目录01.任务描述02.任务目标03.任务实施图3-3-9访问热点栏目最终效果任务描述为了更好地控制文本标签显示的样式,CSS提供了一系列强大的文本属性。通过本任务的实施,读者可深入学习并应用CSS文本属性,从而能够灵活地调整文本的字体、大小、颜色、对齐方式等,以设计出更加美观、易读和富有设计感的网页,效果如图3-1-24所示。任务描述任务目标1.掌握常用CSS文本属性的用法。2.熟练使用CSS文本属性设置样式。图3-1-24红色资讯详情页2效果任务实施——HTML结构分析整个页面代码结构运用HTML的<article>标签来搭建,页面主标题使用<h1>标签,副标题使用<h4>标签,文章正文分别使用5个<p>标签,代码结构如图3-1-25所示。图3-1-25代码结构任务实施——HTML结构搭建(1)打开项目新建页面1)打开HBuilderX软件,选择“文件”→“打开目录”命令,选择“通关任务1”中已经创建的项目“chapter3-1”。2)新建HTML文件,命名为“example02.html”,打开文件。(2)创建HTML结构1)在<title></title>标签对中输入标题“红色资讯详情页2”。2)在<body></body>标签对中插入用于定义独立内容的<article></article>标签对,在<article></article>标签对中分别插入<h1></h1>、<h4></h4>和5对<p></p>标签对,打开素材“example02.txt”,将文字复制到相应的标签对中,单击“浏览器运行”按钮预览页面,如图3-1-26所示。任务实施——构建HTML结构a

温馨提示

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

评论

0/150

提交评论