【HTML】为网页添加列表和超链接

news2025/10/31 22:06:25

1、列表

1.1、无序列表

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
......
</ul>

无序列表的常用type属性值
在这里插入图片描述

1.2、有序列表

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
......
</ol>

有序列表相关的属性
在这里插入图片描述

1.3、定义列表

<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
    ...
    <dt>名词2</dt>
    <dd>名词2解释1</dd>
    <dd>名词2解释2</dd>
    ...
</dl>

1.4、列表嵌套

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>列表嵌套</title>
</head>
<body>
<h2>饮品</h2>
<ul>
	<li>咖啡
    		<ol>                    <!--有序列表的嵌套-->
        		<li>拿铁</li>
            	<li>摩卡</li>
        	</ol>
    </li>
    <li>茶
        <ul>                    <!--有序列表的嵌套--> 
        		<li>碧螺春</li>
            	<li>龙井</li>
        </ul>
    </li>
</ul>
</body>

效果图：
在这里插入图片描述

1.5、list-style-type属性

在这里插入图片描述

1.6、list-style-image属性

1.7、list-style-position属性

inside：列表项目符号位于列表文本以内
outside：列表项目符号位于列表文本以外（默认值）

1.8、list-style属性

list-style:列表项目符号 列表项目符号的位置 列表项目图像;

1.9、背景图像定义列表项目符号

background:url(images/2.png) no-repeat left center; /*为li设置背景图像*/

2、超链接

2.1、创建超链接

<a href="跳转目标" 
     target="目标窗口的弹出方式">       
     文本或图像
</a>

href：用于指定链接目标的url地址，当为< a>标记应用href属性时，它就具有了超链接的功能。
target：用于指定链接页面的打开方式，其取值有_self和_blank两种，其中_self为默认值，意为在原窗口中打开，_blank为在新窗口中打开。

2.2、锚点链接

创建锚点链接分为两步

使用“链接文本”创建链接文本。
使用相应的id名标注跳转目标的位置。

2.3、链接伪类控制超链接

在CSS中，通过链接伪类可以实现不同的链接状态，使得超链接在点击前、点击后和鼠标悬停时的样式不同。
在这里插入图片描述

同时使用链接的4种伪类时，通常按照a:link、a:visited、a:hover和a:active的顺序书写，否则定义的样式可能不起作用。
除了文本样式之外，链接伪类还常常用于控制超链接的背景、边框等样式。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2061254.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！