HTML+javaScript+CSS

news2024/11/5 16:39:24

文章目录

  • 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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2230391.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

跟着红队笔记学习 tmux:渗透测试中的多终端利器

内容预览 ≧∀≦ゞ 跟着红队笔记学习 tmux&#xff1a;渗透测试中的多终端利器进入 tmux 前的准备tmux 概念简介tmux 基础操作会话管理命令会话管理快捷键会话内和会话外命令的区别 tmux 窗口和面板管理新建和管理窗口分割窗口为面板切换面板面板放大与恢复调整面板大小关闭面板…

服务器数据恢复—DELL EqualLogic PS6100系列存储简介及如何收集故障信息?

DELL EqualLogic PS6100系列存储采用虚拟ISCSI SAN阵列&#xff0c;支持VMware、Solaris、Linux、Mac、HP-UX、AIX操作系统&#xff0c;提供全套企业级数据保护和管理功能&#xff0c;具有可扩展性和容错功能。DELL EqualLogic PS6100系列存储介绍&#xff1a; 1、上层应用基础…

【力扣】Go语言回溯算法详细实现与方法论提炼

文章目录 一、引言二、回溯算法的核心概念三、组合问题1. LeetCode 77. 组合2. LeetCode 216. 组合总和III3. LeetCode 17. 电话号码的字母组合4. LeetCode 39. 组合总和5. LeetCode 40. 组合总和 II小结 四、分割问题6. LeetCode 131. 分割回文串7. LeetCode 93. 复原IP地址小…

【深度学习】实验 — 动手实现 GPT【三】:LLM架构、LayerNorm、GELU激活函数

【深度学习】实验 — 动手实现 GPT【三】&#xff1a;LLM架构、LayerNorm、GELU激活函数 模型定义编码一个大型语言模型&#xff08;LLM&#xff09;架构 使用层归一化对激活值进行归一化LayerNorm代码实现scale和shift 实现带有 GELU 激活的前馈网络测试 模型定义 编码一个大…

基于springboot+vue车辆充电桩管理系统

基于springbootvue车辆充电桩管理系统 摘 要 随着信息化时代的到来&#xff0c;管理系统都趋向于智能化、系统化&#xff0c;车辆充电桩管理系统也不例外&#xff0c;但目前国内仍都使用人工管理&#xff0c;市场规模越来越大&#xff0c;同时信息量也越来越庞大&#xff0c;…

WordPress网站添加嵌入B站视频,自适应屏幕大小,取消自动播放

结合bv号 改成以下嵌入式代码&#xff08;自适应屏幕大小,取消自动播放&#xff09; <iframe style"width: 100%; aspect-ratio: 16/9;" src"//player.bilibili.com/player.html?isOutsidetrue&bvidBV13CSVYREpr&p1&autoplay0" scrolling…

BLG与T1谁会赢?python制作预测程序,结果显示,BLG将打败T1

决赛预测 2024英雄联盟全球总决赛 2024年英雄联盟全球总决赛&#xff0c;今天晚上&#xff08;2024年11月2日22点&#xff09;就要开始了&#xff01;今年的总决赛的队伍是BLG与T1。当然一些老的lol玩家&#xff0c;现在可能对于lol关注不多&#xff0c;并不清楚这两个队伍。…

AI-基本概念-向量、矩阵、张量

1 需求 需求&#xff1a;Tensor、NumPy 区别 需求&#xff1a;向量、矩阵、张量 区别 2 接口 3 示例 4 参考资料 【PyTorch】PyTorch基础知识——张量_pytorch张量-CSDN博客

【笔面试常见题:三门问题】用条件概率、全概率和贝叶斯推导

1. 问题介绍 三门问题&#xff0c;又叫蒙提霍尔问题&#xff08;Monty Hall problem&#xff09;&#xff0c;以下是蒙提霍尔问题的一个著名的叙述&#xff0c;来自Craig F. Whitaker于1990年寄给《展示杂志》&#xff08;Parade Magazine&#xff09;玛丽莲沃斯莎凡特&#x…

Core日志 Nlog

资料 资料 资料 直接在NuGet里面搜索NLog.Web.AspNetCore&#xff0c;然后进行安装即可&#xff0c;

使用form表单的action提交并接收后端返回的消息

使用form表单的action提交表单是同步提交的方式&#xff0c;会跳转页面&#xff0c;所以无法获取后端返回来到消息。这样描述或许没有太大感觉&#xff0c;如果我要通过表单的方式上传文件&#xff0c;并接收后台返回来的响应数据&#xff1b;这样说是不是就感同深受了呢。 1.…

从障碍到流畅:提升远程团队沟通的最佳实践

远程工作模式带来了地理和时间上的灵活性&#xff0c;但同时也引入了一些沟通障碍。这些障碍可能导致信息传递不畅、合作效率低下&#xff0c;甚至影响团队成员之间的关系。解决远程团队的沟通障碍需要一系列综合策略的实施&#xff0c;包括利用高效的技术工具、建立明确的沟通…

鸿蒙进阶篇-Swiper组件的使用

“在科技的浪潮中&#xff0c;鸿蒙操作系统宛如一颗璀璨的新星&#xff0c;引领着创新的方向。作为鸿蒙开天组&#xff0c;今天我们将一同踏上鸿蒙基础的探索之旅&#xff0c;为您揭开这一神奇系统的神秘面纱。” 各位小伙伴们我们又见面了,我就是鸿蒙开天组,下面让我们进入今…

【PTA】4-2 树的同构【数据结构】

给定两棵树 T1​ 和 T2​。如果 T1​ 可以通过若干次左右孩子互换就变成 T2​&#xff0c;则我们称两棵树是“同构”的。例如图1给出的两棵树就是同构的&#xff0c;因为我们把其中一棵树的结点A、B、G的左右孩子互换后&#xff0c;就得到另外一棵树。而图2就不是同构的。 图一…

《女巫攻击:潜伏在网络背后的隐秘威胁与防御策略》

目录 引言 一、基本概念 二、攻击机制 三、Sybil攻击类型 1、直接通信 2、间接通信 3、伪造身份 4、盗用身份 5、同时攻击 6、非同时攻击 四、攻击影响 五、防御措施 总结 引言 随着区块链技术和去中心化网络的迅速发展&#xff0c;网络安全问题也愈发引起关注。其…

华为 HCIP-Datacom H12-821 题库 (41)

&#x1f423;博客最下方微信公众号回复题库,领取题库和教学资源 &#x1f424;诚挚欢迎IT交流有兴趣的公众号回复交流群 &#x1f998;公众号会持续更新网络小知识&#x1f63c; 1. 在组播中&#xff0c;&#xff08; &#xff09;模型针对特定源和组的绑定数据流提供服务&…

Day08只出现一次的数字

给你一个 非空 整数数组 nums &#xff0c;除了某个元素只出现一次以外&#xff0c;其余每个元素均出现两次。找出那个只出现了一次的元素。 你必须设计并实现线性时间复杂度的算法来解决此问题&#xff0c;且该算法只使用常量额外空间。 class Solution {public int singleNum…

【linux 多进程并发】0302 Linux下多进程模型的网络服务器架构设计,实时响应多客户端请求

0302 多进程网络服务器架构 ​专栏内容&#xff1a; postgresql使用入门基础手写数据库toadb并发编程 个人主页&#xff1a;我的主页 管理社区&#xff1a;开源数据库 座右铭&#xff1a;天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物. 一、概…

vue3+vant实现视频播放(含首次禁止进度条拖拽,视频看完后恢复,保存播放视频进度,刷新及下次进入继续播放,判断视频有无全部看完等)

1、效果图 2、 <div><videocontrolsclass"video_player"ref"videoPlayer":src"videoSrc"timeupdate"handleTimeUpdate"play"onPlay"pause"onPause"ended"onVideoEnded"></video><…

C++设计模式创建型模式———简单工厂模式、工厂方法模式、抽象工厂模式

文章目录 一、引言二、简单工厂模式三、工厂方法模式三、抽象工厂模式四、总结 一、引言 创建一个类对象的传统方式是使用关键字new &#xff0c; 因为用 new 创建的类对象是一个堆对象&#xff0c;可以实现多态。工厂模式通过把创建对象的代码包装起来&#xff0c;实现创建对…