前端-Day-03

一、列表

在html中也可以创建列表，html列表一共有3种

1. 无序列表
2. 有序列表
3. 定义列表

<!--
	用得最多（下拉菜单）：
	无序列表
		-使用ul标签来创建无序列表
		-使用li表示列表项
-->
<ul>
	<li>结构</li>
	<li>表现</li>
	<li>行为</li>
</ul>

<!--
	有序列表
		-使用ol标签来创建有序列表
		-使用li表示列表项
-->
<ol>
	<li>结构</li>
	<li>表现</li>
	<li>行为</li>
</ol>

<!--
	定义列表
		-使用dl标签来创建定义列表
		-使用dt来表示定义的内容
		-使用dd来对内容进行解释说明
-->
<dl>
	<dt>结构</dt>
	<dd>结构表示网页的结构，结构用来规定网页中哪里是标题，哪里是段落</dd>
</dl>

<!--
	列表之间可以相互嵌套
-->
<ul>
	<li>
		aa
		<ul>
			<li>aa-1</li>
				<ul>
					<li>aa-2</li>
				</ul>
		</ul>
	</li>
</ul>

二、超链接

超链接可以从一个页面跳转到其他页面，或是当前页面的其他位置

<!--
	使用a标签来定义超链接
	属性：
		-href 指定跳转的目标路径
		-值可以是一个外部网站地址，也可以是一个内部页面的地址
	超链接是一个行内元素，在a标签中可以嵌套除它自身以外的其他任何元素
-->
<a href="https://www.baidu.com">超链接1</a>
<br><br>
<a href="07.list.html">超链接2</a>

三、相对路径

相对路径使用.或…开头

<!--
	./表示当前文件所在目录
		-可以省略不写
	
	../表示当前文件所在目录的上一级目录
-->

四、超链接的其他用法

1、target属性：用来指定超链接打开的位置

<!--
	target可选值：
		_self 默认值，在当前页面中打开超链接
		_blank 在一个新的页面中打开超链接
-->
<a href="https://www.baidu.com" target="_blank">超链接3</a>
<br>
<!--
	将href属性设置为#，即页面跳转到当前页面的顶部
-->
<a href="#">回到顶部</a>

2、id属性：唯一不重复

<!--
	id:
		-每一个标签都可以添加一个id属性
		-id属性就是元素的唯一标识，同一个页面中不能出现重复的id属性
		-id属性区分大小写，必须以字母开头
-->
<a id="bottom" href="#">回到顶部</a>

<!--
	跳转到页面的指定位置，只需将href属性值设置为 #目标元素的id
-->
<a href="#bottom">到底部</a>

3、其他

<!--
	在开发中可以将#作为超链接的路径的占位符使用
-->
<a href="#">#作为超链接的占位符</a>
<br>

<!--
	使用 javascript:; 来作为href的属性，此时点击这个超链接什么也不会发生
-->
<a href="javascript:;">这是一个没有反应的超链接</a>