qidao123.com ToB IT社区-企服评测·应用市场»论坛 › 软件与程序人生 › DevOps与敏捷开发 › HTML+javaScript+CSS

HTML+javaScript+CSS

[复制链接]
发表于 2025-12-30 16:41:54 | 显示全部楼层 |阅读模式
HTML+javaScript+CSS

属性

  1. 超链接
  2. <a href="www.qq.com">跳转到QQ</a>
  3. //target:_self:默认值，连接在当页打开；_blank:新页面打开；_parent:父窗口或父框架打开；_top：顶层窗口或顶层框架打开
  4. <a href="www.qq.com" target="_blank">新页面打开，跳转到QQ</a>
  5. 换行
  6. <br>
  7. 分割线
  8. <hr>
  9. 图片
  10. <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
表单

  1. <form>
  2.     <lable>用户名</lable>//lable与input通常一起连用，lable有属性for，能与input的值进行绑定
  3.     <input type="text" placeholder="这里是提示信息">//type有text和password，分别是明文显示和加密显示，placeholder是提示信息
  4.     单选框，使用时需要让属性name值相同
  5.     <laber>性别：</laber>
  6.     <input type="radio" name="gender">男
  7.     <input type="radio" name="gender">女
  8.     复选框，使用时需要让属性name值相同
  9.     <laber>性别：</laber>
  10.     <input type="checkbox" name="hobby">唱歌
  11.     <input type="checkbox" name="hobby">跳舞
  12. </form>
  13. <form action="">
  14.     提交内容到表单,内容提交到action里
  15.     <input type="submit">//默认是内容提交
  16.     <input type="submit" value="上传">//修改按钮值为上传
  18. </form>
复制代码
层叠样式表

语法:
  1. 选择器{
  2.     属性1：属性值1；
  3.     属性2：属性值2;
  4. }
复制代码
导入方式：
优先级：内联>内部>外部
内部样式：
  1. 写在html文件<hrad>中，用<style>包裹
  2. <head>
  3.     <style>
  4.         选择器{
  5.             属性1：属性值1；
  6.             属性2：属性值2;
  7.         }
  8.     </style>
  9. </head>
复制代码
内联样式
  1. <h1 style="color:red"></h1>
复制代码
外部样式
写在里，用引入
  1. <link rel="stylesheet" href="css文件路径">
复制代码
选择器

优先级：id>类>标签
  1. h2 {}元素选择器
  2. .class名 {}类选择器
  3. #id名 {}id选择器
  4. * {} 通用选择器，
  5. .father> son {}子元素选择器
  6. .father p{}后代选择器//子元素选择器只能选择子元素，后代选择器可以选择后代所有元素
  7. <div class="father">
  8.     <p class="son"></p>
  9.     <div>
  10.         <p class="grandson"></p>
  11.     </div>
  12. </div>
复制代码
  1. h3+p{}相邻元素选择器//改变与p相邻的h3的样式<p></p><h3>文本内容</h3>
  2. //伪类选择器
  3. <h3 id="element">伪类</h3>
  4. #element:hover{
  5.     background-color:blue;//鼠标悬停背景色变蓝
  6. }
  7. #element:first-child{
  8.     background-color:blue;//选中第一个子元素背景色变蓝
  9. }
  10. #element:nth-child{
  11.     background-color:blue;//选中第n个子元素背景色变蓝
  12. }
  13. //伪元素选择器
  14. ::after{}
  15. ::befor{}
复制代码
常用属性

  1. //font:复合属性，在一个声明中设置所有字体属性
  2. 设置了字体加粗，大小，样式
  3. <h1 style="font:bolder 50px 'KaiT';"></h1>
  4. color：给字体shezhiyanse
  5. background-color：设置背景颜色
  6. font-size：设置字体大小
  7. font-family：设置字体样式
  8. font-weight：设置字体粗细
  9. line-height:设置行高
  10. display:转换行内/块/行内块元素
  11. <div class="div-inline">这是块元素转成行内元素</div>
  12. <span class="span-inline-block">这是行内转成行内块元素</span>
  13. <span class="span-block">这是行内转成行内块元素</span>
  15. .div-inline {
  16.     display:inline;
  17. }
  18. .span-inline-block {
  19.     display:inline-block;
  20. }
  21. .span-block {
  22.     display:block;
  23. }
  24. .span-inline-block {
  25.     display:none;//不显示
  26. }
复制代码
盒子模子

干系属性

内容（center）：盒子包罗的实际内容，好比文本，图片等。
内边距（padding）：围绕在内容的内部，是内容与边框之间的空间。
边框（border）：围绕在内边距的外部，是盒子的边界。
外边距（margin）：围绕在边框的外部，是盒子与其他元素之间的空间。
  1. border:复合属性，可设置边框的粗细，样式，颜色等
  2. <div class="border-demo"></div>
  3. .border-demo {
  4.     background-color:red;
  5.     width:200px;
  6.     height:200px;
  7.     //solid实线dashed虚线dotted点double双实线，可设置四个值，分别是上右下左，如果设置1-3个，遵循顺时针方向依次匹配，没有值的跟从对面
  8.     border-style:solid dashed dotted double ;
  9.     //可设置四个值，分别是上右下左，0可以不写px，遵循遵循顺时针方向依次匹配，没有值的跟从对面
  10.     border-width:10px 0 12px 12px;
  11.     border-color:blue;
  12. }
复制代码
浮动float

脱离标准流，一行表现，顶部对齐，具备行内块元素特性
  1. <div class="father">
  2.     <div class="left-son">左浮动</div>
  3.     <div class="right-son">右浮动</div>
  4. </div>
  5. .father {
  6.     //解决父盒子没有高度，子盒子浮动后出现坍塌
  7.     overflow:hidden;
  8. }
  9. .left-son {
  10.     width:100px;
  11.     height=100px;
  12.     float:left;
  13. }
  14. .right-son {
  15.     width:100px;
  16.     height=100px;
  17.     float:right;
  18. }
复制代码
定位（position）

传统网页结构方式：
标准流（平常流，文档流）：网页按照元素的誊写次序依次分列。
浮动
定位
Flexbox
Grid（自顺应结构）
定位方式：
相对定位：相对于元素在文档流中的正常位置举行定位
绝对定位：相对于其迩来的已定位的先人元素举行定位。不占据文档流
固定定位：相对于欣赏器窗口举行定位，不占据文档流，固定在屏幕上的位置，不随滚动而移动
  1. <div class="box1">
  2.     <div class="box-normal"></div>
  3.     <div class="box-relative"></div>
  4.     <div class="box-normal"></div>
  5. </div>
  6. 下面情况：相对定位，box-relative会移动到距离box1左边100px，距离上面相邻的box-normal的下面40px;元素不会脱离正常文档流，下面的40px;不会上移；
  7. .box1 {
  8.     height:400px;
  9.     backgroundcolor:block;
  10. }
  11. .box-normal {
  12.     width100px;
  13.     height:100px;
  14.     backgroundcolor:blue;
  15. }
  16. .box-relative {
  17.     width100px;
  18.     height:100px;
  19.     backgroundcolor:red;
  20.     position:relative;
  21.     left:100px;
  22.     top:40px;
  23. }
  24. 下面情况：绝对定位，box-relative会移动到距离box1左边100px，元素会脱离正常文档流，下面的40px会上移；
  25. .box1 {
  26.     height:400px;
  27.     backgroundcolor:block;
  28. }
  29. .box-normal {
  30.     width100px;
  31.     height:100px;
  32.     backgroundcolor:blue;
  33. }
  34. .box-relative {
  35.     width100px;
  36.     height:100px;
  37.     backgroundcolor:red;
  38.     position:absolute;
  39.     left:100px;
  40. }
  41. 下面情况：固定定位，对于浏览器窗口进行定位,box-fixed出现在浏览器右边,距顶部300px不随页面滚动移动，脱离标准流
  42. <div class="box-fixed"></div>
  43. .box-fixed {
  44.     width100px;
  45.     height:100px;
  46.     backgroundcolor:red;
  47.     position:fixed;
  48.     right:o;
  49.     top:300px;
  50. }
复制代码
JS

操纵节点

  1. <div id="d1">
  2.         我的id属性是d1
  3.     </div>
  4.     <div name="d2">
  5.         1我的name属性是d2
  6.     </div>
  7.     <div name="d2">
  8.         2我的name属性是d2
  9.     </div>
  10.     <div class="d3">
  11.         1我的class属性是d3
  12.     </div>
  13.     <div class="d3">
  14.         2我的class属性是d3
  15.     </div>
  16.     <p>
  17.         我是一个p标签
  18.     </p>
  19.     <ul id="ul">
  20.         空格、换行和其他文本都算节点
  21.         <li>ufirst</li>
  22.         <li>ucenter</li>
  23.         <li>ulast</li>
  24.         我是文本的最后节点
  25.     </ul>
  28. //通过标签的id属性查找对应节点
  29.     var d1 = document.getElementById("d1");
  30.     console.log(d1);
  31.     var d2 = document.getElementsByName('d2');
  32.     console.log(d2);
  33.     for (const element of d2) {
  34.         console.log(element);
  35.     }
  36.     // console.log(d2[0]);
  37.     // console.log(d2[1]);
  38.     //通过标签的class属性值找到对应节点的集合
  39.     var d3 = document.getElementsByClassName("d3");
  40.     for (const element of d3) {
  41.         console.log(element);
  42.     }
  43.     //通过标签名字获得对应节点集合
  44.     var p = document.getElementsByTagName("p");
  45.     for (const element of p) {
  46.         console.log(element);
  47.     }
  48.     var ul = document.getElementById("ul");
  49.     //这是获取第一个文本节点
  50.     console.log(ul.firstChild);
  51.     //这是获取第一个带标签的节点
  52.     console.log(ul.firstElementChild);
  53.     //这是获取最后一个文本节点
  54.     console.log(ul.lastChild);
  55.     //这是获取最后一个带标签的节点
  56.     console.log(ul.lastElementChild);
  58.     //给标签添加属性
  59.     document.getElementById("ul").setAttribute("class","ul");
  60.     document.getElementById("ul").setAttribute("style", "color:blue");
  62.     //获取标签的值,此处获得的是第一个li的值
  63.     var li = document.getElementsByTagName("li")[0].innerText="我被修改了";
  64.     //innerHTML,获取值同时渲染样式
  65.     var li = document.getElementsByTagName("li")[0].innerHTML = "<em>我被修改了</em>";
  66.     //添加节点信息
  67.     var node=document.createElement("li");
  68.     node.innerText="我是添加的节点信息";
  69.     //添加同级节点,需要父级节点
  70.     var li3 = document.getElementsByTagName("li")[2];
  71.     var ul1 = document.getElementById("ul");
  72.     //ul1.insertBefore(node,li3);
  73.     //在节点后面添加
  74.     //li3.insertAdjacentElement("afterend",node);
  75.     //追加到子节点末尾
  76.     //document.getElementsByTagName("li")[2].appendChild(node);
  77.     //删除节点，用父级节点删除
  78.     ul1.removeChild(li3);   
复制代码
变乱

点击变乱onclick()

  1. <body>
  2.     <div class="d1" onclick="divClick('张三',18)">
  3.         点我添加数据
  4.     </div>
  5. </body>
  6. <script>
  7.     function divClick(name,age){
  8.         alert(name+age);
  9.     }
  10. </script>
复制代码
聚焦变乱、失焦变乱

  1. <p>
  2.     <!-- 聚焦事件onfocus 失焦事件onblur-->
  3.     <input id="username" placeholder="请输入用户名：" onfocus="m1(this)" onblur="m2(this)"/><span></span>
  5.     function m1(that){
  6.         console.log("选中输入框");
  7.         that.nextSibling.innerText = "";
  8.     }
  9.     function m2(that) {
  10.             console.log("离开输入框");
  11.             if(that.value==""){
  12.                 that.nextSibling.innerText="用户名不能为空";
  13.             }
  14.     }
  15. </p>
复制代码
鼠标移入移失变乱

  1. .show {
  2.         display: block;
  3.     }
  4. .disshow {
  5.         display: none;
  6.     }
  8. <div id="d1" onmouseover="show1()" onmouseleave="disshow1()"></div>
  9. <div id="d2" class="disshow"></div>
  10. //鼠标移入让d2显示
  11. function show1(){
  12.         //document.getElementById("d2").setAttribute("style","display:block");
  13.         document.getElementById("d2").setAttribute("class", "show");
  14.     }
  15. //鼠标移出让d2消失
  16. function disshow1(){
  17.         //document.getElementById("d2").setAttribute("style", "display:none");
  18.         document.getElementById("d2").setAttribute("class", "disshow");
  19.     }
复制代码
定时任务

延长定时任务

  1. //延迟定时执行
  2.    let st=setTimeout(()=>{
  3.         alert("爆炸");
  4.    },3000);
  5. //删除定时任务
  6.   clearTimeout(st);  
复制代码
重复定时任务

  1. //重复定时任务
  2.    var si= setInterval(() => {
  3.         console.log("中午吃什么");
  4.     }, 2000);
  5. //删除重复定时任务
  6. clearInterval(si);
复制代码
判定哪个单选框被选中

  1.     狗狗：<input type="radio" name="book" onclick="choosebook()"/><br/>
  2.     雾霾：<input type="radio" name="book" onclick="choosebook()"/>
  3.     <img src=""/>
  5. //1.获取所有单选框对象
  6.        let radioList = document.getElementsByName("book");
  7.        //2.遍历集合 判断哪个单选框被选中
  8.        for (let index = 0; index < radioList.length; index++) {
  9.             if (radioList[index].checked) {
  10.                 if(index==0){
  11.                     document.getElementsByTagName("img")[0].setAttribute("src","phone/dog.jpg");
  12.                 }else{
  13.                     document.getElementsByTagName("img")[0].setAttribute("src", "phone/mai.jpg");
  14.                 }
  15.             }
  16.        }
复制代码
设置按钮失效

  1. <button id="start" onclick="start()">开始</button>
  3. //style="pointer-events: none;"设置按钮失效
  4. document.getElementById("start").setAttribute("style","pointer-events: none");
  5. //设置按钮失效,true失效false生效
  6. document.getElementById("start").disabled=true;
  7. //关闭按钮失效
  8. document.getElementById("start").disabled = false;
复制代码
冒泡和克制冒泡

  1. <div id="d1" onclick="d1()">
  2.      <!-- data-abc="今天中午吃什么" 绑定数据，把数据绑到标签上 -->
  3.     <div id="d2" data-abc="今天中午吃什么"></div>
  4. </div>
  6. function d1(){
  7.         alert("点击了d1");
  8.     }
  9. function d2(e) {
  10.         alert("点击了d2");
  11.     }
  12. // 监听事件获得事件对象e,通过监听d2来阻止事件冒泡以及取数据，click可以改变来监听不同事件
  13. //addEventListener("",,)接收三个参数，分别是事件、函数名，布尔值，如果不写最后一个参数默认false(事件冒泡，由内向外触发事件)，改为true是事件捕获(由外向内触发事件)，事件捕获比事件冒泡优先级高，同时出现先捕获后冒泡，相同的事件出现捕获由外层先执行后内层，冒泡先内层后外层(过山车理论)
  14. document.getElementById("d2").addEventListener("click",d2(e){
  15.     console.log(e);
  16. // 把数据从标签上取出
  17.     console.log(e.srcElement.dataset.abc);
  18. //阻止事件冒泡
  19. // e.stopPropagation();
  20.     })
复制代码
具体例子


  1. <style>
  2.     .yellow{
  3.         width: 300px;
  4.         height: 300px;
  5.         background-color: yellow;
  6.     }
  7.     .blue{
  8.         width: 200px;
  9.         height: 200px;
  10.         background-color: blue;
  11.         
  12.     }
  13.     .green{
  14.         width: 100px;
  15.         height: 100px;
  16.         background-color: green;
  17.     }
  18. </style>
  19. <body>
  20.     <div class="yellow" >
  21.         <div class="blue">
  22.             <div class="green"></div>
  23.         </div>
  24.     </div>
  25. </body>
  26. <body>
  27.     <div class="yellow" >
  28.         <div class="blue">
  29.             <div class="green"></div>
  30.         </div>
  31.     </div>
  32. </body>
  33. //点击黄色格子，打印黄色、绿色、蓝色
  34. <script>
  35.     let oyellow = document.getElementsByClassName("yellow")[0];
  36.     let oblue = document.getElementsByClassName("blue")[0];
  37.     let ogreen = document.getElementsByClassName("green")[0];
  38.     oyellow.addEventListener("click",()=>{
  39.         console.log("黄色");
  40.     },true)
  41.     oblue.addEventListener('click',(e)=>{
  42.         console.log("蓝色")
  43.     })
  44.     ogreen.addEventListener('click',() => {
  45.         console.log("绿色");
  46.         }, true)
  47. </script>
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！qidao123.com:ToB企服之家，中国第一个企服评测及软件市场,开放入驻,技术点评得现金

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表

涛声依旧在
+ 我要发帖

登录后关闭弹窗

登录参与点评抽奖  加入IT实名职场社区
去登录
快速回复 返回顶部 返回列表