程序员经验分享-hwhale

前端入门：HTML5+CSS3+JAAVASCRIPT

2023-10-31

1、 初识HTML

HTML:Hyper Text Markup Language(超文本标记语言) 。
超文本包括：文字、图片、音频、视频、动画等。

1.1、W3C标准

在这里插入图片描述

1.2、HTML基本结构

在这里插入图片描述

示例：

<!-- DOCTYPE:告诉浏览器，我们要使用什么规划，这里是HTML -->
<!DOCTYPE html>
<html lang="en">

<!-- head标签代表网页头部 -->
<head>
    <!-- meta描述性标签，它用来描述我们网站的一些信息 -->
    <!-- meta一般用来做SEO -->
    <meta charset="UTF-8">
    <meta name="keywords" content="我爱编程">
    <meta name="descrption" content=我爱这个世界>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width= , initial-scale=1.0">
    <title>小羊的网站</title>
</head>
<body>
    <h1>Hello world!</h1>
</body>
</html>

1.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>基本标签</title>
</head>
<body>
    <!-- 标题标签 -->
    <h1>一级标签</h1>
    <h2>一级标签</h2>
    <h3>一级标签</h3>
    <h4>一级标签</h4>
    <h5>一级标签</h5>
    <h6>一级标签</h6>

    <!-- 段落标签 -->
    <p>我喜欢王许哲</p>
    <p>她很漂亮，也很温柔。</p>
    
<!-- 水平线标签 -->
<hr/>

    <!-- 换行标签 -->
    王许哲很温柔</br>
    我喜欢她。</br>

    <!-- 粗体，斜体 -->
    <h1>字体样式标签</h1>
    粗体：<strong>I love you</strong>
    斜铁：<em>I love you</em>
    <br/>
    <!-- 特殊符号 -->
    空                         格<br/>
    空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
    <br/>
    &gt;
    <br/>
    &lt;
    <br/>
    &copy;小羊版权所有
</html>

1.4、图像标签

在这里插入图片描述
实例代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>图像标签</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/style.css" rel="stylesheet">
    </head>
    <body>
        <!-- img学习
        src : 图片地址（必填）
              相对地址（推荐使用），绝对地址
              ../  表示上一级目录

              alt :图片的名字（必填）
        -->
    <img src="../html/resources/image/头像.jpg" alt="我的头像" title="首页" width="300" height="200">
    </body>
</html>

1.5、链接标签

在这里插入图片描述
在这里插入图片描述
实例代码：

<!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>链接标签</title>
</head>
<body>
    <!-- a标签
    href : 必填，表示要跳转到那个页面
    target: 表示窗口在哪里打开  
            _blank 在新标签中打开
            _self 在当前页打开
 -->
 <a name="top">头部</a>
 <a href="https://www.baidu.com" target="_blank" >百度首页</a>
 <br/>

 <a href="https://www.baidu.com" target="_self">
    <img src="../html/resources/image/百度.png" alt="我的头像" title="首页">
 </a>

 <!-- 锚链接 
  1.需要一个锚标记
  2.跳转到标记
  #name 
 -->
 <br/>
 <a href="#top">回到头部</a>

 <!-- 功能性链接
   邮件链接：mailto
    -->
    <br/>
  <a href="mailto:1763108660@qq.com">点击联系我</a>  

</body>
</html>

1.6、行内元素和块元素

在这里插入图片描述

1.7、列表

在这里插入图片描述
实例代码：

<!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>列表学习</title>
</head>
<body>
    
<!-- 有序列表 -->
<ol>
    <li>GO</li>
    <li>JAVA</li>
    <li>Python</li>
    <li>前端</li>
    <li>C/C++</li>
</ol>

<hr/>
<!-- 无序列表 
 应用：导航，侧边栏 
-->
<ul>
    <li>GO</li>
    <li>JAVA</li>
    <li>Python</li>
    <li>前端</li>
    <li>C/C++</li>
</ul>

<!-- 自定义列表 
dl : 标签
dt : 列表名称
dd : 列表内容
公司网站底部
-->
<dl>
    <dt>学科</dt>
    <dd>JAVA</dd>
    <dd>Python</dd>
    <dd>Linux</dd>
    <dd>C</dd>

    <dt>位置</dt>
    <dd>北京</dd>
    <dd>上海</dd>
    <dd>广州</dd>
    <dd>深圳</dd>
</dl>
</body>
</html>

1.8、表格

在这里插入图片描述
实例代码：

<!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>表格</title>
</head>
<body>

<!-- 表格table
行 tr
列 td
-->
<table border="1px">
    <tr>
        <!--  colspan 跨列-->
        <td colspan="5">1-1</td>
    </tr>
    <tr>
        <!-- rowspan 跨行 -->
        <td rowspan="2">2-1</td>
        <td>2-2</td>
        <td>2-3</td>
        <td>2-4</td>
        <td>2-5</td>
        <td>2-6</td>
    </tr>
    <tr>
        <td>3-1</td>
        <td>3-2</td>
        <td>3-3</td>
    </tr>
</table>
</body>
</html>

在这里插入图片描述

1.9、媒体元素

在这里插入图片描述

<!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>媒体元素</title>
</head>
<body>
    <!-- 音频和视频 
    src ：资源路径
    controls ：控制条
    autoplay ：自动播放
    -->
    <video src="../html/resources/video/欧文.mp4" controls autoplay></video>
    <br/>
    <audio src="../html/resources/audio/bgm.mp3" controls autoplay></audio>
</body>
</html>

1.10、页面结构分析

在这里插入图片描述
实例代码：

<!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>网页结构</title>
</head>
<body>
    <header>
        <h2>网页头部</h2>
    </header>

    <section>
        <h2>网页主体</h2>
    </section>

    <footer>
        <h2>网页脚部</h2>
    </footer>
</body>
</html>

1.11、iframe内联框架

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iframe</title>
</head>
<body>
    <!-- iframe内联框架
    src :地址
    w-h :宽度和高度
    -->
   <iframe src="https://wwww.baidu.com" frameborder="0" width="200px" height="200px"></iframe>
</body>
</html>

1.12、表单

在这里插入图片描述
表单元素格式：
在这里插入图片描述
表单的应用：
在这里插入图片描述
表单的初级验证：
在这里插入图片描述
实例代码：

<!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>表单</title>
</head>
<body>
 
  <h1>注册</h1>    
  
  <!-- 表单form
   action :表单提交的位置
  -->
  <form action="myFirstNet.html" method="post">
      <p>姓名：<input type="text" name="username" value="王许哲" readonly></p>
      <p>密码：<input type="password" name="pwd" placeholder="请输入密码" required></p>
      <!-- 单选框标签
         input type="radio"
         value: 单选框的值
         name:表示组
       -->
       <p>性别：
        <input type="radio" value="boy" name="sex" checked>男
        <input type="radio" value="girl" name="sex">女
      </p>
      <!-- 多选框
        input type="checkbox"
       -->
       <p>爱好：
          <input type="checkbox" value="sleep" name="hobby" checked>编程
          <input type="checkbox" value="sleep" name="hobby">聊天
          <input type="checkbox" value="sleep" name="hobby">旅游
       </p>

        <!-- 按钮
            type="button" 普通按钮
            type="image"  图片按钮
            type="submit" 提交按钮
            type="reset"  重置按钮
        -->
      <p>
        <input type="button" name="btn1" value="点击">
        <input type="image" src="../html/resources/image/头像.jpg">
      </p>

      <!-- 下拉框，列表框 -->
      <p>国家下拉框：
        <select name="列表名称">
           <option value="china">中国</option>
           <option value="usa">美国</option>
           <option value="eth" selected>瑞士</option>
           <option value="yingdu">印度</option>
        </select>
      </p>

      <!-- 文本域
     
       -->
      <p>反馈：
        <textarea name="textarea" cols="20" rows="20">文本内容</textarea>
      </p>

      <!-- 文件域 -->
      <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
      </p>

      <!-- 邮件验证 -->
      <p>邮箱：
         <input type="email" name="email">
      </p>
      <!-- URL -->
      <p>URL：
        <input type="url" name="url">
     </p>
     <!-- 数字 -->
     <p>商品数量：
        <input type="number" name="num" max="100" min="0" step="1">
     </p>
     <!-- 滑块
      input type="range"
      -->
      <p>音量：
        <input type="range" name="voice" max="100" min="0" step="2">
     </p>
     <!-- 搜索 -->
     <p>搜索：
        <input type="search" name="ser">
     </p>
     <!-- 增强鼠标可用性 -->
     <p>
        <label for="mark">点我</label>
        <input type="text" id="mark">
     </p>
      <!--  自定义邮箱-->
      <p>自定义邮箱：
        <input type="text" name="diymail" pattern="[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?">
      </p>
      <br/>
       <P>
        <input type="submit">
        <input type="reset" disabled>
      </P>

  </form>
</body>
</html>

2、CSS3

2.1、什么是CSS？

Cascading Style Sheet 层叠级联样式表。
美化网页

2.2、发展史

CSS1.0
CSS2.0 DIV(块)+CSS，HTML与CSS结构分离的思想，网页变得简单，SEO。
CSS2.1 浮动，定位
CSS3.0 圆角，阴影，动画… 浏览器兼容性~

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> 可以编写css代码
     语法：
         选择器{
            声明1;
            声明2;
            声明3;
         }   
    -->
    <style>
        h1{
            color: cyan;
        }
    </style>    
    <!-- <link rel="stylesheet" href="../html/css/style.css"> -->
</head>
<body>
    <h1>我是标题</h1>
</body> 
</html>

2.4、css的优势：

1、内容和表现分离
2、网页结构表现统一。可以实现复用
3、样式十分的丰富
4、建议使用独立于html的css文件
5、利用SEO，容易被搜索引擎收录

2.5、四种css导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 2.内部样式 -->
    <style>
        h1{
            color: green;
        }
    </style>
    <!--  3.外部样式-->
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
<!--  优先级：行内样式>内部样式>外部样式-->
<!--1.行内样式：在标签元素中，编写一个style属性，编写样式即可  -->
<h1 style="color:red">我是标题</h1>
</body>
</html>

拓展：外部样式两种写法
链接式：html

<!--  3.外部样式-->
<link rel="stylesheet" href="../css/style.css">

导入式：css2.1特有的

        <!-- 4.导式 -->
    <style>
        @import url("css/style.css");
    </style>
</head>

2.6、三种选择器（重要）

作用：选择页面上的某一个或者某一类元素

2.6.1、基本选择器

  1. 标签选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* 标签选择器，会选择到页面上所有的这个标签的元素 */
        h1{
            color: #ce5050;
        }
        p{
            font-size: 80px;
        }
    </style>
</head>
<body>
    <h1>学Java</h1>
    <h1>学散打</h1>
    <p>小羊小羊</p>
</body>
</html>
  1. 类选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
      /*类选择器的格式 .class的名称{}
      优点：可以多个标签归类，是同一个class
      */
      .title1{
        color: aquamarine;
      }
      .title2{
        color: blue;
      }
    </style>
   

</head>
<body>
    <h1 class="title1">标题1</h1>
    <h1 class="title2">标题2</h1>
    <h1 class="title1">标题3</h1>
    <p class="title1">啦啦啦啦</p> 
</body>
</html>
  1. id选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /* id选择器 : id必须保证全局唯一
          格式：#id名称{}
          不遵循就近原则，固定的
          id选择器>class类选择器>标签选择器
        */
        #title{
            color: chartreuse;
        }
        .style{
            color: aqua;
        }
        h1{
            color: brown;
        }
    </style>
</head>
<body>
    <h1 class="style" id="title">标题1</h1>
</body>
</html>

2.6.2、层次选择器

  1. 后代选择器：在某个元素的后面，（祖爷爷 爷爷 爸爸 儿子）都会改变
        /* 后代选择器 */
        body p{
            background: #f45606;
        }
  1. 子选择器：一代，儿子
        /* 子选择器 */
        body>p{
            background: #3cbda6;
        }
  1. 相邻兄弟选择器：同辈
        /* 相邻兄弟选择器：只有一个，相邻（向下） */
        .active+p{
            background: #3cbda6;
        }
  1. 通用选择器
        /* 通用兄弟选择器，当前选中元素的向下的所有兄弟元素 */
        .active~p{
            background: #3cbda6;
        }

2.6.2、结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <!-- 避免使用class类选择器、id选择器 -->
    <style>
        /* ul的第一个子元素 */
         ul li:first-child{
            background: aqua;
         }
        /* ul的最后一个子元素 */
        ul li:last-child{
            background: #c65e5e;
        }

        /* 选中p1:定位到父元素，选择当前的第一个元素？
        选中当前p元素的f父级元素，再选中父级元素的第一个，并且是当前元素才生效！，按顺序*/
        p:nth-child(2){
            background: #e3c3c3;
        }
        
        /* 选中父元素下的p元素的第二个！按类型 */

        p:nth-of-type(1){
            background: yellow;
        }
    </style>
</head>
<body>
    <h1>h1</h1>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
</body>
</html>

2.6.2、属性选择器（重要、常用）
id+class 结合~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        .demo a{
            float: left;
            display: block;
            height: 90px;
            width: 90px;
            background: red;
            text-align: center;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }

        /* 属性名，属性名=属性值（正则）
        = 绝对等于
        *= 包含这个元素
        ^= 以这个开头
        $= 以这个结尾
        */
      /* 存在id属性的元素: a[]{} */
      /* a[id]{
        background: yellow;
      } */
      /* a[id=first]{
        background: yellow;
      } */

      /* class 中有links的元素 */
      /* a[class *="links"]{
        background: yellow;
      } */

      /* 选中href中以http开头的元素 */
      /* a[href^=http]{
        background: yellow;
      } */

      /* 选中以pdf结尾的元素 */
      a[href$=pdf]{
        background: yellow;
      }
    </style>
</head>
<body>
    <p class="demo">
       <a href="https://www.baidu.com" class="links item first" id="first">1</a>
       <a href="" class="links item active" target="_blank" title="test" id="second">2</a>
       <a href="images/1" class="links item">3</a>
       <a href="images/2" class="links item">4</a>
       <a href="images/3" class="links item">5</a>
       <a href="abc" class="links item">6</a>
       <a href="/a.pdf" class="links item">7</a>
       <a href="/abc.pdf" class="links item">8</a>
       <a href="/abc.doc" class="links item">9</a>
       <a href="/abcd.doc" class="links item last">10</a>
    </p>
</body>
</html>

在这里插入图片描述

2.7、CSS的作用及字体样式

1、span标签：重点要突出的字，使用span套起来

2.7.1、字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- font-family: 字体
         font-size: 字体大小
         font-weight: 字体粗细
         color:字体颜色
    -->
    <style>
        body{
            font-family: "Arial Black",楷体;
            color: red;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>故事介绍</h1>
    <p class="p1">
        为天地立心、为生民立命、为往圣继绝学、为万世开太平
    </p>

    <p>
        说天亲，天也不算亲，天有日月和星辰。日月穿梭催人老，带走世上多少的人。说地亲，地也不算亲，地长万物似黄金。争名夺利有多少载，看罢新坟看旧坟。说爹妈亲，不算个亲，二老不能永生
    </p>

    <p>
        When We Two Parted George Gordon Byron!
    </p>
</body>
</html>

2.7.2、文本样式

1、颜色 color rgb rgba
2、文本对齐方式
3、首行缩进
4、行高
5、装饰
6 、文本图片水平对齐：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- font-family: 字体
         font-size: 字体大小
         font-weight: 字体粗细
         color:字体颜色
    -->
    <style>
        body{
            font-family: "Arial Black",楷体;
            color: red;
        }
        h1{
            font-size: 50px;
        }
        .p1{
            font-weight: bold;
        }
                /* a标签超链接去下划线 */
        a{
            text-decoration: none;  
        }
    </style>
</head>
<body>
    <a href="">1234</a>

    <h1>故事介绍</h1>
    <p class="p1">
        为天地立心、为生民立命、为往圣继绝学、为万世开太平
    </p>

    <p>
        说天亲，天也不算亲，天有日月和星辰。日月穿梭催人老，带走世上多少的人。说地亲，地也不算亲，地长万物似黄金。争名夺利有多少载，看罢新坟看旧坟。说爹妈亲，不算个亲，二老不能永生
    </p>

    <p>
        When We Two Parted George Gordon Byron!
    </p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 
   水平对齐需要参照物
     -->
    <style>
        img,span{
            vertical-align: middle;
        }
        /* a标签超链接去下划线 */
        a{
            text-decoration: none;  
        }
    </style>
</head>
<body>
     
  <a href="">111113</a>
    
  <p>
    <img src="../resources/image/头像.jpg" alt="">
    <span>1561656</span>
  </p>


</body>
</html>

2.8、文本阴影和超链接伪类

<!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>title</title>

    <style>
        /* 默认的状态 */
        a{
            text-decoration: none;
            color: aquamarine;
        }
        /* 鼠标悬浮的状态 */
        a:hover{
            color: blueviolet;
        }
        /* 鼠标单击没有释放的状态 */
        a:active{
            color: chartreuse;
        }
        /* 未访问链接的状态 */
        /* a:link{
            color: black;
        } */

        /* 已访问链接的状态 */
        /* a:visited{
            color: cornflowerblue;
        } */

        /* text-shadow: 阴影颜色，水平偏移，垂直偏移，阴影半径 */
        #price{
            text-shadow: rgb(14, 239, 134) 15px 0px 2px ;
        }
    </style>
</head>
<body>
    <a href="https:www.baidu.com">
      <img src="../resources/image/头像.jpg" alt="">
    </a>
  <p>
    <a href="https:www.baidu.com">码出高效:JAVA开发手册</a>
  </p>  
  <p>
    <a href="https:www.baidu.com">作者:孤尽老师</a>
  </p> 
  <p id="price">
    <a href="">￥99.00</a>
  </p>  
</body>
</html>

在这里插入图片描述

2.9、列表

<!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>title</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="nav">
        <h2></h2>
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li><a href="#">图书</a>&nbsp;&nbsp;<a href="#">音像</a>&nbsp;&nbsp;<a href="#">数字商品</a></li>
        <li><a href="#">家用电器</a>&nbsp;&nbsp;<a href="#">手机</a>&nbsp;&nbsp;<a href="#">数码</a></li>
        <li><a href="#">电脑</a>&nbsp;&nbsp;<a href="#">办公</a></li>
        <li><a href="#">家居</a>&nbsp;&nbsp;<a href="#">家装</a>&nbsp;&nbsp;<a href="#">厨具</a></li>
        <li><a href="#">服饰鞋帽</a>&nbsp;&nbsp;<a href="#">化妆品</a></li>
        <li><a href="#">礼品箱包</a>&nbsp;&nbsp;<a href="#">钟表</a>&nbsp;&nbsp;<a href="#">珠宝</a></li>
        <li><a href="#">食品饮料</a>&nbsp;&nbsp;<a href="#">保健食品</a></li>
        <li><a href="#">彩票</a>&nbsp;&nbsp;<a href="#">旅行</a>&nbsp;&nbsp;<a href="#">充值</a>&nbsp;&nbsp;<a href="#">票务</a></li>
    </ul>
</div>
</body>
</html>

#nav{
    width: 300px;
    background: rgb(165, 141, 190);
}
.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 30px;
    background: greenyellow;
}
/* ul li*/
/* list-style: 
   none 去掉圆点;
   circle 空心圆
   decimal 数字
   square 正方形
  */
ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}

ul{
    background: rgb(165, 141, 190);
}

a{
    text-decoration: none;
    font-size: 14px;
    color: #000;
}
a:hover{
color: orange;
text-decoration: underline;
}

2.10、背景图像应用及渐变

2.10.1、背景图片

<!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: 1000px;
            height: 700px;
            border: 1ex solid greenyellow;
            /* 默认是全部平铺的 */
            background-image: url("../resources/image/头像.jpg");
        }
        .div1{
            background-repeat: repeat-x;
        }
        .div2{
            background-repeat: repeat-y;
        }
        .div3{
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
</body>
</html>

.title{
    font-size: 18px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 30px;
    /* 颜色，图片，图片位置，平铺方式 */
    background: greenyellow  url("../../resources/image/下箭头.gif") 200px 10px no-repeat;
}

2.10.2、渐变

<!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{
            background-color: #8EC5FC;
            background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
        }
    </style>
</head>
<body>
    
</body>
</html>

渐变色CSS代码取样

2.11、盒子模型及边框使用

1、什么是盒子模型？
在这里插入图片描述
margin:外边距
border:边距
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>
        /* body总有一个默认的外边距margin：0 */
        body{
            margin: 0;
            padding: 0;
            text-decoration: none;
        }
        h2{
            font-size: 16px;
            background-color: aquamarine;
            line-height: 30px;
        }

        /* border:粗细，样式，颜色 */
        #box{
            width: 300px;
            border: 1px solid red;
        }

        form{
            background: greenyellow;
        }
        div:nth-of-type(1)>input{
            border: 3px solid black;
        }
        div:nth-of-type(2)>input{
            border: 3px dashed rgb(212, 44, 44);
        }
        div:nth-of-type(3)>input{
            border: 3px solid rgb(227, 198, 198);
        }
    </style>
</head>
<body>
    <div id="box">
       <h2>会员登录</h2>
       <form>
          <div>
            <span>用户名：</span>
            <input type="text">
          </div>
          <div>
            <span>密码：</span>
            <input type="text">
          </div>
          <div>
            <span>邮箱：</span>
            <input type="text">
          </div>
       </form>
    </div>
</body>
</html>

2、内外边距及div居中

<!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总有一个默认的外边距margin：0
           要求：块元素，块元素有固定的宽度
         */
        body{
            padding: 0;
            text-decoration: none;
        }

        /* 边距的参数：顺时针旋转
          margin:0  上下左右都是0
          margin: 0 1px 上下是0 左右是1
          margin: 0 1px 2px 3px;  上下左右各自有唯一的参数
        */
        /* 内边距也是一样的规则 */
        h2{
            font-size: 16px;
            background-color: aquamarine;
            line-height: 30px;
            margin: 0 1px 2px 3px;
        }

        /* border:粗细，样式，颜色 */
         /* 外边距的妙用：居中元素
         margin: 0 auto;
          */
        #box{
            width: 300px;
            border: 1px solid red;
            margin: 0 auto;
        }

        form{
            background: greenyellow;
        }
        input{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="box">
       <h2>会员登录</h2>
       <form>
          <div>
            <span>用户名：</span>
            <input type="text">
          </div>
          <div>
            <span>密码：</span>
            <input type="text">
          </div>
          <div>
            <span>邮箱：</span>
            <input type="text">
          </div>
       </form>
    </div>
</body>
</html>

盒子的计算方式：你这个元素到底多大？
在这里插入图片描述
margin+border+padding+内容宽度
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>
        /* border-radius: 10px 20px  30px 40px;
           顺时针规则：左上，右上，右下，左下
        */
        div{
            width: 100px;
            height: 200px;
            border: 10px solid red;
            border-radius: 10px 20px  30px 40px;
        }
    </style>
</head>
<body>
    <div>

    </div>
</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>
        /* border-radius: 100px;
           顺时针规则：左上，右上，右下，左下
        */
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 100px;
        }

        img{
            border-radius: 25px;
        }
    </style>
</head>
<body>
    <div>
    </div>
    <img src="../resources//image/头像.jpg">
</body>
</html>

在这里插入图片描述
4、阴影

<!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>title</title>

    <!-- 阴影 box-shadow: 10px 10px 100px yellow; -->
    <style>
        div{
            width: 100px;
            height: 200px;
            border: 10px solid red;
            box-shadow: 10px 10px 100px yellow;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

2.12、display和浮动

1、简介
块级元素：独占一行
h1~h6 p div 列表
行内元素：不独占一行
span a img strong…
行内元素可以被包含在块级元素中，反之，则不可以~
2、display

<!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>Title</title>
    <!--  block 块元素
      display: inline;行内元素
      display: inline-block; 是块元素，但是可以内联在一行
      display: none; 消失
    -->
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid red;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div>div块元素</div>
    <span>span行内元素</span>
</body>
</html>

这个也是一种实现行内元素排列的方式，但是我们很多情况都是用float
3、浮动
左右浮动 float

div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px #000 solid;
}
.layer01{
    border:1px #F00 dashed;
    display: inline-block;
    /* 左浮 */
    float: left; 
}
.layer02{
    border:1px #00F dashed;
    display: inline-block;
     /* 右浮 */
    float: right;
}
.layer03{
    border:1px #060 dashed;
    display: inline-block;
}
.layer04{
    border:1px #666 dashed;
    display: inline-block;
    font-size: 12px;
    line-height: 23px;
    display: inline-block;
}

2.13、overflow及父级边框塌陷问题

/*
clear:right; 左侧不允许有浮动元素
clear:right; 右侧不允许有浮动元素
clear:both; 两侧不允许有浮动元素
*/
解决方案：
1、增加父级元素的高度

#father{
    border: 1px #000 solid;
    height: 800px;
}

2、增将一个空的div标签，清除浮动

.clear{
    clear: both;
    margin: 0;
    padding: 0;
}

3、overflow
在父级元素中增加一个 overflow: hidden;

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

        <!-- overflow: hidden;隐藏滚动条-
        overflow: scroll; 以滚动条的形式展示-->
    <style>
        #content{
           width: 200px;
           height: 100px;
           overflow: scroll;
        }
    </style>
</head>
<body>
    <div id="content">
        <img src="../resources/image/头像.jpg" alt="">
        <p>
            因为Java是全球排名第一的编程语言，Java工程师也是市场需求最大的软件工程师，选择Java，就是选择了高薪。
        </p>
    </div>
</body>
</html>

4、父类添加一个伪类：after

#father{
    border: 1px #000 solid;
    height: 800px;
}
#father:after{
   content: '';
   display: block;
   clear: both;
}

小结：

  • 浮动元素后面增加空div:简单，代码中尽量避免空div
  • 设置父元素的高度：简单，元素假设有了固定的高度，就会被限制
  • overflow:简单，下拉的一些场景避免使用
  • 父类添加一个伪类：after(推荐)：没有作用，推荐使用！
    5、display和float对比
  • display:方向不可以控制
  • float:浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题~

2.14、定位

1、相对定位:position: relative;
相对于原来的位置，进行指定的偏移，相对定位后，任然在标准文档流中，原来的位置会被保留

 top: -20px;
 left: 20px;
 bottom: -10px;
 right: 10px;

<!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>title</title>

    <!-- 相对定位：
       相对于自己原来的位置进行偏移~
    -->
    <style>
         div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
         }

         #first{
            background-color: rgb(18, 227, 175);
             border: 1px solid #666;
             position: relative; /* 相对定位 上下左右*/
             top: -20px;
             left: 20px;
         }

         #second{
            background-color: rgb(90, 241, 52);
            border: 1px solid rgb(208, 49, 49);
         }

         #third{
            background-color: rgb(128, 17, 226);
            border: 1px solid rgb(20, 179, 207);
            position: relative; /* 相对定位 上下左右*/
            bottom: -10px;
            right: 10px;
         }
    </style>
</head>
<body>
    <div id="father">
       <div id="first">第一个盒子</div>
       <div id="second">第二个盒子</div>
       <div id="third">第三个盒子</div>
    </div>
</body>
</html>

在这里插入图片描述

2、绝对定位
定位：基于xxx定位，上下左右~
相对于父级或浏览器的位置，进行指定的偏移，绝对定位后它不在标准文档流中，原来的位置不会被保留

  • 没有父级元素的前提下，按浏览器的位置定位
  • 假设父级元素存在定位，我们通常会相对于父级元素进行偏移
  • 在父级元素范围内移动
<!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>title</title>

    <!-- 相对定位：
       相对于自己原来的位置进行偏移~
    -->
    <style>
         div{
            margin: 10px;
            padding: 5px;
            font-size: 12px;
            line-height: 25px;
         }

         #father{
            border: 1px solid #666;
            padding: 0;
            position: relative;
         }

         #first{
            background-color: rgb(18, 227, 175);
             border: 1px solid #666;
         }

         #second{
            background-color: rgb(90, 241, 52);
            border: 1px solid rgb(208, 49, 49);
            position: absolute;
            right: 30px;
         }

         #third{
            background-color: rgb(128, 17, 226);
            border: 1px dashed rgb(20, 179, 207);
         }
    </style>
</head>
<body>
    <div id="father">
       <div id="first">第一个盒子</div>
       <div id="second">第二个盒子</div>
       <div id="third">第三个盒子</div>
    </div>
</body>
</html>

3、固定定位：fixed

<!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>Title</title>
    <style>
        body{
            height: 1000px;
        }

        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            right: 0;
            bottom: 0;
        }

        /* position: fixed; 固定定位*/
        div:nth-of-type(2){ 
            width: 100px;
            height: 100px;
            background: yellow;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
</body>
</html>

4、z-index及透明度
在这里插入图片描述
图层~
z-index: 默认是0，最高无限~999

<!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>123</title>
    <link href="css/style.css" rel="stylesheet">
</head>
<body>
    <div id="content">
        <ul>
            <li><img src="../../resources/image/头像.jpg"></li>
            <li class="tipText">学微服务</li>
            <li class="tipBg"></li>
            <li>2099-1-1</li>
            <li>地点：月球</li>
        </ul>
    </div>
</body>
</html>

#content{
    width: 380px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    line-height:25px;
    border: 1px #000 solid;
}
ul,li{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/* 父级元素相对定位 */
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 380px;
    height: 25px;
    top: 200px;
}
.tipText{
    color: white;
    /* 层级 */
    z-index: 888;
}
.tipBg{
    background: black;
    /* 背景透明度 */
    opacity: 0.5;
}

在这里插入图片描述

3、JavaScript

3.1、引入javaScript

  1. 内部标签
<script>alert("script标签内弹窗！")</script>
  1. 外部引入
    引入js文件的位置必须要准确。
<script src="../javascript/hello.js"></script>

示例代码：

<!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>第一个javascript程序</title>

    <!-- <script>alert("script标签内弹窗！")</script> -->


    <!-- 外部引入 -->
    <script src="../javascript/hello.js"></script>
</head>
<body>
    
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Web

前端

html5

CSS3

前端入门：HTML5+CSS3+JAAVASCRIPT 的相关文章

  • Spring MVC Web 应用程序 - 从属性启用/禁用控制器

    我有一个在 Tomcat 中运行的 Web 应用程序 并使用 Spring MVC 来定义控制器和映射 我有以下课程 Controller api test public class TestController RequestMappin

  • Django 中的 Meta 到底是什么？

    我想简单地知道 Django 中的 Meta 类是什么以及它们的作用 from django db import models Class Author models Model first name models CharField ma

  • REST API 与 Web API

    我是构建 HTTP API 的初学者 我似乎对 REST API 和 Web API 之间的区别感到困惑 我在网上读到更多相关内容 困惑似乎越来越多 我猜菲尔丁有与此链接相同的问题http roy gbiv com untangled 20

  • 引导程序中导航和巨型屏幕之间的差距

    对于我的一生 我无法确定我的导航和大屏幕之间的空白来自哪里 我已经玩过很多变量 但无法让它消失 我在这里做了一个cssdeckhttp cssdeck com labs u6ws0ozl http cssdeck com labs u6ws

  • 构建网站翻译文件

    我在建立网站时多次遇到这个问题 我将以使用 PHP 和 Laravel 为例进行解释 但这个问题在多个平台中都很常见 这已经在几个问题中得到了解决 post1 https stackoverflow com questions 317854

  • Ant Design Collapse - 关闭按钮

    我是 Ant Design 的初学者 在使用 Ant Design 库中的 Collapse 和 Form 时遇到了这个问题 我已经设置了我的页面 其中添加新项目的表单位于折叠中 并且折叠下方有一个项目列表

  • 从网站获取数据的vba代码

    我是这个网站和 VBA 编程的新手 我遇到了一个问题 我必须从中获取数据这一页 http www kieskeurig nl zoeken index html q 4960999543345 我需要有超链接网址Check Rates 10

  • 执行预检请求时是否需要 Access-Control-Allow-Origin CORS 标头？

    我们在我们的网站上看到了著名的 CORS 错误 XMLHttpRequest 无法加载https my site com api https my site com api 请求的资源上不存在 Access Control Allow Or

  • 如何将 html 输入到 Flask 中？

    我有这个 html 位

  • Electron 应用程序可以与 java 代码集成吗？

    由于node js仍然缺乏Java中存在的重要功能 因此我想使用Java而不是node js 并使用Web语言 html js css 创建客户端 Electron 是跨平台的 java 也是跨平台的 因此似乎有一个能够两全其美的解决方案

  • 单击链接时启动本地应用程序

    我正在开发一个内部 Web 应用程序 它允许我为客户存储远程控制凭据 每次我想要连接到客户计算机时 我都需要启动远程支持软件 复制并粘贴用户名和密码 然后单击 开始 按钮 该软件将具有可用的命令行参数 允许我立即启动会话 但是 我不知道如何

  • Phonegap - cordova 在 Android 和 iOS 设备上延迟且缓慢

    我刚刚开始使用 zend studio 开始我的第一个 PhoneGap 项目 但是 在我构建并部署它之后 该应用程序非常慢 Android 和 iOS 均可 滚动滞后 如果我按下按钮 转到下一页的速度很慢 有什么办法可以提高它的性能吗 提

  • Django - 缺少 1 个必需的位置参数：'request'

    我收到错误 get indiceComercioVarejista 缺少 1 个必需的位置参数 要求 当尝试访问 get indiceComercioVarejista 方法时 我不知道这是怎么回事 views from django ht

  • 在 Blogger 中使用相对链接

    我正在使用博主 当我需要在我的博客文章中提到一个链接并且该链接实际上是我自己的博客文章的链接时 我在其旁边提到标签 www my blog name blogspot in 12 2013 how to do html if i chang

  • Chrome：网络元素自动移动

    我正在开发一个网络项目 在过去的两周里 我正在进行学期考试 所以我要休息一下 现在 既然他们已经结束了 我又继续我的工作了 但我发现我的一些Web 元素 如按钮 span 在 Chrome 上移动了一些像素 在 IE 和 Mozilla 上

  • 如何防止桌面浏览器（Chrome、Safari）缩放网页

    我尝试使用以下元视图端口标记来防止浏览器缩放 但这不起作用 我知道这是可能的 因为我的缩放在此网站上被阻止 未来主义 xyz http futurism xyz 该网站的视口标签是这样的

  • 重新加载更新的 javascript> 代码而不完全重新加载 html 页面

    我正在开发一个单页 Web 应用程序 它具有许多不同的功能和形式 当开发一个深度 我的意思是主页上没有的 功能时 我会经历这个循环 开发代码 编辑类和函数 刷新整个页面 一路点击 直到到达我需要测试的部分 有时加起来大约一分钟 测试新代码

  • Web 应用程序使用 API 来完成一切？

    我即将开始为我的公司规划一个内部项目管理工具 API 一直让我疑惑 首先创建 API 并使用这些 API 调用构建实际站点而不是实施两次 是否会被视为不好的做法 效率太低 让我知道你的想法 我完全同意开发 API 将为您提供解耦的架构 并且

  • 网站 YouTube 嵌入视频不断播放

    我正在使用 youtube 提供的 iframe 在我的网站上嵌入视频 我还使用了一个 css 弹出窗口 这是我从这个页面学到的http www pat burt com web development how to do a css po

  • 同源政策目的可疑

    正如我所读到的 同源策略是防止源自 邪恶 域 A 的脚本向 良好 域 B 发出请求 换句话说 跨站点请求伪造 玩了一下我了解到的Access Control Allow Origin标头和CORS据我了解 它允许从好域 B 指定服务器 域

随机推荐

  • Android注册页面

    布局文件activity main xml

  • 枚举类中通过code值获取对应的desc值

    Getter NoArgsConstructor public enum TaskRecordTypeEnum STOPTASK 0 禁用任务 STARTTASK 1 启用任务 private int code private String

  • 在SpringBoot中使用AOP获取HttpServletRequest、HttpSession 内容

    POM xml添加AOP依赖

  • python:超大整数的运算

    为什么80 的码农都做不了架构师 gt gt gt a pow 10 100 b pow 10 100 print a print a 3 print a b 3 结果 10000000000000000000000000000000000

  • Python关于列表list

    Python的列表数据类型包含更多的方法 这里是所有的列表对象方法 list append x 把一个元素添加到列表的结尾 相当于a len a x list extend L 将一个给定列表中的所有元素都添加到另一个列表中 相当于a le

  • MQTT vs webSocket协议

    边缘服务器采用了容器和微服务架构 其中重要的一个方面就是要选择一个高效率的消息系统 用于微服务之间的消息交换 为什么选择websocket 协议 modular 2 edge 设计了自己的消息系统base service 它采纳了webso

  • aps是什么意思_APS系统是什么意思？起什么作用

    原标题 APS系统是什么意思 起什么作用 APS系统是什么意思 起什么作用 随着企业规模不断扩大 在经营管理方面会面临各种各样的问题 为了帮助解决此类问题 很多公司都会引入APS高级排程系统帮助进行生产管理的优化 那APS系统是什么意思 起

  • JMeter压测常见面试问题

    1 JMeter可以模拟哪些类型的负载 JMeter可以模拟各种类型的负载 包括但不限于Web应用程序 API 数据库 FTP SMTP JMS SOAP RESTful Web服务等 这使得JMeter成为一个功能强大且灵活的压力测试工具

  • Linux网络设备之注销

    在注销网络设备时 会调用pci driver gt remove函数 以e100网卡驱动为例 实际调用e100 remove 该函数调用函数unregister netdev进行设备注销操作 函数调用关系图如下 注销分为两步 1 回滚注册操

  • 仿阿姨帮

    实例简介 仿阿姨帮 58到家上门O2O系统源码 BAOCMS二次开发 七牛云 是一款PHP MYSQL开发制作的在线上门O2O系统 PC WAP 微信端等功能 在BAOCMS基础上二次开发的东西内核是BAOCMS 最新版内核 修复了所有的功

  • 标准25码 Barcode 25

    Code25 码 标准 25 码 Interleaved 2 of 5 Code25 计算 2of5i xsl

  • windows10安装Trading View出错解决办法

    一 直接从https cn tradingview com desktop 下载安装 出现报错 解析应用包时出错 二 解决办法 1 找下载的安装文件 TradingView appinstaller 2 用记事本打开 找到 https tv

  • mybaties踩坑之错误的@ID 注解引用， 导致org.apache.ibatis.type.TypeException

    在定义完实体类以后 使用mybaties的主键查询实体类 一查就报错 说无法将字符串格式转换为时间类型 仔细检查了一遍 类型并没有问题 于是尝试将Timestamp的字段去掉再看 仍然报无法将字符串格式转换为Integer类型 基本可以确定

  • 视频质量诊断和图像质量诊断 视频质量分析算法

    目前我们常说的视频质量诊断应用 主要分两种 一种是将视频质量诊断系统设在监控中心 通过中心矩阵或流媒体服务器来获取前端所有摄像机的视频信号 通过轮巡方式对各路视频进行检测 这种方式受限于网络带宽和服务器自身性能 上传画面质量无法保障 非真正

  • ROS小车+Velodyne16线+legoloam仿真

    系统使用Ubuntu18 04 ros1 一 建立catkin工作空间 mkdir p catkin ws src cd catkin ws src catkin init workspace 上述三步建立了catkin工作空间并将其初始化

  • 2021河南高驻马店高考成绩查询,河南驻马店2020高考喜报，驻高包揽市理科前三强，一本上线数稳增...

    原标题 河南驻马店2020高考喜报 驻高包揽市理科前三强 一本上线数稳增 读过笔者这篇河南驻马店叱咤风云5所高中 皆是省重点 堪称重点本科人才摇篮的人知道 以驻马店高中 驻高 为代表的几所省级示范高中 在去年的高考中 取得了相当不错的成绩

  • 北京大学肖臻老师《区块链技术与应用》公开课笔记8——BTC挖矿篇

    北京大学肖臻老师 区块链技术与应用 公开课笔记 比特币挖矿篇 对应肖老师视频 click here 全系列笔记请见 全系列笔记请见 click here About Me 点击进入我的Personal Page 在之前的文章 已经基本上介绍

  • c语言 乘除法优先级,运算符运算符优先级 - C语言教程

    运算符优先级 运算符的优先级确定表达式中项的组合 这会影响到一个表达式如何计算 某些运算符比其他运算符有更高的优先级 例如 乘除运算符具有比加减运算符更高的优先级 例如 x 7 3 2 在这里 x 被赋值为 13 而不是 20 因为运算符

  • elasticSearch 实现对nested对象的查询

    1 下面我是对一个nested对象进行查询时候执行的结果 希望对您有帮助 GET my store search query bool must nested path owner query match owner name keywor

  • 前端入门：HTML5+CSS3+JAAVASCRIPT

    1 初识HTML HTML Hyper Text Markup Language 超文本标记语言 超文本包括 文字 图片 音频 视频 动画等 1 1 W3C标准 1 2 HTML基本结构 示例

热门标签