Web前端学习笔记（3）

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

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

四十六、标签群组通配等选择器

标签选择器（TAG选择器）div <div></div>
1.去掉某些标签默认样式
2、复杂的选择器，如：层次选择器
群组选择器（分组选择器）
通过逗号的方式，给多个不同的选择器添加统一的css样式，达到代码复用
通配选择器*{}
*{}->div,ul,li,p,h1,h2…{}
注：慎用，是给所有标签加上样式

<style>
      /* div,#text,.title{background-color:green } */
      *{border:1px  red solid;}
    </style>
</head>
<body>
   <div>啦啦啦</div>
   <p  id="text">啊哈哈哈</p>
   <h2  class="title">噢噢噢噢</h2>

四十七、层次选择器

47.1后代 M N

<style>
      #list li{border:1px  red solid;}
    </style>
</head>
<body>
   <ul  id="list">
      <li>
         <ul>
            <li></li>
            <li></li>
            <li></li>
         </ul>
      </li>
      <li></li>
      <li></li>
   </ul>
   <ol>
      <li></li>
      <li></li>
      <li></li>
   </ol>

在这里插入图片描述

47.2父子M>N

<style>
      #list> li{border:1px  red solid;}
    </style>
</head>
<body>
   <ul  id="list">
      <li>
         <ul>
            <li></li>
            <li></li>
            <li></li>
         </ul>
      </li>
      <li></li>
      <li></li>
   </ul>
   <ol>
      <li></li>
      <li></li>
      <li></li>
   </ol>

在这里插入图片描述

47.3兄弟M~N

当前M下面所有N标签

<style>
      div~h2{background:red}
    </style>
</head>
<body>
   <div>这是一个标签</div>
   <h1>这是一个标题</h1>
   <p>只是啦啦啦</p>

在这里插入图片描述

47.4相邻M+N

当前M下面的相邻的N标签且M自身不会被选中

 <style>
      div+h1{background:red}
    </style>
</head>
<body>
   <h1>这是一个标题</h1>
   <div>这是一个标签</div>
   <h1>这是一个标题</h1>
   <p>只是啦啦啦</p>
   <h1>这是一个标题</h1>

在这里插入图片描述

四十八、属性选择器

M[attr]{}
=：完全匹配
*=：部分匹配
^=：起始匹配
$=:结束匹配
[][][]：组合匹配

 <style>
      div[class][id]{background:red}
    </style>
</head>
<body>
   <div>啊啊</div>
   <div  class="box"  id="elem">bbbb</div>
   <div  class="search">cccc</div>
   <div  class="search-buttom">dddd</div>

四十九、hover等伪类选择器

M：伪类{}
：link 访问前的样式（只能添加给a标签）
：visited 访问后的样式（只能添加给a标签）
：hover 鼠标移入时的样式（可以添加给所有的标签）
：active 鼠标按下时的样式（可以添加给所有的标签）

 div{width:200px;height:200px;background:red }
      div:hover{background:blue;}
      div:active{background:green;}

<style>
      a:link{color:red}
      a:visited{color:blue }
      a:hover{color:yellow}
      a:active{color:grey}
    </style>
</head>
<body>
   <a href="#">这是一个标签</a>

在这里插入图片描述

Chrome缓存清除shift+ctrl+delete
注：一般的网站只设置a{} (link visited action)a:hover{}

五十、after等伪类选择器

用伪类的方式给元素添加一段文本内容:after :befor
使用content属性，给单独的字加上样式

<style>
      div:after{content:"world";color:red }
    </style>
</head>
<body>
   <div>hello</div>


：checked、:disabled、:foucs（获取光标）都是针对表单元素

 <style>
     /* :checked{width:100px;height:100px;} */
     :disabled{width:100px;height: 100px;} *
     :focus{background:red}
    </style>
</head>
<body>
   <input type="checkbox">
   <input type="checkbox"  checked>
   <input type="checkbox"  disabled>
   <input type="text">

在这里插入图片描述

五十一、结构伪类选择器

type是类型，child是孩子
在这里插入图片描述

<style>
     /* li:nth-of-type(2n+1){background:red ;} */
     /* li:nth-of-type(2n){background:blue } */
     /* li:first-of-type{background:red} */
     /* li:last-of-type{background:blue } */
     /* li:only-of-type{background:red } */
     /* li:nth-child(3){background:red } */
     div:only-of-type{background:red }
    </style>
</head>
<body>
  <ul>
   <li></li>
   <div>啊啊啊啊</div>
   <li></li>
   <li></li>
   <li></li>
  </ul>

在这里插入图片描述

五十二、css样式的继承

文字相关的样式可以继承（行高，颜色，大小）
布局相关样式不能被继承（width、height、border）
默认是不能继承的，但是可以设置inherit值

<style>
     div{width:300px;height:300px;
      border:1px red solid ;
       color:red;font-size: 30px;}
       /* 设置文字属性  */
      p{border:inherit;}
    </style>
</head>
<body>
  <p>这是一个段落</p>

在这里插入图片描述

五十三、集、单一样式的优先级

1、同时设置同样或同等级，后写进的优先级高
2、单一样式优先级
style行间>id>class>tag（标签：div）>*(通配）>继承
3、注：
style行间 权重1000
id 权重100
class 权重10
tag 权重1

<style>
      /* #elem{color:red} */
      /* .box{color: blue } */
      /* div{color:red } */
      /* *{color:blue } */
      body{color:blue }
    </style>
</head>
<body>
   <div  id="elem"  class="box">这是一个块</div>

五十四、important群组等优先级

1、！important

提升样式优先级，非规范方法，不建议使用
（不能针对继承属性进行优先级提升）
2、标签+类>单类

div.box{color:blue;}（先）
.box{color:red;}

3、群组

div{color:blue}
div,p{color:red;}(先）

群组选择器与单一选择器的优先级相同，靠后写的优先级高

五十五、层次的优先级

1、权重比较

ul、li、box、p、input{}  1+1+10+1+1
.hello、span、#elem{}  10+1+100

注：100个ul不比1个class更优先
2、约分比较

ul、li、.box、p、input{}
.hello、span、#elem{}

五十六、css的盒子模型

content(物品）->padding(填充物）->border(包装盒）
->margin(盒子与盒子之间的间距）
在这里插入图片描述

content:内容区域 width和height组成的
padding:内边距（内填充）
只写一个值：30px(上下左右）
写俩个值 ：30px 40px（上下、左右）
写四个值：30px 40px 50px 60px(上、右、下、左）
单一样式只能写一个值：
padding-left
padding-right
padding-top
padding-bottom

margin：外边距（外填充）
只写一个值：30px(上下左右）
写俩个值 ：30px 40px（上下、左右）
写四个值：30px 40px 50px 60px(上、右、下、左）
单一样式只能写一个值：
margin-left
margin-right
margin-top
margin-bottom

注：1、背景色填充到margin以内的区域（不包括margin区域）
2、文字在content区域添加
3、padding不能为负数，但margin可以为负数

<style>
      #box{
         width:200px;height:200px;background:red ;
         border:10px  blue solid;
         padding:30px  50px;
         margin:-10px;
      }
      #box2{
         width:200px;height:200px;background:black ;
         color:white
      }
   </style>
</head>
<body>
   <div  id="box">这是一个盒子</div>
   <div  id="box2">又是一个盒子</div>

在这里插入图片描述

五十七、box-sizing改变盒模型

57.1border-box

盒尺寸：改变盒子模型的展现形态
默认值：content-box:width、height->content
border-box:width、height->content padding border
使用场景：
1、不用再去计算一些值
2、解决一些100%问题

<style>
      #box{
         width:200px;height:200px;background:red ;
         border:10px  blue solid;
         padding:30px  50px;
      }
      input{
         width:100%;padding:30px;
         box-sizing:border-box;
      }
   </style>
</head>
<body>
   <div  id="box">这是一个盒子</div>
  <input type="text">

在这里插入图片描述

五十八、盒模型之margin叠加问题

1、BFC规范
2、只设置一个最大的

<style>
      #box{
         width:200px;height:200px;background:red ;
         border:10px  blue solid;
         margin-bottom:0px;
      }
      #box2{
         width:200px;height:200px;background:red ;
         border:10px  blue solid;
         margin-top:70px;
      }
      </style>
</head>
<body>
   <div  id="box"></div>
   <div  id="box"></div>

五十九、盒模型之margin传递模型

59.1margin传递问题

margin传递问题只出现在嵌套结构中，
只有margin-top有传递问题
解决方案
1、BFC规范
2、给父容器加边框
3、margin换成padding

<style>
      #box1{
         width:200px;height:100px;background:red ;
         padding-top:100px;
      }
      #box2{
         width:100px;height:100px;background:blue  ;
         
      }
      </style>
</head>
<body>
   <div id="box1">
      <div  id="box2"></div>
   </div>

在这里插入图片描述

六十、css盒子模型之扩展

60.1margin自适应居中

左右自适应

<style>
#box1{width:300px;height:300px;background:red;} 
      #box2{width:100%;height:100px;background:blue;
      color:white;
      padding-left:30px;
      border-left:10px black solid}
 </style>
</head>
<body>
   <div  id="box1">
      <div  id="box2">啦啦啦啦</div>
   </div>

在这里插入图片描述

60.2不设置content的现象

自动会计算

#box1{width:300px;height:300px;background:red;} 
      #box2{height:100px;background:blue;
      color:white;
      padding-left:30px;
      border-left:10px black solid
      }
      </style>
</head>
<body>
   <div  id="box1">
      <div  id="box2">啦啦啦啦</div>
   </div>

在这里插入图片描述

六十一、盒子模型之嵌套练习

<style>
      #box1{width:350px;height:350px;
         border:1px black  dashed;
         padding:27px;} 
      #box2{border:5px #d7effe  solid;padding:20px;}
      #box3{background: #ffa0df;padding:41px;}
      #box4{border:1px  white  dashed;padding:3px;}
      #box5{border:1px  white dashed;padding:49px;}
      #box6{width:100px;height:100px;
         background:#96ff38 ;
         border:#fcff00 5px  solid;}
      </style>
</head>
<body>
   <div  id="box1">
      <div  id="box2">
         <div  id="box3">
            <div  id="box4">
               <div  id="box5">
                  <div  id="box6"></div>
               </div>
            </div>
         </div>
      </div>
   </div>

在这里插入图片描述

六十二、按类型划分标签

62.1block(块)

:div、p、ul、li、h1…
1、独占一行
2、支持所有样式
3、不写宽时，跟父元素的宽相同
4、所占区域是一个矩形

<style>
      #box1,#box2{/*width:100px;*/ height:100px;
      background:red;}
    </style>
</head>
<body>
  <div id="box1">块1</div>
  <div id="box2">块2</div>

62.2inline（内联)

:span、a、em、strong、img…
1、挨在一起的
2、有些样式不支持，例如：width,height,margin,padding
3、不写宽时，宽度由内容决定
4、不一定是个矩形
注：布局一般用块标签，修饰一般用

 <style>
      body{font-size: 0;}
     #content1,#content2{width:100px;height:100px;
   background:red ;
  font-size:16px}
    </style>
</head>
<body>
  <span id="content1">内联1内联1内联1内联1内联1内联1</span>
  <span id="content2">内联2</span>

在这里插入图片描述

62.3inline-block(块内联)

1、挨在一起，支持宽高
:input、select…

<style>
      /* body{font-size: 0;} */
     #content1,#content2{width:100px;height:100px;
   background:red ;
  font-size:16px}
  input{width:100px;height:100px;}
    </style>
</head>
<body>
  <span id="content1">内联1内联1内联1内联1内联1内联1</span>
  <span id="content2">内联2</span>
  <input type="text">
  <input type="text">

在这里插入图片描述

六十三、按内容划分标签

流内容：Flow
元数据：Metadata
分区：Sectioning
标题：Heading
嵌入的：Embedded
互动的：Interative在这里插入图片描述

六十四、按显示划分标签

替换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容
input、img(可设置宽高）
非替换元素：将内容直接告诉浏览器，将其显示出来
div、h1、p…

六十五、display显示框类型

display:block、inline、inline-block、none…
display不占内存
visibility:hidden占空间

<style>
      /* div{width:100px;height:100px;background:red; 
        display:inline-block;}
      span{width:100px;height:100px;background:red;
        display:inline-block;}
       input{display:none }*/
       #box2{width:100px;height:100px;background:red;}
       /* #box1{width:100px;height:100px;background:red;
       visibility: hidden;} */
       #box1{width:100px;height:100px;background:red;
        display:none;}

    </style>
</head>
<body>
  <!-- <div>块1</div> -->
  <!-- <div>块2</div> -->
  <!-- <span>内联1</span> -->
  <!-- <span>内联2</span> -->
  <!-- <input type="text"> -->
  <div  id="box1">块1</div>
  <div  id="box2">块2</div>

在这里插入图片描述
在这里插入图片描述

六十六、标签嵌套规范

ul、li
dl、dt、dd、
table、tr、td、
块能嵌套内联

<div>
    <span></span>
    <a href=""></a>
  </div>
  块嵌套块           
  <div>
    <div></div>
  </div>
  错误写法：在<p>标签内添加
  内联不能嵌套块
  特殊：<a href="">
    <div></div>
  </a>

六十七、overflow溢出隐藏

visible:默认
hidden
scroll
auto
x轴、y轴

<style>
    /* div{width:300px;height:300px; 
      border:1px black solid;overflow:hidden}
    div{width:300px;height:300px;
      border:1px black solid;overflow:scroll} 
    div{width:300px;height:300px;
      border:1px black solid;overflow:auto}*/
    div{width:100px;height:100px;
      border:1px black solid;
      overflow-x:scroll;overflow-y:auto}
  </style>
</head>
<body>
  <div>
  溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
  溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
  溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
  溢出隐藏溢出隐藏溢出隐藏溢出隐藏溢出隐藏
</div>

在这里插入图片描述

六十八、透明度与手势

1.opacity:0(透明、站空间）~1（不透明）
0.5（半透明）
注：opacity所占空间、字内容也会透明
2.rgba():0~1
注：可以让指定样式透明，不影响其它样式
3.cursor:手势
default:默认箭头
要实现自定义手势
准备图片：.cur .ico
cursor: url(./img/.cur),auto

<style>
    #div1{width:100px;height:100px;
     background:red ;opacity:0.5;}
    #div2{width:100px;height:100px;
     background:rgba(255,0,0,0.5);
     /* cursor:help; */
    cursor: url(./img/.cur),auto;}
  </style>
</head>
<body>
  <div id="div1">这是一个块</div>
  <p>这是</p>
  <div id="div2">这又是一个块</div>

六十九、最大最小宽高

min-width、min-height
max-width、max-height
%单位：换算–>父容器的大小进行换算

html,body{height:100%}
.contrainer{height:100%}

<style>
    /*body{height:100px}
    /* div{width:100px;max-height:200px; 
     border :red solid;}*/
     #box1{width:200px;height:200px;background:red}
     #box2{width:200px;height:80%;background:blue}
  </style>
</head>
<body>
  <!-- <div>这是一罐啦啦啦 -->
  <!-- 这是一罐啦啦啦 -->
 <!-- 这是一罐啦啦啦</div> -->
 <div id="box1">
  <div id="box2"></div>
 </div>

在这里插入图片描述

七十、css默认样式

没有默认样式：div、span
有默认样式：
body–>marign:8px
h1–>margin:上下 21.440px
font-weight:bold
p–>margin:上下 16px
ul–>margin:上下 16px padding:左40px
默认点：list-style:disc
a–>text-decoration:underline

七十一、css(rest)重置样式

1、{margin:0;padding:0;}*
优点：不用考虑哪些标签有默认margin和padding
可自行添加
2、ul{list-style:none}
3、a{text-decoration:none;color:#999;}

ul{list-style:none}
    a{text-decoration:none;color:red}
    a:hover{text-decoration:underline;color:blue}
  </style>
</head>
<body>
    <div>致死</div>
    <span></span>
    <h1></h1>
    <p></p>
    <ul>
      <li></li>
    </ul>
    <a href="#">这是一个链接</a>

4、img{display:block}
让内联元素与基线对齐方式：

img{vertical-align:bottom}
 img {display:block;}

5、写具体页面的时候或一个布局效果的时候
1、写结构
2、css重置样式
3、写具体样式
常见的CSSrest

七十八、float浮动概念及原理

在这里插入图片描述

<style>
   #box1{width:100px;height:100px;
    background:red;float:right}
   #box2{width:100px;height:100px;
    background:blue;float:both}
   
  </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>

在这里插入图片描述

七十九、float注意点整理

在这里插入图片描述


 <style>
    /* body{border:1px black  solid} 
   #box1{width:100px;height:100px;
    background:yellow}
   #box2{width:200px;height:200px;
    background:red ;float:left }
   #box3{width:300px;height:300px;
    background:blue  }
   #box4{background:green;float:left }*/
   ul{margin:0;padding:0;list-style:none;
    height:300px;width:300px;border:1px black solid }
    li{width:100px;height:100px;background:red;
    border:1px yellow solid;box-sizing:border-box;
  float:left}
  li:nth-of-type(1){height:120px;}
  li:nth-of-type(2){height:80px;}
  span:last-of-type{float:right;}
   </style>
</head>
<body>
    <!-- <div id="box1"></div> 
    <div id="box2"></div>
    <div id="box3">文字文字文字文字文字文字文字文字
    文字文字文字文字文字文字文字文字文字文字文字文
    字文字文字文字文字文字文字文字文字文字文字文字
    文字文字文字文字文字</div>
    <div id="box4">这是一个没有宽度的块元素</div>-->
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <span>aaaa</span><span>bbbb</span>

在这里插入图片描述

八十、清除float浮动(上）

在这里插入图片描述

<style>
  /* #box1{width:100px;height:100px;background:red; 
    float:left;}
  #box2{width:200px;height:200px;background:blue;
    clear:both;}*/
  #box1{width:200px;border:1px black solid;
    display:inline-block;}
  #box2{width:100px;height:200px;background:red;
    float:left;}
  </style>
  </head>
  <body>
    <!-- <div id="box1"></div> 
    <div id="box2"></div>-->
    <div id="box1">
      <div id="box2"></div>
 </div>
 aaaaaaa

在这里插入图片描述

八十一、清除float浮动（下）

在这里插入图片描述

<style>
  #box1{width:200px;border:1px black solid;}
  #box1{width:100px;height:200px;background:red;
    float:left;}
    .clear:after{content:'';clear:both;
    display:block;}
  </style>
  </head>
  <body>
    <div id="box1" class="clear">
      <div id="box2"></div>
 </div>
 aaaaaaa

在这里插入图片描述

八十二~八十三、float制作页面小结构

 <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:366px;margin:20px auto;}
  #main.title{height:23px;line-height:23px;
    font-size:12px;font-weight:bold;padding-left:30px;
    background:url(./img2/bg_title.png)no-repeat 6px 
    4px,url(./img2/bg_line.png)repeat-x;
  }
  #main ul{overflow:hidden;margin-top:13px;}
  #main li{margin-bottom:22px;}
  #main.pic{width:99px;border:1px solid #c8c4d3;
          margin-left:5px;}
  #main .pic img{margin:2px;}
  #main .content{width:240px;margin-left:13px;}
  #main .content h2{font-size:12px;line-height:24px;}
  #main .content p{font-size:12px;line-height:20px;}
  </style>
  </head>
  <body>
    <div id="main">
      <h2 class="title">外媒评论精选</h2>
        <ul>
          <li>
            <div class="1 pic">
              <a href="#">
                <img src="" alt="">
              </a>
            </div>
            <div class="1 content">
              <h2>测试标题测试标题</h2>
              <p>
                测试段落测试段落测试段落测试段落
                测试段落测试段落测试段落测试段落
                <a href="#">[详细]</a>
              </p>
            </div>
          </li>
          <li>
            <div class="1 pic">
              <a href="#">
                <img src="" alt="">
              </a>
            </div>
            <div class="1 content">
              <h2>测试标题测试标题</h2>
              <p>
                测试段落测试段落测试段落测试段落
                测试段落测试段落测试段落测试段落
                <a href="#">[详细]</a>
              </p>
            </div>
          </li>
          <li>
            <div class="2 pic">
              <a href="#">
                <img src="" alt="">
              </a>
            </div>
            <div class="2 content">
              <h2>测试标题测试标题</h2>
              <p>
                测试段落测试段落测试段落测试段落
                测试段落测试段落测试段落测试段落
                <a href="#">[详细]</a>
              </p>
            </div>
          </li>
          <li>
            <div class="3 pic">
              <a href="#">
                <img src="" alt="">
              </a>
            </div>
            <div class="3 content">
              <h2>测试标题测试标题</h2>
              <p>
                测试段落测试段落测试段落测试段落
                测试段落测试段落测试段落测试段落
                <a href="#">[详细]</a>
              </p>
            </div>
          </li>
         </ul>
    </div>
  </body>
周日happy
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
超详细的web前端基础学习笔记
06-28
#### 超详细的web前端基础学习笔记 ##### 前端课程介绍 - **HTML**：HTML (HyperText Markup Language) 是一种标记语言，用于定义网页的结构与内容。它如同网页的骨架，为网页提供基本框架。 - **CSS**：CSS ...
web前端学习笔记以及代码
02-24
本压缩包“web前端学习笔记以及代码”显然包含了一套完整的前端学习资源，包括理论知识和实践代码，这对于初学者或者希望提升技能的开发者来说非常有价值。 首先，前端开发通常涵盖以下关键知识点： 1. HTML...
【响应式Web前端设计】:link、:hover、:active和:visited的区别
李响
03-28 1725
:link、:hover、:active和:visited的区别？ :link表示鼠标点击之前，也称为原始状态 :hover表示鼠标悬停状态 :active表示鼠标点击状态 :visited表示鼠标点击之后状态 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html" charset="UTF-8"> <title
前端知识点汇总
qq_64314976的博客
07-13 6884
常用标签 1. 标题标签，双标签，一共有6个，h1~h6，标题标签里的文字，加粗，大小不一。 文字的大小的单位 像素px 默认的文字大小：16px h1 === 32px,h2 === 24px,h3 === 18.72px,h4 === 16px,h5 === 13.28px,h6 === 12px 大部分浏览器对文字大小的最小值做了限制，最小12px 语义化 emmet语法： (1) 标签名 tab键 ===> 直接生成对应标签...
【web前端】<a>只显示visited属性问题解决方法
Cassie_zkq的博客
11-23 785
为网页链接设置如下样式： 未访问时为紫色，已访问为蓝色。 当浏览网页时发现有些链接是蓝色，有些是紫色（或者全是蓝色）和预期的不符。如下： 解决方案：清空网页历史浏览记录！不是清空缓存！ 注意：链接样式声明顺序为：link->visited->hover->active，且当href属性为空或#或都相同时结果和预期的会有差异。 附一篇详解博客：https://www....
:link、:hover、:active和:visited的区别
上官海翰
05-11 3万+
版权声明：本文出自孤星卟哭的博客，原创文章，转载请注明出处。 https://blog.csdn.net/zcy92949/article/details/79914973 前言 直到如今，前端一直都是我的弱项，想要总结自己前端都学了什么，可是真的想写的时候，却发现自己会的真的是好少。既然如此，就随性一点，想到哪里记到哪里吧。 首先，这四个选择器叫伪类选择器，一般用在a标签中的样式，如果...
谈一谈a:link、a:visited、a:hover、a:active的正确使用顺序
热门推荐
薰衣草PK向日葵的博客
01-18 4万+
今天学到一个有趣的新知识呢，迫不及待的想分享一下。自学前端的这条路上，还在基础部分打转，未来好难，走好现在脚下的每一步才是我现在最重要的。小小地感慨一下，下面进入正题吧。 1. &lt;a&gt;标签 我们先说一说&lt;a&gt;标签是干啥用的。 &lt;a&gt; 标签定义超链接，用于从一张页面链接到另一张页面。 &lt;a&gt; 元素最重要的属性是 href 属性...
Web前端学习笔记
DAOkonglong的博客
10-16 3487
Web前端学习
Web前端学习笔记（1）
maxiaoxiaohaohao的博客
10-19 3678
Web前端学习笔记（1）
web前端基础学习笔记
01-08
### Web前端基础学习笔记 #### 一、HTML ##### 1. HTML简介 - **网站与网页**: 网页是使用HTML标记语言编写的文件，用于描述同一范畴内的信息或数据。多个网页组成一个网站。 - **HTML**: 超文本标记语言，是一种...
web前端学习笔记.docx编程资料
04-06
### Web前端学习笔记知识点概述 #### 一、Web基础知识 ##### 1.1 Web与Internet - **Internet**: 是一个全球性的计算机互联网络，提供多种服务如Telnet、Email、WWW、BBS、FTP等。它基于分组交换原理及TCP/IP协议...
（web前端学习笔记）JavaScript基础
01-08
JavaScript基础一、JS简介1、什么是JavaScript2、JavaScript的组成3、JavaScript的能力4、JavaScript的优点二、JS使用与输出1、JS使用1.1、 标签1.2、 或 中的 JavaScript1.3、外部脚本1.4、外部引用2、JS输出2.1、...
前端 CSS：锚伪类选择器:hover,:active，:visited；等用法总结
weixin_52296487的博客
11-30 4253
前端 CSS：锚伪类选择器:hover,:active，:visited;等用法总结 锚伪类选择器:hover,:active，:visited;等用法总结 一、什么是锚伪类 在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。 a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00
CSS 链接
weixin_30718391的博客
06-05 301
不同的链接可以有不同的样式。 链接样式 链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。 特别的链接，可以有不同的样式，这取决于他们是什么状态。 这四个链接状态是： a:link - 正常，未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active - 链接被点击的那一刻 实例 a:link...
JAVA-WEB资源配置
最新发布
caryeko的专栏
08-15 198
用JAVA进行编写WEB项目时，我们一般需要对WEB进行统一配置，例如制定拦截路径、页面解析器、跨域配置、fastjson报文解析、文件上传大小配置等。
使用WebSocket实现一个简易的聊天室
qq_51321722的博客
08-14 414
其次，要有相关配置类以及Controller。我这里的框架是SpringBoot。首先，我们要有一个前端页面。
谷粒商城实战笔记-175~177-商城业务-检索服务-检索查询接口开发
epitomizelu的专栏
08-13 786
搜索页面搭建完成之后，点击搜索按钮，发送参数给后台服务，后台服务根据参数从Elasticsearch中查询符合条件的数据，返回给前端。
vue2前端阿里云oss服务端签名直传
weixin_74285634的博客
08-13 300
generatePresignedUrlApi是由后端提供的接口 来获取密钥。
提升前端性能的JavaScript技巧
han2434的博客
08-14 802
一个快速响应、高效运行的Web页面不仅能提升用户体验，还能在一定程度上影响网站的SEO排名。本文汇总了一系列JavaScript技巧，以帮助开发者提升前端性能，并提供实际的代码示例。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值