链接与列表知识及导航小示例 -

链接

a标签的打开方式，用target属性定义

默认。在相同的框架中打开被链接文档。
```
<a href="www.php.cn" target="_self"></a>
```

在新窗口中打开被链接文档。

<a href="www.php.cn" target="_blank"></a>

在父框架集中打开被链接文档。

<a href="www.php.cn" target="_parent"></a>

在整个窗口中打开被链接文档。
```
<a href="www.php.cn" target="_top"></a>
```

使用a标签进行文件下载：当href中的地址指向一个文件时
可以用download属性定义文件名称

<a href="a.png" download="img下载.png"></a>

使用a标签进行拨打电话：在href中使用tel:电话号格式

<a href="tel:18345678901">18345678901</a>

使用a标签进行调整到邮箱：在href中使用tomail:邮箱格式

<a href="tomail:demo@163.com">demo@163.com</a>

用a标签与id设置锚点

<a href="#bottom">到达底部</a>
<p>文本</p>
.......
<p id="bottom">底部</p>

列表

无序列表：ul+li

<ul>
<li>首页</li>
<li>php工具</li>
<li>视频课程</li>
</ul>

有序列表：ol+li

 <ol>
   <li>html/css</li>
   <li>javascript</li>
   <li>php</li>
 </ol>

自定义列表：dl+dt+dd

<dl>
   <dt>前端</dt>
   <dd>html</dd>
   <dd>css</dd>
   <dd>js</dd>
   <dt>服务端</dt>
   <dd>php</dd>
   <dd>java</dd>
   <dd>c</dd>
   <dt>数据库</dt>
   <dd>memcacheed</dd>
   <dd>redis</dd>
   <dd>mysql</dd>
 </dl>

定位

默认:static，静态定位/文档流定位
元素未设置position属性时，默认是以文档流的顺序进行排列
文档流：按照书写顺序

相对定位
元素相对于自己在文档流中原始位置相对偏移

p{
  position:relative;
  top:50 px;
  left:30px;
}

绝对定位
元素找到距离最近的具有定位属性的父级元素相对偏移。如果父级中都没有定位属性，则相对于body偏移

p{
  position:absolute;
  top:50 px;
  left:30px;
}

事件监听与事件代理

事件属性

<button onclick="console.log(this.innerText)">按钮</button>

对象属性

 <button>按钮</button>
 <script>
     document.querySelectorAll('button')[0].onclick=function(){
         console.log(this.innerText);
     }
 </script>

注：当用对象属性方式对同一个元素绑定了对个相同事件时，只有最后的事件有效

事件监听器

 <button>按钮</button>
 <script>
     const btn=document.querySelectorAll('button')[0];
     btn.addEventListener('click',function(){
         console.log('第一次点击');
     })
     btn.addEventListener('click',function(){
         console.log('第二次点击');
     })
 </script>

注：两次事件都会触发

事件的触发阶断

冒泡：从内层到外层（默认值）

 <div>
   <li><a href="">点击</a></li>
 </div>
 <script>
   const a = document.querySelector("a");
   const li = document.querySelector("li");
   const div = document.querySelector("div");
   const body = document.body;
   a.addEventListener("click", showTagName);
   li.addEventListener("click", showTagName);
   div.addEventListener("click", showTagName);
   body.addEventListener("click", showTagName);
   function showTagName() {
     alert(this.tagName);
   }
 </script>

捕获：由外向内触发

 <div>
   <li><a href="">点击</a></li>
 </div>
 <script>
   const a = document.querySelector("a");
   const li = document.querySelector("li");
   const div = document.querySelector("div");
   const body = document.body;
   a.addEventListener("click", showTagName, true);
   li.addEventListener("click", showTagName, true);
   div.addEventListener("click", showTagName, true);
   body.addEventListener("click", showTagName, true);
   function showTagName() {
     alert(this.tagName);
   }
 </script>

阻止事件冒泡与捕获

非IE浏览器

e.stopPropagation();

IE浏览器

e.cancleBubble=true

事件代理
用父级元素代理所有子元素及更下级元素上的同名事件

 <ul>
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
   <li>item4</li>
   <li>item5</li>
 </ul>
 <script>
   document.querySelector("ul").addEventListener("click", function (ev) {
     console.log(ev.target); //事件触发者
     console.log(ev.currentTarget); //事件绑定者
   });
 </script>

导肮小示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
color: #bbb;
text-decoration: none;
}
#nav {
background-color: black;
height: 50px;
line-height: 50px;
}
li {
list-style: none;
margin: 0 10px;
float: left;
}
#nav > li > a:hover {
color: white;
}
#nav > li {
position: relative;
}
#nav > li > ul {
position: absolute;
top: 50px;
width: 180px;
border: 1px solid #aaa;
border-top: none;
}
#nav > li > ul > li a {
display: inline-block;
height: 50px;
color: #444;
}
ul.sub li:hover {
background-color: #eee;
}
#nav > li > ul {
/* display: none; */
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="">首页</a></li>
<li><a href="">视频教程</a></li>
<li><a href="">入门教程</a></li>
<li><a href="">社区问答</a></li>
<li>
<a href="">技术文章</a>
<ul>
<li><a href="">PHP教程</a></li>
<li><a href="">PHP框架</a></li>
<li><a href="">html教程</a></li>
<li><a href="">css教程</a></li>
<li><a href="">js教程</a></li>
<li><a href="">mysql教程</a></li>
</ul>
</li>
<li>
<a href="">资源下载</a>
<ul>
<li><a href="">PHP工具</a></li>
<li><a href="">在线工具</a></li>
<li><a href="">手册下载</a></li>
<li><a href="">学习课件</a></li>
</ul>
</li>
<li><a href="">PHP培训</a></li>
</ul>
</body>
<script>
const navs = document.querySelectorAll("#nav > li");
navs.forEach(function (nav) {
nav.addEventListener("mousemove", showSubMenu);
nav.addEventListener("mouseout", closeSubMenu);
});
function showSubMenu(ev) {
if (ev.target.nextElementSibling !== null) {
ev.target.nextElementSibling.style.display = "block";
}
}
function closeSubMenu(ev) {
if (ev.target.nodeName === "A" && ev.target.nextElementSibling !== null) {
ev.target.nextElementSibling.style.display = "none";
}
}
</script>
</html>

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：你是刚报名的, 还是之前一直没写作业, 得抓紧时间了