no4 制作超链接列表

制作超链接列表模块2使用HTML搭建基本网页湖南安全技术职业学院网页设计与制作教学团队入门测作业分析知识回顾

结构标签:<header>、<nav>、<main>、<article>、<aside>、<footer>文本类标签<h1>、<h6>、<p>、<img>、<hr>、<br>图像标签<imgsrc=”images/pic1.jpg”><imgsrc=”/”>复习巩固浏览网页时，可以从一个网页跳转到另一个网页，也可以从一个网站跳转到另一个网站，实现页面之间相互跳转的途径是超链接，超链接是网页非常重要的组成元素。本任务学习超链接的相关知识，创建新闻列表栏目。学习内容超链接列表超链接列表什么是超链接超链接超链接是指从一个网页指向一个目标的连接关系，用来实现信息之间的导航与跳转。语法:<ahref=”链接地址”target=”目标窗口位置”title=”提示文本”>单击内容

</a>href用于指定链接跳转的目标地址,必设属性；target定义链接文档在何处打开。_self表示在当前窗口打开(默认)

；

_blank表示在新的浏览器窗口打开title属性则可以提供鼠标悬停提示文本；单击内容可以是文本或图像等。站内超链接VS站外超链接超链接站内链接，超链接跳转到同一网站的页面，href的属性值采用相对地址。示例：<ahref=”demo1.html”>demo1</a><ahref=”demo1.html”><imgsrc=”images/pic1.jpg”></a>站外链接，超链接跳转到其他网站，href的属性值必须是一个完整的url地址。示例：<ahref=”/”target=”_blank”>百度</a><ahref=“/”target=”_blank”>前端开发核心技术</a>站内导航条，站外友情链接。锚点链接是实现单页长文档导航的最佳方案。它允许用户点击链接后，在当前页面内跳转到预先标记好的目标位置。锚点链接超链接锚点链接超链接第1步

设置锚点在跳转的目标元素上添加唯一的id属性。<h1id="top">顶端处内容</h1>第2步

创建锚点链接使用a标签，href属性值为"#"加上锚点ID。<ahref="#top">跳转到顶端处</a>创建步骤列表网页中通常用列表来组织和展示信息，一个列表中可以包含多个列表项，使用列表将信息分组和排序，提升页面的可读性和用户体验。常见的列表标签有三种无序列表有序列表定义列表无序列表列表无序列表始于<ul>标签。每个列表项始于<li>，例如:<h2>Web前端开发核心技术</h2><ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul><h2>列表的类型</h2><ultype="circle"><li>无序列表</li><li>有序列表</li><li>定义列表</li></ul>有序列表列表有序列表中各列表项有前后顺序之分，使用<ol>定义有序列表，用<li>定义列表内部的每一个列表项，例如：<h2>软件项目开发流程</h2><ol><li>需求分析与规划阶段</li><li>系统设计阶段</li><li>开发与测试阶段</li><li>部署与维护阶段</li></ol>定义列表列表定义列表主要用于描述术语或概念的定义和解释。使用<dl>创建定义列表，定义列表内部由多组<dt>和<dd>组成，<dd>中的内容会相对<dt>自动右缩进。例：定义列表列表<h2>Web前端框架技术</h2><dl><dt>Angular框架</dt><dd>TypeScript支持</dd><dd>双向数据绑定</dd><dd>适合构建大型企业级应用</dd><dt>React框架</dt><dd>虚拟DOM技术</dd><dd>组件化开发，支持复用和灵活组合</dd><dd>适合动态交互频繁的应用</dd><dt>Vue框架</dt><dd>渐进式框架</dd><dd>双向数据绑定</dd><dd>适合中小型应用快速开发</dd></dl>列表嵌套列表在一个列表项<li>中再定义一个列表<ul>或<ol>，形成层级关系。常用于制作多级导航菜单、复杂文章目录、树形结构展示等，让信息呈现更有层次感。注意：子列表是嵌套在父列表项中，即嵌入在上一级的<li>标签里。强烈建议：起始标签和结束标签成对写好，再在标签对中间添加内容。超链接列表常规的写法是，在一个无序列表中包含多个列表项，每个列表项中包含一个超链接。典型应用场景：导航条、新闻目录<h2>行业资讯</h2><ul>

<li>

<ahref=”new1.html”>新闻1</a>

</li>

<li>

<ahref=”new2.html”>

新闻2</a>

</li>

<li>

<ahref=”new3.html”>

新闻3</a>

</li></ul>使用列表实现如图所示新闻列表：栏目标题使用2级标题；使用无序列表组织内容；每一个列表项内部包含一个a元素和一个span元素，在同一行显示。出门测小结超链接：<ahref=”url”target=”_blank”>文本或