HTML+javaScript+CSS
文章目录
- 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>