Web前端开发-基础知识

于 2024-09-06 19:40:02 发布
阅读量7.2k 收藏 166
点赞数 65
分类专栏： Web前端开发 文章标签： 前端

1. 概述

        Web 前端开发是构建和优化网站用户界面的过程，主要包括实现用户界面的结构（HTML）、样式（CSS）和交互（JavaScript）功能。前端开发的目标是确保网站在各种设备和浏览器上都能良好地运行，并提供最佳的用户体验。

1.1 Web前端开发概述

Web即Web系统，指以 网站 形式呈现并通过浏览器进行访问的系统，它旨在实现特定的功能或服务。
前端网页上为用户呈现的部分。
开发即代码编写。

1.2 网站与网页 

网站 web site网页 web page
互联网上用于展示特定内容的相关网页的集合。

网站中的一页，一个网站中的网页通过“超链接”的方式被组织在一起。

        主页 homepage：进入网站看到的第一个网页，主页的文件名通常是index。

        网页元素：Logo站标、导航栏、文字超链接、banner广告横幅、表单等。

        网站：是一个包含多个网页文件及相关资源的文件夹。

        网页：是网站中的单个文件，通常以HTML格式存在。

        浏览器：负责解析网页源代码，并将其渲染为可视化的网页内容。

1.3 Web前端开发技术

结构：HTML样式：CSS 行为：JavaScript
从语义的角度，描述页面结构从审美的角度，美化页面从交互的角度，提升用户体验

        前端技术标准：W3C(万维网联盟: the World Wide Web Consortium)

        W3C标准：W3C

        W3C教程：w3school 在线教程

        MDN :  学习 Web 开发 | MDN

2. HTML基础

2.1 HTML概述

        2.1.1 HTML语言

        HTML（HyperText MarkUp Language）:"超文本标记语言"，它是制作网页的标准语言。

        注：HTML不区分大小写，<div>, <DIV> , 和 <DiV>在HTML中都被视为相同的标签。HTML5规范建议使用小写字母，这样可以保持代码一致性并提升可读性。

        2.1.2 HTML标签、元素

        HTML标签或元素是由尖括号包围的标识符，例如<title>, 它们通常成对出现，包括一个开始标签和一个结束标签，用于定义和包含网页中的特定内容或功能。

        2.1.3 HTML标签、属性

        HTML标签可以包含多个属性，属性之间的顺序不影响其功能。每个属性由名称和值组成，名称和值之间用等号分隔，属性之间用空格分隔。即使属性的顺序不同，浏览器仍会按照相应的规则正确解析和呈现这些属性。

2.2 HTML文件结构

        2.2.1 HTML

        .htm 或 .html 文件

        2.2.2 HTML5

2.3 字符集与编码

        字符（Character）：文字、符号

        字符集（Charaset）：字符的集合

        编码：将字符和二进制码对应起来

ASCⅡ数字、英文字母、符号
GB2312简体中文
Unicode所有语言
UTF-8所有语言，占用空间更小

        注：乱码问题

        当源文件保存时的编码，与源文件声明中<meta charset="编码方式">，编码方式不一致时，就会出现乱码问题。

2.4 HTML 常用标签

标题h1~h6
段落p
段内换行br
空格字符&nbsp;
预留格式pre
行内组合span
水平线hr
注释<!-- 注释内容 -->
超链接a
插入图片img
区域div
列表ul ol li
表格table tr td
表单form

        表单是一个用于收集用户信息的区域，通常包含多种输入元素，以便用户填写和提交数据。

常见的表单元素包括：

  • 文本框：用于输入单行文本。
  • 按钮：用于触发提交或其他操作。
  • 单选按钮：允许用户从多个选项中选择一个。
  • 复选框：允许用户选择一个或多个选项。
  • 下拉列表：提供一个可展开的列表，让用户从中选择一个选项。
  • 文本域：用于输入多行文本，例如评论或反馈。

        这些元素共同构成了一个完整的表单，使用户能够方便地输入和提交信息。

2.5 Web语义化

        Web语义化指的是在网页设计和开发中使用具有明确意义的HTML标签，以便浏览器和搜索引擎更好地理解网页内容的结构和含义。这种做法不仅有助于提高网页的可访问性和搜索引擎优化（SEO），还使得代码更加清晰和易于维护。  

常见的Web语义化标签包括：

  1. <header>：定义文档或部分的头部区域，通常包含网站的导航、标题或标识。

  2. <nav>：定义导航链接的区域，通常包含站点的主要导航菜单。

  3. <main>：定义文档的主要内容区域，通常是页面的核心内容部分，与侧边栏、头部和底部区域区分开。

  4. <article>：定义独立的内容块，如文章、博客帖子或新闻报道，通常可以单独分发和重用。

  5. <section>：定义文档中的一个章节或部分，通常用于将内容分成逻辑组。

  6. <aside>：定义与主要内容间接相关的附加信息，如侧边栏、广告或引用。

  7. <footer>：定义文档或部分的底部区域，通常包含版权信息、联系信息或版权声明。

3. CSS

3.1 基本概念

        CSS（Cascading Style Sheets，层叠样式表） 是一种用于描述网页文档外观和格式的样式表语言。它主要用于控制HTML文档的排版、颜色、布局等视觉效果。CSS使得网页设计师和开发者能够将样式与内容分离，从而更好地维护和更新网站。

  • 选择器（Selectors）：用于指定哪些HTML元素应该应用样式。例如，.class, #id, element等。

  • 属性（Properties）：定义具体的样式规则，例如 color, font-size, margin, padding 等。

  • 值（Values）：给属性指定具体的样式值。例如，color: red; 中的 red 就是值。

3.2 基本语法

        CSS的基本语法结构如下：

selector {
  property: value;
}

        例如，要将所有段落的文本颜色设置为蓝色，可以使用以下CSS规则：

p {
  color: blue;
}

3.3 常见属性

字体font-family, font-size, font-weight, font-style
文本color, text-align, text-decoration, line-height
布局margin, padding, border, width, height
背景background-color, background-image, background-size
定位position, top, right, bottom, left
显示和隐藏display, visibility, opacity

3.4 布局模型

  1. 盒模型（Box Model）：定义了每个HTML元素的布局，包括内容区、内边距（padding）、边框（border）和外边距（margin）。

  2. 流式布局（Flow Layout）：默认的布局方式，元素按顺序从上到下、从左到右排列。

  3. 弹性布局（Flexbox）：提供了更强大的布局能力，可以在一个容器中灵活地对齐和分配空间。

  4. 网格布局（Grid Layout）：基于二维网格的布局系统，允许开发者创建复杂的布局结构。

  5. 定位（Positioning）：包括静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。

3.5 引入方式

  1. 内联样式（Inline Styles）：直接在HTML元素中使用style属性添加样式。

    <p style="color: red;">这是红色的文本。</p>

  2. 内部样式表（Internal Stylesheet）：在HTML文档的<head>部分使用<style>标签定义样式。

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

  3. 外部样式表（External Stylesheet）：将CSS样式定义在独立的CSS文件中，并通过<link>标签引入。

    <link rel="stylesheet" href="styles.css">

        CSS使得网页设计更具灵活性和可维护性，通过分离内容与样式，开发者可以更轻松地进行样式调整和设计优化。

4. JavaScript基础

4.1 基本概念

        JavaScript 是一种运行于JavaScript解释器/引擎中的解释型脚本语言，主要用于在网页中实现动态功能和交互。它使得网页不仅仅是静态内容，而是可以响应用户操作和事件。

        运行环境：

                1、独立安装的JS解释器(NodeJS)

                2、嵌入在[浏览器]内核中的JS解释器

        解释型：运行之前是不需要编译的，运行之前不会检查错误，直到碰到错误为止。

        编译型：对源码进行编译，还能检查语法错误。(C/c++)

完整的JS是由三部分组成
1、核心（ECMAScript）
2、文档对象模型（DOM,Document Object Model）让JS有能力与网页进行对话
浏览器对象模型（BOM,Browser Object Model）让JS有能力与浏览器进行对话

4.2 基本语法

        4.2.1 变量声明
  变量名 命名规则
1、不允许使用 JS 的关键字 和 保留关键字
2、由字母、数字、下划线以及$组成
3、不能以数字开头
4、尽量见名知意

5、可以采用“驼峰命名法”

        变量名为合成词时，第一个单词全小写，从第二个单词开始，每个单词首字符变大写（eg： var stuName;）

        如果只有一个单词作为变量名，全小写（eg：var age;）

let name = "Alice";
const age = 25;
  • var：传统的变量声明方式，有函数作用域。
  • let：块级作用域，更现代的变量声明方式。
  • const：用于声明常量，块级作用域，值不可修改。
        4.2.2 数据类型
  • 基本数据类型：Number（数字），String（字符串），Boolean（布尔值），undefined，null，Symbol（ES6 新增），BigInt（用于大整数）
  • 对象类型：Object（对象），Array（数组），Function（函数），Date（日期），RegExp（正则表达式）
let number = 10;           // Number
let name = "Alice";        // String
let isActive = true;       // Boolean
let user = { name: "Alice", age: 25 }; // Object
let numbers = [1, 2, 3, 4]; // Array
        4.2.3 运算符
  • 算术运算符：+, -, *, /, %
  • 比较运算符：==, ===, !=, !==, >, <, >=, <=
  • 逻辑运算符：&&（与），||（或），!（非）
  • 赋值运算符：=, +=, -=, *=, /=
let a = 5;
let b = 10;
let result = a + b; // 15

 

 4.3 控制结构

        4.3.1 条件语句

  if, else if, else

if (age >= 18) {
  console.log("成年人");
} else {
  console.log("未成年人");
}

  switch 

        4.3.2 循环语句
  • for：用于重复执行代码块。
  • while：当条件为真时重复执行代码块。
  • do...while：先执行一次代码块，再判断条件。
for (let i = 0; i < 5; i++) {
  console.log(i); // 输出 0 到 4
}
while (condition) {
  // 当 condition 为 true 时执行的代码
}

condition：一个布尔表达式。如果 condition 为 true，则执行 while 语句块中的代码。如果为 false，则退出循环。

do {
  // 循环体代码
} while (condition);
  • do：关键字，表示开始循环体。
  • condition：布尔表达式。如果 condition 为 true，则继续执行循环体中的代码；如果为 false，则退出循环。

 

4.4 函数

         4.4.1 定义函数
function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet("Alice")); // 输出 "Hello, Alice!"
        4.4.2 箭头函数（ES6）
const greet = (name) => `Hello, ${name}!`;
console.log(greet("Bob")); // 输出 "Hello, Bob!"

 

 4.5 事件处理

        添加事件监听器：

document.getElementById("myButton").addEventListener("click", function() {
  alert("按钮被点击了！");
});

 

4.6 DOM 操作

        DOM（文档对象模型）操作是指通过 JavaScript 对 HTML 文档中的元素进行访问和修改的过程。

        4.6.1 选择元素

  • document.getElementById(id)

    • 根据 ID 选择元素。
    • 示例： 
      const element = document.getElementById('myId');

  • document.getElementsByClassName(className)

    • 根据类名选择元素，返回一个 HTMLCollection。
    • 示例： 
      const elements = document.getElementsByClassName('myClass');

  • document.getElementsByTagName(tagName)

    • 根据标签名选择元素，返回一个 HTMLCollection。
    • 示例： 
      const elements = document.getElementsByTagName('div');

  • document.querySelector(selector)

    • 根据 CSS 选择器选择第一个匹配的元素。
    • 示例： 
      const element = document.querySelector('.myClass');

  • document.querySelectorAll(selector)

    • 根据 CSS 选择器选择所有匹配的元素，返回一个 NodeList。
    • 示例： 
      const elements = document.querySelectorAll('div.myClass');
        4.6.2 修改元素

  • element.innerHTML

    • 获取或设置元素的 HTML 内容。
    • 示例： 
      element.innerHTML = '<p>新内容</p>';

  • element.textContent

    • 获取或设置元素的文本内容。
    • 示例： 
      element.textContent = '新文本内容';

  • element.setAttribute(attributeName, value)

    • 设置元素的属性。
    • 示例： 
      element.setAttribute('class', 'newClass');

  • element.style

    • 修改元素的 CSS 样式。
    • 示例： 
      element.style.color = 'red';
        4.6.3 添加和删除元素

  • document.createElement(tagName)

    • 创建一个新的 HTML 元素。
    • 示例： 
      const newDiv = document.createElement('div');

  • element.appendChild(newChild)

    • 将新的子元素添加到指定元素中。
    • 示例： 
      element.appendChild(newDiv);

  • element.removeChild(child)

    • 从指定元素中删除一个子元素。
    • 示例： 
      element.removeChild(oldChild);

  • element.insertBefore(newNode, referenceNode)

    • 在指定元素的前面插入一个新的子元素。
    • 示例： 
      element.insertBefore(newDiv, referenceElement);
        4.6.4 事件处理

  • element.addEventListener(event, function)

    • 为元素添加事件监听器。
    • 示例： 
      element.addEventListener('click', function() {
    alert('元素被点击了！');
});

  • element.removeEventListener(event, function)

    • 移除事件监听器。
    • 示例： 
      element.removeEventListener('click', handlerFunction);
        4.6.5 类名操作
  • element.classList
    • 访问元素的类名列表，可以方便地添加、删除或切换类名。
    • 示例： 
      element.classList.add('newClass'); // 添加类名
element.classList.remove('oldClass'); // 删除类名
element.classList.toggle('toggleClass'); // 切换类名
         4.6.6 获取和设置位置与尺寸

  • element.getBoundingClientRect()

    • 获取元素的大小和相对于视口的位置。
    • 示例： 
      const rect = element.getBoundingClientRect();
console.log(rect.top, rect.left);

  • element.offsetWidth 和 element.offsetHeight

    • 获取元素的宽度和高度，包括内边距和边框。
    • 示例： 
      const width = element.offsetWidth;
const height = element.offsetHeight;

 

4.7 数组操作

        4.7.1 创建数组

  • 使用数组字面量

    const array = [1, 2, 3, 4, 5];

  • 使用 Array 构造函数

    const array1 = new Array(5); // 创建一个包含 5 个空位的数组
const array2 = new Array(1, 2, 3); // 创建一个包含 1, 2, 3 的数组
        4.7.2 访问和修改元素

  • 访问元素

    const value = array[0]; // 访问第一个元素

  • 修改元素

    array[1] = 10; // 将第二个元素修改为 10
        4.7.3 常用数组方法

  • push()

    • 向数组末尾添加一个或多个元素。
    array.push(6, 7);

  • pop()

    • 从数组末尾删除一个元素，并返回该元素。
    const lastElement = array.pop();

  • shift()

    • 从数组开头删除一个元素，并返回该元素。
    const firstElement = array.shift();

  • unshift()

    • 向数组开头添加一个或多个元素。
    array.unshift(0, -1);

  • splice(start, deleteCount, item1, item2, ...)

    • 从指定位置删除或替换元素，并可以插入新的元素。
    array.splice(2, 1, 10, 11); // 从索引 2 开始删除 1 个元素，插入 10 和 11

  • slice(start, end)

    • 返回数组的一个片段，不修改原数组。
    const subArray = array.slice(1, 4); // 从索引 1 到 3

  • concat(array1, array2, ...)

    • 合并两个或多个数组，返回新数组。
    const newArray = array.concat([6, 7], [8, 9]);

  • join(separator)

    • 将数组元素连接成一个字符串。
    const str = array.join('-'); // '1-2-3-4-5'

  • reverse()

    • 反转数组中的元素顺序。
    array.reverse();

  • sort(compareFunction)

    • 对数组元素进行排序。
    array.sort(); // 默认按字典顺序排序
array.sort((a, b) => a - b); // 按升序排序数字
        4.7.4 数组迭代方法

  • forEach(callback)

    • 对数组的每个元素执行一次回调函数。
    array.forEach(element => console.log(element));

  • map(callback)

    • 返回一个新数组，其中每个元素是回调函数返回值的结果。
    const doubledArray = array.map(element => element * 2);

  • filter(callback)

    • 返回一个新数组，其中包含回调函数返回 true 的所有元素。
    const evenArray = array.filter(element => element % 2 === 0);

  • reduce(callback, initialValue)

    • 从数组的第一个元素开始，依次执行回调函数，将结果汇总为一个单一的值。
    const sum = array.reduce((acc, current) => acc + current, 0);

  • find(callback)

    • 返回数组中第一个使回调函数返回 true 的元素。
    const firstEven = array.find(element => element % 2 === 0);

  • some(callback)

    • 如果数组中至少有一个元素使回调函数返回 true，则返回 true，否则返回 false。
    const hasEven = array.some(element => element % 2 === 0);

  • every(callback)

    • 如果数组中的所有元素都使回调函数返回 true，则返回 true，否则返回 false。
    const allPositive = array.every(element => element > 0);

  • includes(value)

    • 判断数组是否包含指定的值，返回 true 或 false。
    const hasThree = array.includes(3);
         4.7.5  数组转化方法

  • toString()

    • 将数组转换为字符串。
    const str = array.toString();

  • toLocaleString()

    • 将数组转换为本地化字符串。
    const localeStr = array.toLocaleString();

 4.8 对象

        在 JavaScript 中，对象是一种用于存储键值对的集合。对象可以包含各种数据类型的值，包括其他对象。

        4.8.1 创建对象

  • 对象字面量

    const person = {
  name: 'John',
  age: 30,
  greet: function() {
    console.log('Hello!');
  }
};

  • 使用 new Object() 构造函数

    const person = new Object();
person.name = 'John';
person.age = 30;

  • 使用 Object.create()

    const proto = { greet() { console.log('Hello!'); } };
const person = Object.create(proto);
person.name = 'John';
person.age = 30;
        4.8.2 访问和修改对象属性

  • 访问属性

    console.log(person.name); // 'John'
console.log(person['age']); // 30

  • 修改属性

    person.age = 31;
person['name'] = 'Jane';

  • 添加新属性

    person.email = 'john.doe@example.com';

  • 删除属性

    delete person.email;
        4.8.3 对象方法
  • 定义和调用方法 
    const person = {
  name: 'John',
  greet() {
    console.log('Hello, ' + this.name);
  }
};
person.greet(); // 'Hello, John'
        4.8.4 遍历对象属性

  • for...in 循环

    for (const key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(key + ': ' + person[key]);
  }
}

  • Object.keys(obj)

    • 返回对象的可枚举属性名的数组。
    console.log(Object.keys(person)); // ['name', 'age', 'greet']

  • Object.values(obj)

    • 返回对象的可枚举属性值的数组。
    console.log(Object.values(person)); // ['John', 30, [Function: greet]]

  • Object.entries(obj)

    • 返回对象的键值对数组。
    console.log(Object.entries(person)); // [['name', 'John'], ['age', 30], ['greet', [Function: greet]]]
        4.8.5 对象操作

  • Object.assign(target, ...sources)

    • 将一个或多个源对象的属性拷贝到目标对象。
    const target = { a: 1 };
const source = { b: 2 };
Object.assign(target, source);
console.log(target); // { a: 1, b: 2 }

  • Object.freeze(obj)

    • 冻结对象，防止修改其属性。
    const person = { name: 'John' };
Object.freeze(person);
person.name = 'Jane'; // 不会生效

  • Object.seal(obj)

    • 密封对象，防止添加和删除属性，但允许修改现有属性。
    const person = { name: 'John' };
Object.seal(person);
person.name = 'Jane'; // 可以修改现有属性
delete person.name; // 无效

  • Object.getPrototypeOf(obj)

    • 返回对象的原型。
    const proto = { greet() { console.log('Hello!'); } };
const person = Object.create(proto);
console.log(Object.getPrototypeOf(person) === proto); // true

  • Object.setPrototypeOf(obj, prototype)

    • 设置对象的原型。
    const proto = { greet() { console.log('Hello!'); } };
const person = {};
Object.setPrototypeOf(person, proto);
person.greet(); // 'Hello!'
        4.8.6 对象的属性描述符

  • Object.getOwnPropertyDescriptor(obj, prop)

    • 获取对象属性的描述符。
    const person = { name: 'John' };
const descriptor = Object.getOwnPropertyDescriptor(person, 'name');
console.log(descriptor);

  • Object.defineProperty(obj, prop, descriptor)

    • 定义对象的属性或修改其描述符。
    const person = {};
Object.defineProperty(person, 'name', {
  value: 'John',
  writable: false,
  enumerable: true,
  configurable: false
});

 

5. 响应式布局

        响应式布局（Responsive Design）是一种网页设计技术，旨在使网站在各种设备上都能良好地显示，无论是桌面电脑、平板还是手机。响应式布局通过动态调整布局和内容，以适应不同的屏幕尺寸和设备特性。下面是实现响应式布局的一些关键技术和方法：

5.1 流式网格布局

        流式网格布局（Fluid Grid Layout）

  • 使用百分比宽度：代替固定的像素宽度，使用百分比来设置元素的宽度，使其能够根据父容器的宽度进行调整。 
    .container {
  width: 100%;
}
.column {
  width: 50%; /* 使列宽度占据容器的一半 */
}

5.2 媒体查询

        媒体查询（Media Queries）

  • 基本用法：根据不同的屏幕尺寸、分辨率或其他特性应用不同的样式。

    @media (max-width: 600px) {
  .container {
    padding: 10px;
  }
  .column {
    width: 100%; /* 在小屏幕上使列宽度占满整个容器 */
  }
}

  • 多个条件：可以组合多个条件来处理更复杂的布局需求。

    @media (min-width: 600px) and (max-width: 900px) {
  .container {
    padding: 20px;
  }
}

5.3 弹性盒子布局

        弹性盒子布局（Flexbox）

  • 基础使用：使容器中的项目能够灵活地调整和排列。 
    .container {
  display: flex;
  flex-direction: row; /* 行内排列 */
  justify-content: space-between; /* 项目之间均匀分布 */
}
.item {
  flex: 1; /* 每个项目占据相等的空间 */
}

5.4 网格布局

        网格布局（CSS Grid Layout）

  • 基础用法：创建复杂的布局结构，能够更精确地控制行和列。 
    .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 创建3列，每列宽度相等 */
  gap: 10px; /* 设置网格间隙 */
}
.item {
  grid-column: span 1; /* 每个项目占据1列 */
}

5.5 视口单位

         视口单位（Viewport Units）

  • vw 和 vh：使用视口宽度和高度单位来设置元素的尺寸。 
    .container {
  width: 100vw; /* 宽度占据整个视口宽度 */
  height: 100vh; /* 高度占据整个视口高度 */
}

5.6 响应式图片

  • 使用 max-width：确保图片不会超出其容器的宽度。

    img {
  max-width: 100%;
  height: auto; /* 保持图片的宽高比 */
}

  • srcset 和 sizes：为不同分辨率提供不同的图片资源。

    <img src="small.jpg" srcset="small.jpg 600w, medium.jpg 1200w, large.jpg 1800w" sizes="(max-width: 600px) 100vw, 50vw" alt="Responsive Image">

5.7 移动优先设计

        移动优先设计（Mobile First Design）

  • 先设计移动设备版本：先实现适合小屏幕的设计，然后使用媒体查询添加对大屏幕的支持。 
    /* 移动设备样式 */
.container {
  padding: 10px;
}

@media (min-width: 768px) {
  .container {
    padding: 20px;
  }
}

@media (min-width: 1200px) {
  .container {
    padding: 30px;
  }
}

5.8 排版和字体

  • 响应式字体：根据屏幕尺寸调整字体大小。 
    body {
  font-size: 16px;
}

@media (max-width: 600px) {
  body {
    font-size: 14px;
  }
}
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值