web前端开发

m0_70323676

已于 2024-04-22 11:04:42 修改

阅读量1k

点赞数 30

文章标签：前端笔记

于 2023-12-05 12:00:20 首次发布

本文链接：https://blog.csdn.net/m0_70323676/article/details/134780089

版权

一、HTML

1.HTML简介：

HTML（HyperText Markup Language，超文本标记语言）是一种用于创建网页的标准标记语言。使用一系列标签来描述网页的结构、内容和样式。以<!DOCTYPE html>声明开始，然后是<html>标签，其中包含整个页面的内容，以</html>结尾。

2.页面总体架构：

<!DOCTYPE html>：声明文档类型为HTML5。

<html>：表示整个HTML文档的开始和结束。

<head>：包含文档的元数据，如字符集、标题等。

<title>:定义文档的标题显示在浏览器的标题栏或标签页。

<body>：包含网页的可见内容，如文本、图片、链接等。

3.标题标签：

4.链接标签:

<a></a>标签是HTML中用于创建超链接的标签。它允许你将文本或图像链接到其他网页、文件或其他资源上。例如：创建一个指向Google主页的超链接：

<a href="https://www.google.com">点击访问Google</a>

a标签的基本属性：

target：指定链接在何处打开（例如新窗口或当前窗口）。

download：指定下载链接的文件名或路径。

rel：定义与超链接相关的关系类型，例如 "nofollow" 表示不跟踪链接的来源等。

5.插入图片：

<img> 标签是HTML中用于插入图片的标签。它允许你将图像文件入到网页中，并可以通过指定属性来控制图像的显示和行为。

使用 <img> 标签的基本语法如下：

比较复制插入新建

其中，src 属性指定了图像文件的路径或URL，可以是相对路径或绝对路径。alt 属性提供了当图像无法加载时显示的替代文本，有助于提高网站的可访问性。

插入图片实例

除了基本的图像插入功能外，<img> 标签还支持一些其他的属性和特性，如：

width 和 height：指定图像的宽度和高度（以像素为单位）。

alt：提供替代文本，当图像无法加载时显示。

title：提供鼠标悬停时的提示信息。

border：设置图像边框的宽度和样式。

align：指定图像在页面中的对齐方式（例如左对齐、居中等）。

6.列表标签

<ul> 和 <ol> 标签是HTML中用于创建无序列表和有序列表的标签。

使用 <ul> 标签创建无序列表的基本语法如下：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

其中，<li> 标签表示列表项，可以包含文本或其他元素。

使用 <ol> 标签创建有序列表的基本语法如下：

<ol>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ol>

与无序列表类似，<ol> 标签中的 <li> 标签也表示列表项。但是，有序列表中的列表项会按照数字或字母的顺序进行编号。

li 和 dl 是HTML中常用的标签，用于创建列表。

li（List Item）：表示列表项，通常与 ul（Unordered List）或 ol（Ordered List）一起使用，以创建无序或有序的列表。
dl（Description List）：表示描述列表，通常与 dt（Description Term）和 dd（Description Details）一起使用，以创建描述性列表。

以下是一个简单的示例代码，演示如何使用这些标签来创建一个无序列表：

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
</ul>

以下是一个示例代码，演示如何使用描述列表来创建一个包含术语和描述的列表：

<dl>
  <dt>术语1</dt>
  <dd>描述1</dd>
  <dt>术语2</dt>
  <dd>描述2</dd>
</dl>

7.强调标签：em, strong b

在HTML中，可以使用<strong>、<b>和<em>标签来强调文本。它们都表示加粗或斜体文本，但它们的语义略有不同。

<strong>：用于表示强调的文本，通常显示为粗体。
<b>：也是用于表示强调的文本，通常显示为粗体，但在某些浏览器中可能不支持。
<em>：用于表示斜体文本。

以下是使用这些标签的示例代码：

<p><strong>强调文本</strong></p>
<p><b>强调文本</b></p>
<p><em>斜体文本</em></p>

请注意，虽然这些标签可以用于强调文本，但最好只使用其中一种标签（<strong>或<em>），以避免与其他内容混淆。

8.注释标签

9.表格

在HTML中，可以使用<table>标签来创建表格。以下是一个简单的表格示例：

<table>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
    <th>表头3</th>
  </tr>
  <tr>
    <td>单元格1</td>
    <td>单元格2</td>
    <td>单元格3</td>
  </tr>
  <tr>
    <td>单元格4</td>
    <td>单元格5</td>
    <td>单元格6</td>
  </tr>
</table>

在这个示例中，<table>标签用于创建一个表格。<tr>标签表示表格的行，<th>标签表示表头单元格，<td>标签表示普通单元格。

border:用于指定单元格的边框粗细用法为<table border ="1">......</table>。

cellspacing:用于合并单元格边框的间隔。

rowspan:用于指定一个单元格跨越的行数。用法为<td rowspan="2"></td>。

colspan:用于指定单元格跨越的列数。用法为<th colspan="2"></th>。

footer:是表格的底部可以用来加入数据的总计数。

10.表单

表单（form）是HTML中用于收集用户输入的一种元素。它通常包含一组输入字段，如文本框、单选按钮、复选框等，以及一个提交按钮。当用户填写完表单并点击提交按钮时，表单数据会被发送到服务器进行处理。

表单的创建和使用方法如下：

使用<form>标签创建一个表单。
在<form>标签内部，可以使用各种输入字段，如<input>、<textarea>、<select>等。
为表单添加一个提交按钮，使用<input>标签，并设置type="submit"属性。
使用CSS样式来美化表单。
使用JavaScript或后端语言处理表单数据。

以下是一个简单的表单示例：

<!DOCTYPE html>
<html>
<head>
<style>
  form {
    width: 300px;
    margin: 0 auto;
  }
  input, select, textarea {
    display: block;
    margin-bottom: 10px;
  }
</style>
</head>
<body>

<form action="/submit" method="post">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" required>
  
  <label for="message">留言：</label>
  <textarea id="message" name="message" rows="4" cols="50"></textarea>
  
  <input type="submit" value="提交">
</form>

</body>
</html>

表单简单示例图片

11.HTML的分类

1.行内元素:

行内元素（Inline Elements）是HTML中的一种元素类型，它们只能包含文本内容，不能包含其他元素。这些元素的宽度由其内容决定，而不是根据父元素的宽度分配。以下是一些常见的行内元素：

文字相关标签：如<b>（粗体）、<i>（斜体）、<u>（下划线）、<small>（小号字体）、<big>（大号字体）等。
链接标签：如<a>、<abbr>、<acronym>等。
强调标签：如<em>、<strong>、<cite>、<q>等。
标记标签：如<code>、<var>、<samp>、<kbd>等。
符号标签：如<、>、&、"等。
CSS样式标签：如<span>、<font>等。

需要注意的是，并非所有的HTML标签都是行内元素，有些标签可以包含子元素，这时它们就变为块级元素了。

2.块及元素：

块级元素（Block Elements）是HTML中的一种元素类型，它们可以包含其他元素，并且独占一行。这些元素通常有固定的宽度和高度，不能自动调整以适应父元素的宽度。以下是一些常见的块级元素：

容器标签：如<div>、<header>、<footer>、<section>等。
列表标签：如<ul>、<ol>、<li>等。
表格标签：如<table>、<tr>、<td>、<th>等。
表单标签：如<form>、<fieldset>、<legend>等。
媒体标签：如<audio>、<video>、<canvas>等。
CSS样式标签：如<p>、<h1>到<h6>（标题）、<article>、<aside>等。

需要注意的是，并非所有的HTML标签都是块级元素，有些标签可以包含子元素，这时它们就变为行内元素了。

二、CSS

1.css简述

用于实现html中标签的美观使前端页面看起来更加舒服。

2.css使用方法

（1）在HTML文本中在</head>和<body>之间加入<style></style>在style之间写对应HTML标签选择器或class、id、等标签类的css样式。

内联样式：

<style>
p {color:red;}
</style>

（2）在HTML标签内部直接写属性值。


<table border="1"backgroundcolor="blue">

（3）在文件中新建一个.css文件在css文件中写入对应选择器的样式然后在HTML头部调用

例如：

.hz
{
        border: 1px solid;
        font-size: 15px;
        color: #685858;
        background-color: #90a5b7; 
}
.js
{
        display: block;
        border: 1px solid;
        font-size: 20px;
        color: #333333;
        background-color: #90a5b7; 
}
.layui-table
{
      text-align: center;
      background-color: rgb(0, 221, 255);
}
.my-button 
{
            width: 100px; 
}
.btn
{
          color: #efc6c6;
          border: none;
          float: right;
          font-size: 16px;
}

 <link href="/layui/css/layui.css" rel="stylesheet">

注意：rel="stylesheet"不能省略。

3.css选择器

1.标签选择器

p {color:red;}

2.类选择器

.hz
{
border: 1px solid;
font-size: 15px;
color: #685858;
background-color: #90a5b7;
}

3.颜色的选择

（1）选择调色器进行调色最后转成16进制的字符串复制到对用颜色属性后面。

（2）选择纯色例如，bule,red,green等颜色。

（3） RGB颜色模式：如 rgb(255,0,0)，表示红色。

（4） HSL颜色模式：如 hsl(0,100%,50%)，表示红色。

4.盒子模型

盒子模型（Box Model）是一种用于描述HTML元素在页面上呈现的布局和外观的方法。它由内容区域、填充区域（padding）、边框区域（border）和边距区域（margin）组成。

内容区域：包含元素的实际内容，如文本、图像等。
填充区域（padding）：在内容区域周围添加的空间，用于设置元素的内部间距。
边框区域（border）：围绕元素的内容区域的线条，用于分隔元素与其他元素或页面边界。
边距区域（margin）：在元素外部添加的空间，用于设置元素的外部间距。

通过调整这些属性的值，可以控制元素的布局和样式。例如，可以使用padding属性来调整元素内部的间距，使用border属性来设置边框的宽度和样式，以及使用margin属性来调整元素与其他元素之间的外部间距。

长和高及背景颜色的更改

<div style="width: 20px;height: 20px; background-color: bisque;"></div>

margin的使用方法

 <div style="margin: 0 auto;">
                设置居中的一种方式
            </div>
            <div style="margin: 20px;">
                上右下左都是20的间距
            </div>

padding的使用方法

<div style="padding: 20px;">外边距</div>

border的使用方法

   <div style="border: #804949 dotted 10px;"></div>

5.盒子的布局方式

（1）盒子的布局主要有以下几种方式：

块级元素（Block-level Elements）：如div、h1、p等，它们会独占一行。
内联元素（Inline Elements）：如span、a、img等，它们不会独占一行，而是与其他元素共享一行。
浮动元素（Floating Elements）：使用float属性的元素会被浮动到其父元素的左边或右边。

<div style="float: right;">往右漂浮</div>
<div style="float: left;">往左漂浮</div>

（2）盒子的定位

1.相对定位：相对定位则依据父元素的位置进行参照，来给自己定位。

      <div style="position: relative; left: 20px;top: 20px;">

2.绝对定位：绝对定位的盒子以它的包含框为基准进行偏移，从标准流中脱离，这意味着它对其后的兄弟盒子的定位没有影响，其它的盒子就好像这个盒子不存在一样。

   <div style="position: absolute; top: 50px; left: 50px;">绝对定位 根据网页的宽 高来定</div>

3.固定定位：固定定位是定义一个盒子一个固定位置，这个位置不会因为滑动条的下拉而移动到上面，而是一直在浏览器的页面的一个固定位置。

.box {
  position: fixed;
  top: 10px;
  left: 20px;
  width: 100px;
  height: 100px;
  background-color: red;
}

4.粘性定位：粘性定位的特性是当页面滚动到一定位置时，元素会自动粘贴到相应的位置。

示例代码：

<div style="position: sticky; top: 10px;">这是一个粘性定位的div元素</div>

6.块级元素向行内元素转变

1.块级元素与内联元素的转换可以通过CSS的display属性来实现。例如，将一个块级元素转换为内联元素，可以将display属性设置为inline；将一个内联元素转换为块级元素，可以将display属性设置为block。

<h style="display: inline;">转成行内元素</h>
<h style="display: inline;">转成行内元素</h>

2.行内元素转变为行内元素

<span style="display: inline;">这是一个行内元素</span>

三、js

1.js简介

js是一种脚本语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画，还有很多。

2.js的引入方式

（1）js可以在HTML中可以用<script>在这里写js代码</script>

（2）或者在外部创造.js文件写入函数方法最后在使用<script src="./.../.js"></script>引入外部js链接

3.写js函数的规则

js的语法有，变量声明，数据类型，运算符，控制结构，函数等。

1.变量声明：

var s=value;

let s=value;

const s=value;是固定的数值定义后数值固定不变。

2.数据类型：

数字（Number）：表示整数或小数，例如：1、3.14、-5。
字符串（String）：表示文本信息，例如："hello"、'world'。
布尔值（Boolean）：表示真或假，例如：true、false。
对象（Object）：表示一组无序的键值对，例如：{name: "张三", age: 18}。
数组（Array）：表示一组有序的元素，例如：[1, 2, 3]。
函数（Function）：表示一段可执行的代码块，例如：function() { console.log("Hello"); }。
未定义（Undefined）：表示变量未被赋值，例如：var a; console.log(a); // undefined。
空值（Null）：表示变量没有值，例如：var b = null; console.log(b); // null。

3.运算符：+，-，*，/，++，--，==，+=，-=，！==，！=

控制结构：if(判断条件){}else{}用于判断筛选for(){}while(){}do{}switch{}

4.函数：使用类函数或者用function定义。

5.数组及定义数组：

使用字面量语法：
```
var arr = [1, 2, 3, 4, 5];
```
使用Array构造函数：
```
var arr = new Array(1, 2, 3, 4, 5);
```
使用Array.of()方法：
```
var arr = Array.of(1, 2, 3, 4, 5);
```
使用Array.from()方法：
```
var arr = Array.from([1, 2, 3, 4, 5]);
```
使用扩展运算符（Spread Operator）：
```
var arr = [...new Set([1,2])]
```

6.js对象的创建及调用

假设有个JS类可以使用JS js;来调用

js一共有4中定义方式：

字面量语法：使用花括号{}包围键值对，键和值之间用冒号分隔。
```
var obj = {key1: 'value1', key2: 'value2'};
```
Object构造函数：使用new关键字调用Object构造函数，传入一个包含键值对的对象。
```
var obj = new Object({key1: 'value1', key2: 'value2'});
```
Object.create()方法：创建一个新对象，并将现有对象的原型链指向该新对象。
```
var obj = Object.create({key1: 'value1', key2: 'value2'});
```

使用ES6的类语法：定义一个类，并在类的构造函数中初始化对象的属性。

class MyClass {
  constructor() {
    this.key1 = 'value1';
    this.key2 = 'value2';
  }
}

var obj = new MyClass();

4. Bom操作

用于对浏览器的浏览记录，及cookie的保存及修改。

操作的具体步骤：

创建数据库表
设计前端页面：使用HTML和CSS设计一个前端页面，包括表单输入框、按钮等元素。
编写后端代码：并将数据保存到数据库中。
连接数据库：连接到数据库，以便将数据保存到数据库中。
验证数据：在后端代码中，对前端页面提交的数据进行验证，确保数据的合法性和正确性。
保存数据：将验证通过的数据保存到数据库中的“bom”表中。
查询数据：在后端代码中，编写SQL语句，从数据库中查询“bom”表中的数据，并将数据返回给前端页面进行展示。
显示数据：在前端页面中，使用JavaScript或jQuery等技术，将后端返回的数据动态地显示在页面上。
更新数据：在前端页面中，添加编辑按钮，当用户点击编辑按钮时，弹出一个表单。

删除数据：在前端页面中，添加删除按钮，当用户点击删除按钮时，将对应的信息从数据库中删除。

# 创建数据库表
CREATE TABLE bom (
    id INT PRIMARY KEY AUTO_INCREMENT,
    material_code VARCHAR(255) NOT NULL,
    material_name VARCHAR(255) NOT NULL,
    specification VARCHAR(255),
    quantity INT NOT NULL
);

# 插入数据
INSERT INTO bom (material_code, material_name, specification, quantity)
VALUES ('001', '物料1', '规格A', 10);

# 查询数据
SELECT * FROM bom;

# 更新数据
UPDATE bom SET material_name = '物料2' WHERE id = 1;

# 删除数据
DELETE FROM bom WHERE id = 1;

5.Dom操作：

获取元素：使用document.getElementById()、document.getElementsByClassName()、document.getElementsByTagName()或document.querySelector()等方法获取页面中的元素。
修改元素内容：使用innerHTML属性修改元素的HTML内容，或者使用textContent属性修改元素的文本内容。
修改元素样式：使用element.style.property的方式修改元素的样式，例如修改颜色、字体大小等。
添加事件监听器：使用element.addEventListener()方法为元素添加事件监听器，例如点击事件、鼠标移动事件等。
移除事件监听器：使用element.removeEventListener()方法移除元素上的事件监听器。
创建和删除元素：使用document.createElement()方法创建新的元素，然后使用parentElement.appendChild()或parentElement.insertBefore()方法将新元素添加到页面中。使用element.remove()方法删除元素。