0
0

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

前言：

前端三件套，会用就行

毕竟在后面学习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文档的

  1. <head>

部分，通过

  1. <style>

标签定义。

2. 内联样式

定义：内联样式是将CSS规则直接添加到HTML元素的

  1. style

属性中。

3. 外部样式

定义：外部样式是将CSS规则保存在独立的

  1. .css

文件中，然后在HTML文档中通过

  1. <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.     }
  32. </style>
  33. <body>
  34.     <div class="demo">这是一个盒子模型</div>
  35.     <div class="broder-demo">这是一个盒子模型的边框示例</div>
  36. </body>
  37. </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.     }
  29.     .box1{
  30.         height: 300px;
  31.         background-color: yellow;
  32.         margin-bottom: 100px;
  33.     }
  35.     .box-absolute{
  36.         width: 100px;
  37.         height: 100px;
  38.         background-color: pink;
  39.         position:absolute;
  40.         left:120px;
  41.     }
  43.     .box-fixed{
  44.         width: 100px;
  45.         height: 100px;
  46.         background-color: red;
  47.         position: fixed;
  48.         right: 0;
  49.         top: 300px;
  50.     }
  51. </style>
  52. <body>
  53.     <h1>相对定位</h1>
  54.     <div class="box">
  55.         <div class="box-normal"></div>
  56.         <div class="box-relative"></div>
  57.         <div class="box-normal"></div>
  58.     </div>
  60.     <h1>绝对定位</h1> 
  61.     <div class="box1">
  62.         <div class="box-normal"></div>
  63.         <div class="box-absolute"></div>
  64.         <div class="box-normal"></div>
  65.     </div>
  67.     <h1>固定定位</h1>
  68.     <div class="box-fixed"></div>
  69. </body>
  70. </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.         }
  47.         console.log('for循环');
  48.         //for循环
  49.         for (let i = 0; i <= 10; i++) {
  50.             console.log(i);
  51.         }
  52.         
  54.         console.log('while循环');
  55.         //while循环
  56.         let count = 0;
  57.         while(count <= 10){
  58.             console.log(count);
  59.             count++;
  60.         }
  62.         console.log('do-while循环');
  63.         //do-while循环
  64.         let i = 0;
  65.         do {
  66.              console.log(i);
  67.              i++;
  68.         } while (i < 5);
  69.         
  70.         
  71.         console.log('嵌套');
  72.         //嵌套
  73.         for (let i = 0; i <= 10; i++) {
  74.             if(i==2){
  75.                 continue;
  76.             }
  77.             if (i==6) {
  78.                 break;
  79.             }
  80.             console.log(i);
  81.         }
  82.         
  83.     </script>
  84. </body>
  85. </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);
  24.         element_id.innerHTML = '<a href="#">跳转链接</a>';
  25.         //innerTest不识别链接
  26.         element_class.innerText = '<a href="#">跳转链接</a>';
  28.         element_tag.style.color = 'red';
  29.         element_tag.style.fontsize = '30px';
  31.         //DOM属性绑定事件
  32.         var button_element = document.getElementsByTagName('button')[0];
  33.         console.log(button_element);
  34.         
  35.         // button_element.onclick = function() {
  36.         //     alert('DOM 属性绑定事件');
  37.         // }
  39.         button_element.addEventListener('click',function () {
  40.             alert('点击就触发事件！');
  41.         });
  42.     </script>
  43. </body>
  44. </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');

  1. 创建和插入元素

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);

  1. 修改元素

textContent：设置或获取元素的文本内容。

element.textContent = 'Hello, World!';

innerHTML：设置或获取元素的 HTML 内容。

element.innerHTML = '随便写写什么';

setAttribute(name, value)：设置指定属性的值。

element.setAttribute('class', 'newClass');

getAttribute(name)：获取指定属性的值。

const className = element.getAttribute('class');

  1. 删除元素

removeChild(node)：从 DOM 中删除指定的子节点。

parent.removeChild(element);

remove()：从 DOM 中删除当前元素。

element.remove();

  1. 事件处理

addEventListener(event, function)：为指定元素添加事件监听器。

element.addEventListener('click', function() {
alert('Element clicked!');
});

removeEventListener(event, function)：移除指定元素的事件监听器。

element.removeEventListener('click', myFunction);

  1. 样式操作

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
属性值描述主轴方向**

  1. row

项目从左往右排列水平方向****

  1. row-reverse

项目从右往左排列水平方向****

  1. column

项目从上往下排列垂直方向****

  1. column-reverse

项目从下往上排列垂直方向**
flex-wrap
属性值描述换行方式**

  1. nowrap

默认值，不换行，所有项目排列在一条轴线上不换行****

  1. wrap

当一条轴线排不下时，项目换行从上到下换行（主轴为横向）
从左到右换列（主轴为纵向）****

  1. wrap-reverse

当一条轴线排不下时，项目反向换行从下到上换行（主轴为横向）
从右到左换列（主轴为纵向）**
justify-content
属性值**描述

  1. flex-start

默认值，与主轴的起点对齐

  1. flex-end

与主轴的终点对齐

  1. center

与主轴的中点对齐

  1. space-between

两端对齐，项目之间的间隔相等

  1. space-around

每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍
align-items
属性值描述****

  1. flex-start

交叉轴的起点对齐

  1. flex-end

交叉轴的终点对齐

  1. center

交叉轴的中点对齐

  1. baseline

项目的第一行文字的基线对齐

  1. stretch

如果项目未设置高度或设为 auto，项目将占满整个容器的高度
** align-content
属性值**描述

  1. flex-start

与交叉轴的起点对齐

  1. flex-end

与交叉轴的终点对齐

  1. center

与交叉轴的中点对齐

  1. space-between

与交叉轴两端对齐，轴线之间的间隔平均分布

  1. space-around

每根轴线两侧的间隔相等，轴线之间的间隔比轴线与边框的间隔大一倍

  1. 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>

预览的页面：

标签： 前端 html css
本文转载自: https://blog.csdn.net/m0_72047169/article/details/143442226
版权归原作者 编程的幸 所有， 如有侵权，请联系我们删除。
登录后发布评论

“前端三件套(HTML + CSS + JS)”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？