列表基础练习

最新推荐文章于 2025-12-02 21:41:05 发布

原创最新推荐文章于 2025-12-02 21:41:05 发布 · 165 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

该博客聚焦前端知识，介绍了链接标签的语法、属性及含义，阐述了链接分类并举例，说明了target可选值，还介绍了列表的语法和分类，以及h5中常见的结构标签。

1、链接标签的语法和属性？并解释其含义

<a href="链接地址" target="打开方式
（_black）">内容（文本
或图片）</a>

2、链接分类有哪些？并举例说明

/*
链接分类：
页面之间链接
锚链接
功能链接
*/
/*页面之间链接*/
<a href="新页面地址"></a>
/*锚链接*/
<a href="#name值"></a> <a name="值"></a>
/*其他标签id值*/
/*功能链接*/
<a href="mailto:邮件地址"></a>

target可选值：

-blank：新页面

-self：本页面

跨页面：<a href="./10-链接（锚链接）.html#reg" target="_blank">[新用户注册帮助]</a>

3. 列表的语法和分类，并举例说明！

/*
3. h5中常见的结构标签有哪些！
列表分类：
有序
无序
定义
*/
/*有序*/
<ol>
<li></li>
</ol>
/*无序*/
<ul>
<li></li>
</ul>
/*定义*/
<dl>
<dt></dt>
<dd></dd>
</dl>

3. h5中常见的结构标签有哪些！

<header></header>
<nav></nav>
<footer></tfoot>
<main></main>
<section></section>
<article></article>
<aside></aside>

完成如下效果图：

<h2>饮品</h2>
<ul>
<li>
咖啡
<ol>
<li>拿铁</li>
<li>摩卡</li>
    </ol>
</li>
<li>
茶
<ul>
<li>碧螺春</li>
<li>龙井</li>
</ul>
</li>
</ul>
<h2>食物</h2>
<ul>
<li>水果
<ol>
<li>香蕉</li>
<li>苹果</li>
</ol>
</li>
<li>蔬菜
<ul>
<li>白菜</li>
<li>菠菜</li>
</ul>
</li>
</ul