豚鼠学习前端第三周0.0

最新推荐文章于 2024-10-11 19:03:40 发布
最新推荐文章于 2024-10-11 19:03:40 发布
阅读量123 收藏
点赞数
文章标签： 前端 学习 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiongyifeifei/article/details/127652279
版权

文章目录

一、第一部分

1.标签选择器

该部分主要介绍css各种选择器及其注意事项与用法。
**1.标签选择器（）tag选择器：**如div{}对应div标签
使用场景：1.去掉某些标签的默认样式时
　　　　　2.复杂的选择器中，如层次选择.
**2.群组选择器（）分组选择器：**可以通过逗号的方式，给多个不同的选择器添加统一的css样式，来达到代码的复用。
3.通配选择器： *{} -> div，ul，li…{}
注：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用.
使用场景：去掉所有标签的默认样式时

  • 实操效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <style>
     div ,#div1,.div3{background-color: aquamarine;}
     </style>
</head>
<body>
    <div>鼠鼠</div>
    <div id="div1">叔叔</div>
    <div class="div3">数数</div>

</body>
</html>
2.层次选择器

该部分主要介绍层次选择器的使用方法及其内涵.
1.选择器类别： 后代 m n {}
　　　　　　　父子 m > n {}
　　　　　　　兄弟 m ~ n {} 当前m下面的所有兄弟n标签
　　　　　　　相邻 m + n {} 当前m下面相邻的n标签

  • 后代即是同一大标签内的所有标签，父子是只有下一个有，兄弟是下面所有有，相邻就是相邻的对应标签
  • 实操效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
   #div1 h1{text-decoration:underline;}
   #ol1 > li{font-weight: 700;}
   #ul1 ~ li{border:1px red solid; }
   #div2 + p{background-color: brown;}
    </style>
</head>
<body>
    <div id="div1">
        <h1>本周的特别主题是“猫兄酱紫长？”</h1>
        <h2>猫猫也很可爱</h2>
    </div>
    <ol id="ol1">
        <li>猫儿子
            <ol>
                <li>猫孙子</li>
            </ol>
        </li>
    </ol>
    <ul id="ul1">
        <li>0.0.有id的猫</li>
    </ul>
    <ul>
        <li>没有id的猫</li>
    </ul>
    <div>
        <p>被div岔开的喵喵</p>
    </div>
    <div id="div2">
        <p>内部的喵喵</p>
    </div>
     <p>相邻的喵喵</p>
</body>
</html>
3.属性选择器

该部分主要说明属性选择器的用法.
1.属性选择器的用法：
m[] {}
=：完全匹配
*=：部分匹配
^ =: 起始匹配
$ =: 结束匹配

  • 实操效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div[id*=div1]{background: red;}
    </style>
</head>
<body>
    <div id="div1">喵</div>![请添加图片描述](https://img-blog.csdnimg.cn/ce1c1c2b4e8f408aba92f5e4e8038ee7.png)

    <div id="div1-div2">喵喵</div>
    <div id="div3-div1">喵喵喵</div>
    <div id="div4-div1">喵喵喵喵</div>
    <div id="div5-div1">喵喵喵喵喵</div>
</body>
</html>

请添加图片描述

  • 不能重复使用div{}
4.after，hover等伪类选择器

该部分主要讲after伪类的使用方法及其作用
1.伪类选择器： css伪类用于向某些元素添加特殊的效果，一般用于初始样式添加不上的时候，用来伪类来添加
2.css伪类：
m：伪类{}
：link 访问前的样式 （只能添加给a标签）
：visited 访问后的样式 （只能添加给a标签）
： hover 鼠标移入时的样式 （可以添加给所有的标签）
： active 鼠标按下时的样式 （可以添加给所有标签）
： after，before
：checked，disabled
：focus

  • 如果四个伪类都生效，一定要按l v h a 的顺序添加
  • 一般网站只这样去设置： a{} a：hover{}
  • :after,before 通过伪类浮的方式给元素添加一段文本内容，使用content属性
  • ：checked，disabled，focus 都是针对表单元素的
  • 实操效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1:after{content:"喵尾";background:red;}
       :disabled {width:100px;height:100px;}
       </style>
</head>

<body>
    <div id="div1">喵头</div>
    <div>喵头</div>
 <input type="checkbox" disabled>
 </body>
</html>

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{color: brown;}
        a:hover{color: aqua;}
    </style>
</head>
<body>
    <a href="">流体喵</a>
</body>
</html>
  • shift+ ctrl+ delt 清楚浏览器缓存
5.结构伪类选择器

该部分主要讲解伪类结构选择器的作用
1.选择器种类：
nth-of-type（） nth-child（）
角标从1开始，1表示第一项，以此类推，无线大
first-of-type，last-of-type，only-of-type
child去掉of与type相同
2.type与child的区别：
type：种类，child：孩纸
child修饰的是同阶级的第二个

  • 实验中发现only作用于被包含元素中，且在同级中能重复出现，其它属性类似。
  • 实操效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div:only-of-type{background-color: blue;}
    </style>
</head>
<body>
     <ul>
        <li></li>
        <li></li>
        <div>喵？</div>
        <li></li>
     </ul>
     <ul>
        <li></li>
        <li></li>
        <div>喵？</div>
        <li></li>
        <li></li>
     </ul>
     <ul></ul>
     <div>喵喵？</div>
     <ul></ul>
</body>
</html>

请添加图片描述

6.css样式继承

该部分主要讲解css样式继承的条件与用法
1.继承语言： {属性：inherit}

  • 实操效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{ width: 60px;height: 60px; border: 2px red solid;} 
        p{border:inherit;}
    </style>
</head>
<body>
    <div>
        <p>喵~~~~~~~~~~~~~~~~~~~~ao</p>
    </div>
</body>
</html>

请添加图片描述

7.集，单一样式的优先级

该部分主要讲解css优先级顺序.
**相同样式优先级：**设置相同样式后，后面的优先级较高，但不建议出现相同样式的情况.
2.内部样式与外部样式： 内部样式与外部样式优先级相同，同样是后写的优先级更高。

  • style>id>class>tag>*>继承
  • 实操效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{color: rgb(221, 0, 255);}
        *{color: red;}
        .div1{color: black;}
        div:{background:inherit;}
    </style>
</head>
<body>
    <div id="div1" class="div1" style="color:rgb(0, 255, 89)">0.0</div>
</body>
</html>

请添加图片描述

8.!important群组等优先级

该部分主要说明!important群组的优先级顺序
**1.!important:**提升样式优先级，不规范，不建议。
**2.标签+类与单类：**标签+类>单类
**3.群组优先级：**群组选择器与单一选择器的优先级相同，后写优先级更高.

  • 实操效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    div.p1{color: red;}
    div{color:green}
    h1{color: red;}
    h1,h2{color: blue;}
    #name{color: green;}
    h3{color: rebeccapurple!important;}
</style>
</head>
<body>
    <div class="p1">
        <p>o(=•ェ•=)m</p>
    </div>
    <h1>
        <h2>o(=•ェ•=)m</h2>
    </h1>
    <h3 id="name">o(=•ェ•=)m</h3>
</body>
</html>

请添加图片描述

9.层次的优先级

该部分主要讲解层次的优先级比较
1.权重比较：
ul li .box p input{} 1+1+1+10+1+1
.hello span #elem{} 10+1+100
2.约分比较：
ul li .box p input{}
.hello span #elem{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
         ul,.box{color: red;}
     ul,#name{color: green;}
     
    </style>
</head>
<body>
    <div >
        <ul id="name"class="box">
            <li>0.0</li>
        </ul>
    </div>
</body>
</html>

一、第二部分

1.css盒子模型

该部分主要讲解css盒子模型的概念及其用法
1.组成： content（物品）——paading（填充物）——border（包装盒）——margin(盒子之间的间距)
content：width与height组成
padding：内边距（内填充）
padding-（left，right，top，bottom）margin也一样
2.效果：
1.背景色填充到margin以内的区域（不包括margin）
2.文字在content区域添加.
3.padding不能为负数，而margin可以为负数.

  • 实操效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{ width:900px;height:900px;
            background-color: red;padding: 30px;margin: -60px;}
            #div2{width: 900px;height:900px;background-color:blue;}
            
    </style>
</head>
<body>
    <div id="div1">(￣(工)￣)</div>
    <div id="div2">(￣(工)￣)</div>
</body>
</html>

请添加图片描述

2.box-sizing改变盒模型

该部分主要介绍部分改变盒子模型的方式
**1.盒模型默认：**盒尺寸，可以改变盒子模型的展示形态。
默认值： content-box：width，height——cnotent
border-box:width,height——content padding border
2.使用场景：
1.不再去计算一些值
2.解决一些100%的问题
2.box-sizing： box-sizing属性允许以特定的方式匹配某个区域的特定元素，取值为content-box border-box

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{width: 100px; height: 100px;background-color: aqua;padding: 10px ;margin: 10px;
        box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div>好困0.0</div>
</body>
</html>

请添加图片描述

3.盒模型之margin叠加问题

该部分主要介绍叠加问题的解决方法
1.问题： 当给两个盒子同时添加上下外边距的时候，就会出现叠加问题，这个问题只在上下有，左右是没有这个叠加问题的.
2 解决方案： bfc规范 只给一个元素添加间距

  • 实操效果
!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
    #div1{width: 100px;height:100px;background-color: red;margin:80px}
    #div2{width: 100px;height:100px;background-color: aqua;margin: 40px;}
   </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

请添加图片描述

4.盒模型之margin传递问题

该部分主要解决margin传递时的一些问题
1.问题： magin传递问题只会出现在嵌套结构中，且只有margin-top会有传递的问题，其它三个方向是没有传递问题的.
2.解决方案： bfc规范，给父容器加边框，margin换成padding

  • 实操效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #span1{background-color: red;margin:100px;}
        #span3{background-color: green;margin:100px;}
        #div1{width: 200px;height: 100px;background-color: red;padding-top: 100px;}
        #div2{width: 100px;height: 100px;background-color: aquamarine;}
    </style>
</head>
<body>
    <div>喵喵<span id="span1">喵喵喵喵喵</span>喵喵</div>
    <div>喵喵<span id="span3">喵喵喵喵喵</span>喵喵</div>
    <div id="div1">
        <div id="div2"></div>
    </div>
    
</body>
</html>

请添加图片描述

  • span标签上下不起效果
5.css盒模型之拓展

该部分主要讲的是css的拓展知识
1.拓展： margin左右自适应是可以的，但是上下自适应是不行的（现在不行）
width，height不设置的时候，对盒子模型的影响，会自动去计算容器的大小
，节省代码.

  • 实操效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #span1{background-color: red;margin:100px;}
        #span3{background-color: green;margin:100px;}
        #div1{width: 200px;height: 100px;background-color: red;padding-top: 100px;}
        #div2{width: 100px;height: 100px;background-color: aquamarine;}
    </style>![请添加图片描述](https://img-blog.csdnimg.cn/efc98a1a6b104f5ab6ed92a6b1fc65fd.png)

</head>
<body>
    <div>喵喵<span id="span1">喵喵喵喵喵</span>喵喵</div>
    <div>喵喵<span id="span3">喵喵喵喵喵</span>喵喵</div>
    <div id="div1">
        <div id="div2"></div>
    </div>
    
</body>
</html>

请添加图片描述

6.盒子模型的嵌套练习

该部分主要是实验

  • 实际效果
    请添加图片描述

请添加图片描述

一、第三部分

1.按类型，内容，显示划分标签

该部分主要介绍标签类型，了解大概即可
请添加图片描述

2.display显示框类型

该部分主要介绍显示框的分类
1.类型： display：block inline inline-block none …
2.区别： display：none不占隐藏的隐藏
　　　　visibility：hidden 占空间的隐藏

  • block不内联 inline内联 inline-block并列 none隐藏
  • 实操效果
Document
喵喵
喵喵
喵喵喵喵喵 喵喵喵喵喵
3. 嵌套标签规范

该部分主要介绍标签嵌套规范注意事项
请添加图片描述
请添加图片描述

  • 总之
    请添加图片描述
4.overflow溢出隐藏

该部分主要介绍overflow标签
标签： overflow：visible（默认），hidden，scroll，auto，（x，y轴）

  • 实操效果
！<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{width: 100px;height: 100px;overflow:scroll
            ;border-color: black;}
    </style>
</head>
<body>
    <div>喵喵喵喵喵喵喵喵
        喵喵喵喵喵喵喵喵
        喵喵喵喵喵喵喵喵
        喵喵喵喵喵喵喵喵
        喵喵喵喵喵喵喵喵
        喵喵喵喵喵喵喵喵

       </div>
</body>
</html>

请添加图片描述

5.透明度与手势

该部分主要介绍如何调节透明度与手势
1.调节不透明度： opacity：0（透明）~1（不透明）
注：占空间，所有的子内容也会透明
rgba（）：0~1
注：可以让指定的样式透明，而不影响其它样式
2.手势： cursor：手 default：默认箭头
自定义手势： 图片： .cur ，.ico cursor ：url（#），auto；

  • 实操效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{width: 100px;height: 100px;background-color: aqua;opacity: 0.5;}
        #div2{width: 100px;height: 100px;background: rgba(255, 0,0 ,1);cursor: alias;}
    </style>
</head>
<body>
    <div id="div1">mao</div>
    <div id="div2">mao</div>
</body>
</html>

请添加图片描述

6.最大最小宽高

该部分主要用来强化百分比理解
1.代码： min-width，height max-width，height

  • 没什么用不如直接加宽高
  • 实操效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{max-width: 200px;min-height: 200px;border:1px red solid;}
    </style>
</head>
<body>
    <div>喵喵喵喵喵
      喵喵喵喵喵
      喵喵喵喵喵
      喵喵喵喵喵
      喵喵喵喵喵
      喵喵喵喵喵
    </div>
</body>
</html>

请添加图片描述

7.css默认样式

该部分主要介绍css的一些默认样式
请添加图片描述

8.css重置样式

该部分主要介绍如何重置css的默认样式
1.重置方法： *{margin：0； padding：0；}
　　　　　　ul{list-style:none}
　　　　　　a{text-decoration:none; color:#666;}
　　　　　　img{display:block}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{list-style: none;}
        div{ border: 1px red solid;}
    </style>
</head>
<body>
    <div><img src="./图片/4960A5E8EC6E8131A4F29A750A8AA52D.jpg" alt=""></div>
</body>
</html>

请添加图片描述

9.float浮动概念及其原理

该部分主要介绍浮动效果

  • 大块要在下面
  • 请添加图片描述
  • 脱离文档流，延迟父容器靠左或靠右进行排列
  • left right none
!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{border: 1px black solid;}
        #div1{width: 50px;height: 50px;background: green;float: left;}
        #div2{width: 100px;height: 100px;background: red;float: left;}
        #div3{width: 200px;height: 200px;background:blue
        ;}
      
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>
</html>

请添加图片描述

10. float注意点

该部分主要介绍使用浮动时的一些注意事项
请添加图片描述

11.清除float浮动

该部分主要介绍如何清除浮动
请添加图片描述

  • 实操效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{width: 50px;height: 50px;background: red;float: right;}
        #div2{width: 100px;height: 100px;background: black;clear: right;}
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>

请添加图片描述

12.float制作页面小结构
  • 实操效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        ul{list-style: none;}
        img{display: block;}
        a{text-decoration: none; color: #666;}
        h1,h2,h3{font-size: 16px;}
        .l{ float: left;}
        .r{ float: right;}
        .clear:after{ content:"";display: block;clear: both;}
        #main{width: 400px;margin: 30px auto;}
        #main .h22{font-size:10px ;height: 25px;line-height:25px ;font: 700;padding-left: 30px;background: url(../素材图片/背景色.webp)repeat-x;}
        #mian ul{overflow: hidden; margin-top: 9px;}
        #main li{margin-bottom: 5px;}
        #main .div1{border: 1px grey solid;width: 100px;height: 100px;padding-left: 20px;}
        #mian .div1 img{margin: 2px;}
        #main .div2{width:200px;margin-left: 13px;}
        #main .div2 h2{line-height: 30px;}
        #main .div2 p{line-height:30px ;}

    </style>
</head>
<body>
    <div id="main">
        <h2 class="h22">面狼和猫</h2>
        <ul>
            <li class="clear">
                <div class="l div1">
                    <a href="">
                        <img src="../素材图片/面狼.jpg" alt=""width="100px" height="100px"></a>
                </div>
                <div class="l div2">
                    <h2>眠狼的画与猫</h2>
                    <p>眠狼的画6666666666666666666666666 <a href="#">[详细]</a>
                    </p>
                </div>
            </li>
            <li class="clear">
                <div class="l div1">
                    <a href="">
                        <img src="../素材图片/面狼2.jpg" alt=""width="100px" height="100px">
                    </a>
                </div>
                <div class="l div2">
                    <h2>眠狼的画与猫</h2>
                    <p>眠狼的画6666666666666666666666666<a href="#">[详细]</a>
                    </p>
                </div>
              
            </li>
            <li class="clear">
                <div class="l div1">
                    <a href="">
                        <img src="../素材图片/面狼3.jpg" alt=""width="100px" height="100px">
                    </a>
                </div>
                <div class="l div2" >
                    <h2>眠狼的画与猫</h2>
                    <p>面狼的画66666666666666666666666666666<a href="#">[详细]</a>
                    </p>
                </div>
            </li>
        </ul>
    </div>
</body>
</html>

请添加图片描述

  • 好肝啊0.0
落兰殇
关注
【CSDN｜每日一练】豚鼠排名榜
海到无边天作岸 山登绝顶我为峰
10-03 1276
Hello！ଘ(੭ˊᵕˋ)੭昵称：海轰标签：程序猿｜C++选手｜学生简介：因C语言结识编程，随后转入计算机专业，获得过国家奖学金，有幸在竞赛中拿过一些国奖、省奖…已保研学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！唯有努力💪本文仅记录自己感兴趣的内容文章仅作为个人学习笔记记录，记录从0到1的一个过程希望对您有一点点帮助，如有错误欢迎小伙伴指正。
豚鼠学习HTML前端第一周
xiongyifeifei的博客
10-19 1064
什么是html和css主要内容是让我们对html与css,如何去写代码，写到哪里做一个简单了解。什么是HTML？：HTML，即超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。HTML 不是一种编程语言，而是一种标记语言 (markup language)，是网页制作所必备的。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
豚鼠努力学习前端第二周
xiongyifeifei的博客
10-25 433
css语法
豚鼠学习html第五周
xiongyifeifei的博客
11-22 189
figcaption — figure元素的标题，通常放置在figure的第一个或最后一个子元素的位置，包含在figure标签内。section — 文档的章节、页眉、页脚或者文档中的其他部分。figure — 独立的流内容，如图像、图表、照片和代码等。aside — 页面主区域内容之外的其他内容，通常是侧边栏之类的，不过其包含的内容会与主区域内容相关。-在其中输入代码不会显示，利用md语法可以显示，语法和和csdn的md编辑器语法一样。article — 定义独立的内容。span表示截取个数。
豚鼠学习html第四周
xiongyifeifei的博客
11-18 165
祖先元素拥有relative position fixed其中一种即可以使其偏移。-right：100px与 -100px是等价的。-单加sticky 没有意义，设置位置才有意义。-固定广告，返回顶部，弹窗什么的。-font-size使其等于0。-相对于素自身进行偏移。
豚鼠学习js第三周
xiongyifeifei的博客
12-07 83
输入100 1000 500 switch（条件表达式） case 表达式 后接break；结束判断执行时会一次将case后的表达式的值和switch后的条件表达式的值进行全等比较，比较结果为true则执行此处代码，如果结果为假则继续比较break用来退出语句实操效果 在for循环中，为我们提供了专门的位置来放三个表达式 for（初始化表达式；条件表达式；更新表达式） if语句不能用break，但可以对for起作用 break会立即终止离他最近的那个循环语句 可以为循环语句创建一个
豚鼠学JS第一周
xiongyifeifei的博客
11-27 202
（1）与c语言非常相似，接触js后更能清楚的感受到c语言的重要性以及其普遍性.从广义上来说ES可以等同于JS（2）目前JS的发展状况。
Web前端HTML+CSS全套（1~20）
qq_72482505的博客
10-20 2231
HTML笔记（1~20）
R语言学习笔记_20240702_01
weixin_42384601的博客
07-02 916
datasets 包含了多种的数据集，是base R 自带的数据集，这些数据集通常可用于教学、演示或测试R语言的统计分析等。
豚鼠检测数据集-含1539张高质量真实豚鼠图片-已进行YOLO格式标注+整理训练测试集-可用于深度学习目标检测算法训练.zip
04-18
豚鼠检测数据集_含1539张高质量真实豚鼠图片_已进行YOLO格式标注+整理训练测试集_可用于深度学习目标检测算法训练
豚鼠手工标记图像数据集 JPG YOLOv8 格式（1551 张图像）
03-29
训练集是模型学习的基础，包含了大量带有标签的豚鼠图像，模型会通过这些图像学习如何识别豚鼠。验证集则用于在训练过程中评估模型的性能，防止过拟合，确保模型在未见过的数据上也能有效工作。测试集则在模型训练...
豚鼠特工队观后感.docx
10-14
动物间谍的概念，如会操作电脑的豚鼠、驾驶高科技车辆的仓鼠，反映了科技在现实世界中的应用和发展趋势，比如人工智能和机器学习在当今社会中的广泛应用。同时，这也引发了关于人与动物关系的思考，以及科技是否应该...
squeakrecognition:豚鼠的语音识别
06-06
3. **机器学习模型**： 要训练模型识别豚鼠的叫声，需要一个有标记的数据集，即每段音频都被标记为“豚鼠吱吱声”或非此类声音。常见的机器学习算法，如支持向量机（SVM）、神经网络，或者现代的深度学习框架，如...
【Vue】a-radio-group单选框数字与字符串回显问题
叶为正的博客
10-08 237
根据后端接口返回数字或字符串，来配置Ant Design of Vue中a-radio-group单选框的回显问题，注意value中的取值是不一样的。
【笔记】Day2.3.1DTO对象
最新发布
2301_81538937的博客
10-11 115
当前端传来的数据中包含后端数据库没有的字段时，DTO 可以对这些数据进行转换和映射，以确保后端可以正常接收并处理这些数据。就传到（经过）DTO DTO对前端数据进行转换，使得后端数据库得以正常接收前端传回的数据。当前端传回的数据中含有后端数据库没有的字段时。DTO是一个联系前端数据和后端数据库的桥梁。一个默认前提：前端传回数据到数据库。存着后端数据库中没有的实体字段。
前端的全栈混合之路Meteor篇（四）：支持自定义对象序列化的EJSON介绍
分享有趣的、贴近生活的CS知识
10-07 903
在Meteor框架中，EJSON（Extended JSON）是一个扩展了标准JSON的库，旨在支持更多的数据类型。标准JSON仅支持字符串、数字、布尔值、数组和对象等基本数据类型，而EJSON允许开发者在Meteor应用中传输更复杂的数据类型，例如DateBinary数据，甚至是自定义对象，这使得Meteor在客户端和服务器之间传递复杂数据变得更加便捷和高效。
昆虫分类与检测系统源码分享[一条龙教学YOLOV8标注好的数据集一键训练_70+全套改进创新点发刊_Web前端展示]
qunshankeji的博客
10-08 1345
数据集信息展示在昆虫分类与检测的研究领域，数据集的构建与应用至关重要。本项目采用的数据集名为“Bug Gan”，其设计旨在为改进YOLOv8模型提供丰富的训练素材，以实现更高效的昆虫识别与分类。该数据集包含29个不同的昆虫类别，涵盖了广泛的生物多样性，能够有效支持深度学习模型在复杂环境中的学习与推理。
基于Java(Jsp+Sevlet）+MySql 实现的（Web）成绩管理系统
神仙别闹的自留地
10-08 1633
如果能把负责学生成绩管理的模块独立出来形成一个独立的系统，便可以有效降低教务系统的数据量，不仅可以方便管理员对于所有学生的信息进行系统的管理，而且便于教师对学生成绩进行查询和修改，学生也可以查询自己的成绩。因此，开发一套合适的、兼容性好的系统是很有必要的。：DAO层主要是做数据持久层的工作，负责与数据库进行联络的一些任务都封装在此，DAO层的设计首先是设计DAO的接口，然后定义此接口的实现类，然后就可在模块中调用此接口来进行数据业务的处理，而不用关心此接口的具体实现类是哪个类，显得结构非常清晰。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值