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

下载本文档

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

文档简介

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>插入超链接

列表标签<ultyp

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

温馨提示

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

最新文档

评论

0/150

提交评论