HTML-从零开始的学习过程（2）_精通html 彩色版 2 html从零开始-CSDN博客

本文链接：https://blog.csdn.net/Dokey_L/article/details/105889077

HTML列表

1.无序列表
结构：

<body>
	<ul>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>

属性：type（disc圆点、square正方形、circle空心圆）

<body>
	<ul type="disc">
		<li>html</li>
		<li>html</li>
		<li>html</li>
	</ul>

在这里插入图片描述
2.有序列表
结构：

<body>
	<ol>
		<li>html</li>
		<li>html</li>
		<li>html</li>
	</ol>
</body>

属性（type）：

阿拉伯数字（1，2，3…）
小写字母（a，b，c…）
大写字母（A，B，C…）
小写罗马数字（i，ii，iii，vi…）
大写罗马数字（I，II，III，VI…）

<body>
	<ol type="1">
		<li>html</li>
		<li>html</li>
		<li>html</li>
	</ol>
</body>

在这里插入图片描述
3.定义列表
结构：

<body>
	<dl>
		<dt>标题1</dt>
		<dd>内容</dd>
		<dd>内容</dd>
		<dt>标题2</dt>
		<dd>内容</dd>
		<dd>内容</dd>
	</dl>
</body>

图像标签

结构：

<body>
	<img src="" alt=""/>
</body>

属性：

src，用来表明显示文件的路径和文件的名称，路径包含绝对路径和相对路径；
alt是提示信息，图像替代的文本；
Height ，图像的高度，可以用数值和百分比表示-- px像素 20%百分比；
Width，图像的宽度，可以用数值和百分比表示 – px像素 20%百分比。
补充：
绝对路径：指的是具体盘符下的路径;
相对路径:指的是相对于当前文件夹的这个图片的路径;
相对路径分为3种情况：
1、html文件和图像文件处于同一级目录
2、图像文件处于html文件的下一级
3、图像文件处于html文件的上一级 (…/…/…/)

img标签中的alt属性，当图片显示不出来的时候，会显示alt的值
alt显示的几点原因：
1.网速太慢;
2.src属性值错误；
3.用户无法查看图像的时候。

超链接

1.超链接
结构：

<body>
	<a href="" target="" title="" name=""></a>
</body>

属性：

href：链接地址，可以是内部，可以是外部；
target：链接的目标窗口（_self ,_blank,_top,_parent）；
title:链接提示的文字；
name:链接命名。
补充：
_self：和默认形式一样，都是默认当前打开页面；
_blank：表示在一个新打开、未命名的窗口中打开页面；
_top：在整个窗口中打开页面；
_parent：在父框架集中打开被链接文档。

2.锚链接
结构：

<body>
	<a href="#锚名1">目录1</a>
	<a href="#锚名2">目录2</a>



	<a name="锚名1">内容</a>
	<a name="锚名2">内容</a>
</body>

示例：

<!DOCTYPE html>
<html>
<head>
	<title>超链接跳转</title>
	<meta charset="utf-8">
</head>
<body>
	<a name="这里是顶部">这里是顶部</a>
	<br/>
	<!-- 目录项 -->
	<a href="#水果">水果</a>
	<br/>
	<a href="#蔬菜">蔬菜</a>
	<br/>
	<a href="#运动">运动</a>
	<br/>
	<!-- 具体内容 -->
	<a  name="水果">
		<h2>水果</h2>
	</a>
	<p>
		<ul>
			<li>香蕉</li>
			<li>苹果</li>
			<li>葡萄</li>
			<li>梨</li>
			<li>西瓜</li>
			<li>樱桃</li>
			<li>菠萝</li>
			<li>樱桃</li>
			<li>橙子</li>
			<li>柚子</li>
			<li>芒果</li>
			<li>香蕉</li>
			<li>苹果</li>
			<li>葡萄</li>
			<li>梨</li>
			<li>西瓜</li>
			<li>樱桃</li>
			<li>菠萝</li>
			<li>樱桃</li>
			<li>橙子</li>
			<li>柚子</li>
			<li>芒果</li>
		</ul>
	</p>
	<br/>
	<a href="#这里是顶部">返回顶部</a>
	<br/>
	<a name="蔬菜">
		<h2>蔬菜</h2>
	</a>
	<p>
		<ul>
			<li>西红柿</li>
			<li>黄瓜</li>
			<li>土豆</li>
			<li>芹菜</li>
			<li>蒜台</li>
			<li>西葫芦</li>
			<li>香菇</li>
			<li>菠菜</li>
			<li>豆角</li>
			<li>西红柿</li>
			<li>黄瓜</li>
			<li>土豆</li>
			<li>芹菜</li>
			<li>蒜台</li>
			<li>西葫芦</li>
			<li>香菇</li>
			<li>菠菜</li>
			<li>豆角</li>
		</ul>
	</p>
	<br/>
	<a href="#这里是顶部">返回顶部</a>
	<br/>
	<a name="运动">
		<h2>运动</h2>
	</a>
	<p>
		<ul>
			<li>羽毛球</li>
			<li>篮球</li>
			<li>足球</li>
			<li>乒乓球</li>
			<li>台球</li>
			<li>网球</li>
			<li>高尔夫球</li>
			<li>羽毛球</li>
			<li>篮球</li>
			<li>足球</li>
			<li>乒乓球</li>
			<li>台球</li>
			<li>网球</li>
			<li>高尔夫球</li>
			<li>羽毛球</li>
			<li>篮球</li>
			<li>足球</li>
			<li>乒乓球</li>
			<li>台球</li>
			<li>网球</li>
			<li>高尔夫球</li>
		</ul>
	</p>
	<br/>
	<a href="#这里是顶部">返回顶部</a>
</body>
</html>

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

3.锚链接中不同页面的跳转：
结构：
网页1：< a href =”网页名字#锚名” >…< /a>
网页2：< a name =”锚名”>…< /a>

4.电子邮件链接
结构：

<body>
	<a href="mailto:邮箱地址">。。。</a>
</body>

5.文件下载
结构：

<body>
	<a href="需要下载的文件地址"></a>
</body>

补充：

如果路径是地址打开的相应的地址；
如果是文件就会进行下载。