主要内容包括：
1-css样式、链接、列表、元素定位
2-事件监听、事件触发阶段、事件代理
3-网页菜单实战
1、css样式的种类
html是框架，css是样式。
| 序号 | 内容 | 描述 |
|---|---|---|
| 1 | 内嵌样式 | 通过元素内style直接定义方式解决。但这种只能正对独立的一个元素来定义 |
| 2 | 前置模式 | 将相同的类，或元素标签（不建议）这种放到一起来定义 |
| 3 | style.css文件方式 | 将对应的样式定义放到一个独立的.css文件中，这样多个html中有对应的类等都可以调用。 |
等于第一个只适应用一个元素，第二个适用于同一文件中的多个元素，第三个则适用于多个文件中的多个元素。
第一种情况示例：
<body><h2 style="color:greenyellow;">这个世界值得珍惜</h2><h3 style="color:red ">谁也不知道明天将会发生什么？</h3></body>
第二种情况示例：
<head><style>.red{color: red;}</style></head><body><h2 class="red";>这个世界值得珍惜</h2><h3 class="red";>谁也不知道明天将会发生什么？</h3></body>
第三种情况示例，又分两种，一种是@import方式（简写和url复杂写）。
<head><style>/* @import url("demo12.css"); */@import "demo12.css";</style></head><body><h2 class="red";>这个世界值得珍惜</h2><h3 class="red";>谁也不知道明天将会发生什么？</h3></body>
另外一种是link方式。
<head><link rel="stylesheet" href="demo12.css"></head><body><h2 class="red";>有些东西是你永远无法知道的</h2><h3 class="red";>有些东西是你知道了也毫无意义的</h3></body>
2、链接
链接的功能有好多种，主要的有：
|序号 |描述 |
|———|——————————-|
|1 |跳转到一个网页|
|2 |跳转到一个网页可以打开的文件|
|3 |下载。其实就是跳转到一个网页无法直接打开的文件|
|4 |发送邮件|
|5 |拨打电话|
|6 |快速到一个锚点，例如bottom、top等|
示例如下
<body><!-- 打开一个网站 --><a href="https://php.cn" target="_self">php中文网</a><!-- 下载文件 --><a href="http://127.0.0.1:5500/0612/demo1.zip" target="_blank">下载文件</a><!-- 发邮件 --><a href="mailto: 498668472@qq.com" target="_blank">请发邮件给我</a><!-- 打电话 --><a href="tel:189456***34" target="_blank">请给我打电话</a><a href="#hello">跳转到锚点</a><!-- 锚点。style中的margin参数是为了将上下间隔拉大 --><h1 id="hello" style="margin-top: 1000px;">这里是很下面的文档</h1></body>
3、列表
列表有三种形式，无序列表、有序列表、自定义列表（有序列表用的相对少一些）。
一个技巧：vs code中直接通过
ul>li*3>a 就可以自动生成三行link填充的列表。
a：无序列表
<!-- 无序列表 --><!-- ul+li --><ul><li><a href="">首页</a></li><li><a href="">正在秒杀</a></li><li><a href="">Plus</a></li></ul>
b：有序列表
<!-- 有序列表 --><!-- ol + li --><h3>商品分类</h3><ol start="1" type="i"><li><a href="">电脑 / 办公</a></li><li><a href="">服装 / 男装 / 女装</a></li><li><a href="">图书 / 文娱 / 教育</a></li></ol>
c：自定义列表
<!-- 自定义列表 --><h3>联系我们</h3><!-- dl + dt + dd --><dl><dt>电话:</dt><dd><a href="tel:189456***34" target="_blank">189456***34</a></dd><dd><a href="tel:0551-67744***" target="_blank">0551-67744***</a></dd><dt>地址:</dt><dd>魔界58弄46号（敲门要注意）</dd></dl>
4、元素定位
a：有相对定位和绝对定位两种。
b：最大的是body。然后内部有相互嵌套和父子关系。
c：vh是一个相对展示页面的百分比。eg50%，可以理解为相对展示页面的50%。
/* v: viewport, h:height *//* viewport: 视口, 可视窗口, 当前你的看到的窗口大小; */
</head><style>body{border:1px solid red;height: 50vh;}.box1{border:1px solid blue;height: 20vh;width: 20vh;top:20px;left:20px;position: absolute;}.box2{border:1px solid green;height: 40px;width: 40px;top:20px;left:20px;position: absolute;}</style><body><div class="box1"><div class="box2"></div></div></body>
5、事件、事件监听
事件有三种触发货监听模式
js要注意结束的：号，否则有些运行不了
展示结果是在浏览器的inspect->console中。
body><!-- 1. （内嵌的）事件属性 --><button onclick="console.log(this.innerText)">神奇</button><button>战争</button><button>和平</button><script>//2.对象属性方式添加事件，只有最后一次是有效的，同名事件彼此覆盖document.querySelectorAll("button")[1].onclick = function() {console.log("第一次点击‘战争’");};document.querySelectorAll("button")[1].onclick = function() {console.log("第二次点击‘战争’");};// 3. 事件监听器// btn.addEventListener(事件类型, 事件方法);const btn = document.querySelectorAll("button")[2];btn.addEventListener("click",function() {console.log("这是人类第一次开始和平");});btn.addEventListener("click",function() {console.log("这是人类第二次开始和平");});</script>
6、事件触发阶段
类似一个套娃，可以由内而外，也可以由外而内。
由内而外的时候addEventListener的默认参数就是false。反之由外而内则是true。
注意点：这个地方因为是选择的单一元素，因此用querySelector，最后没有all。
<body><div><li><a href="">看到妖怪就赶快跑</a></li></div></body><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);// 事件捕获: 由外向内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>
7、事件代理
通过上一级（父级）来代理对下一级的操作。
例如下面这第一种，其实就相当于直接操作：
<body><ul><li>外星人一级</li><li>外星人二级</li><li>外星人三级</li><li>外星人四级</li><li>外星人五级</li><li>外星人六级</li><li>外星人七级</li><li>外星人八级</li><li>外星人九级</li><li>外星人十级</li></ul></body><script>const lis = document.querySelectorAll("li");lis.forEach(function (li) {li.addEventListener("click", function () {console.log(li.innerText);});});</script>
下面这种情况则是通过ul来代理对li的操作，就是事件代理。
其中的ev为事件对象（估计用了下ed，也可以）。
ev.target: 返回的是当前正在触发事件的元素
ev.currentTarget: 返回的是事件绑定者
<script>document.querySelector("ul").addEventListener("click", function(ed){console.log(ed.target);console.log(ed.currentTarget);});</script>
8、网页菜单实战
将几个功能做了结合：样式 + 链接 + 列表 + 事件监听 + 事件委托。
<!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><ul><li><a href="">一级</a></li><li><a href="">二级</a></li><li><a href="">三级</a></li><li><a href="">四级</a></li><li><a href="">五级</a></li><li><a href="">六级</a></li></ul></li><li><a href="">妖怪</a><ul><li><a href="">一妖</a></li><li><a href="">二妖</a></li><li><a href="">三妖</a></li></ul></li><li><a href="">转化</a></li><li><a href="">我的</a></li></ul></body><script>//显示子菜单、关闭子菜单const navs = document.querySelectorAll("#nav > li");navs.forEach(function(nav){nav.addEventListener("mouseover", showSubMenu);nav.addEventListener("mouseout", closeSubMenu);});//显示子菜单的functionfunction showSubMenu(ed){console.log(ed.target);if (ed.target.nextElementSibling !== null){ed.target.nextElementSibling.style.display = "block";}}//关闭子菜单的functionfunction closeSubMenu(ed){if (ed.target.nodeName === "A" && ed.target.nextElementSibling !== null){ed.target.nextElementSibling.style.display = "none";}}</script></html>