HTML和jQuery的學習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- src路徑 alt影象不能顯示時，顯示文字 title滑鼠懸停時顯示的內容
影象對齊-align-left-right-top-middle-bottom -->
<img src="1.jpg" title="java,c,c#">
<a href="跳轉目標" target="目標視窗的彈出方式">
</body>
</html>
jQuery列表展出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.3.1/jquery-3.3.1.min.js"></script>
<style type="text/css">
.nav-list{width: 230px;}
.nav-list h3{border-top: 1px solid #ccc;background: #333;font-size: 16px;
font-weight: normal;padding: 10px 20px;margin:0px;color: #fff;cursor: pointer;}
.nav-list ul{list-style: none;padding: 0;margin:0;}
.nav-list li a{text-decoration: none;display: block;padding: 10px 20px;color: #999;
background: #f5f5f5;border:1px solid #ccc;border-bottom: none; }
.nav-list ul{display: none;}
.nav-list ul.open{display: block;}
</style>
</head>
<body>
<div class="nav-list">
<h3>選擇器</h3>
<ul>
<li><a herf="#">基本選擇器</a></li>
<li><a herf="#">層級選擇器</a></li>
<li><a herf="#">過濾選擇器</a></li>
<li><a herf="#">屬性選擇器</a></li>
<li><a herf="#">內容選擇器</a></li>
</ul>
<h3>篩選</h3>
<ul>
<li><a herf="#">過濾</a></li>
<li><a herf="#">查詢</a></li>
<li><a herf="#">關聯</a></li>
<li><a herf="#">DOM操作</a></li>
</ul>
<h3>樣式</h3>
<ul>
<li><a herf="#">CSS操作</a></li>
<li><a herf="#">位置</a></li>
<li><a herf="#">尺寸</a></li>
</ul>
<h3>屬性</h3>
<ul>
<li><a herf="#">屬性操作</a></li>
<li><a herf="#">文字</a></li>
<li><a herf="#">程式碼</a></li>
<li><a herf="#">文字</a></li>
<li><a herf="#">CSS類</a></li>
</ul>
</div>
<script type="text/javascript">
$('h3').click(function(){
$(this).next().toggleClass('open');
})
</script>
</body>
</html>