收藏
WJ批改状态：合格
老师批语：总体写的很认真仔细！·
CSS引入方式
内联样式：写在html页面中的head中的样式使用<style></style>>标签包住内嵌样式：写在标签元素中的样式<p style="color:red">内嵌样式</p>外联样式：通过link标签引入css文件，<link rel="stylesheet" href="style.css" /> 或 @import url("文件名");[另一种写法： @import "style.css";]
A标签的作用
打开网站例：<a href="https://php.cn" target="_self">baidu.com</a>下载文件<a href="http://127.0.0.1:5500/612/demo.zip" target="_blank">下载文件</a>发邮件（记得换协议）例：<a href="Mailto: 4483328349@qq.com" target="_blank">发邮件</a>打电话（记得换协议）<a href="tel:183657***78" target="_blank">打电话</a>锚点（锚点定位必须是id名）例：<a href="#hello">找到锚点</a><h1 id="hello" style="margin-top: 1000px;">Hello World</h1>
定位
文档流: 元素的排列按照书写顺序，源码中的顺序
vh:可视窗口 100vh：当前可视窗口100%高度 50vh：当前可视窗口50%高度
postion：static默认定位
相对定位：position: relative;元素相对于自己在文档流中的原始位置进行偏移（相对于自己本身在html中的位置进行偏移）绝对定位：position: absolute;绝对定位以带有定位属性的上一级元素作为参考，如果一直往上找没有的话就相对于body进行定位
列表
无序列表例：<ul><li><a href="">1</a></li><li><a href="">2</a></li><li><a href="">3</a></li></ul>有序列表例：start：设置类型的起始值type：设置在列表中使用的标记类型（类型包括数字、字母大小写、阿拉伯数字等）<ol start="1" type="i"><li><a href="">一</a></li><li><a href="">二</a></li><li><a href="">三</a></li></ol>自定义列表例：自定义列表以<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>合肥市政务新区</dd></dl>
事件与事件监听
事件源：获取事件源 【就是在哪个元素引发的事件，如a、p标签】事件：绑定事件 【如绑定单击、双击、鼠标移入、移出等事件】事件执行程序：封装书写驱动事件的程序【封装驱动事件的函数】
第一种直接将事件添加到元素上<button onclick="console.log(this.innerText)">按钮1</button>第二种将事件直接作为属性添加到对象上document.querySelectorAll("button")[1].onclick = function () {console.log("第一次点击");};第三种是addEventListener() 【监听事件】方法const btn3 = document.querySelectorAll("button")[2];btn3.addEventListener("click", function () {console.log("第一次点击");});
事件冒泡：由内向外触发
事件捕获：由外向内触发
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>事件冒泡&事件捕获</title></head><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, false);li.addEventListener("click", showTagName, false);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></html>
事件代理： 用父级代理所有子元素以及更下一级的元素上的同名事件
ev: 事件对象
ev.target: 返回的是当前正在触发事件的元素
ev.currentTarget: 返回的是事件绑定者
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>事件代理/事件委托</title></head><body><ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li><li>item6</li><li>item7</li><li>item8</li><li>item9</li><li>item10</li></ul></body><script>document.querySelector("ul").addEventListener("click", function (ev){// ev.target: 返回的是当前正在触发事件的元素console.log(ev.target);// ev.currentTarget: 返回的是事件绑定者console.log(ev.currentTarget);});</script></html>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>下拉菜单</title><style>/* 元素样式初始化: 学到盒模型再详细介绍 */* {margin: 0;padding: 0;box-sizing: border-box;}a {/* color: rgba(255, 255, 255, 0.7); */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><ul><li><a href="">111</a></li><li><a href="">222</a></li><li><a href="">333</a></li><li><a href="">444</a></li></ul></li><li><a href="">三三三</a></li><li><a href="">四四四</a><ul><li><a href="">1111</a></li><li><a href="">2222</a></li><li><a href="">3333</a></li><li><a href="">4444</a></li></ul></li></ul></body><script type="text/javascript">// 获取所有导航菜单const navs = document.querySelectorAll("#nav > li");// 循环给每一个主导航菜单添加监听事件navs.forEach(function (nav){// 给每一个主导航菜单添加鼠标移入事件nav.addEventListener("mouseover",showSubMenu);// 给每一个主导航菜单添加鼠标移出事件nav.addEventListener("mouseout",closeSubMenu);});// 定义鼠标移出事件的函数function showSubMenu(ev){// 当鼠标移入主导航是让子菜单显示// 判断当前主菜单下是否有子菜单// 打印输出查看当前触发事件的同级下一个标签// console.log(ev.target.nextElementSibling);if (ev.target.nextElementSibling !== null) {// ev.target.nextElementSibling.style.display = "block";ev.target.nextElementSibling.style.display = "block";}// console.log(ev.target.nodeName);}function closeSubMenu(ev){// 当鼠标移出主导航是让子菜单关闭// 判断当前主菜单下有没有子菜单，有就设置隐藏// 这里的主导航(a标签)的父级标签li冒泡了，还需加个判断，判断当前被触发事件的元素标签必须是A标签才触发关闭，否则不触发// if (ev.target.nextElementSibling !== null) {if (ev.target.nodeName === "A" && ev.target.nextElementSibling !== null) {ev.target.nextElementSibling.style.display = "none";}}</script></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
