前端

HTML

草原三剑客

HTML：负责网页的结构（页面元素和内容）

CSS：负责网页的表现（页面元素的外观、位置，如颜色、大小等）

JavaScript：负责网页的行为（交互效果）

HTML快速入门

属性说明
title标题
H1-h6h1标题到h6标题
img图片标签
<html>
    <!-- head为头部 -->    
    <head>
        <!-- title为标题 -->
        <title>HTML 标题</title>
    </head>

    <!-- body是身体 -->
    <body>
        <h1>Hello World</h1> 
        <img src="1.jpg"/>
    </body>
</html>

HTML常用标签

HTML标签（HTML tags）是用于描述网页结构和内容的元素。HTML标签以尖括号（< >）包围，并放置在网页的文本中。标签通常是成对出现的 标签就相当于人的身体，有一些不同的特征。

属性说明
a超链接
hr水平线
span没有语义的标签
<!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>Demo 测试</title>

</head>
<body>      
    <!-- 图片链接 超链接-->
    <img src="https://blogdx.com/favicon.ico"> <a href="https://blogdx.com/index.php/archives/10/">关于</a> > 说明
    <h1>首页</h1>
    <hr>我希望我的希望有希望<hr>  <!-- hr为水平线 -->
    <span>光 会到来的</span>


    <!-- 外部链接 -->
    <a href="https://baidu.com">百度</a> <br>

    <!-- 内部链接 -->
    <a href="index.html">首页</a> <br>

    <!-- 空链接 -->
    <a href="#">首页</a> <br>

    <!-- 下载链接 -->
    <a href="文件的外链">下载</a> <br>
    
    <!-- 锚点链接 -->
     <a href="#jingli"><h1>个人经历</h1></a>

     在离开德国总理这一位置前的最后一段时间，默克尔曾在一次采访中公开表示支持德国和欧盟与中国展开合作，并称与中国完全脱钩是错误的，因为这将对德国和欧洲造成伤害。默克尔的这番表态让外界认为她在卸任后将继续关注中国和中德合作，而这种猜想并不算错，毕竟她早就重视起了自己卸任后德国的对华政策这一议题。据了解，在朔尔茨正式从默克尔手里接过“接力棒”成为德国新一任总理当天，有德媒爆料称，朔尔茨在此之前已向中方传话，表示他将延续默克尔的对华务实政策。报道还提到，朔尔茨已提前与默克尔讨论过对华政策。而据一位内部人士透露，默克尔当时对德国未来的中国政策表示担忧。

彼时即将卸任的默克尔到了任期的最后一段时间也始终记挂着中国，这凸显了她对中德关系的重视，也表明了中德关系对德国来说极其重要。而值得一提的是，就在前不久，默克尔还在中方就乌克兰危机宣布一个重要决定后作出了特殊表态。众所周知，4月下旬，中方宣布将派欧亚事务特别代表赴乌克兰等国展开访问，就政治解决乌克兰危机同各方进行沟通，这也是中方为外交调解乌克兰危机迈出重要一步，而就在中方宣布这一决定后不久，卸任后鲜少就时政议题表态的默克尔便在一次采访就乌克兰危机表态称，外交调解现在也仍然是“必需的”，但令她非常失望的是，有相当多的人对这种做法不感兴趣。


     <h1 id="jingli">经历</h1>


</body>
</html>

HTML排版标签

属性说明
audio video音频 视频标签
br换行标签
p段落
b or strong文本加粗标签
em斜体
css样式css说明
line-height设置行高
text-indent定义第一个内容的缩进
margin-left设置元素左侧边缘与其容器边缘之间的空白区域大小
<!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>
</head>
<style>
    p{
        text-indent: 20px; /* 首行缩进20个像素*/
        line-height: 35px; /* 设置行高35个像素*/
    }
</style>

<style>
    #name{
        margin-left: 1300px; /* 设置元素左侧边缘与其容器边缘之间的空白区域大小。*/
    }
</style>
<body>
    
    <p> <strong>青春的梦想</strong> </p>

    <p>老师和各位同学们：</p>

    <p><b>大家好！</b> 今天我演讲的主题是“青春的梦想”。</p>

    <p><b>青春</b> 是积极向上的、是充满活力的，它是个朝气蓬勃的字眼。在这段宝贵的时光中，我们总能给自己留下值得回味的记忆。<br> 但在这美好的似水年华中，有的人却在黑暗中沉沦，迷失了方向。所以，在这个时候，树立一个正确的目标、拥有一个好的梦想显得尤为重要。那么，什么是梦想？
    </p>

    <p>
        百度百科上写道，梦想，是对未来的一种期望，只在现在想未来的事或是可以达到但必须努力才可以达到的情况，梦想就是一种让你感到坚持就是幸福的东西，<br> 甚至其可以视为一种信仰。论坛上，网友也众说纷纭。有的人说，梦想就是挂在嘴前面的肉，想吃却吃不到，但总能激励着人前进。也有的人说，能让你跪着走完也心甘情愿的路叫梦想。<br> 还有的人说，梦想，是欲望的遮羞布，幻想的借口集，盲目的温床，矫情的天堂。其实，就我而言，梦想并没有那么复杂，就像马云马大大说的那样，所谓梦想，就是做梦都想嘛。
    </p>

  <p>纵观现实，<em> 有许多</em>坚持梦想获得成功的例子值得我们去品味。</p>

    <p>流行乐坛天后玛利亚•凯莉年幼时因为家庭的贫困以及血统的原因，一直备受歧视。在母亲的影响下，迷恋上了音乐。好不容易通过努力，消除了别人的偏见，在乐坛上收获颇丰、<br> 事业蒸蒸日上，她所签约的哥伦比亚唱片公司又和她分道扬镳，终止了与她的合作。那时的她备受争议，但仍坚持着自己的梦想。两年后，她凭借着新专辑重回乐坛巅峰。<br> 在人生的低谷期，她坚持着自己的梦想，终于，让逆境成为了自己的进身之阶。
    </p>

    <p>每个人都有属于自己的梦想清单。林语堂说：“梦想无论怎样模糊，总潜伏在我们的心底，使我们的心境永远得不到宁静，直到这些梦想成为事实才止；像种子埋在地底下一样，<br> 一定要萌芽滋长，伸出地面来，寻找阳光。”面对梦想，有的人选择等待，有的人选择拼搏、奋斗，然而，我们需要知道的是，实现梦想的方法永远只有一个：行动。只有养成勤奋、刻苦的习惯，<br> 梦想才不会缥缈，梦想变成现实才不是奢望。如果说，螳臂当车是个笑话，那凭什么夸父逐日、精卫填海、愚公移山就能成为流传千古的神话？所以，即使你是普通人，也不必抱怨、<br> 哀叹自己当下的平凡，只要坚持梦想，不断地努力，你总归会离梦想越来越近，一切总能够被改变！</p>

    <p id="name">姓名: XXX </p>
    <!-- 插入一个视频 -->
       <video src="https://alimov2.a.kwimgs.com/upic/2022/01/04/12/BMjAyMjAxMDQxMjEzNTFfMTA5MzA2MTY5NF82NDE5ODQ4MjY2Ml8wXzM=_b_Bc39dc2715e0f650c92a94c2981a5ce8a.mp4" controls></video>
</body>
</html>

HTML列表标签

属性说明
ul无序列表
ol有序列表
dl定义列表
>大于号
<小于号
 空格
©版权符号
<!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>
</head>
<style>
    h2{
        color: blue;
    }
</style>
<body>
    <h1>列表</h1>
    <h2>无序列表</h2>
    <!-- 无序列表 -->
    <ul>
        <li>饮料</li>
            <ul>
                <li>可口可乐</li>
                <li>雪碧</li>
                <li>芬达</li>
            </ul>
        <li>面包</li>
            <ul>
                <li>红豆面包</li>
                <li>软面包</li>
                <li>长面包</li>
            </ul>
        <li>辣条</li>

    </ul>

    <h2>有序列表</h2>
    <!-- 有序列表  可以使用li*4 生成4个--> 
    <ol>
        <li>JAVA</li>
        <ol>
            <li> 面向对象</li>
            <li>接口 </li>
        </ol>


        <li>HTML</li>
        <li>Python</li>
        <li>Mysql</li>
    </ol>

    <h2 >定义列表</h2>
    <dl>
        <dt>水果</dt>
        <dd>香蕉</dd>
        <dd>苹果</dd>

        <!-- dt声明列表项 -->
        <dt>蔬菜</dt>
        <dd>西红柿</dd>
        <dd>黄瓜</dd>
    </dl>

</body>
</html>

HTML表格标签

属性说明
border边框
width宽度
height高度
tr行标签
th表头标签
td单元标签
align设置单元格对齐方式
cellspacing表格间距
colspan跨行
rowspan跨列
<!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>
</head>

<style>
    #id01{
        
        /* 给表格设置一个边框为实线 */
        border: 1px solid; 

        /* 表格的内容为居中 */
        text-align: center; 

        /* 表格的宽度为200 高度为200 */
        width: 200px;
        height: 200px;

        /* 当设置为collapse时，表格边框会合并为单一的实心边框，相邻单元格的边框会合并为一个边框线，从而呈现出整体的表格效果。 */
        border-collapse: collapse;
    }
    th,td{
        border: 1px solid;
    }
</style>
<body>
    <table id="id01">
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
        </tr>

        <tr>
            <td>张三</td>
            <td>男</td>
            <td>16</td>
        </tr>

        <tr>
            <td>李四</td>
            <td>男</td>
            <td>17</td>
        </tr>

        <tr>
            <td>王五</td>
            <td>男</td>
            <td>18</td>
        </tr>
    </table>
</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>
</head>
<body>
    <!-- 
         border: 设置边框
         width: 设置宽度
         height: 设置高度

         tr:  行标签
         th: 表头标签
         td: 单元标签
         align: 设置单元格对齐方式
         center: 居中
         left: 左
         right: 右
         cellspacing: 表格间距 0是没有
     -->
    <table align="center" border="1" width="250px" height="250px" cellspacing="0" >
        <tr> 
            <th>1.1</th>
            <td>1.2</td>
            <td>1.3</td>
        </tr>

        <tr>
            <th>2.1</th>
            <td>2.2</td>
            <td>2.3</td>
        </tr>
    </table>


    <!-- 
        colspan: 跨行
        rowspan: 跨列
     -->
    <table width="200px" height="200px" cellspacing="0"  border="1">
        <tr>    
            <th colspan="2">1.1</th>
            <th>1.3</th>
            <th>1.4</th>
        </tr>

        <tr>
            <th rowspan="2">2.1</th>
            <th>2.2</th>
            <th>2.3</th>
            <th>2.4</th>
        </tr>

        <tr>
            <th>3.2</th>
            <th>3.3</th>
            <th>3.4</th>
        </tr>
        <tr>
            <th>4.1</th>
            <th>4.2</th>
            <th>4.3</th>
            <th colspan="2" rowspan="2">4.4</th>
        </tr>
        <tr>
            <th>5.1</th>
            <th>5.2</th>
            <th>5.3</th>
        </tr>
    </table>
    
</body>
</html>

HTML表单标签

属性说明
form表单标签
action设置提交的服务器地址
method设置提交的方式get或者post
input输入选项 可以通过type来定义
select下拉列表
textarea文本域
<!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>
</head>
<body>
    <!-- div是一个盒子 -->
    <div align="center">
        <!-- 
            <input type="text" : 文本输入框 value设置默认显示的内容
            <input type="password" : 密码输入框 
            <input type="radio" : 单选框  name ： 可以对其分组 例如性别有两个 用name可以对性别进行分组 chcked : 默认选中
            <input type="checkbox" : 复选框
            <select> : 下拉列表框  
            option : 下拉列表框中的选项 selected : 设置默认选中
            textarea : 多行文本输入框
                rows : 属性设置可以显示几行的高度
                cols : 属性设置每行可以显示几个字符宽度
                       默认值为内容
            
            input type="reset" : 重置按钮
            input type="submit" : 提交按钮
            input type="button" : 按钮
            input type="file" : 文件上传域
            input type="hidden" 隐藏域
         -->
         <form>
         <h1>表单标签</h1>
        用户名: <input type="text" value="请输入用户名"><br>
        密码:  <input type="password"> <br>
        性别: <label><input type="radio" name="sex" checked="true" >男</label>     <label><input type="radio" name="sex">女</label><br>
        兴趣: <input type="checkbox" >JAVA <input type="checkbox">HTMl <input type="checkbox">Python <br>
        国籍: <select>
            <option>-- 请选择国籍 --</option>
            <option selected="true" >中国</option>
            <option>洛杉矶</option>
            <option>日本</option>
        </select> <br>
        自我评价: <textarea cols="30" rows="10">默认值</textarea><br>
        <input type="reset" value="重置">
        <input type="submit" value="提交表单"><br>
        <input type="button" value="按钮">
        <input type="file" value="文件">
        <input type="hidden" value="隐藏域">
        </form>
    </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>HTML-表单项标签</title>
</head>
<body>

<!-- value: 表单项提交的值 -->
<form action="" method="get ">
     姓名: <input type="text" name="name"> <br><br>
     密码: <input type="password" name="password"> <br><br> 
     性别: <input type="radio" name="gender" value="1"> 男
          <label><input type="radio" name="gender" value="2"> 女 </label> <br><br>
     爱好: <label><input type="checkbox" name="hobby" value="java"> java </label>
          <label><input type="checkbox" name="hobby" value="game"> game </label>
          <label><input type="checkbox" name="hobby" value="sing"> sing </label> <br><br>
     图像: <input type="file" name="image">  <br><br>
     生日: <input type="date" name="birthday"> <br><br>
     时间: <input type="time" name="time"> <br><br>    
     日期时间: <input type="datetime-local" name="datetime"> <br><br>
     邮箱: <input type="email" name="email"> <br><br>
     年龄: <input type="number" name="age"> <br><br>
     学历: <select name="degree">
               <option value="">----------- 请选择 -----------</option>
               <option value="1">大专</option>
               <option value="2">本科</option>
               <option value="3">硕士</option>
               <option value="4">博士</option>
          </select>  <br><br>
     描述: <textarea name="description" cols="30" rows="10"></textarea>  <br><br>
     <input type="hidden" name="id" value="1">

     <!-- 表单常见按钮 -->
     <input type="button" value="按钮">
     <input type="reset" value="重置"> 
     <input type="submit" value="提交">   
     <br>
</form>

</body>
</html>

HTMl表单格式化

大概原理就是form里面套table标签（表单套表格）

注意：表单提交的时候数据没有发送给服务器的三种情况

  1. 表单项没有name属性值
  2. 单选、复选(下拉列表中的option标签)都需要添加value属性才能发送给服务器 没有就不发送
  3. 表单项不在form里面不会发送给服务器

Get 请求的特点是：

  1. 浏览器地址栏中的地址是 action属性+?+请求参数
  2. 请求参数的格式是name+value
  3. 不安全 有长度限制

 Post 请求的特点是：

  1. 浏览器地址栏中只有action属性值
  2. 相对于get比较安全
  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>
</head>
<body>
    <!-- div是一个盒子 -->
    <div align="center">
        <!-- 
            <input type="text" : 文本输入框 value设置默认显示的内容
            <input type="password" : 密码输入框 
            <input type="radio" : 单选框  name ： 可以对其分组 例如性别有两个 用name可以对性别进行分组 chcked : 默认选中
            <input type="checkbox" : 复选框
            <select> : 下拉列表框  
            option : 下拉列表框中的选项 selected : 设置默认选中
            textarea : 多行文本输入框
                rows : 属性设置可以显示几行的高度
                cols : 属性设置每行可以显示几个字符宽度
                       默认值为内容
            
            input type="reset" : 重置按钮
            input type="submit" : 提交按钮
            input type="button" : 按钮
            input type="file" : 文件上传域
            input type="hidden" 隐藏域
         -->
         <form>
            <table>
                <h1>表单标签-用户注册</h1>
                <tr>
                    <td>用户名: </td>
                    <!-- maxlength 最多输入几个字符 -->
                    <td><input type="text" value="请输入用户名" maxlength="6"></td>
                </tr>
                <tr>
                    <td>密码: </td>
                    <td><input type="password"> </td>
                </tr>
                <tr>
                    <td>性别:</td>
                    <td><label><input type="radio" name="sex" checked="true" >男</label>     <label><input type="radio" name="sex">女</label></td>
                </tr>
                <tr>
                    <td>兴趣:</td>
                    <td><input type="checkbox" >JAVA <input type="checkbox">HTMl <input type="checkbox">Python</td>
                </tr>
                <tr>
                    <td>国籍:</td>
                    <td><select>
                        <option>-- 请选择国籍 --</option>
                        <option selected="true" >中国</option>
                        <option>洛杉矶</option>
                        <option>日本</option>
                    </select> </td>
                </tr>
                <tr>
                    <td>自我评价: </td>
                    <td><textarea cols="30" rows="10">默认值</textarea></td>
                </tr>
                <tr>
                    <td><input type="reset" value="重置"></td>
                    <td align="right" ><input type="submit" value="提交表单"></td>
                    <tr>
                        <td><input type="button" value="按钮"></td>
                        <!-- <td align="right"><input type="file" value="文件"></td> -->
                        <td ><input type="hidden" value="隐藏域"></td>
                    </tr>
                </tr>
            </table>
        </form>
    </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>百度</title>
</head>
<style>

    .left {
    position: absolute;
    top: 20px;
    left: 10px;
  }

    .right {
    position: absolute;
    top: 20px;
    right: 10px;
    
  }

    a{
        text-decoration: none;
        margin-right: 24px;
        margin-top: 19px;
        font-size: 13px;
        color: black;
    }

    /* logo 的位置 */
    .logo{
        display: block;
        margin: auto;
        width: auto;
        height: 100px;
        min-height: 200px;
        max-height: 310px;
        position: relative;
        z-index: 0;
        text-align: center;
    }

    /* 搜索框位置 */
    #query {
    width: 512px;
    height: 16px;
    padding: 12px 16px;
    font-size: 16px;
    margin: 0;
    vertical-align: top;
    outline: 0;
    box-shadow: none;
    border-radius: 10px 0 0 10px;
    border: 2px solid #c4c7ce;
    background: #fff;
    color: #222;
    overflow: hidden;
    box-sizing: content-box;
    -webkit-tap-highlight-color: transparent;
    margin: 0 auto;
    display: flex;
    justify-content: center;

    }
    
    /* 百度一下的位置 */
    #s_btn {
    cursor: pointer;
    width: 108px;
    height: 44px;
    line-height: 45px;
    line-height: 44px\9;
    padding: 0;
    background: 0 0;
    background-color: #4e6ef2;
    border-radius: 0 10px 10px 0;
    font-size: 17px;
    color: #fff;
    box-shadow: none;
    font-weight: 400;
    border: none;
    outline: 0;
} 

</style>
<body>
    <div class="left">
        <a href="https://news.baidu.com/">新闻</a>
        <a href="https://www.hao123.com/?src=from_pc_logon">hao123</a>
        <a href="https://map.baidu.com/">地图</a>
        <a href="https://tieba.baidu.com/">贴吧</a>
        <a href="https://haokan.baidu.com/">视频</a>
        <a href="https://image.baidu.com/">图片</a>
        <a href="https://pan.baidu.com/">网盘</a>
        <a href="https://blogdx.com">My Blog</a>
    </div>

  
    <img class="logo" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="" >

    <form action="https://www.baidu.com/s" method="get" style="display: flex;">
        <input type="text" id="query" name="wd" style="width: 80%;">
        <input id="s_btn" type="submit" value="百度一下"style="width: 20%;">
    </form>

    <div class="right">
        <!-- 这里调用的是一言 -->
        <script type="text/javascript" src="https://apis.jxcxin.cn/api/yiyan?type=js"></script>
        <script>apistore()</script>
    </div>
    <!-- 这里调用的是音乐播放器 -->
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<div id="music" key="63b94e1767cd6" api="https://music.xfyun.club"></div><script id="xplayer" src="https://player.xfyun.club/Static/player9/js/player.js" ></script>
</body>
</html>

调用网易云音乐api搜歌案例

<!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>
    <!-- http://music.163.com/song/media/outer/url?id=????.mp3 -->
    <div align="center">
        <h1>网易云搜索</h1>
        <form action="https://music.163.com/outchain/player" method="get" target="_self">
            <table>
                <tr>
                    <td>请输入网易歌曲ID:</td>
                    <td><input type="hidden" name="type" value="2"></td>
                    <td> <input type="text" name="id"></td>
                    <td> <input type="submit" value="搜索"></td>
                </tr>
            </table>
        </form>
    </div>
</body>
</html>

QQ音乐刷听歌时长案例

    <!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>QQ音乐刷听歌时长</title>
</head>
<body>
    <div align="center">
        <form action="https://fkapi.rjk66.cn/qqsc/qqsc.php?uin=" method="get">
            <table>
                <h1>QQ刷听歌时长</h1>
                <tr>
                    <td>请输入QQ:</td>
                    <td><input type="hidden"></td>
                    <td> <input type="text" name="uin"></td>
                    <td><input type="submit"></td>
                </tr>
            </table>
        </form>
    </div>
</body>
</html>

CSS

CSS是一种用于控制网页外观和样式的标记语言，它与HTML配合使用，提供了丰富的样式选项，以改善网页的可读性、布局和视觉吸引力。

CSS选择器

属性说明
元素名称 {
color:red
}		元素选择器
#id属性值 {
color: red
}		id选择器
.class属性值{
color:red
}		类选择器
<!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>Demo 测试</title>
    <!-- 引用css -->
    <!-- <link rel="stylesheet" href="/css/logo.css"> -->
    
    
    <!-- 内嵌css -->
    <style>
        /* id选择器 */
        #hh{
            color: red;
        }

        /* class选择器 */
        .cls{
            color: blue;
        }

        /* 组合选择器 */
        #id01,.cls1{
            color: red;
            font-size: 20px;
        }
    </style>
</head>
<body>      
    <img src="https://blogdx.com/favicon.ico"> <a href="https://blogdx.com/index.php/archives/10/">关于</a> > <a href="https://blogdx.com/index.php/lyb.html" target="_self">留言版</a> 
    <h1 id="hh">首页</h1>   
    <hr>我希望我的希望有希望<hr>   <!-- hr为水平线 -->
    <span class="cls1">疯狂的星期五</span> <br>
    <span id="id01">今天是周五</span>
    <span class="cls"> 光 会到来的</span>
</body>
</html>

盒子模型

用来描述和布局HTML元素的一种模型。它将每个元素表示为一个矩形的盒子

这个盒子包含了元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）。这些部分构成了盒子模型的四个主要组成部分。

  1. 内容（Content）：这是盒子模型的内部部分，包含元素的实际内容，例如文本、图像或其他嵌套元素。
  2. 内边距（Padding）：内边距是围绕内容的空白区域，位于内容和边框之间。它可以用来控制内容与边框之间的间距。
  3. 边框（Border）：边框是包围内容和内边距的线条或样式，用于可视化区分元素的边界。边框具有宽度、样式和颜色等属性。
  4. 外边距（Margin）：外边距是盒子模型的外部部分，是元素与其他元素之间的空白区域。它可以用来控制元素与其他元素之间的间距。
<!DOCTYPE html>
<html>
<head>
  <style>
    .box {
      width: 200px; /*宽度*/
      height: 200px; /*高度*/
      border: 2px solid black; /*边框*/
      padding: 100px; /*内边距*/
      margin: 100px; /*外边距*/
    }
  </style>
</head>
<body>
  <div class="box">
    这是一个盒子模型示例。
  </div>
</body>
</html>

JS

JS是JavaScript的简称，是一种广泛用于Web前端开发的脚本语言。它可以在网页上实现动态效果和交互功能，并与HTML和CSS一起构成了草原三剑客。

JS数据类型

属性说明
number数字
string字符
boolean布尔
null对象为空
undefined变量没有初始化的时候 默认是这个
<!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>
    <script>
        // 打印类型
        alert(typeof 3) // number
        alert(typeof 3.14) //number


        alert(typeof "A") //string
        alert(typeof "Hello") //string

        alert(true)  //布尔 true
        alert(false) //布尔 false

        alert(typeof null) //object类型

        var a;
        alert(typeof a) //undefined
      
      
      
        // var 定义变量的格式 而 变量a 可以改变为数字或者字符
        var a = "Hello World";
        a = 123
        alert(a)

        // const 定义常量的格式 定义后值不可变
        const da = 123;

        {
            // let 定义局部变量 在外面不可访问  变量a1 不可重复使用
            let a1 = 12;
        }

        alert(a1)
    </script>
</body>
</html>

运算符

运算符大部分和java的运算符一样 个别的运算符如下

属性说明
==(会进行类型转换)等于
===(不换进行类型转换)全等于
<!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>
</head>
<body>
    <script>
        var a = 10;

        alert(a == "10") //true
        alert(a === "10") //false
        alert(a === 10) //true

        alert(parseInt("12")) //12
        alert(parseInt("12A45")) //12
        alert(parseInt("A23")) //NaN


        if(0){ // false
            alert("false")
        }

        if(NaN)( // false
            alert("false")
        )

        if(-1){ // true
            alert("除了0和NaN 其他的都是true")
        }

        if("") { // false
            alert("空字符串是false 空格是true")
        }

        if(null){ // false
            alert("null为false")
        }
        if(undefined){ // false
            alert("undefined为false")
        }
    </script>
</body>
</html>

函数

JS中的函数跟Java中的方法差不多

<!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>
</head>
<body>
    <script>
        
        var result = add(10,20)
        function add(a,b){
            return a+b
        }
        alert(result) //30


        show(10,30)
        function show(a,b){
            alert(a+b) //40
        }

    </script>
</body>
</html>

数组

属性说明
Foreach()遍历数组所有的有值元素并传入函数中
splice()删除元素
Push()在末尾添加值
<!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>
</head>
<body>
   <script>
       var arr = [1,2,3,4,5]    

       arr[10] = 10
       // 遍历数组
       for (let index = 0; index < arr.length; index++) {
           console.log(arr[index]); // 12345 undefined
       }


       arr.forEach(element => {
           console.log(element); //12345 10
       });
       
       arr.push(6,7,8,9)
       console.log(arr); //[1, 2, 3, 4, 5, 6, 7, 8, 9]

       arr.splice(1,1) // 把2删除
       console.log(arr);

   </script>
</body>
</html>

String字符串

<!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>
</head>
<body>
    <script>
        var str = " Hello World "
        
        //length
        console.log(str.length); //长度为11

        //charAt
        console.log(str.charAt(5)); //从0开始 获取索引5为o 空格占位1
        
        //indexOf
        console.log(str.indexOf("lo")); //获取lo对应的索引为4

        //去除空格
        var str1 = str.trim()
        console.log(str1);
        
        //substring 截取字符串
        var s = str1.substring(0,4)
        console.log(s); //hell 
        
    </script>
</body>
</html>

JSON

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

<body>
    <script>
        //自定义对象
        var user = {
            name: "Tom",
            age: 18,
            gender: "male",
            eat() {
                alert("吃东西")
            }
        }

        alert(user.name) //Tom
        user.eat() //吃东西



        // json
        var jsonstr = {
            "name": "Jary",
            "age": 17,
            "addr": ["北京", "上海", "江苏", "河北"]
        }
        alert(jsonstr.addr[0]) //北京


        var json1 = '{"name":"zhangsan","age":20}'
        //alert(json1.name) //undefined
    
        //json字符串转换为js对象
        var jsObject = JSON.parse(json1)
        
        alert(jsObject.name) //zhangsan
        alert(jsObject.age) // 20

        //js对象转换为json字符串
        var jsonStr = JSON.stringify(jsObject)
        alert(jsonStr) //{"name":"zhangsan","age":20}

    </script>
</body>

</html>

BOM

BOM是JavaScript中的浏览器对象模型（Browser Object Model）。它允许JavaScript与浏览器互动，包括操作浏览器窗口、文档和其他元素。BOM包括一组对象，如window、navigator、screen、location和history等，可以通过JavaScript来访问和操作它们。

<!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>
</head>
<body>
    <script>
        window.alert("Hello Bom")

        // //confirm 对话框 确认为true 取消为false
        var flag = confirm("确定要删除该记录吗")

        if(flag){
            window.alert("删除成功")
        }else{
            window.alert("取消成功")
        }

        // //setInterval定时器 周期性的执行某个函数
        var i = 0
        setInterval(function(){
            i++;
            alert("定时器执行了"+i+"次")
        },2000) //每隔两秒执行一次


        // //setTimeout 延迟指定时间执行一次
        setTimeout(function(){
            alert("执行了一次")
        },2000) //两秒内只会执行一次

        //location 跳转到指定URl
        location.href = "https:blogdx.com"

    </script>
</body>
</html>

DOM

JavaScript 中的 DOM（文档对象模型）是一个表示网页文档结构的编程接口。它将网页文档表示为一个树状结构，其中每个节点都代表文档中的元素、属性或文本。通过使用 DOM，我们可以使用 JavaScript 来操作和修改网页的内容、样式和行为。

<!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>JS-Dom</title>
</head>
<body>
    <p id="p">一个段落而已</p>
    <div class="cls">第一个盒子而已</div> <br>
    <div class="cls">第二个盒子而已</div> <br>

    <input type="checkbox" name="hobby">电影
    <input type="checkbox" name="hobby">旅游
    <input type="checkbox" name="hobby">游戏

      
</body>
<!-- js代码 -->
<script>

    // 1.获取Element元素
    // 1.1 根据id获取元素
    var id = document.getElementById('p')
    alert(id)  //[object HTMLParagraphElement]

    // 1.2 通过标签获取元素  返回一个数组
    var divs = document.getElementsByTagName('div') 
    for (let i = 0; i < divs.length; i++) {
        console.log(divs[i])  //[object HTMLDivElement]
    }

    // 1.3 通过class属性获取 返回一个数组
    var divs = document.getElementsByClassName('cls')
    for (let i = 0; i < divs.length; i++) {
        console.log(divs[i]) //[object HTMLDivElement]
    }

    // 1.4 获取name属性  返回一个数组
    var names = document.getElementsByName('hobby')
    for (let i = 0; i < names.length; i++) {
       alert(names[i]) //[object HTMLParagraphElement]
        
    }
    
    //查询手册w3chool.com 实现一些功能

</script>
</html>

DOM案例

<!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>Deom Test</title>
</head>
<body>
    <img id="img" src="img/off.gif">
    <div class="cls" >我是第一个div</div>
    <div class="cls" >我是第二个div</div>

    <input type="checkbox" name = "hobby">打游戏
    <input type="checkbox" name = "hobby">看电视
    <input type="checkbox" name = "hobby">听歌

</body>
<script>
    
    // 1，点亮灯泡 
    var img = document.getElementById('img')
    // img.src = "img/on.gif"
 
    // 2.在div后面加一句话是红色字体  下面也可以使用for遍历实现
    var dev1 = document.getElementsByClassName('cls')
    dev1[0].innerHTML += '\t'+ "<font color = 'red'>Hello World</font>"
    dev1[1].innerHTML += '\t'+ "<font color = 'red'>哈哈 World</font>"


    // 3.所有的复选框呈现选中状态
    var hobby = document.getElementsByName('hobby')
    for (let i = 0; i < hobby.length; i++) {
        const check = hobby[i]
        check.checked = true //默认勾选
    }

</script>
</html>

JS事件监听

事件：HTML事件是发生在HTML元素上的事情 按钮被点击、鼠标移动到元素 等等

事件监听：JavaScript可以在事件被侦测到时 执行代码

通过HTML标签的事件进行绑定

    <input type="button" onclick="on()" value="按钮" >
    <script>
        function on(){
            alert('我被点击了')
        }
    </script>

通过DOM元素属性绑定

    <input type="button"  id="btn" value="按钮" >
    <script>
        document.getElementById('btn').onclick=function(){
            alert('我被点击了')
        }
    </script>
事件名说明
onclick鼠标点击事件
onblur元素失去焦点
onfocus元素获得焦点
onload某个页面或图像被完成加载
onsubmit当表单提交时触发该事件
onkeydown某个键盘的键被按下
onmouseover鼠标被移到某元素上
onmouseout鼠标从某元素移开
<!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 onload="load()">
    <form action="" style="text-align: center;" onsubmit="subfn()" >
    <input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
    <input id="b1" type="submit" value="提交">
    <input id="b1" type="button" value="单击事件" onclick="fn1()">
    </form>

    <br><br><br>

    <table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
         <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>分数</th>
            <th>评语</th>
         </tr>
         <tr align="center">
            <td>001</td>
            <td>张三</td>
            <td>90</td>
            <td>很优秀</td>
         </tr>

         <tr align="center">
            <td>002</td>
            <td>李四</td>
            <td>85.8</td>
            <td>良好</td>
         </tr>

         <tr align="center">
            <td>003</td>
            <td>王五</td>
            <td>92.5</td>
            <td>很优秀</td>
         </tr>

         <tr align="center">
            <td>004</td>
            <td>赵六</td>
            <td>70.6</td>
            <td>良好</td>
         </tr>
    </table>    
</body>
<script>
    function load(){
        console.log("页面加载完成");
    }

    function fn1(){
        console.log("被单击了");
    }

    function bfn(){
        console.log("失去焦点..")
    }

    function ffn(){
        console.log("获得焦点")
    }
    function kfn(){
        console.log("键盘被按下了");
    }

    function over(){
        console.log("鼠标移入了");
    }

    function out(){
        console.log("鼠标移出了");
    }
    
    function subfn(){
        alert("提交表单");
    }

</script>
</html>
最后修改：2023 年 06 月 04 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏