51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

html链接标签和列表标签

1.链接标签

1.1 a标签

使用"a标签"来实现超链接 语法:

<a href="链接地址">文本或图片</a>

我们可以将文本设置为超链接,这个叫做"文本超链接"。也可以将图片设置为超链接,这个叫做"图片超链接"。

案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>超链接</title>
	</head>
	<body>
		<a href="http://class.huaruiedu.wang">华瑞智慧校园</a><br />
		<a href="http://class.huaruiedu.wang">
			<img src="img/hr.jpg"  width="100"/>
		</a>
	</body>
</html>
1.2 target属性

默认情况下,超链接都是在当前浏览器窗口打开新页面的。在HTML中,我们可以使用target属性来定义超链接打开窗口的方式

语法:

<a href="链接地址" target="打开方式"></a>
target属性:
_self   	==  默认值,在原来的窗口打开链接
_blank 	==  在新窗口打开链接
_parent ==  在父窗口打开链接
_top    ==  在顶层窗口打开超链接
1.3 内部链接

超链接有两种:一种是外部链接;另外一种是内部链接。外部链接指向的是"外部网站的页面",而内部链接指向的是"自身网站的页面"

案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内部链接</title>
	</head>
	<body>
		<a href="taobao.html"><h1>去桃宝</h1></a>
		<a href="jd.html"><h1>去金东</h1></a>
	</body>
</html>
1.4 锚点链接

**锚点链接其实是内部链接的一种,它链接地址(也就是href)指向的是当前页面的某个部分。所谓的锚点链接,简单来说,就是点击某一个超链接,然后它就会跳到当前页面的某一部分。 **案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>锚点</title>
	</head>
	<body>
			<p>
		        <a href="#推荐文章">推荐文章</a><br />
		        <a href="#推荐音乐">推荐音乐</a><br />
		        <a href="#推荐电影">推荐电影</a><br />
		   </p>
		    ......<br />
		    ......<br />
		    ......<br />
		    ......<br />
		    ......<br />
		    ......<br />
		    ......<br />
		    ......<br />
		   <p>
		        <h3 id="推荐文章">推荐文章</h3>
		            1.余光中-乡愁<br/>
					2.朱自清-荷塘月色<br/>
		            3.鲁迅-阿Q正传<br/>
		    </p>
		    ......<br />
		    ......<br />
		    ......<br />
		    ......<br />
		    ......<br />
		    ......<br />
		    ......<br />
		    ......<br />
		   <p>
		        <h3 id="推荐音乐">推荐音乐</h3>
		            1.刘德华-中国人<br/>
		            2.华瑞校歌-梦想的翅膀<br/>
		            3.宋祖英-好日子<br/>
		  </p>
		    ......<br />
		    ......<br />
		    ......<br />
		    ......<br />
		    ......<br />
		    ......<br />
		    ......<br />
		    ......<br />
		   <p>
		        <h3 id="推荐电影">推荐电影</h3>
		            1.武侠系列<br/>
		            2.复仇者联盟<br/>
					3.奥特曼系列<br/>
		   </p>
		   <p align="right"><a href="mailto:1234567@qq.com">联系我们</a></p>
	</body>
</html>
1.5 功能性链接

语法:

<a href="mailto://邮箱地址" >给指定邮箱地址发送信息</a>

案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>锚点</title>
	</head>
	<body>
		   <p align="right"><a href="mailto:1234567@qq.com">联系我们</a></p>
	</body>
</html>

2.列表

列表是网页中最常用的一种数据排列方式,HTML中列表共有3种:有序列表、无序列表和定义列表

2.1 有序列表

有序列表中的各个列表项是有顺序的。有序列表从<ol>开始,到</ol>结束。有序列表的列表项是有先后顺序的,一般采用数字或字母作为顺序,默认是采用数字顺序 语法:

&lt;ol&gt;
     &lt;li&gt;列表值1&lt;/li&gt;
    &lt;li&gt;列表值2&lt;/li&gt;
     &lt;li&gt;列表值3&lt;/li&gt;
	...
&lt;/ol&gt;

案例:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;meta charset="UTF-8"&gt;
		 &lt;title&gt;有序列表&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;h1&gt;有序列表&lt;/h1&gt;
 &lt;ol&gt;
     &lt;li&gt;JAVA&lt;/li&gt;
     &lt;li&gt;HTML&lt;/li&gt;
     &lt;li&gt;JavaScript&lt;/li&gt;
  	&lt;li&gt;... &lt;/li&gt;
&lt;/ol&gt;
&lt;/html&gt;
有序列表的type属性
1  ==  阿拉伯数字 1,2,3,4
a  ==  小写英文字母 a,b,c,d
A  ==  大写英文字母 A,B,C,D
i  ==  小写罗马数组i,ii,iii...
I  ==  大写罗马数字 I,II,III...
2.2无序列表

无序列表,很好理解,有序列表的列表项是有一定顺序的,而无序列表的列表项是没有顺序的。默认情况下,无序列表的列表项符号是●

语法:

&lt;ul&gt;
     &lt;li&gt;列表值1&lt;/li&gt;
     &lt;li&gt;列表值2&lt;/li&gt;
     &lt;li&gt;列表值3&lt;/li&gt;
	...
&lt;/ul&gt;

案例:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;meta charset="UTF-8"&gt;
		&lt;title&gt;无序列表&lt;/title&gt;
	&lt;/head&gt;
	&lt;body&gt;
		&lt;h1&gt;软件下载&lt;/h1&gt;
		&lt;ul&gt;
	      &lt;li&gt;windows xp&lt;/li&gt;
	      &lt;li&gt;windows 7&lt;/li&gt;
	      &lt;li&gt;windows 8&lt;/li&gt;
	      &lt;li&gt;windows 10&lt;/li&gt;
	      &lt;li&gt;windows 11&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/body&gt;
&lt;/html&gt;

无序列表的type属性

disc    == 实心圆●(默认值)
circle  == 空心圆○
square    ==  正方形■
2.3 定义列表

定义列表由两部分组成:名词和描述 语法:

&lt;dl&gt;
  &lt;dt&gt;名词&lt;/dt&gt;
 &lt;dd&gt;描述&lt;/dd&gt;
  ......
&lt;/dl&gt;

案例:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;meta charset="UTF-8"&gt;
		&lt;title&gt;定义列表&lt;/title&gt;
	&lt;/head&gt;
	&lt;body&gt;
	    &lt;dl&gt;
	        &lt;dt&gt;HTML&lt;/dt&gt;
	        &lt;dd&gt;制作网页的标准语言,控制网页的结构&lt;/dd&gt;
	        &lt;dt&gt;CSS&lt;/dt&gt;
	        &lt;dd&gt;层叠样式表,控制网页的样式&lt;/dd&gt;
	        &lt;dt&gt;JavaScript&lt;/dt&gt;
	        &lt;dd&gt;脚本语言,控制网页的行为&lt;/dd&gt;
	    &lt;/dl&gt;
	&lt;/body&gt;
&lt;/html&gt;
赞(9)
未经允许不得转载:工具盒子 » html链接标签和列表标签