前端三件套(HTML + CSS + JS)

农民  金牌会员 | 昨天 05:34 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 881|帖子 881|积分 2643

前言：

前端三件套，会用就行
究竟在背面学习JavaWeb，以及在学习vue的时候也有资助
前端三件套：


  • HTML 界说网页的布局和内容。
  • CSS 负责网页的样式和布局。
  • JavaScript 添加动态交互和功能。
使用到的工具是Visual Studio Code 即VSCode
下载地址：Download Visual Studio Code - Mac, Linux, Windows
下载安装后，使用到的插件：
1.场景变为简体中文：

2.主动补全、智能提示和语法高亮，有助于进步开发的服从

3.页面的预览

留意：


  • 想要在编写时，页面跟着标签的修改而实时变革，请打开主动生存
  • 点击左上角的三条杠，找到文件，点击主动生存
4.在修改指标签时，修改前面的，背面的也会相应变革


一、HTML

1. HTML（超文本标记语言）

作用：
HTML 是网页的布局语言，用于创建和构造网页内容。它通过标记（tags）来界说不同的元素，如标题、段落、链接、图像等。
特点：


  • 布局化内容： 使用标签（如 <h1>, <p>, <a>）来构造信息。
  • 无表现性： HTML 关注内容的布局，而不涉及样式或行为。
  • 可扩展性： 支持多种元素和属性，可以嵌套和组合。
2.常用标签的练习

1. 基本布局标签



  • <html>: 界说HTML文档的根元素。
  • <head>: 包含文档的元数据（例如标题、样式、脚本等）。
  • <title>: 界说文档的标题，通常显示在浏览器的标题栏。
  • <body>: 界说文档的主体，包含可见内容。
2. 文本格式化标签



  • <h1>到<h6>: 界说标题，<h1>为最大标题，<h6>为最小标题。
  • <p>: 界说段落。
  • <br>: 插入换行符。
  • <strong>: 使文本加粗，表示紧张性。
  • <i>: 使文本倾斜，表示强调。
  • <u>: 下划线文本。
3. 列表标签



  • <ul>: 界说无序列表。
  • <ol>: 界说有序列表。
  • <li>: 列表项，用于<ul>和<ol>内。
在创建好的.html文件中输入！，再按Tab键，可主动生成一个模板

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>html的常用标签练习</title>
  8. </head>
  9. <body>
  10.     <h1>一级标题标签</h1>
  11.     <h2>二级标题标签</h2>
  12.     <h3>三级标题标签</h3>
  13.     <h4>四级标题标签</h4>
  14.     <h5>五级标题标签</h5>
  15.     <p>段落标签</p>
  16.     <p><b>字体加粗</b>、<u>下划线</u>、<s>删除线</s>、<i>斜体</i>
  17.     </p>
  19.     <ul>
  20.         <li>无序列表1</li>
  21.         <li>无序列表2</li>
  22.         <li>无序列表3</li>
  23.     </ul>
  25.     <ol>
  26.         <li>有序列表1</li>
  27.         <li>有序列表2</li>
  28.         <li>有序列表3</li>
  29.     </ol>
  31.    <table border ="1">
  32.     <tr>
  33.         <th>
  34.             列名   列属性  列方法
  35.         </th>
  36.         <th>
  37.             列名   列属性  列方法
  38.         </th>
  39.         <th>
  40.             列名   列属性  列方法
  41.         </th>
  42.     </tr>
  43.     <tr>
  44.         <td>
  45.             元素1  元素2   元素3
  46.         </td>
  47.         <td>
  48.             元素1  元素2   元素3
  49.         </td>
  50.         <td>
  51.             元素1  元素2   元素3
  52.         </td>
  53.     </tr>
  54.     <tr>
  55.         <td>
  56.             元素1  元素2   元素3
  57.         </td>
  58.         <td>
  59.             元素1  元素2   元素3
  60.         </td>
  61.         <td>
  62.             元素1  元素2   元素3
  63.         </td>
  64.     </tr>
  65.     <tr>
  66.         <td>
  67.             元素1  元素2   元素3
  68.         </td>
  69.         <td>
  70.             元素1  元素2   元素3
  71.         </td>
  72.         <td>
  73.             元素1  元素2   元素3
  74.         </td>
  75.     </tr>
  77.    </table>
  78. </body>
  79. </html>
复制代码
预览的页面：

3.html属性

1.链接和图像标签



  • <a>: 创建超链接，使用href属性指定链接目标。
  • <img>: 插入图像，使用src属性指定图像源，使用alt属性提供替代文本。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>html属性练习</title>
  7. </head>
  8. <body>
  9.     <a href="https://blog.csdn.net/m0_72047169?spm=1011.2648.3001.5343"这是编程的幸博客的超链接></a>
  10.     <br>
  11.     <a href="https://www.csdn.net/?spm=1001.2014.3001.4476"这是CSDN的官网></a>
  12.     <hr>
  13.     <img src="logo.jpg" alt="">
  14.     <br>
  15.     <img src="log.jpg" alt="图片无法显示">
  16.     <br>
  17.     <img src="https://ts1.cn.mm.bing.net/th/id/R-C.12434b90457d0de13ddc788b4c56d2cb?rik=aJrmglWgZGmaHg&riu=http%3a%2f%2fi1.hdslb.com%2fbfs%2farchive%2f78444bc11cf3d70560d425bc77173a7f601f0b84.jpg&ehk=lCKo5eR5Y8rUIB9LnWnSLUH3NOvrE8TGyDDUEo%2btzQw%3d&risl=&pid=ImgRaw&r=0" alt=""width="450"height="300">
  18. </body>
  19. </html>
复制代码
预览的页面：

4.html区块

 1.其他常用标签



  • <div>: 界说文档中的分区或块，用于布局。
  • <span>: 界说文档中的行内元素，用于样式。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>html区块练习</title>
  7. </head>
  8. <body>
  9.     <div class="nav">
  10.         <a href="a">链接1</a>
  11.         <a href="a">链接2</a>
  12.         <a href="a">链接3</a>
  13.         <a href="a">链接4</a>
  14.     </div>
  15.     <div class="content">
  16.         <h1>文章标题</h1>
  17.         <p>文章内容</p>
  18.         <p>文章内容</p>
  19.         <p>文章内容</p>
  20.         <p>文章内容</p>
  21.         <p>文章内容</p>
  22.     </div>
  23.     <span>这是第1个span标签</span>
  24.     <br>
  25.     <span>这是第2个span标签</span>
  26.     <br>
  27.     <span>这是第3个span标签</span>
  28.     <br>
  29.     <span>这是第4个span标签</span>
  30.     <hr>
  31.     <span>链接点击这里<a href="a">链接</a></span>
  32. </body>
  33. </html>
复制代码
预览的页面：

5.html表单

1. 表单标签



  • <form>: 界说表单，包含用户输入的区域。
  • <input>: 创建输入字段，type属性界说输入范例（如text、password、submit等）。
  • <label>: 为输入元素界说标签。
  • <textarea>: 创建多行文本输入区域。
  • <button>: 创建按钮。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>html表单练习</title>
  7. </head>
  8. <body>
  9.     <form action="">
  10.         <label for="username">用户名：</label>
  11.         <input type="text" id="username" placeholder="请输入用户名">
  12.         <br><br>
  13.         <label for="pwd">密码：</label>
  14.         <input type="password" id="pwd" placeholder="请输入密码">
  15.         <br><br>
  16.         <label >性别</label>
  17.         <input type="radio" name="gender">男
  18.         <input type="radio" name="gender">女
  19.         <input type="radio" name="gender">武装直升机
  20.         <br><br>
  21.         <label >爱好：</label>
  22.         <input type="checkbox" name="hobby">唱歌
  23.         <input type="checkbox" name="hobby">篮球
  24.         <input type="checkbox" name="hobby">rap
  25.         <input type="checkbox" name="hobby">篮球
  26.         <br><br>
  27.         <input type="submit">
  28.     </form>
  30.     <form action="#"></form>
  31. </body>
  32. </html>
复制代码
预览的页面：

二、CSS

1. CSS（层叠样式表）

作用：
CSS 用于控制网页的表面和布局。它允许开发者设置颜色、字体、间距、布局等样式，从而美化网页。
特点：


  • 样式分离： CSS 与 HTML 分离，增强了维护性和可重用性。
  • 响应式设计： 通过媒体查询，可以为不同装备设置不同样式。
  • 层叠性： 多个样式可以叠加应用，优先级可以通过选择器的特异性控制。
2.css样式

1. 内部样式
界说：内部样式是将CSS规则直接放在HTML文档的<head>部门，通过<style>标签订义。
2. 内联样式
界说：内联样式是将CSS规则直接添加到HTML元素的style属性中。
3. 外部样式
界说：外部样式是将CSS规则生存在独立的.css文件中，然后在HTML文档中通过<link>标签引入。
优先级：内联 > 内部 >外部
外部样式

内部样式和内联样式
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <link rel="stylesheet" href="css/style.css">
  9. <style>
  10.     p{
  11.         color: blue;
  12.         font-size: 16px;
  13.     }
  15.     h2{
  16.         color:chocolate;
  17.         font-size:20px;
  18.     }
  19. </style>
  20. <body>
  21.     <p>这是一个内部样式，优先级次</p>
  22.     <h1 style="color: red;">使用的是内联样式，优先级最高</h1>
  23.     <h3>使用的是外部样式，优先级最低</h3>
  25. </body>
  26. </html>
复制代码
预览的页面：

3.css选择器



  • 通用选择器（*）：选择所有元素。
  • 元素选择器（tag）：选择特定范例的元素。
  • 类选择器（.classname）：选择具有特定类的元素。
  • ID选择器（#idname）：选择具有特定ID的元素。
  • 属性选择器：根据元素的属性选择元素。
  • 伪类选择器：选择元素的特定状态。
  • 伪元素选择器：选择元素的一部门。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <style>
  9.     /* 元素选择器 */
  10.     h1{
  11.         color: red;
  12.     }
  13.     /* 类选择器 */
  14.     .header{
  15.         font-size: 20px;
  16.     }
  18.     /* id */
  19.     #big{
  20.         background-color: blue;
  21.     }
  23.     /* 通用选择器 */
  24.     *{
  25.         font-family: 'KaiTi';
  26.         font-weight: bolder;
  27.     }
  29.     /* 子类选择器 */
  30.     .father> .son{
  31.         color: aqua;
  32.     }
  34.     /* 后代选择器 */
  35.     .father p{
  36.         color:blueviolet;
  37.     }
  39.     /* 相邻选择器 */
  40.     h4 + p{
  41.         background-color: red;
  42.     }
  44.     /* 伪类选择器 */
  45.     #big1:hover{
  46.         background-color: mediumblue;
  47.     }
  49.     /* 伪元素选择器
  50.     ::after
  51.     ::before
  52.     */
  54.     /* 选择第一个子元素
  55.     :first-child
  56.     :nth-child()
  57.     :active
  58.    
  59.     */
  60. </style>
  61. <body>
  62.     <h1>这是一个元素选择器</h1>
  64.     <h2 class="header">这是一个类选择器</h2>
  66.     <h3 id="big">这一个id选择器</h3>
  68.     <div class="father">
  69.         <p class="son">
  70.             这是一个子类选择器
  71.         </p>
  72.         <div>
  73.             <p class="grandson">
  74.                 这一个后代选择器
  75.             </p>
  76.         </div>
  77.     </div>
  79.     <p>相邻，但位于上方</p>
  80.     <h4>这是一个相邻选择器，选中的是紧跟它之后的第一个标签</h4>
  81.     <p>相邻，紧跟在后面的</p>
  83.     <h2 id="big1">这是一个伪类选择器</h2>
  84. </body>
  85. </html>
复制代码
预览的页面：
这里伪类选择器的效果是，鼠标在上背景变紫色



4.css常用属性



  • 颜色与背景

    • color: 笔墨颜色。
    • background-color: 背景颜色。
    • background-image: 背景图像。

  • 文本

    • font-size: 字体大小。
    • font-family: 字体范例。
    • text-align: 文本对齐方式。

  • 边距与填充

    • margin: 外边距。
    • padding: 内边距。

  • 边框

    • border: 边框的宽度、样式和颜色。
    • border-radius: 圆角边框。

  • 尺寸与位置

    • width: 元素宽度。
    • height: 元素高度。
    • display: 元素的显示范例（如 block, inline, flex 等）。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>css常用属性</title>
  7. </head>
  8. <style>
  10.     /* 块元素可以进行长宽的调整 */
  11.     .block{
  12.         background-color:blue;
  13.     }
  15.     /* 行内元素则不行 */
  16.     .inline{
  17.         background-color: aqua;
  18.     }
  20.     /* 行内块元素有行内和块两个元素的特点 */
  21.     .inline-block{
  22.         width: 200px;
  23.         height: 200px;
  24.     }
  26.     /* 使用diplay进行相互的转换
  27.     .block{
  28.         display: inline-block;
  29.     }
  31.     .inline{
  32.         display: block;
  33.     }
  35.     .inline-block{
  36.         display: inline;
  37.     }
  38.     */
  39.    
  41. </style>
  42. <body>
  43.     <h2 style="color: red 50px 'KaiTi';">这是一个复合元素</h2>
  44.     <p style="line-height: 50px;">这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本这是一个长文本</p>
  46.     <div class="block">这是一个块元素</div>
  47.     <span class="inline">这是一个行内元素</span>
  48.     <img class="inline-block" src="logo.jpg" alt="">
  49.     <img class="inline-block" src="logo.jpg" alt="">
  50. </body>
  51. </html>
复制代码
预览的页面：

5.css盒子模子

盒子模子是CSS布局的基本概念，它描述了元素的布局，包括：


  • 内容区域：元素的实际内容（文本、图像等）。
  • 内边距（padding）：内容与边框之间的空间。
  • 边框（border）：包围内边距和内容的线。
  • 外边距（margin）：元素与其他元素之间的空间。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>css盒子模型</title>
  7. </head>
  8. <style>
  9.     .demo{
  10.         background-color: red;
  11.         width: 100px;
  12.         height: 100px;
  13.         border: 10px dashed blue;
  14.         padding: 20px;
  15.         margin: 30px;
  16.     }
  17.    
  19.     /* soild:实线 dashed:虚线 dotted：点线  double: 双线*/
  20.     /* padding 内边距 margin 外边距 */
  21.     .broder-demo{
  22.         background-color: aqua;
  23.         width: 100px;
  24.         height: 150px;
  25.         border-style: solid dashed dotted double;
  26.         border-color: brown red blue blueviolet;
  27.         border-width: 50px 10px 0 20px;
  28.         padding: 50px;
  29.         margin: 30px;
  30.     }
  33. </style>
  34. <body>
  35.     <div class="demo">这是一个盒子模型</div>
  36.     <div class="broder-demo">这是一个盒子模型的边框示例</div>
  37. </body>
  38. </html>
复制代码
预览的页面：

6.浮动

浮动（float）是CSS布局的一种方式，通常用于文本环绕和多列布局。使用浮动时，元素会向左或向右移动，其他元素会围绕它。使用浮动的常见方式：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>浮动</title>
  7. </head>
  8. <style>
  9.     .father{
  10.         background-color: blueviolet;
  11.         /* height: 100px; */
  12.         /* 高度没有了，出现坍塌 */
  13.         border: 5px red solid;
  14.         /* 使用overflow或者::after */
  15.         overflow: hidden;
  16.     }
  18.     /* .father::after{
  19.         content: "";
  20.         display: table;
  21.         clear: both;
  22.         这一段也可以消除没有给父元素，设置高度时，解决坍塌作用
  23.     } */
  25.     .left-son{
  26.         width: 100px;
  27.         height: 100px;
  28.         background-color: yellowgreen;
  29.         float: left;
  30.     }
  32.     .right-son{
  33.         width: 100px;
  34.         height: 100px;
  35.         background-color: brown;
  36.         float: right;
  37.     }
  38. </style>
  39. <body>
  40.     <div class="father">
  41.         <div class="left-son">
  42.             <p>左浮动</p>
  43.         </div>
  44.         <div class="right-son">
  45.             <p>右浮动</p>
  46.         </div>
  47.     </div>
  48.     <p>这是一段文本内容</p>
  49. </body>
  50. </html>
复制代码
预览的页面：

7.定位

定位用于控制元素在页面中的位置。常见的定位方式包括：


  • 静态定位（static）：默认值，元素按正常流分列。
  • 相对定位（relative）：相对于其原始位置举行定位。
  • 绝对定位（absolute）：相对于最近的已定位父元素（非静态）举行定位。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <style>
  9.     .box{
  10.         height: 300px;
  11.         background-color: yellow;
  12.     }
  14.     .box-normal{
  15.         width: 100px;
  16.         height: 100px;
  17.         background-color: blue;
  18.     }
  20.     .box-relative{
  21.         width: 100px;
  22.         height: 100px;
  23.         background-color: pink;
  24.         position:relative;
  25.         left:120px;
  26.         top:50px;
  27.     }
  30.     .box1{
  31.         height: 300px;
  32.         background-color: yellow;
  33.         margin-bottom: 100px;
  34.     }
  36.     .box-absolute{
  37.         width: 100px;
  38.         height: 100px;
  39.         background-color: pink;
  40.         position:absolute;
  41.         left:120px;
  42.     }
  44.     .box-fixed{
  45.         width: 100px;
  46.         height: 100px;
  47.         background-color: red;
  48.         position: fixed;
  49.         right: 0;
  50.         top: 300px;
  51.     }
  52. </style>
  53. <body>
  54.     <h1>相对定位</h1>
  55.     <div class="box">
  56.         <div class="box-normal"></div>
  57.         <div class="box-relative"></div>
  58.         <div class="box-normal"></div>
  59.     </div>
  61.     <h1>绝对定位</h1>
  62.     <div class="box1">
  63.         <div class="box-normal"></div>
  64.         <div class="box-absolute"></div>
  65.         <div class="box-normal"></div>
  66.     </div>
  68.     <h1>固定定位</h1>
  69.     <div class="box-fixed"></div>
  70. </body>
  71. </html>
复制代码
预览的页面：
绝对定位就是图中赤色方块

三、JS（JavaScript）

1. JavaScript

先搞懂：这个与java无关，但紧张！！！
JavaScript 的作用
其应用范畴包括但不限于JavaScript 在前端开发中扮演着紧张的角色


  • 客户端脚本:用于在用户浏览器中实行，实现动态效果和用户交互。
  • 网页开发:与HTML和 CSS 协同工作，使得网页具有更强的交互性和动态性。
  • 后端开发:使用Node.js，JavaScrip也可以在服务器端运行，实现服务器端应用的开发
特点：


  • 动态性： 可以在页面加载后动态更新内容。
  • 事件驱动： 可以响应用户操作（如点击、滚动等）。
  • 广泛应用： 可以与后端服务交互，实现复杂的应用逻辑。

2.JavaScript 导入

外部导入

内部导入
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>JS的导入方式</title>
  7.     <script>
  8.         console.log('Hello,head标签中内联样式');
  9.     </script>
  10.     <script src="./js/script.js"></script>
  11. </head>
  12. <body>
  13.     <h1>JavaScript的导入方式</h1>
  14.     <script>
  15.         console.log('Hello,body标签中内联样式');
  16.         alert('Hello,JS的导入方式');
  17.     </script>
  18. </body>
  19. </html>
复制代码
预览的页面：

3.JavaScript 语法

基本语法：
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>JS基本语法</title>
  7. </head>
  8. <body>
  9.     <script>
  10.         // var不常用
  11.         // let 整数，字符串  const 精度
  12.         var x;
  13.         let y = 3;
  14.         const p = 3.14
  15.         let name ="猪猪侠";
  16.         let empty_value = null;
  17.         console.log(x,y,p);
  18.         console.log(name);
  19.         console.log(empty_value);
  20.         
  21.         console.log('if语句');
  22.         //if条件
  23.         let time = 8
  24.         if (time < 12) {
  25.             console.log('早上好！');
  26.         }else if(time > 12 && time <14){
  27.             console.log('中午好！');
  28.         }else if(time > 14 && time < 18){
  29.             console.log('下午好！');
  30.         }else{
  31.             console.log('晚上好！');
  32.         }
  34.         console.log('switch语句');
  35.         let day = 1;
  36.         switch (day) {
  37.         case 1:
  38.              console.log("Monday");
  39.              break;
  40.         case 2:
  41.              console.log("Tuesday");
  42.              break;
  43.         default:
  44.              console.log("Another day");
  45.         }
  48.         console.log('for循环');
  49.         //for循环
  50.         for (let i = 0; i <= 10; i++) {
  51.             console.log(i);
  52.         }
  53.         
  55.         console.log('while循环');
  56.         //while循环
  57.         let count = 0;
  58.         while(count <= 10){
  59.             console.log(count);
  60.             count++;
  61.         }
  64.         console.log('do-while循环');
  65.         //do-while循环
  66.         let i = 0;
  67.         do {
  68.              console.log(i);
  69.              i++;
  70.         } while (i < 5);
  71.         
  72.         
  73.         console.log('嵌套');
  74.         //嵌套
  75.         for (let i = 0; i <= 10; i++) {
  76.             if(i==2){
  77.                 continue;
  78.             }
  79.             if (i==6) {
  80.                 break;
  81.             }
  82.             console.log(i);
  83.         }
  84.         
  85.     </script>
  86. </body>
  87. </html>
复制代码
预览的页面：

4.JavaScript 函数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>JS函数</title>
  7. </head>
  8. <body>
  9.     <script>
  10.         function name() {
  11.             console.log('孙悟空');
  12.         }
  13.         name();
  15.         function name1() {
  16.             return '返回->孙悟空！'
  17.         }
  18.         let a = name1();
  19.         console.log(a);
  20.         console.log(name1());
  22.         function name_with_params(name) {
  23.             console.log(name);
  24.         }
  26.         name_with_params('Alice');
  27.         name_with_params('Emma');
  29.         //作用域
  30.         let globar_var = '全局变量';
  31.         function local_var_function(){
  32.             let local_var = '局部变量';
  33.             console.log('打印全局变量：'+ globar_var);
  34.             console.log('打印全局变量：'+ local_var);
  35.         }
  37.         local_var_function();
  38.     </script>
  39. </body>
  40. </html>
复制代码
预览的页面：

5.JavaScript 事件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>JS事件</title>
  7. </head>
  8. <body>
  9.     <button onclick="click_event()">点击事件</button>
  10.     <input type="text" onfocus="focus_event()" onblur="blur_event()">
  11.     <script>
  12.         function click_event() {
  13.             alert('点击事件触发');
  14.         }
  16.         function focus_event() {
  17.             console.log('获取焦点');
  18.         }
  20.         function blur_event() {
  21.             console.log('失去焦点');
  22.         }
  23.     </script>
  24. </body>
  25. </html>
复制代码
预览的页面：

6.JavaScript DOM

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>JS DOM</title>
  7. </head>
  8. <body>
  9.     <div id="box1">ID选择器标签</div>
  10.     <div class="box2">类选择器标签</div>
  11.     <div>无选择器的div标签</div>
  12.     <button>点击按钮</button>
  14.     <script>
  15.         var element_id = document.getElementById('box1');
  16.         console.log(element_id);
  17.         
  18.         var element_class = document.getElementsByClassName('box2')[0];
  19.         console.log(element_class);
  20.         
  21.         var element_tag = document.getElementsByTagName('div')[2];
  22.         console.log(element_tag);
  25.         element_id.innerHTML = '<a href="#">跳转链接</a>';
  26.         //innerTest不识别链接
  27.         element_class.innerText = '<a href="#">跳转链接</a>';
  30.         element_tag.style.color = 'red';
  31.         element_tag.style.fontsize = '30px';
  34.         //DOM属性绑定事件
  35.         var button_element = document.getElementsByTagName('button')[0];
  36.         console.log(button_element);
  37.         
  38.         // button_element.onclick = function() {
  39.         //     alert('DOM 属性绑定事件');
  40.         // }
  42.         button_element.addEventListener('click',function () {
  43.             alert('点击就触发事件！');
  44.         });
  45.     </script>
  46. </body>
  47. </html>
复制代码
预览的页面：

6.1 练习-表格的增编削查

DOM常用方法：
1. 选择元素
getElementById(id)：根据元素的 ID 选择单个元素。
     const element = document.getElementById('myElement');
  getElementsByClassName(className)：根据类名选择一组元素（返回一个 HTMLCollection）。
     const elements = document.getElementsByClassName('myClass');
  getElementsByTagName(tagName)：根据标签名选择一组元素（返回一个 HTMLCollection）。
     const elements = document.getElementsByTagName('div');
  querySelector(selector)：根据 CSS 选择器选择单个元素。
   const element = document.querySelector('.myClass');
  querySelectorAll(selector)：根据 CSS 选择器选择一组元素（返回一个 NodeList）。
   const elements = document.querySelectorAll('div.myClass');
  2. 创建和插入元素
createElement(tagName)：创建一个新的元素。
   const newDiv = document.createElement('div');
  appendChild(node)：将节点添加到指定父节点的末尾。
     const parent = document.getElementById('parent');
  parent.appendChild(newDiv);
  insertBefore(newNode, referenceNode)：在指定的子节点前插入一个新节点。
     const referenceNode = document.getElementById('reference');
  parent.insertBefore(newDiv, referenceNode);
  3. 修改元素
textContent：设置或获取元素的文本内容。
     element.textContent = 'Hello, World!';
  innerHTML：设置或获取元素的 HTML 内容。
     element.innerHTML = '随便写写什么';
  setAttribute(name, value)：设置指定属性的值。
     element.setAttribute('class', 'newClass');
  getAttribute(name)：获取指定属性的值。
     const className = element.getAttribute('class');
  4. 删除元素
removeChild(node)：从 DOM 中删除指定的子节点。
     parent.removeChild(element);
  remove()：从 DOM 中删除当前元素。
     element.remove();
  5. 事件处理惩罚
addEventListener(event, function)：为指定元素添加事件监听器。
     element.addEventListener('click', function() {
      alert('Element clicked!');
  });
  removeEventListener(event, function)：移除指定元素的事件监听器。
     element.removeEventListener('click', myFunction);
  6. 样式操作
style：直接操作元素的 CSS 样式。
     element.style.color = 'red';
  classList：用于添加、删除和切换 CSS 类。
     element.classList.add('active');
  element.classList.remove('active');
  element.classList.toggle('active');
  外部摆设的js
  1. //新增数据类型
  2. function addRow() {
  3.     var table = document.getElementById('table');
  4.     //获取插入的位置
  5.     var length = table.rows.length;
  6.    
  7.     // //插入行节点
  8.     var newRow = table.insertRow(length);
  9.     console.log(newRow);
  11.     //插入行节点对象
  12.     var nameCol = newRow.insertCell(0);
  13.     var phoneCol = newRow.insertCell(1);
  14.     var addressCol = newRow.insertCell(2);
  15.     var actionCol = newRow.insertCell(3);
  17.     //修改节点文本内容
  18.     nameCol.innerHTML = '未命名';
  19.     phoneCol.innerHTML = '无联系方式';
  20.     addressCol.innerHTML = '无住址';
  21.     actionCol.innerHTML = '<button  onclick="editRow(this)">编辑</button> <button onclick="deleteRow(this)">删除</button>';
  22. }
  24. //删除数据函数
  25. function deleteRow(button) {
  26.     var row = button.parentNode.parentNode;
  27.     console.log(row);
  28.     row.parentNode.removeChild(row);
  29. }
  31. //编辑数据函数
  32. function editRow(button) {
  33.     var row = button.parentNode.parentNode;
  34.     var name = row.cells[0];
  35.     var phone = row.cells[1];
  36.     var address = row.cells[2];
  38.     var inputName = prompt("请输入名字：");
  39.     var inputPhone = prompt("请输入联系方式：");
  40.     var inputAddress = prompt("请输入住址：");
  41.    
  42.     name.innerHTML = inputName;
  43.     phone.innerHTML = inputPhone;
  44.     address.innerHTML = inputAddress;
  45. }
复制代码
.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>CRUD</title>
  7. </head>
  8. <style>
  9.     table{
  10.         width: 100%;
  11.         /* 边框合并 */
  12.         border-collapse: collapse;
  13.         margin-top: 20px;
  14.     }
  16.     th,td{
  17.         border:1px solid #ddd;
  18.         text-align: center;
  19.         padding: 10px;
  20.     }
  21.     th{
  22.         background-color: #ddd;
  23.     }
  25.     button{
  26.         margin-left: 5px;
  27.     }
  28. </style>
  29. <body>
  30.     <h1 style="text-align: center;">表格的CRUD</h1>
  31.     <button onclick="addRow()">添加数据</button>
  32.     <table id="table">
  33.         <tr>
  34.             <th>姓名</th>
  35.             <th>联系方式</th>
  36.             <th>住址</th>
  37.             <th>操作</th>
  38.         </tr>
  40.         <tr>
  41.             <td>猪八戒</td>
  42.             <td>13989890000</td>
  43.             <td>高老庄</td>
  44.             <td><button onclick="editRow(this)">编辑</button><button onclick="deleteRow(this)">删除</button></td>
  45.                
  46.         </tr>
  47.     </table>
  48.     <script src="./js/tableTest.js"></script>
  49. </body>
  50. </html>
复制代码
预览的页面：

 新增和编辑

 删除：

7.移动端适配及 rem




  • width=device-width`:将视口的宽度议设置为装备的宽度。这确保网页内容不会被丝，而是按照装备的实际宽度举行布局，
  • initial-scale=1.0:设置初始的缩放级别为 1.0。这也有助于确保网页在加载时，以原始大小显示，而不是被缩小或放大;
  • minimum-scale=1.0:最小缩放比例为1
  • maximum-scale=1.0`:最大缩放比例为1
  • user-scalable=no不允许用户缩放
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>rem和适配</title>
  7. </head>
  8. <style>
  9.     /* html{
  10.         font-size: 20px;
  11.     } */
  12.     .box-px{
  13.         width: 300px;
  14.         height: 100px;
  15.         background-color: aqua;
  16.         margin-bottom: 100px;
  17.     }
  19.     .box-rem{
  20.         width: 5rem;
  21.         height: 3rem;
  22.         background-color: blueviolet;
  23.     }
  24. </style>
  25. <body>
  26.     <div class="box-px">固定布局</div>
  27.     <div class="box-rem">自适应布局</div>
  29.     <script>
  30.         function testFontSize() {
  31.             document.documentElement.style.fontSize = screen.width / 10 + 'px';
  32.         }
  34.         testFontSize();
  36.         window.onresize = testFontSize;
  37.     </script>
  38. </body>
  39. </html>
复制代码
预览的页面：

8.Flex 弹性盒子与容器属性

flex-direction
属性值描述主轴方向row项目从左往右分列程度方向row-reverse项目从右往左分列程度方向column项目从上往下分列垂直方向column-reverse项目从下往上分列垂直方向 flex-wrap
属性值描述换行方式nowrap默认值，不换行，所有项目分列在一条轴线上不换行wrap当一条轴线排不下时，项目换行从上到下换行（主轴为横向）<br>从左到右换列（主轴为纵向）wrap-reverse当一条轴线排不下时，项目反向换行从下到上换行（主轴为横向）<br>从右到左换列（主轴为纵向） justify-content
属性值描述flex-start默认值，与主轴的起点对齐flex-end与主轴的止境对齐center与主轴的中点对齐space-between两端对齐，项目之间的隔断相称space-around每个项目两侧的隔断相称，项目之间的隔断比项目与边框的隔断大一倍 align-items
属性值描述flex-start交叉轴的起点对齐flex-end交叉轴的止境对齐center交叉轴的中点对齐baseline项目的第一行笔墨的基线对齐stretch如果项目未设置高度或设为 auto，项目将占满整个容器的高度  align-content
属性值描述flex-start与交叉轴的起点对齐flex-end与交叉轴的止境对齐center与交叉轴的中点对齐space-between与交叉轴两端对齐，轴线之间的隔断均匀分布space-around每根轴线两侧的隔断相称，轴线之间的隔断比轴线与边框的隔断大一倍stretch主轴线占满整个交叉轴
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Flex和容器属性</title>
  7. </head>
  8. <style>
  9.     html{
  10.         font-size: 10px;
  11.     }
  13.     .container{
  14.         display: flex;
  15.         height: 40rem;
  16.         background-color: aqua;
  17.         /* 属性测试 */
  18.         /* flex-direction
  19.            row            左->右
  20.            row-reverse    右->左
  21.            column         上->下
  22.            column-reverse 下->上
  23.         */
  24.         /* flex-direction:column; */
  26.         /* flex-wrap
  27.            nowrap     不换行or列
  28.            wrap       横向 上->下换行 纵向 下->上
  29.            wrap-reverse   相反情况
  30.         */
  31.         /* flex-wrap: wrap-reverse; */
  33.         /* justify-content
  34.            flex-start
  35.            flex-end
  36.            center
  37.            space-between
  38.            space-around
  39.          */
  40.          /* justify-content: space-around; */
  42.         /* align-items
  43.            flex-start
  44.            flex-end
  45.            center
  46.            baseline
  47.            stretch
  48.          */
  49.          /* align-items:baseline; */
  51.         /* align-content
  52.            flex-start
  53.            flex-end
  54.            center
  55.            space-between
  56.            space-around
  57.            stretch
  58.         */
  59.     }
  61.     .item{
  62.         width: 100px;
  63.         font-size: 6rem;
  64.     }
  65. </style>
  66. <body>
  67.     <div class="container">
  68.         <div class="item" style="background-color: blue;">1</div>
  69.         <div class="item" style="background-color: brown;">2</div>
  70.         <div class="item" style="background-color: green;">3</div>
  71.         <div class="item" style="background-color: blueviolet;">4</div>
  72.         <div class="item" style="background-color: yellow;">5</div>
  73.         <div class="item" style="background-color: red;">6</div>
  74.     </div>
  75. </body>
  76. </html>
复制代码
预览的页面：


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

农民

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

存储 挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表