html5_基础2

最新推荐文章于 2024-04-17 21:49:46 发布

MuFeng@

最新推荐文章于 2024-04-17 21:49:46 发布

阅读量76

点赞数

分类专栏： html5 文章标签： html5

本文链接：https://blog.youkuaiyun.com/m0_58451019/article/details/124471473

版权

html5 专栏收录该内容

3 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		img{
			height: 300px;
			display: block;
		}
	</style>
	
	<body>
		<!-- 1.锚点 -->
		<a href="#img_four">查看这张图片</a>
		<img src="img/09.jpg" id="img_one" alt="">
		<img src="img/11.jpg" id="img_two" alt="">
		<img src="img/12.jpg" id="img_three" alt="">
		<img src="img/13.webp" id="img_three" alt="">
		<img src="img/14.webp" id="img_four" alt="">
		<!-- 2.a标签 -->
		<a href="img/09.jpg">链接到图片</a>
		<a href="demo.html">链接到网页</a>
		<a href="demo.docx">了解到word文档</a>
		<a href="aa.namee@mysite.cn">aa.namee@mysite.cn</a>
		<a href="#">空链接</a>
		<a href="javascipt:alert('简单的弹出框')">点击执行</a>
		<!-- 3.下载链接 -->
		<p><a href="img/11.jpg" download="download">下载图片</a></p>
		<!-- 项目编号 -->
		
		<h1>排行榜</h1>
		<ol>
			<li>
				张三<span>100</span>
			</li>
			<li>
				李四<span>98</span>
			</li>
			<!-- value可以改变编号 -->
			<li value="2">王五<span>98</span></li>
			<li value="4">赵六<span>96.5</span></li>
			<li>侯七<span>94</span></li>
		</ol>
		 
		 <!-- 有reversed话是从5一直递减 -->
		 <!-- 没有reversed从5一直递增 -->
		 <!-- 添加value可以指定数值 -->
		 <h1>排行榜</h1>
		 <ol type="1" start="5" reversed>
			 <li>张三<span>100</span></li>
			 <li>张三<span>100</span></li>
			 <li>张三<span>100</span></li>
			 <li>张三<span>100</span></li>
			 <li>张三<span>100</span></li>
			 <li>张三<span>100</span></li>
			 <li>张三<span>100</span></li>
			 <li value="2">王五</li>
			 <li value="4">赵六</li>
			 <li>侯七<span>94</span></li>
		 </ol>
		 
		 
		
	</body>
</html>