文章目录
- HTML+javaScript+CSS
- 属性
- 区块
- 表单
- 层叠样式表
- 选择器
- 常用属性
- 盒子模型
- 相关属性
- 浮动float
- 定位（position）
- JS
- 操作节点
- 事件
- 点击事件onclick()
- 聚焦事件、失焦事件
- 鼠标移入移出事件
- 定时任务
- 延迟定时任务
- 重复定时任务
- 判断哪个单选框被选中
- 设置按钮失效
- 冒泡和阻止冒泡
- 具体例子
HTML+javaScript+CSS
属性
超链接
<a href="www.qq.com">跳转到QQ</a>
//target:_self:默认值，连接在当页打开；_blank:新页面打开；_parent:父窗口或父框架打开；_top：顶层窗口或顶层框架打开
<a href="www.qq.com" target="_blank">新页面打开，跳转到QQ</a>
换行
<br>
分割线
<hr>
图片
<img src="log.png" alt="图片无法显示" width="100" height="100">
区块
块元素（block）：独占浏览器一行，块级元素通常会从新行开始，占据整行宽度，可以包含其他块级元素和行内元素
常见块元素：div，p，h，ul，ol，li，table，form
行内元素（inline）：行内元素通常在同一行内呈现，但不会独占一行，占据内容所需要的宽度，不能包含块级元素但可以包含行内元素
常见：span,a,strong,em,br,input,img
表单
<form><lable>用户名</lable>//lable与input通常一起连用，lable有属性for，能与input的值进行绑定<input type="text" placeholder="这里是提示信息">//type有text和password，分别是明文显示和加密显示，placeholder是提示信息单选框，使用时需要让属性name值相同<laber>性别：</laber><input type="radio" name="gender">男<input type="radio" name="gender">女复选框，使用时需要让属性name值相同<laber>性别：</laber><input type="checkbox" name="hobby">唱歌<input type="checkbox" name="hobby">跳舞
</form>
<form action="">提交内容到表单,内容提交到action里<input type="submit">//默认是内容提交<input type="submit" value="上传">//修改按钮值为上传</form>
层叠样式表
语法:
选择器{属性1：属性值1；属性2：属性值2;
}
导入方式：
优先级：内联>内部>外部
内部样式：
写在html文件<hrad>中，用<style>包裹
<head><style>选择器{属性1：属性值1；属性2：属性值2;}</style>
</head>
内联样式
<h1 style="color:red"></h1>
外部样式
写在里，用引入
<link rel="stylesheet" href="css文件路径">
选择器
优先级：id>类>标签
h2 {}元素选择器
.class名 {}类选择器
#id名 {}id选择器
* {} 通用选择器，
.father> son {}子元素选择器
.father p{}后代选择器//子元素选择器只能选择子元素，后代选择器可以选择后代所有元素
<div class="father"><p class="son"></p><div><p class="grandson"></p></div>
</div>
h3+p{}相邻元素选择器//改变与p相邻的h3的样式<p></p><h3>文本内容</h3>
//伪类选择器
<h3 id="element">伪类</h3>
#element:hover{background-color:blue;//鼠标悬停背景色变蓝
}
#element:first-child{background-color:blue;//选中第一个子元素背景色变蓝
}
#element:nth-child{background-color:blue;//选中第n个子元素背景色变蓝
}
//伪元素选择器
::after{}
::befor{}
常用属性
//font:复合属性，在一个声明中设置所有字体属性
设置了字体加粗，大小，样式
<h1 style="font:bolder 50px 'KaiT';"></h1>
color：给字体shezhiyanse
background-color：设置背景颜色
font-size：设置字体大小
font-family：设置字体样式
font-weight：设置字体粗细
line-height:设置行高
display:转换行内/块/行内块元素
<div class="div-inline">这是块元素转成行内元素</div>
<span class="span-inline-block">这是行内转成行内块元素</span>
<span class="span-block">这是行内转成行内块元素</span>.div-inline {display:inline;
}
.span-inline-block {display:inline-block;
}
.span-block {display:block;
}
.span-inline-block {display:none;//不显示
}盒子模型
相关属性
内容（center）：盒子包含的实际内容，比如文本，图片等。
内边距（padding）：围绕在内容的内部，是内容与边框之间的空间。
边框（border）：围绕在内边距的外部，是盒子的边界。
外边距（margin）：围绕在边框的外部，是盒子与其他元素之间的空间。
border:复合属性，可设置边框的粗细，样式，颜色等
<div class="border-demo"></div>
.border-demo {background-color:red;width:200px;height:200px;//solid实线dashed虚线dotted点double双实线，可设置四个值，分别是上右下左，如果设置1-3个，遵循顺时针方向依次匹配，没有值的跟从对面border-style:solid dashed dotted double ;//可设置四个值，分别是上右下左，0可以不写px，遵循遵循顺时针方向依次匹配，没有值的跟从对面border-width:10px 0 12px 12px;border-color:blue;
}
浮动float
脱离标准流，一行显示，顶部对齐，具备行内块元素特性
<div class="father"><div class="left-son">左浮动</div><div class="right-son">右浮动</div>
</div>
.father {//解决父盒子没有高度，子盒子浮动后出现坍塌overflow:hidden;
}
.left-son {width:100px;height=100px;float:left;
}
.right-son {width:100px;height=100px;float:right;
}
定位（position）
传统网页布局方式：
标准流（普通流，文档流）：网页按照元素的书写顺序依次排列。
浮动
定位
Flexbox
Grid（自适应布局）
定位方式：
相对定位：相对于元素在文档流中的正常位置进行定位
绝对定位：相对于其最近的已定位的祖先元素进行定位。不占据文档流
固定定位：相对于浏览器窗口进行定位，不占据文档流，固定在屏幕上的位置，不随滚动而移动
<div class="box1"><div class="box-normal"></div><div class="box-relative"></div><div class="box-normal"></div>
</div>
下面情况：相对定位，box-relative会移动到距离box1左边100px，距离上面相邻的box-normal的下面40px;元素不会脱离正常文档流，下面的40px;不会上移；
.box1 {height:400px;backgroundcolor:block;
}
.box-normal {width100px;height:100px;backgroundcolor:blue;
}
.box-relative {width100px;height:100px;backgroundcolor:red;position:relative;left:100px;top:40px;
}
下面情况：绝对定位，box-relative会移动到距离box1左边100px，元素会脱离正常文档流，下面的40px会上移；
.box1 {height:400px;backgroundcolor:block;
}
.box-normal {width100px;height:100px;backgroundcolor:blue;
}
.box-relative {width100px;height:100px;backgroundcolor:red;position:absolute;left:100px;
}
下面情况：固定定位，对于浏览器窗口进行定位,box-fixed出现在浏览器右边,距顶部300px不随页面滚动移动，脱离标准流
<div class="box-fixed"></div>
.box-fixed {width100px;height:100px;backgroundcolor:red;position:fixed;right:o;top:300px;
}
JS
操作节点
<div id="d1">我的id属性是d1</div><div name="d2">1我的name属性是d2</div><div name="d2">2我的name属性是d2</div><div class="d3">1我的class属性是d3</div><div class="d3">2我的class属性是d3</div><p>我是一个p标签</p><ul id="ul">空格、换行和其他文本都算节点<li>ufirst</li><li>ucenter</li><li>ulast</li>我是文本的最后节点</ul>//通过标签的id属性查找对应节点var d1 = document.getElementById("d1");console.log(d1);var d2 = document.getElementsByName('d2');console.log(d2);for (const element of d2) {console.log(element);}// console.log(d2[0]);// console.log(d2[1]);//通过标签的class属性值找到对应节点的集合var d3 = document.getElementsByClassName("d3");for (const element of d3) {console.log(element);}//通过标签名字获得对应节点集合var p = document.getElementsByTagName("p");for (const element of p) {console.log(element);}var ul = document.getElementById("ul");//这是获取第一个文本节点console.log(ul.firstChild);//这是获取第一个带标签的节点console.log(ul.firstElementChild);//这是获取最后一个文本节点console.log(ul.lastChild);//这是获取最后一个带标签的节点console.log(ul.lastElementChild);//给标签添加属性document.getElementById("ul").setAttribute("class","ul");document.getElementById("ul").setAttribute("style", "color:blue");//获取标签的值,此处获得的是第一个li的值var li = document.getElementsByTagName("li")[0].innerText="我被修改了";//innerHTML,获取值同时渲染样式var li = document.getElementsByTagName("li")[0].innerHTML = "<em>我被修改了</em>";//添加节点信息var node=document.createElement("li");node.innerText="我是添加的节点信息";//添加同级节点,需要父级节点var li3 = document.getElementsByTagName("li")[2];var ul1 = document.getElementById("ul");//ul1.insertBefore(node,li3);//在节点后面添加//li3.insertAdjacentElement("afterend",node);//追加到子节点末尾//document.getElementsByTagName("li")[2].appendChild(node);//删除节点，用父级节点删除ul1.removeChild(li3);
事件
点击事件onclick()
<body><div class="d1" onclick="divClick('张三',18)">点我添加数据</div>
</body>
<script>function divClick(name,age){alert(name+age);}
</script>
聚焦事件、失焦事件
<p><!-- 聚焦事件onfocus 失焦事件onblur--><input id="username" placeholder="请输入用户名：" onfocus="m1(this)" onblur="m2(this)"/><span></span>function m1(that){console.log("选中输入框");that.nextSibling.innerText = "";} function m2(that) {console.log("离开输入框");if(that.value==""){that.nextSibling.innerText="用户名不能为空";}}
</p>
鼠标移入移出事件
.show {display: block;}
.disshow {display: none;}<div id="d1" onmouseover="show1()" onmouseleave="disshow1()"></div>
<div id="d2" class="disshow"></div>
//鼠标移入让d2显示
function show1(){//document.getElementById("d2").setAttribute("style","display:block");document.getElementById("d2").setAttribute("class", "show");}
//鼠标移出让d2消失
function disshow1(){//document.getElementById("d2").setAttribute("style", "display:none");document.getElementById("d2").setAttribute("class", "disshow");}
定时任务
延迟定时任务
//延迟定时执行let st=setTimeout(()=>{alert("爆炸");},3000);//删除定时任务clearTimeout(st);
重复定时任务
//重复定时任务var si= setInterval(() => {console.log("中午吃什么");}, 2000);
//删除重复定时任务
clearInterval(si);
判断哪个单选框被选中
狗狗：<input type="radio" name="book" onclick="choosebook()"/><br/>雾霾：<input type="radio" name="book" onclick="choosebook()"/><img src=""/>//1.获取所有单选框对象let radioList = document.getElementsByName("book");//2.遍历集合 判断哪个单选框被选中for (let index = 0; index < radioList.length; index++) {if (radioList[index].checked) {if(index==0){document.getElementsByTagName("img")[0].setAttribute("src","phone/dog.jpg");}else{document.getElementsByTagName("img")[0].setAttribute("src", "phone/mai.jpg");}}}
设置按钮失效
<button id="start" onclick="start()">开始</button>//style="pointer-events: none;"设置按钮失效
document.getElementById("start").setAttribute("style","pointer-events: none");
//设置按钮失效,true失效false生效
document.getElementById("start").disabled=true;
//关闭按钮失效
document.getElementById("start").disabled = false;
冒泡和阻止冒泡
<div id="d1" onclick="d1()"><!-- data-abc="今天中午吃什么" 绑定数据，把数据绑到标签上 --><div id="d2" data-abc="今天中午吃什么"></div>
</div>function d1(){alert("点击了d1");}
function d2(e) {alert("点击了d2");}
// 监听事件获得事件对象e,通过监听d2来阻止事件冒泡以及取数据，click可以改变来监听不同事件
//addEventListener("",,)接收三个参数，分别是事件、函数名，布尔值，如果不写最后一个参数默认false(事件冒泡，由内向外触发事件)，改为true是事件捕获(由外向内触发事件)，事件捕获比事件冒泡优先级高，同时出现先捕获后冒泡，相同的事件出现捕获由外层先执行后内层，冒泡先内层后外层(过山车理论)
document.getElementById("d2").addEventListener("click",d2(e){console.log(e);
// 把数据从标签上取出console.log(e.srcElement.dataset.abc);
//阻止事件冒泡
// e.stopPropagation();})
具体例子
<style>.yellow{width: 300px;height: 300px;background-color: yellow;}.blue{width: 200px;height: 200px;background-color: blue;}.green{width: 100px;height: 100px;background-color: green;}
</style>
<body><div class="yellow" ><div class="blue"><div class="green"></div></div></div>
</body>
<body><div class="yellow" ><div class="blue"><div class="green"></div></div></div>
</body>
//点击黄色格子，打印黄色、绿色、蓝色
<script>let oyellow = document.getElementsByClassName("yellow")[0];let oblue = document.getElementsByClassName("blue")[0];let ogreen = document.getElementsByClassName("green")[0];oyellow.addEventListener("click",()=>{console.log("黄色");},true)oblue.addEventListener('click',(e)=>{console.log("蓝色")})ogreen.addEventListener('click',() => {console.log("绿色");}, true)
</script>